2020-08-07 12:23:59 +02:00
// -- GESTION DU FORMULAIRE PERMETTANT DE SAISIR / ÉDITER LES QUIZS ET LEURS DÉPENDANCES (LIENS, IMAGES, TAGS, ETC.)
/// Vérifie que l'utilisateur est bien connecté, a le bon statut et le redirige vers le formulaire d'inscription si ce n'est pas le cas.
/// Si c'est ok, propose un moteur de recherche permettant de chercher un quiz
/// Si un id est passé par l'url on affiche les informations du quiz dans un formulaire permettant de l'éditer/supprimer avec une liste des éléments liés (liens, illustrations, questions...) pouvant eux-mêmes être édités/supprimés.
/// Si le nombre max configuré pour chacun de ses éléments n'est pas atteint, il est aussi proposé d'ajouter un nouvel élément.
/// Sinon pas d'id passé par l'url, on affiche un formulaire vide permettant d'en saisir un nouveau avec ses tags.
// 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 : !! revoir quand le reste sera fini pour vérifier si tout est utile
import { getLocaly , removeLocaly , saveLocaly } from "./tools/clientstorage.js" ;
import { addElement } from "./tools/dom.js" ;
import { helloDev , updateAccountLink } from "./tools/everywhere.js" ;
import { empyAndHideForm , empyForm , getDatasFromInputs , setAttributesToInputs } from "./tools/forms.js" ;
import { dateFormat , isEmpty , replaceAll } from "../../tools/main" ;
import { getUrlParams } from "./tools/url.js" ;
import { checkSession , getConfig } from "./tools/users.js" ;
// Dictionnaires :
const txt = require ( "../../lang/" + lang + "/general" ) ;
const txtUsers = require ( "../../lang/" + lang + "/user" ) ;
const txtQuestionnaire = require ( "../../lang/" + lang + "/questionnaire" ) ;
const txtQuestion = require ( "../../lang/" + lang + "/question" ) ;
const txtLink = require ( "../../lang/" + lang + "/link" ) ;
const txtIllustration = require ( "../../lang/" + lang + "/illustration" ) ;
helloDev ( ) ;
// Principaux éléments du DOM manipulés :
const divMain = document . getElementById ( "main-content" ) ;
const divMessage = document . getElementById ( "message" ) ;
const divResponse = document . getElementById ( "response" ) ;
const formQuestionnaire = document . getElementById ( "questionnaires" ) ;
const inputClassification = document . getElementById ( "classification" ) ;
const helpClassification = document . getElementById ( "helpClassification" ) ;
const helpPublishingAt = document . getElementById ( "helpPublishingAt" ) ;
const deleteCheckBox = document . getElementById ( "deleteOkLabel" ) ;
const btnNewQuestionnaire = document . getElementById ( "wantNewQuestionnaire" ) ;
const btnPreviewQuestionnaire = document . getElementById ( "previewQuestionnaire" ) ;
const divQuestionnaires = document . getElementById ( "questionnairesList" ) ;
const formSearch = document . getElementById ( "search" ) ;
const divSearchResult = document . getElementById ( "searchResult" ) ;
const formLink = document . getElementById ( "links" ) ;
const formIllustration = document . getElementById ( "illustrations" ) ;
const formQuestion = document . getElementById ( "questions" ) ;
const divLinks = document . getElementById ( "linksList" ) ;
const divIllustrations = document . getElementById ( "illustrationsList" ) ;
const divQuestions = document . getElementById ( "questionsList" ) ;
const initialise = async ( ) =>
{
try
{
const config = await getConfig ( ) ;
if ( ! config )
addElement ( divMessage , "p" , txt . serverError , "" , [ "error" ] ) ;
else
{
const isConnected = await checkSession ( [ "manager" , "admin" ] , "/" + configFrontEnd . connectionPage , { message : txtUsers . needBeConnected , color : "error" } , window . location ) ;
if ( isConnected )
{
divMain . style . display = "block" ;
if ( ! isEmpty ( getLocaly ( "message" ) ) )
{
addElement ( divMessage , "p" , getLocaly ( "message" , true ) . message , "" , [ getLocaly ( "message" , true ) . color ] , "" , false ) ;
removeLocaly ( "message" ) ;
}
const user = getLocaly ( "user" , true ) ;
updateAccountLink ( user . status , configFrontEnd ) ;
// Initialisation du formulaire de recherche :
setAttributesToInputs ( config , formSearch ) ;
// Initialise le formulaire permettant de mettre à jour les infos de base du questionnaire :
setAttributesToInputs ( config . Questionnaire , formQuestionnaire ) ;
// Case de suppression cachée par défaut, car inutile pour formulaire de création
deleteCheckBox . style . display = "none" ;
// Fonction vidant et cachant tous les formulaires annexes
const hideAllForms = ( ) =>
{
empyAndHideForm ( formLink ) ;
if ( txtLink . defaultValue != 0 )
document . getElementById ( "anchor" ) . value = txtLink . defaultValue ;
empyAndHideForm ( formIllustration ) ;
empyAndHideForm ( formQuestion ) ;
}
hideAllForms ( ) ;
// Affiche les infos connues concernant les liens
const showLinkInfos = ( Links ) =>
{
addElement ( divLinks , "h4" , txtLink . introTitle ) ; // remplace l'existant dans divLinks
let listLinks = "" ;
for ( let i in Links )
listLinks += "<li><a href='" + Links [ i ] . url + "' target='_blank'>" + Links [ i ] . anchor + "</a> | <a href='#updateLink" + Links [ i ] . id + "' id='#updateLink" + Links [ i ] . id + "' >" + txt . updateBtnTxt + "</a> | <a href='#deleteLink" + Links [ i ] . id + "' id='#deleteLink" + Links [ i ] . id + "' >" + txt . deleteBtnTxt + "</a></li>" ;
if ( listLinks === "" )
listLinks = "<li>" + txtLink . introNoLink + "</li>" ;
addElement ( divLinks , "ul" , listLinks , "" , [ "information" ] , "" , false ) ; // à intégrer dans le DOM pour pouvoir ajouter des addEventListener ensuite
for ( let i in Links )
{
document . getElementById ( "#updateLink" + Links [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormLinkInfos ( Links [ i ] ) ;
window . location . assign ( "#links" ) ;
} ) ;
document . getElementById ( "#deleteLink" + Links [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormLinkInfos ( Links [ i ] ) ;
formLink . elements [ "deleteOk" ] . value = true ;
sendLinkForm ( ) ;
} ) ;
}
if ( config . nbLinksMax > Links . length || config . nbLinksMax === 0 )
{
if ( Links . length < config . nbLinksMin )
addElement ( divLinks , "a" , txt . addBtnTxt , "#newLink" , [ "error" ] , { href : "#newLink" } , false ) ;
else
addElement ( divLinks , "a" , txt . addBtnTxt , "#newLink" , [ "information" ] , { href : "#newLink" } , false ) ;
document . getElementById ( "#newLink" ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
hideAllForms ( ) ;
formLink . style . display = "block" ;
formLink . elements [ "QuestionnaireId" ] . value = formQuestionnaire . elements [ "id" ] . value ;
window . location . assign ( "#links" ) ;
setAttributesToInputs ( config . Link , formLink ) ;
} ) ;
}
}
// Affiche les infos connues concernant les illustrations
const showIllustrationInfos = ( Illustrations ) =>
{
addElement ( divIllustrations , "h4" , txtIllustration . introTitle ) ; // remplace l'existant dans divIllustrations
let listIllustrations = "" ;
for ( let i in Illustrations )
listIllustrations += "<li><a href='" + configFrontEnd . illustrationDir + Illustrations [ i ] . url + "' target='_blank'><img src='" + configFrontEnd . illustrationDir + Illustrations [ i ] . url + "' alt='" + txtIllustration . defaultAlt + "' style='max-height:150px'></a> | <a href='#updateIllustration" + Illustrations [ i ] . id + "' id='#updateIllustration" + Illustrations [ i ] . id + "' >" + txt . updateBtnTxt + "</a> | <a href='#deleteIllustration" + Illustrations [ i ] . id + "' id='#deleteIllustration" + Illustrations [ i ] . id + "' >" + txt . deleteBtnTxt + "</a></li>" ;
if ( listIllustrations === "" )
listIllustrations = "<li>" + txtIllustration . introNoIllustration + "</li>" ;
addElement ( divIllustrations , "ul" , listIllustrations , "" , [ "information" ] , "" , false ) ; // à intégrer dans le DOM pour pouvoir ajouter des addEventListener ensuite
for ( let i in Illustrations )
{
document . getElementById ( "#updateIllustration" + Illustrations [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormIllustrationInfos ( Illustrations [ i ] ) ;
window . location . assign ( "#illustrations" ) ;
} ) ;
document . getElementById ( "#deleteIllustration" + Illustrations [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormIllustrationInfos ( Illustrations [ i ] ) ;
formIllustration . elements [ "deleteOk" ] . value = true ;
sendIllustrationForm ( ) ;
} ) ;
}
if ( config . nbIllustrationsMax > Illustrations . length || config . nbIllustrationsMax === 0 )
{
if ( Illustrations . length < config . nbIllustrationsMin )
addElement ( divIllustrations , "a" , txt . addBtnTxt , "#newIllustration" , [ "error" ] , { href : "#newIllustration" } , false ) ;
else
addElement ( divIllustrations , "a" , txt . addBtnTxt , "#newIllustration" , [ "information" ] , { href : "#newIllustration" } , false ) ;
document . getElementById ( "#newIllustration" ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
hideAllForms ( ) ;
formIllustration . style . display = "block" ;
formIllustration . elements [ "QuestionnaireId" ] . value = formQuestionnaire . elements [ "id" ] . value ;
window . location . assign ( "#illustrations" ) ;
setAttributesToInputs ( config . Illustration , formIllustration ) ;
} ) ;
}
}
// Affiche les infos connues concernant les questions
const showQuestionInfos = ( Questions ) =>
{
addElement ( divQuestions , "h4" , txtQuestion . introTitle ) ; // remplace l'existant dans divQuestions
let listQuestions = "" ;
for ( let i in Questions )
2020-08-13 12:53:29 +02:00
listQuestions += "<li>" + Questions [ i ] . Question . rank + " - " + Questions [ i ] . Question . text + " | <a href='#updateQuestion" + Questions [ i ] . Question . id + "' id='#updateQuestion" + Questions [ i ] . Question . id + "' >" + txt . updateBtnTxt + "</a> | <a href='#deleteQuestion" + Questions [ i ] . Question . id + "' id='#deleteQuestion" + Questions [ i ] . Question . id + "' >" + txt . deleteBtnTxt + "</a></li>" ;
2020-08-07 12:23:59 +02:00
if ( listQuestions === "" )
listQuestions = "<li>" + txtQuestion . introNoQuestion + "</li>" ;
addElement ( divQuestions , "ul" , listQuestions , "" , [ "information" ] , "" , false ) ; // à intégrer dans le DOM pour pouvoir ajouter des addEventListener ensuite
for ( let i in Questions )
{
document . getElementById ( "#updateQuestion" + Questions [ i ] . Question . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormQuestionInfos ( Questions [ i ] ) ;
window . location . assign ( "#links" ) ;
} ) ;
document . getElementById ( "#deleteQuestion" + Questions [ i ] . Question . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormQuestionInfos ( Questions [ i ] ) ;
formQuestion . elements [ "deleteOk" ] . value = true ;
sendQuestionForm ( ) ;
} ) ;
}
if ( config . nbQuestionsMax > Questions . length || config . nbQuestionsMax === 0 )
{
if ( Questions . length < config . nbQuestionsMin )
addElement ( divQuestions , "a" , txt . addBtnTxt , "#newQuestion" , [ "error" ] , { href : "#newQuestion" } , false ) ;
else
addElement ( divQuestions , "a" , txt . addBtnTxt , "#newQuestion" , [ "information" ] , { href : "#newQuestion" } , false ) ;
document . getElementById ( "#newQuestion" ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
hideAllForms ( ) ;
formQuestion . style . display = "block" ;
formQuestion . elements [ "QuestionnaireId" ] . value = formQuestionnaire . elements [ "id" ] . value ;
2020-08-13 12:53:29 +02:00
formQuestion . elements [ "rank" ] . value = ( Questions . length === 0 ) ? config . Question . rank . defaultValue : Questions . length + 1 ;
2020-08-07 12:23:59 +02:00
window . location . assign ( "#questions" ) ;
setAttributesToInputs ( config . Question , formQuestion ) ;
} ) ;
}
}
// Fonction affichant les infos d'un lien dans le formulaire adhoc
const showFormLinkInfos = ( Link ) =>
{
// on commence par cacher et vider tous les formulaires annexes
hideAllForms ( ) ;
// puis on affiche celui dont l'id est passé avec ses données connues
formLink . style . display = "block" ;
for ( let data in Link )
{
if ( formLink . elements [ data ] !== undefined )
formLink . elements [ data ] . value = Link [ data ] ;
}
// + les contraintes de champ :
setAttributesToInputs ( config . Link , formLink ) ;
}
// Fonction affichant les infos d'une illustration dans le formulaire adhoc
const showFormIllustrationInfos = ( Illustration ) =>
{
// on commence par cacher et vider tous les formulaires annexes
hideAllForms ( ) ;
// puis on affiche celui dont l'id est passé avec ses données connues
formIllustration . style . display = "block" ;
for ( let data in Illustration )
{
if ( formIllustration . elements [ data ] !== undefined )
formIllustration . elements [ data ] . value = Illustration [ data ] ;
}
// + les contraintes de champ :
setAttributesToInputs ( config . Illustration , formIllustration ) ;
// sauf le champ file qui n'est plus requis quand un fichier existe déjà !
formIllustration . elements [ "image" ] . removeAttribute ( "required" ) ;
}
// Fonction affichant les infos d'une question + ses réponses possibles dans le formulaire adhoc
const showFormQuestionInfos = ( Question ) =>
{
// on commence par cacher et vider tous les formulaires annexes
hideAllForms ( ) ;
// puis on affiche celui dont l'id est passé avec ses données connues
formQuestion . style . display = "block" ;
for ( let data in Question . Question )
{
if ( formQuestion . elements [ data ] !== undefined )
formQuestion . elements [ data ] . value = Question . Question [ data ] ;
}
for ( let data in Question . Choices )
{
if ( formQuestion . elements [ "choiceText" + data ] !== undefined )
{
formQuestion . elements [ "choiceText" + data ] . value = Question . Choices [ data ] . text ;
if ( Question . Choices [ data ] . isCorrect == true )
formQuestion . elements [ "choiceIsCorrect" + data ] . checked = true ;
formQuestion . elements [ "idChoice" + data ] . value = Question . Choices [ data ] . id ;
}
}
// + les contraintes de champ :
setAttributesToInputs ( config . Question , formQuestion ) ;
}
// Fonction affichant les infos connues concernant un questionnaire et ses dépendances
const showFormQuestionnaireInfos = ( id ) =>
{
const xhrGetInfos = new XMLHttpRequest ( ) ;
xhrGetInfos . open ( "GET" , apiUrl + config . questionnaireRoutes + config . getQuestionnaireRoutes + "/" + id ) ;
xhrGetInfos . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && response . Questionnaire != undefined )
{
formQuestionnaire . reset ( ) ; // pour ne pas garder données déjà affichées si vide dans ce qui est retourné
for ( let data in response . Questionnaire )
{
if ( formQuestionnaire . elements [ data ] !== undefined )
{
if ( data === "publishingAt" && response . Questionnaire [ data ] !== null )
formQuestionnaire . elements [ data ] . value = dateFormat ( response . Questionnaire [ data ] , "form" ) ; // !! revoir car format pouvant poser soucis si navigateur ne gère pas les champs de type "date"
else
formQuestionnaire . elements [ data ] . value = response . Questionnaire [ data ] ;
}
}
deleteCheckBox . style . display = "block" ;
}
if ( response . Tags != undefined )
{
let classification = "" ;
for ( let i in response . Tags )
{
if ( i == 0 )
classification += response . Tags [ i ] . name ;
else
classification += "," + response . Tags [ i ] . name ;
}
formQuestionnaire . elements [ "classification" ] . value = classification ;
}
divLinks . style . display = "block" ;
divQuestions . style . display = "block" ;
divIllustrations . style . display = "block" ;
if ( response . Links != undefined )
showLinkInfos ( response . Links ) ;
if ( response . Questions != undefined )
showQuestionInfos ( response . Questions ) ;
if ( response . Illustrations != undefined )
showIllustrationInfos ( response . Illustrations ) ;
helpPublishingAt . style . display = "none" ; // info utile pour "placer" un nouveau quiz
// à revoir : remplacer lien pour un bouton + reset complet du formulaire, y compris champs hidden :
btnNewQuestionnaire . style . display = "block" ;
btnNewQuestionnaire . setAttribute ( "href" , configFrontEnd . questionnairesManagementPage ) ;
btnPreviewQuestionnaire . style . display = "block" ;
if ( response . Questionnaire [ "isPublished" ] === false )
btnPreviewQuestionnaire . setAttribute ( "href" , apiUrl + config . questionnaireRoutes + config . previewQuestionnaireRoutes + "/" + id + "/" + user . token ) ;
else
btnPreviewQuestionnaire . setAttribute ( "href" , config . siteUrl + config . publishedQuestionnaireRoutes + response . Questionnaire [ "slug" ] + ".html" ) ;
}
}
xhrGetInfos . send ( ) ;
}
// Si un id est passé par l'url, on essaye d'afficher le questionnaire :
let urlDatas = getUrlParams ( ) ;
if ( urlDatas && urlDatas . id !== undefined )
showFormQuestionnaireInfos ( urlDatas . id ) ;
// Traitement du lancement d'une recherche
formSearch . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
let datas = getDatasFromInputs ( formSearch ) ;
const xhrSearch = new XMLHttpRequest ( ) ;
xhrSearch . open ( "POST" , apiUrl + config . questionnaireRoutes + config . searchAdminQuestionnairesRoute ) ;
xhrSearch . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && Array . isArray ( response ) )
{
if ( response . length === 0 )
addElement ( divSearchResult , "p" , txtQuestionnaire . notFound , "" , [ "information" ] ) ;
else
{
let selectHTML = "<option value=''></option>" ;
for ( let i in response )
selectHTML += "<option value='" + response [ i ] . id + "'>" + response [ i ] . title + "</option>" ;
addElement ( divSearchResult , "select" , selectHTML , "selectSearch" ) ;
const searchSelect = document . getElementById ( "selectSearch" ) ;
searchSelect . addEventListener ( "change" , function ( )
{
if ( searchSelect . value !== "" )
showFormQuestionnaireInfos ( searchSelect . value ) ;
} ) ;
}
}
else
addElement ( divSearchResult , "p" , txt . serverError , "" , [ "error" ] ) ;
}
}
xhrSearch . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrSearch . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
if ( datas )
xhrSearch . send ( JSON . stringify ( datas ) ) ;
} ) ;
// Les questionnaires bientôt publiés. Dans une fonction car devant être rechargé.
const showNextQuestionnaires = ( ) =>
{
const xhrNextQuestionnaires = new XMLHttpRequest ( ) ;
xhrNextQuestionnaires . open ( "GET" , apiUrl + config . questionnaireRoutes + config . getListNextQuestionnaires ) ;
xhrNextQuestionnaires . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && Array . isArray ( response . questionnaires ) )
{
2020-08-30 18:23:21 +02:00
let listHTML = "" , dayStr , optionsDayStr = { weekday : 'long' } ;
2020-08-07 12:23:59 +02:00
for ( let i in response . questionnaires )
{
2020-08-30 18:23:21 +02:00
dayStr = new Intl . DateTimeFormat ( lang , optionsDayStr ) . format ( new Date ( response . questionnaires [ i ] . datePublishing ) ) ;
listHTML += "<li>" + dayStr + " " + dateFormat ( response . questionnaires [ i ] . datePublishing , "fr" ) + ": <a href='" + configFrontEnd . questionnairesManagementPage + "?id=" + response . questionnaires [ i ] . id + "' id='questionnaire_" + response . questionnaires [ i ] . id + "'>" + response . questionnaires [ i ] . title + "</a>" ;
2020-08-07 12:23:59 +02:00
if ( response . questionnaires [ i ] . isPublishable === false )
listHTML += " <span class='error'>(" + txtQuestionnaire . needBeCompleted + ")</li>" ;
listHTML += "</li>" ;
}
if ( response . questionnaires . length !== 0 )
addElement ( divQuestionnaires , "h3" , txtQuestionnaire . nextQuestionnairesList . replace ( "#NB" , response . questionnaires . length ) ) ;
addElement ( helpPublishingAt , "em" , txtQuestionnaire . nextDateWithoutQuestionnaire + dateFormat ( new Date ( response . dateNeeded ) , "fr" ) ) ;
addElement ( divQuestionnaires , "ul" , listHTML , "" , "" , "" , false ) ;
for ( let i in response . questionnaires )
{
document . getElementById ( "questionnaire_" + response . questionnaires [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
showFormQuestionnaireInfos ( e . target . id . split ( "_" ) [ 1 ] ) ;
window . location . assign ( "#questionnaires" ) ;
} ) ;
}
}
}
}
xhrNextQuestionnaires . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
xhrNextQuestionnaires . send ( ) ;
}
showNextQuestionnaires ( ) ;
// Aide saisie classement du quiz
inputClassification . addEventListener ( "input" , function ( e )
{
divResponse . innerHTML = "" ;
const tags = inputClassification . value . split ( "," ) ;
tags . reverse ( ) ;
const lastTag = tags [ 0 ] . trim ( ) ;
if ( lastTag . length >= 2 )
{
// à revoir : importer la liste des tags lors de l'initialisation pour éviter les appels multiples
// mais dans ce cas actualiser cette liste après chaque mise à jour.
const xhrSearchTags = new XMLHttpRequest ( ) ;
xhrSearchTags . open ( "POST" , apiUrl + config . questionnaireRoutes + config . tagsSearchRoute ) ;
xhrSearchTags . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && Array . isArray ( response ) )
{
helpClassification . innerHTML = "" ;
for ( let i in response )
{
addElement ( helpClassification , "a" , response [ i ] . name , "#tag" + response [ i ] . id , [ "information" ] , { href : "#tag" + response [ i ] . id } , false ) ;
document . getElementById ( "#tag" + response [ i ] . id ) . addEventListener ( "click" , function ( e )
{
e . preventDefault ( ) ;
tags [ 0 ] = e . target . innerHTML ;
tags . reverse ( ) ;
inputClassification . value = tags . join ( "," ) ;
} ) ;
}
}
}
}
xhrSearchTags . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrSearchTags . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
xhrSearchTags . send ( JSON . stringify ( { search : lastTag } ) ) ;
}
} ) ;
// Traitement de l'envoi du formulaire des infos de base du quiz
formQuestionnaire . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
divResponse . innerHTML = "" ;
let datas = getDatasFromInputs ( formQuestionnaire ) ;
const xhrQuestionnaireDatas = new XMLHttpRequest ( ) ;
if ( ! isEmpty ( datas . id ) && ( datas . deleteOk !== undefined ) )
xhrQuestionnaireDatas . open ( "DELETE" , apiUrl + config . questionnaireRoutes + "/" + datas . id ) ;
else if ( ! isEmpty ( datas . id ) )
xhrQuestionnaireDatas . open ( "PUT" , apiUrl + config . questionnaireRoutes + "/" + datas . id ) ;
else
xhrQuestionnaireDatas . open ( "POST" , apiUrl + config . questionnaireRoutes + "/" ) ;
xhrQuestionnaireDatas . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 201 && response . id != undefined )
{
addElement ( divResponse , "p" , txt . addOkMessage , "" , [ "success" ] ) ;
datas . id = response . id ;
showNextQuestionnaires ( ) ; // peut avoir évolué suivant ce qui s'est passé
}
else if ( this . status === 200 && response . message != undefined )
{
if ( Array . isArray ( response . message ) )
response . message = response . message . join ( "<br>" ) ;
else
response . message = response . message ;
addElement ( divResponse , "p" , response . message , "" , [ "success" ] ) ;
showNextQuestionnaires ( ) ; // peut avoir évolué suivant ce qui s'est passé
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = txt . serverError ;
addElement ( divResponse , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divResponse , "p" , txt . serverError , "" , [ "error" ] ) ;
if ( datas . deleteOk === undefined )
showFormQuestionnaireInfos ( datas . id ) ;
else
formQuestionnaire . reset ( ) ;
}
}
xhrQuestionnaireDatas . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrQuestionnaireDatas . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
if ( datas )
xhrQuestionnaireDatas . send ( JSON . stringify ( datas ) ) ;
} ) ;
// L'envoi des données d'un lien peut être généré par le bouton formulaire ou par le lien supprimer
const sendLinkForm = ( ) =>
{
const divResponseLink = document . getElementById ( "responseLink" ) ;
divResponseLink . innerHTML = "" ;
let datas = getDatasFromInputs ( formLink ) ;
const xhrLinkDatas = new XMLHttpRequest ( ) ;
if ( ! isEmpty ( datas . id ) && ( ! isEmpty ( datas . deleteOk ) ) )
xhrLinkDatas . open ( "DELETE" , apiUrl + config . linksRoute + datas . id ) ;
else if ( ! isEmpty ( datas . id ) )
xhrLinkDatas . open ( "PUT" , apiUrl + config . linksRoute + datas . id ) ;
else
xhrLinkDatas . open ( "POST" , apiUrl + config . linksRoute ) ;
xhrLinkDatas . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( ( this . status === 200 || this . status === 201 ) && response . message != undefined && response . questionnaire != undefined )
{
if ( Array . isArray ( response . message ) )
response . message = response . message . join ( "<br>" ) ;
else
response . message = response . message ;
showLinkInfos ( response . questionnaire . Links ) ; // le serveur me retourne une version actualisée de la liste des liens
addElement ( divLinks , "p" , response . message , "" , [ "success" ] , "" , false ) ;
hideAllForms ( ) ;
window . location . assign ( "#linksList" ) ;
showNextQuestionnaires ( ) ; // peut avoir évolué suivant ce qui s'est passé
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = txt . serverError ;
addElement ( divResponseLink , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divResponseLink , "p" , txt . serverError , "" , [ "error" ] ) ;
}
}
xhrLinkDatas . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrLinkDatas . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
xhrLinkDatas . send ( JSON . stringify ( datas ) ) ;
}
formLink . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
sendLinkForm ( ) ;
} ) ;
// L'envoi des données d'un lien peut être généré par le bouton formulaire ou par le lien supprimer
const sendIllustrationForm = ( ) =>
{
const divResponseIllustration = document . getElementById ( "responseIllustration" ) ;
divResponseIllustration . innerHTML = "" ;
let datas = getDatasFromInputs ( formIllustration ) ;
let datasWithFiles = new FormData ( formIllustration ) ; // il me manque les informations du fichier avec ma fonction getDatasFromInputs
const xhrIllustrationDatas = new XMLHttpRequest ( ) ;
if ( ! isEmpty ( datas . id ) && ( ! isEmpty ( datas . deleteOk ) ) )
xhrIllustrationDatas . open ( "DELETE" , apiUrl + config . illustrationsRoute + datas . id ) ;
else if ( ! isEmpty ( datas . id ) )
xhrIllustrationDatas . open ( "PUT" , apiUrl + config . illustrationsRoute + datas . id ) ;
else
xhrIllustrationDatas . open ( "POST" , apiUrl + config . illustrationsRoute ) ;
xhrIllustrationDatas . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( ( this . status === 200 || this . status === 201 ) && response . message != undefined && response . questionnaire != undefined )
{
if ( Array . isArray ( response . message ) )
response . message = response . message . join ( "<br>" ) ;
else
response . message = response . message ;
showIllustrationInfos ( response . questionnaire . Illustrations ) ; // le serveur me retourne une version actualisée de la liste des liens
addElement ( divIllustrations , "p" , response . message , "" , [ "success" ] , "" , false ) ;
hideAllForms ( ) ;
window . location . assign ( "#illustrationsList" ) ;
showNextQuestionnaires ( ) ; // peut avoir évolué suivant ce qui s'est passé
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = txt . serverError ;
addElement ( divResponseIllustration , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divResponseIllustration , "p" , txt . serverError , "" , [ "error" ] ) ;
}
}
xhrIllustrationDatas . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
xhrIllustrationDatas . send ( datasWithFiles ) ;
}
formIllustration . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
sendIllustrationForm ( ) ;
} ) ;
// L'envoi des données d'une question et de ses réponse qui peut être généré par le bouton submit ou par le lien supprimer
const sendQuestionForm = ( ) =>
{
const divResponseQuestion = document . getElementById ( "responseQuestion" ) ;
divResponseQuestion . innerHTML = "" ;
let datas = getDatasFromInputs ( formQuestion ) ;
const xhrQuestionDatas = new XMLHttpRequest ( ) ;
if ( ! isEmpty ( datas . id ) && ( ! isEmpty ( datas . deleteOk ) ) )
xhrQuestionDatas . open ( "DELETE" , apiUrl + config . questionsRoute + datas . id ) ;
else if ( ! isEmpty ( datas . id ) )
xhrQuestionDatas . open ( "PUT" , apiUrl + config . questionsRoute + datas . id ) ;
else
xhrQuestionDatas . open ( "POST" , apiUrl + config . questionsRoute ) ;
xhrQuestionDatas . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( ( this . status === 200 || this . status === 201 ) && response . message != undefined && response . questionnaire != undefined )
{
if ( Array . isArray ( response . message ) )
response . message = response . message . join ( "<br>" ) ;
else
response . message = response . message ;
showQuestionInfos ( response . questionnaire . Questions ) ; // le serveur me retourne une version actualisée de la liste des questions
addElement ( divQuestions , "p" , response . message , "" , [ "success" ] , "" , false ) ;
hideAllForms ( ) ;
window . location . assign ( "#questionsList" ) ;
showNextQuestionnaires ( ) ; // peut avoir évolué suivant ce qui s'est passé
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = txt . serverError ;
addElement ( divResponseQuestion , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divResponseQuestion , "p" , txt . serverError , "" , [ "error" ] ) ;
}
}
xhrQuestionDatas . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrQuestionDatas . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
xhrQuestionDatas . send ( JSON . stringify ( datas ) ) ;
}
formQuestion . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
sendQuestionForm ( ) ;
} ) ;
}
}
}
catch ( e )
{
console . error ( e ) ;
addElement ( divMessage , "p" , txt . serverError , "" , [ "error" ] ) ;
}
}
initialise ( ) ;