2020-08-07 12:23:59 +02:00
// -- 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 ] ;
2020-10-07 12:29:31 +02:00
const configTemplate = require ( "../../views/" + theme + "/config/" + lang + ".js" ) ;
const { getQuestionnairesWithoutAnswer , getRandomQuestionnairesRoute , getStatsAnswers , questionnaireRoutes , searchQuestionnaires , searchQuestionnairesRoute } = require ( "../../config/questionnaires" ) ;
2020-08-07 12:23:59 +02:00
// 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" ;
2020-10-07 12:29:31 +02:00
import { checkSession } from "./tools/users.js" ;
2020-08-07 12:23:59 +02:00
// Dictionnaires :
2020-10-06 16:34:17 +02:00
const { nbQuestionnaireWithoudAnswer , noQuestionnaireWithoudAnswer , statsUser } = require ( "../../lang/" + lang + "/answer" ) ;
const { nextPage , previousPage , serverError } = require ( "../../lang/" + lang + "/general" ) ;
const { searchQuestionnaireResultTitle , searchQuestionnaireWithResult , searchQuestionnaireWithNoResult } = require ( "../../lang/" + lang + "/questionnaire" ) ;
const { needBeConnected , welcomeMessage } = require ( "../../lang/" + lang + "/user" ) ;
2020-08-07 12:23:59 +02:00
// 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
{
2020-10-07 12:29:31 +02:00
// Si l'utilisateur n'est pas connecté, pas la peine d'aller + loin :
const isConnected = await checkSession ( [ "user" ] , "/" + configTemplate . connectionPage , { message : needBeConnected , color : "error" } , window . location ) ;
if ( isConnected )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
const user = getLocaly ( "user" , true ) ;
updateAccountLink ( user . status , configTemplate ) ;
addElement ( divMessage , "h1" , welcomeMessage . replace ( "#NAME" , user . name ) ) ;
divMain . style . display = "block" ;
if ( ! isEmpty ( getLocaly ( "message" ) ) )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
addElement ( divMessage , "p" , getLocaly ( "message" , true ) . message , "" , [ getLocaly ( "message" , true ) . color ] , "" , false ) ;
removeLocaly ( "message" ) ;
}
// Initialisation du formulaire de recherche :
setAttributesToInputs ( { "searchQuestionnaires" : searchQuestionnaires } , formSearch ) ;
// Les stats :
const xhrStats = new XMLHttpRequest ( ) ;
xhrStats . open ( "GET" , apiUrl + questionnaireRoutes + getStatsAnswers + user . id ) ;
xhrStats . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
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 ( statsUser , mapText ) , "" , "" , "" , false ) ;
}
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
}
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 + questionnaireRoutes + getQuestionnairesWithoutAnswer + "" + user . id + "/" + 0 + "/" + configTemplate . nbQuestionnairesUserHomePage + "/html" ) ;
xhrLastQuizs . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
if ( response . nbTot === 0 )
addElement ( quizIntro , "p" , noQuestionnaireWithoudAnswer , "" , [ "success" ] ) ;
else if ( response . html )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
addElement ( quizIntro , "p" , nbQuestionnaireWithoudAnswer . replace ( "#NB" , response . questionnaires . length ) , "" , [ "info" ] ) ;
quizListing . innerHTML = response . html ;
window . location . hash = "" ; // sinon les hash s'enchaînent...
window . location . assign ( "#quizsTitle" ) ;
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
else
addElement ( quizs , "p" , serverError , "" , [ "error" ] ) ; // revoir si intérêt d'afficher quelque chose
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
else
addElement ( quizs , "p" , serverError , "" , [ "error" ] ) ; // idem
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
}
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 = searchQuestionnaireResultTitle ;
quizListing . innerHTML = "" + "" ;
let datas = getDatasFromInputs ( formSearch ) ;
const xhrSearch = new XMLHttpRequest ( ) ;
if ( type == "search" )
xhrSearch . open ( "POST" , apiUrl + questionnaireRoutes + searchQuestionnairesRoute ) ;
else if ( type == "random" )
xhrSearch . open ( "POST" , apiUrl + questionnaireRoutes + getRandomQuestionnairesRoute ) ;
xhrSearch . onreadystatechange = function ( )
2020-08-07 12:23:59 +02:00
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
2020-10-07 12:29:31 +02:00
if ( this . status === 200 && ! isEmpty ( response . nbTot ) )
2020-08-07 12:23:59 +02:00
{
if ( response . nbTot === 0 )
{
2020-10-07 12:29:31 +02:00
addElement ( quizIntro , "p" , searchQuestionnaireWithNoResult , "" , [ "info" ] ) ;
2020-08-07 12:23:59 +02:00
window . location . hash = "" ; // sinon les hash s'enchaînent...
window . location . assign ( "#quizsTitle" ) ;
}
2020-10-07 12:29:31 +02:00
else if ( response . html )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
addElement ( quizIntro , "p" , searchQuestionnaireWithResult . 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 !
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
addElement ( quizPaginationPrevious , "a" , "<< " + previousPage , "previousRes" , [ "button" ] , { href : "#search" } ) ; // revoir, les "<<" pourraient être gérées par le CSS
const previousPageElt = 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 = ( ) =>
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
let newBegin = response . begin - configTemplate . 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
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
previousPageElt . addEventListener ( "click" , function ( e )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
e . preventDefault ( ) ;
goBackRes ( ) ;
} ) ;
/ * s e m b l e p r o v o q u é b u g ? ? ?
window . onpopstate = function ( e )
{
e . preventDefault ( ) ;
goBackRes ( ) ;
} ; * /
}
if ( response . end < ( response . nbTot - 1 ) ) // -1, car tableau commence à 0 !
{
addElement ( quizPaginationNext , "a" , nextPage + " >>" , "nextRes" , [ "button" ] , { href : "#search" } , false ) ;
const nextPageElt = document . getElementById ( "nextRes" ) ;
nextPageElt . 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
} ) ;
2020-08-07 12:23:59 +02:00
}
}
else
2020-10-06 16:34:17 +02:00
addElement ( quizs , "p" , serverError , "" , [ "error" ] ) ;
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
else
addElement ( quizs , "p" , serverError , "" , [ "error" ] ) ;
2020-08-07 12:23:59 +02:00
}
}
2020-10-07 12:29:31 +02:00
xhrSearch . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrSearch . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
if ( datas )
2020-08-07 12:23:59 +02:00
{
2020-10-07 12:29:31 +02:00
datas . output = "html" ;
xhrSearch . send ( JSON . stringify ( datas ) ) ;
}
2020-08-07 12:23:59 +02:00
}
2020-10-07 12:29:31 +02:00
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 ( ) ;
} ) ;
2020-08-07 12:23:59 +02:00
}
}
catch ( e )
{
console . error ( e ) ;
2020-10-06 16:34:17 +02:00
addElement ( divCrash , "p" , serverError , "" , [ "error" ] ) ;
2020-08-07 12:23:59 +02:00
}
}
initialise ( ) ;