"use strict"; /** * Fonction appelée quand on (dé)coche la case globale * (dé)sélectionner toutes les cases de toutes les activités * @param {HTMLInputElement} idCaseGlobale id de la case globale */ function cocherDecocherTout(idCaseGlobale) { // itérer sur la liste des éléments détails : 1 par couple let lesDetails = document.querySelectorAll("details.activite"); for (let i = 0; i < lesDetails.length; ++i) { let idCase = lesDetails[i].querySelector("input[type=checkbox]"); idCase.checked = idCaseGlobale.checked; cocherDecocherTarif(idCase); } // changer le message changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale); } /** * Fonction appelée quand on (dé)coche la case d'activité * (dé)sélectionner toutes les cases de cette activité * @param {HTMLInputElement} idCaseGlobale id de la case d'activité */ function cocherDecocherTarif(idCaseGlobale) { let lesPersonnes = idCaseGlobale.closest("details").querySelectorAll("div.personne"); cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes); } /** * idem dans le cas des versements des personnes * @param {HTMLInputElement} idCaseGlobale id case à cocher d'une personne */ function cocherDecocherToutesLesPersonnes(idCaseGlobale) { let lesPersonnes = document.querySelectorAll("div.personne"); cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes); changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale); } /** * @param {HTMLInputElement} idCaseGlobale * @param {NodeListOf} lesPersonnes */ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes) { for (let j = 0; j < lesPersonnes.length; ++j) { // trouver l'élément total de la personne let idTotal = lesPersonnes[j].querySelector("span"); // puis la case à cocher let idCase = lesPersonnes[j].closest("summary").querySelector("input"); idCase.checked = idCaseGlobale.checked; // puis traiter toutes les cases de la personne cocherDecocherPersonne(idCase, idTotal); } } /** * Fonction appelée quand on (dé)coche la case d'une personne * - (dé)sélectionner toutes les cases à cocher * - faire le total des cases cochées et l'afficher * @param {HTMLInputElement} idCase id de la case qui a été cochée * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total */ function cocherDecocherPersonne(idCase, idTotal) { // chercher le fieldset des versements let fieldset = idCase.closest("details").querySelector("div.versements"); let listeCases = fieldset.querySelectorAll("input[type=checkbox]"); for (let i = 0; i < listeCases.length; ++i) { listeCases[i].checked = idCase.checked; cocherDecocherVersement(listeCases[i], idTotal); } } /** * Fonction appelée quand on (dé)coche la case d'un versement * Faire le total des cases cochées et l'afficher * * @param {HTMLInputElement} idCase id de la case qui a été cochée * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total */ function cocherDecocherVersement(idCase, idTotal) { let fieldset = idCase.closest("div.versements"); let listeCases = fieldset.querySelectorAll("input[type=checkbox]"); let listeMontants = fieldset.querySelectorAll("span.montant"); calculerTotal(listeCases, listeMontants, idTotal); } /** * Faire le total des cases cochées et l'afficher * @param {NodeListOf} listeCases liste des cases * @param {NodeListOf} listeMontants liste des montants associés * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total */ function calculerTotal(listeCases, listeMontants, idTotal) { let total = 0; for (let i = 0; i < listeCases.length; ++i) { if (listeCases[i].checked) { total += parseFloat(listeMontants[i].textContent.replace(/\s/g, "").replace(",", ".")); } } // afficher le total idTotal.innerHTML = total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR', minimumFractionDigits: 2}); } /** * changer le message en fonction de l'état coché de la case * @param {Element} message * @param {HTMLInputElement} idCase */ function changerMessage(message, idCase) { if (idCase.checked) { message.innerHTML = "Cliquer pour dé-cocher toutes les lignes"; } else { message.innerHTML = "Cliquer pour cocher toutes les lignes"; } } /** * fonction appelée lors de la validation du formulaire * @return vrai si au moins un choix a été fait * @param {HTMLFormElement} formulaire */ function verifierChoix(formulaire) { let listeCheck = formulaire.getElementsByTagName("input"); let ok = false; for (let i = 1; i < listeCheck.length; ++i) { if (listeCheck[i].checked) { ok = true; break; } } if (! ok) { alert("Erreur : il faut sélectionner au moins un versement"); } return ok; } /** * positionner l'action déclenchée par l'envoi du formulaire * afficher et masquer des portions de formulaire selon l'action * @param {HTMLFormElement} formulaire * @param {string} action après envoi du formulaire * @param {any} idElem id de l'élément à afficher * @param {any} nomClasse classe des éléments à masquer (sauf idElem) */ function choixMethodeGeneration(formulaire, action, idElem, nomClasse) { formulaire.setAttribute('action', 'action.php?action=' + action); for (let elem of formulaire.querySelectorAll(nomClasse)) { if (elem.id == idElem) { elem.classList.remove('hidden'); } else { elem.classList.add('hidden'); } } } /** * vérifier * - qu'au moins une activité/tarif est sélectionnée * - qu'un radio de chaque activité/tarif sélectionné a été sélectionné :) * @param {string} idElem id du conteneur des cases à vérifier */ function verifierCases(idElem) { let div = document.getElementById(idElem); let nbChoix = 0; // parcourir les cases à cocher for (let idCase of div.querySelectorAll("input[type=checkbox]")) { if (idCase.checked) { ++nbChoix; // vérifier qu'un radio de la même ligne est sélectionné let ligneCorrecte = false; // trouver la ligne englobante let ligne = idCase.closest("li"); for (let idRadio of ligne.querySelectorAll('input[type=radio]')) { if (idRadio.checked) { ligneCorrecte = true; break; } } if (! ligneCorrecte) { alert("Erreur : il faut sélectionner un taux de réduction dans chaque ligne cochée"); return false; } } } if (nbChoix == 0) { alert("Erreur : il faut sélectionner au moins une ligne"); } return nbChoix != 0; } /** * vérifier qu'un radio a été sélectionné dans la div paramètre * @param {string} idElem id du conteneur des radios à vérifier */ function verifierRadio(idElem) { let div = document.getElementById(idElem); for (let idRadio of div.querySelectorAll('input[type=radio]')) { if (idRadio.checked) { return true; } } alert("Erreur : il faut sélectionner un taux de réduction"); return false; } /** * afficher/masquer les détails * @param {string} idElem bouton de masquage/affichage * @param {string} classe des détails à afficher/masquer * @param {string} texte du bouton */ function montrerMasquerDetails(idElem, classe, texte) { let lesDetails = document.querySelectorAll(classe); if (lesDetails.length > 0) { let leBouton = document.getElementById(idElem); if (leBouton.textContent.startsWith('Replier')) { // masquer lesDetails.forEach((e) => { e.removeAttribute('open'); }); leBouton.textContent = "Déplier " + texte; leBouton.setAttribute('data-icon', '↓'); } else { // montrer lesDetails.forEach((e) => { e.setAttribute('open', 'open'); }); leBouton.textContent = "Replier " + texte; leBouton.setAttribute('data-icon', '↑'); } } } /** * */ function aumoinsun(conteneur, message) { let listeCheck = conteneur.querySelectorAll('input[type=checkbox]'); for (let elem of listeCheck) { if (elem.checked) { return true; } } alert("Erreur : il faut sélectionner au moins " + message); return false; } /** * vérifier les données saisies dans le formulaire de configuration */ function verifierConfig( formulaire, divArticles, divTauxReduc ) { // articles if (! aumoinsun(divArticles, "un article")) { return false; } // taux de réduction if (! aumoinsun(divTauxReduc, "un taux de réduction")) { return false; } // Nom, fonction, signature // alert("Erreur : il faut sélectionner au moins un versement"); return true; }