236 lines
13 KiB
JavaScript
236 lines
13 KiB
JavaScript
// -- PAGE D'ACCUEIL DE L'UTILISATEUR
|
|
|
|
/// Vérifier que l'utilisateur est bien connecté, a le bon statut et le rediriger vers le formulaire d'inscription si ce n'est pas le cas.
|
|
/// Si c'est ok, on récupère ses infos et stats + les derniers quizs auxquels il a accès, mais n'a pas répondu.
|
|
/// Un moteur de recherche permet d'obtenir d'autres quizs parmi ceux publiés.
|
|
/// Pour l'affichage des listings de quiz, l'API retourne directement du html.
|
|
/// Un menu permet à l'utilisateur d'accéder à la modification de ses infos, de son abonnement, etc.
|
|
/// Un message venant d'une autre page peut aussi être à afficher lors du premier chargement.
|
|
|
|
// Fichier de configuration côté client :
|
|
import { apiUrl, availableLangs, theme } from "../../config/instance.js";
|
|
const lang=availableLangs[0];
|
|
const configFrontEnd = require("../../views/"+theme+"/config/"+lang+".js");
|
|
|
|
// Fonctions utiles au script :
|
|
import { getLocaly, removeLocaly, saveLocaly } from "./tools/clientstorage.js";
|
|
import { addElement } from "./tools/dom.js";
|
|
import { helloDev, updateAccountLink } from "./tools/everywhere.js";
|
|
import { getDatasFromInputs, setAttributesToInputs } from "./tools/forms.js";
|
|
import { isEmpty, replaceAll } from "../../tools/main";
|
|
import { checkSession, getConfig } from "./tools/users.js";
|
|
|
|
// Dictionnaires :
|
|
const txt = require("../../lang/"+lang+"/general");
|
|
const txtUsers = require("../../lang/"+lang+"/user");
|
|
const txtAnwers = require("../../lang/"+lang+"/answer");
|
|
const txtQuestionnaire = require("../../lang/"+lang+"/questionnaire");
|
|
|
|
// Principaux éléments du DOM manipulés :
|
|
const divMain= document.getElementById("main-content");
|
|
const divCrash= document.getElementById("crash");
|
|
const divMessage = document.getElementById("message");
|
|
const quizTitle = document.getElementById("quizsTitle");
|
|
const quizIntro = document.getElementById("quizsIntro");
|
|
const quizListing = document.getElementById("quizsList");
|
|
const quizPaginationPrevious = document.getElementById("previous");
|
|
const quizPaginationNext = document.getElementById("next");
|
|
const formSearch = document.getElementById("search");
|
|
const inputBegin = document.getElementById("begin");
|
|
const btnRandom = document.getElementById("random");
|
|
|
|
helloDev();
|
|
|
|
const initialise = async () =>
|
|
{
|
|
try
|
|
{
|
|
const config = await getConfig();
|
|
if(!config)
|
|
addElement(divCrash, "p", txt.serverError, "", ["error"]);
|
|
else
|
|
{
|
|
// Si l'utilisateur n'est pas connecté, pas la peine d'aller + loin :
|
|
const isConnected=await checkSession(["user"], "/"+configFrontEnd.connectionPage, { message: txtUsers.needBeConnected, color:"error" }, window.location);
|
|
if(isConnected)
|
|
{
|
|
const user=getLocaly("user", true);
|
|
updateAccountLink(user.status, configFrontEnd);
|
|
addElement(divMessage, "h1", txtUsers.welcomeMessage.replace("#NAME", user.name));
|
|
divMain.style.display="block";
|
|
if(!isEmpty(getLocaly("message")))
|
|
{
|
|
addElement(divMessage, "p", getLocaly("message", true).message, "", [getLocaly("message", true).color], "", false);
|
|
removeLocaly("message");
|
|
}
|
|
// Initialisation du formulaire de recherche :
|
|
setAttributesToInputs(config, formSearch);
|
|
// Les stats :
|
|
const xhrStats = new XMLHttpRequest();
|
|
xhrStats.open("GET", apiUrl+config.questionnaireRoutes+config.getStatsAnswers+user.id);
|
|
xhrStats.onreadystatechange = function()
|
|
{
|
|
if (this.readyState == XMLHttpRequest.DONE)
|
|
{
|
|
let response=JSON.parse(this.responseText);
|
|
if (this.status === 200 && !isEmpty(response.nbAnswers) && response.nbAnswers!==0)// pas de stats si aucune réponse !
|
|
{
|
|
const mapText =
|
|
{
|
|
NBANSWERS : response.nbAnswers,
|
|
NBQUESTIONNAIRES : response.nbQuestionnaires,
|
|
NBTOTQUESTIONNAIRES : response.general.nbPublished,
|
|
AVGDURATION : response.avgDuration,
|
|
AVGCORRECTANSWERS : response.avgCorrectAnswers
|
|
};
|
|
addElement(divMessage, "p", replaceAll(txtAnwers.statsUser, mapText), "", "", "", false);
|
|
}
|
|
}
|
|
}
|
|
xhrStats.setRequestHeader("Authorization", "Bearer "+user.token);
|
|
xhrStats.send();
|
|
|
|
// Par défaut, on affiche des derniers quizs proposés sans réponse :
|
|
const xhrLastQuizs = new XMLHttpRequest();
|
|
xhrLastQuizs.open("GET", apiUrl+config.questionnaireRoutes+config.getQuestionnairesWithoutAnswer+""+user.id+"/"+0+"/"+configFrontEnd.nbQuestionnairesUserHomePage+"/html");
|
|
xhrLastQuizs.onreadystatechange = function()
|
|
{
|
|
if (this.readyState == XMLHttpRequest.DONE)
|
|
{
|
|
let response=JSON.parse(this.responseText);
|
|
if (this.status === 200)
|
|
{
|
|
if(response.nbTot===0)
|
|
addElement(quizIntro, "p", txtAnwers.noQuestionnaireWithoudAnswer, "", ["success"]);
|
|
else if(response.html)
|
|
{
|
|
addElement(quizIntro, "p", txtAnwers.nbQuestionnaireWithoudAnswer.replace("#NB", response.questionnaires.length), "", ["info"]);
|
|
quizListing.innerHTML=response.html;
|
|
window.location.hash="";// sinon les hash s'enchaînent...
|
|
window.location.assign("#quizsTitle");
|
|
}
|
|
else
|
|
addElement(quizs, "p", txt.serverError, "", ["error"]);// revoir si intérêt d'afficher quelque chose
|
|
}
|
|
else
|
|
addElement(quizs, "p", txt.serverError, "", ["error"]); // idem
|
|
}
|
|
}
|
|
xhrLastQuizs.setRequestHeader("Authorization", "Bearer "+user.token);
|
|
xhrLastQuizs.send();
|
|
|
|
// Traitement du lancement d'une recherche
|
|
// La recherche peut être lancée via la bouton submit ou un lien de pagination
|
|
const sendSearch = (type="search") =>
|
|
{
|
|
quizTitle.innerHTML=txtQuestionnaire.searchResultTitle;
|
|
quizListing.innerHTML=""+"";
|
|
let datas=getDatasFromInputs(formSearch);
|
|
const xhrSearch = new XMLHttpRequest();
|
|
if(type=="search")
|
|
xhrSearch.open("POST", config.apiUrl+config.questionnaireRoutes+config.searchQuestionnairesRoute);
|
|
else if(type=="random")
|
|
xhrSearch.open("POST", config.apiUrl+config.questionnaireRoutes+"/getrandom");// revoir : changer par la variable getRandomQuestionnairesRoute du fichier de config
|
|
xhrSearch.onreadystatechange = function()
|
|
{
|
|
if (this.readyState == XMLHttpRequest.DONE)
|
|
{
|
|
let response=JSON.parse(this.responseText);
|
|
if (this.status === 200 && !isEmpty(response.nbTot))
|
|
{
|
|
if(response.nbTot===0)
|
|
{
|
|
addElement(quizIntro, "p", txtQuestionnaire.notFound, "", ["info"]);
|
|
window.location.hash="";// sinon les hash s'enchaînent...
|
|
window.location.assign("#quizsTitle");
|
|
}
|
|
else if(response.html)
|
|
{
|
|
addElement(quizIntro, "p", txtQuestionnaire.searchWithResult.replace("#NB", response.nbTot) , "", ["success"]);
|
|
quizListing.innerHTML=response.html;
|
|
window.location.hash="";
|
|
window.location.assign("#quizsTitle");
|
|
// Pagination nécessaire ?
|
|
// on commence par vider...
|
|
quizPaginationPrevious.innerHTML="";
|
|
quizPaginationNext.innerHTML="";
|
|
if(response.begin != 0)// peut retourner "0" et non 0 !
|
|
{
|
|
addElement(quizPaginationPrevious, "a", "<< "+txt.previousPage , "previousRes", ["button"], { href: "#search" }); // revoir, les "<<" pourraient être gérées par le CSS
|
|
const previousPage=document.getElementById("previousRes");
|
|
// le retour à la page précédente peut se faire en cliquant sur le bouton ou via l'historique du navigateur
|
|
const goBackRes = () =>
|
|
{
|
|
let newBegin=response.begin-configFrontEnd.nbQuestionnairesUserHomePage;
|
|
if(newBegin<0) // ne devrait pas être possible..
|
|
newBegin=0;
|
|
document.getElementById("begin").value=newBegin;
|
|
sendSearch();
|
|
window.location.hash="";
|
|
window.location.assign("#quizsTitle");// pour remonter
|
|
}
|
|
previousPage.addEventListener("click", function(e)
|
|
{
|
|
e.preventDefault();
|
|
goBackRes();
|
|
});
|
|
/* semble provoqué bug ???
|
|
window.onpopstate = function(e)
|
|
{
|
|
e.preventDefault();
|
|
goBackRes();
|
|
};*/
|
|
}
|
|
if(response.end < (response.nbTot-1))// -1, car tableau commence à 0 !
|
|
{
|
|
addElement(quizPaginationNext, "a", txt.nextPage+ " >>", "nextRes", ["button"], { href: "#search" }, false);
|
|
const nextPage=document.getElementById("nextRes");
|
|
nextPage.addEventListener("click", function(e)
|
|
{
|
|
e.preventDefault();
|
|
document.getElementById("begin").value=response.end+1;
|
|
sendSearch();
|
|
window.location.hash="";// sinon les hash s'enchaînent...
|
|
window.location.assign("#quizsTitle"); // pour remonter
|
|
});
|
|
}
|
|
}
|
|
else
|
|
addElement(quizs, "p", txt.serverError, "", ["error"]);
|
|
}
|
|
else
|
|
addElement(quizs, "p", txt.serverError, "", ["error"]);
|
|
}
|
|
}
|
|
xhrSearch.setRequestHeader("Content-Type", "application/json");
|
|
xhrSearch.setRequestHeader("Authorization", "Bearer "+user.token);
|
|
if(datas)
|
|
{
|
|
datas.output="html";
|
|
xhrSearch.send(JSON.stringify(datas));
|
|
}
|
|
}
|
|
|
|
btnRandom.addEventListener("click", function(e)
|
|
{
|
|
e.preventDefault();
|
|
document.getElementById("begin").value=0;
|
|
sendSearch("random");
|
|
});
|
|
|
|
formSearch.addEventListener("submit", function(e)
|
|
{
|
|
e.preventDefault();
|
|
document.getElementById("begin").value=0;
|
|
sendSearch();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
catch(e)
|
|
{
|
|
console.error(e);
|
|
addElement(divCrash, "p", txt.serverError, "", ["error"]);
|
|
}
|
|
}
|
|
initialise(); |