2020-10-12 17:51:35 +02:00
// -- GESTION DU FORMULAIRE PERMETTANT DE SAISIR / ÉDITER LES INFOS DES GROUPES DE QUIZS
/// 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 groupe.
/// Si un id est passé par l'url on affiche les informations du groupe dans un formulaire permettant de l'éditer/supprimer.
/// Si pas d'id passé par l'url, on affiche un formulaire vide permettant d'en saisir un nouveau.
2020-10-13 17:28:48 +02:00
// Fichiers de configuration :
2020-10-20 11:01:52 +02:00
import { apiUrl , availableLangs , siteUrl , theme } from "../../config/instance.js" ;
2020-10-12 17:51:35 +02:00
const lang = availableLangs [ 0 ] ;
const configQuestionnaires = require ( "../../config/questionnaires.js" ) ;
const configTemplate = require ( "../../views/" + theme + "/config/" + lang + ".js" ) ;
2020-10-13 17:28:48 +02:00
// Fonctions :
2020-10-12 17:51:35 +02:00
import { getLocaly , removeLocaly } from "./tools/clientstorage.js" ;
import { addElement } from "./tools/dom.js" ;
import { helloDev , updateAccountLink } from "./tools/everywhere.js" ;
import { empyForm , getDatasFromInputs , setAttributesToInputs } from "./tools/forms.js" ;
import { dateFormat , isEmpty , replaceAll } from "../../tools/main" ;
import { getUrlParams } from "./tools/url.js" ;
import { checkSession } from "./tools/users.js" ;
// Dictionnaires :
const { addOkMessage , serverError } = require ( "../../lang/" + lang + "/general" ) ;
2020-10-26 18:31:39 +01:00
const { groupQuestionnairesList , groupQuestionnairesListWithout , infosGroupForAdmin , searchWithoutResult } = require ( "../../lang/" + lang + "/group" ) ;
2020-10-12 17:51:35 +02:00
const { needBeConnected } = require ( "../../lang/" + lang + "/user" ) ;
// Principaux éléments du DOM manipulés :
2020-10-13 17:28:48 +02:00
const btnNewGroup = document . getElementById ( "wantNewGroup" ) ;
2020-10-20 11:01:52 +02:00
const btnPreviewGroup = document . getElementById ( "previewGroup" ) ;
2020-10-13 17:28:48 +02:00
const deleteCheckBox = document . getElementById ( "deleteOkLabel" ) ;
const divCrash = document . getElementById ( "crash" ) ;
const divGroupIntro = document . getElementById ( "groupIntro" ) ;
2020-10-12 17:51:35 +02:00
const divMain = document . getElementById ( "main-content" ) ;
const divMessage = document . getElementById ( "message" ) ;
2020-10-26 18:31:39 +01:00
const divQuestionnaires = document . getElementById ( "questionnairesList" ) ;
2020-10-12 17:51:35 +02:00
const divResponse = document . getElementById ( "response" ) ;
2020-10-13 17:28:48 +02:00
const divSearchResult = document . getElementById ( "searchResult" ) ;
2020-10-12 17:51:35 +02:00
const formGroup = document . getElementById ( "groups" ) ;
const formSearch = document . getElementById ( "search" ) ;
2020-10-13 17:28:48 +02:00
// Fonction utile pour vider le formulaire, y compris les champs hidden, etc.
const emptyGroupForm = ( ) =>
{
empyForm ( formGroup ) ;
2020-10-20 11:01:52 +02:00
// Case de suppression et bouton visualisation inutiles en mode création :
2020-10-13 17:28:48 +02:00
deleteCheckBox . style . display = "none" ;
2020-10-20 11:01:52 +02:00
btnPreviewGroup . style . display = "none" ;
2020-10-13 17:28:48 +02:00
// Intro à vider !
divGroupIntro . innerHTML = "" ;
}
// Fonction affichant les infos connues concernant un groupe.
const showFormGroupInfos = ( id , token ) =>
{
// on commence par tout vider, des fois que... :
emptyGroupForm ( ) ;
const xhrGetInfos = new XMLHttpRequest ( ) ;
xhrGetInfos . open ( "GET" , apiUrl + configQuestionnaires . groupRoutes + configQuestionnaires . getGroupRoute + id ) ;
xhrGetInfos . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && response . Group != undefined )
{
const mapText =
{
GROUP _ID : response . Group . id ,
DATE _CREA : dateFormat ( response . Group . createdAt ) ,
DATE _UPDATE : dateFormat ( response . Group . updatedAt ) ,
2020-10-20 11:01:52 +02:00
NB _ELEMENTS : ( response . Questionnaires !== undefined ) ? response . Questionnaires . length : 0
2020-10-13 17:28:48 +02:00
} ;
const groupIntro = replaceAll ( infosGroupForAdmin , mapText ) ;
addElement ( divGroupIntro , "p" , groupIntro , "" , [ "info" ] ) ;
for ( let data in response . Group )
{
if ( formGroup . elements [ data ] !== undefined )
{
if ( data === "publishingAt" && response . Group [ data ] !== null )
formGroup . elements [ data ] . value = dateFormat ( response . Group [ data ] , "form" ) ; // !! format pouvant poser soucis si navigateur ne gère pas les champs de type "date"
else
formGroup . elements [ data ] . value = response . Group [ data ] ;
}
}
deleteCheckBox . style . display = "block" ;
2020-10-20 11:01:52 +02:00
btnPreviewGroup . style . display = "block" ;
if ( response . Group [ "isPublishable" ] === false )
btnPreviewGroup . setAttribute ( "href" , apiUrl + configQuestionnaires . groupRoutes + configQuestionnaires . previewGroupRoutes + "/" + id + "/" + token ) ;
else
btnPreviewGroup . setAttribute ( "href" , siteUrl + "/" + configQuestionnaires . dirWebGroups + "/" + response . Group [ "slug" ] + ".html" ) ;
2020-10-26 18:31:39 +01:00
// affichage des éléments du groupe :
if ( response . Questionnaires !== undefined && response . Questionnaires . length !== 0 )
{
let listHTML = "" , optionsDayStr = { weekday : 'long' } ;
for ( let i in response . Questionnaires )
listHTML += "<li><a href='" + configTemplate . questionnairesManagementPage + "?id=" + response . Questionnaires [ i ] . Questionnaire . id + "' id='questionnaire_" + response . Questionnaires [ i ] . Questionnaire . id + "'>" + response . Questionnaires [ i ] . Questionnaire . title + "</a></li>" ;
if ( response . Questionnaires . length !== 0 )
addElement ( divQuestionnaires , "h3" , groupQuestionnairesList . replace ( "#NB" , response . Questionnaires . length ) ) ;
else
addElement ( divQuestionnaires , "h3" , groupQuestionnairesListWithout ) ;
addElement ( divQuestionnaires , "ul" , listHTML , "" , "" , "" , false ) ;
}
}
2020-10-13 17:28:48 +02:00
}
}
xhrGetInfos . setRequestHeader ( "Authorization" , "Bearer " + token ) ;
xhrGetInfos . send ( ) ;
}
2020-10-12 17:51:35 +02:00
const initialise = async ( ) =>
{
try
{
const isConnected = await checkSession ( [ "manager" , "admin" ] , "/" + configTemplate . connectionPage , { message : needBeConnected , color : "error" } , window . location ) ;
if ( isConnected )
{
const user = getLocaly ( "user" , true ) ;
2020-10-13 17:28:48 +02:00
updateAccountLink ( user . status , configTemplate ) ; // lien "Compte" menu header template
2020-10-12 17:51:35 +02:00
divMain . style . display = "block" ;
if ( ! isEmpty ( getLocaly ( "message" ) ) )
{
addElement ( divMessage , "p" , getLocaly ( "message" , true ) . message , "" , [ getLocaly ( "message" , true ) . color ] , "" , false ) ;
removeLocaly ( "message" ) ;
}
2020-10-13 17:28:48 +02:00
// Initialisation des formulaires :
2020-10-12 17:51:35 +02:00
setAttributesToInputs ( configQuestionnaires , formSearch ) ;
setAttributesToInputs ( configQuestionnaires . Group , formGroup ) ;
2020-10-13 17:28:48 +02:00
emptyGroupForm ( ) ;
2020-10-12 17:51:35 +02:00
// Si un id est passé par l'url, on essaye d'afficher les infos :
let urlDatas = getUrlParams ( ) ;
if ( urlDatas && urlDatas . id !== undefined )
2020-10-13 17:28:48 +02:00
showFormGroupInfos ( urlDatas . id , user . token ) ;
2020-10-12 17:51:35 +02:00
// Besoin d'un coup de Kärcher ?
btnNewGroup . addEventListener ( "click" , function ( e )
{
emptyGroupForm ( ) ;
} ) ;
2020-10-13 17:28:48 +02:00
// Envoi du formulaire principal :
2020-10-12 17:51:35 +02:00
formGroup . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
divResponse . innerHTML = "" ;
let datas = getDatasFromInputs ( formGroup ) ;
const xhrGroupDatas = new XMLHttpRequest ( ) ;
2020-10-13 17:28:48 +02:00
if ( ! isEmpty ( datas . id ) && ( datas . deleteOk !== undefined ) )
2020-10-12 17:51:35 +02:00
xhrGroupDatas . open ( "DELETE" , apiUrl + configQuestionnaires . groupRoutes + "/" + datas . id ) ;
else if ( ! isEmpty ( datas . id ) )
2020-10-13 17:28:48 +02:00
xhrGroupDatas . open ( "PUT" , apiUrl + configQuestionnaires . groupRoutes + "/" + datas . id ) ; // mise à jour
2020-10-12 17:51:35 +02:00
else
2020-10-13 17:28:48 +02:00
xhrGroupDatas . open ( "POST" , apiUrl + configQuestionnaires . groupRoutes ) ; // nouvel enregistrement
2020-10-12 17:51:35 +02:00
xhrGroupDatas . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
2020-10-13 17:28:48 +02:00
if ( this . status === 201 && response . id != undefined ) // nouvel enregistrement créé
2020-10-12 17:51:35 +02:00
{
addElement ( divResponse , "p" , addOkMessage , "" , [ "success" ] ) ;
2020-10-13 17:28:48 +02:00
datas . id = response . id ; // utile pour réaffichage + bas
2020-10-12 17:51:35 +02:00
}
2020-10-13 17:28:48 +02:00
else if ( this . status === 200 && response . message != undefined ) // mise à jour ou suppression ok
2020-10-12 17:51:35 +02:00
{
if ( Array . isArray ( response . message ) )
response . message = response . message . join ( "<br>" ) ;
else
response . message = response . message ;
addElement ( divResponse , "p" , response . message , "" , [ "success" ] ) ;
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = serverError ;
addElement ( divResponse , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divResponse , "p" , serverError , "" , [ "error" ] ) ;
if ( isEmpty ( response . errors ) )
{
2020-10-13 17:28:48 +02:00
if ( datas . deleteOk === undefined )
showFormGroupInfos ( datas . id , user . token ) ; // actualisation de l'affichage après traitement serveur
2020-10-12 17:51:35 +02:00
else
emptyGroupForm ( ) ;
}
}
}
xhrGroupDatas . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrGroupDatas . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
if ( datas )
xhrGroupDatas . send ( JSON . stringify ( datas ) ) ;
} ) ;
2020-10-13 17:28:48 +02:00
// Envoi d'une recherche
2020-10-12 17:51:35 +02:00
formSearch . addEventListener ( "submit" , function ( e )
{
e . preventDefault ( ) ;
let datas = getDatasFromInputs ( formSearch ) ;
const xhrSearch = new XMLHttpRequest ( ) ;
xhrSearch . open ( "POST" , apiUrl + configQuestionnaires . groupRoutes + configQuestionnaires . searchGroupsRoute ) ;
xhrSearch . onreadystatechange = function ( )
{
if ( this . readyState == XMLHttpRequest . DONE )
{
let response = JSON . parse ( this . responseText ) ;
if ( this . status === 200 && Array . isArray ( response ) )
{
2020-10-13 17:28:48 +02:00
if ( response . length === 0 )
addElement ( divSearchResult , "p" , searchWithoutResult , "" , [ "info" ] ) ;
2020-10-12 17:51:35 +02:00
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 ( )
{
2020-10-13 17:28:48 +02:00
if ( searchSelect . value !== "" )
showFormGroupInfos ( searchSelect . value , user . token ) ;
2020-10-12 17:51:35 +02:00
} ) ;
}
}
else if ( response . errors )
{
if ( Array . isArray ( response . errors ) )
response . errors = response . errors . join ( "<br>" ) ;
else
response . errors = serverError ;
addElement ( divSearchResult , "p" , response . errors , "" , [ "error" ] ) ;
}
else
addElement ( divSearchResult , "p" , serverError , "" , [ "error" ] ) ;
}
}
xhrSearch . setRequestHeader ( "Content-Type" , "application/json" ) ;
xhrSearch . setRequestHeader ( "Authorization" , "Bearer " + user . token ) ;
if ( datas )
xhrSearch . send ( JSON . stringify ( datas ) ) ;
} ) ;
}
}
catch ( e )
{
addElement ( divCrash , "p" , serverError , "" , [ "error" ] ) ;
console . error ( e ) ;
}
}
2020-10-13 17:28:48 +02:00
initialise ( ) ;
helloDev ( ) ;