modernisation code ; simplification affichage
FossilOrigin-Name: e1b162c4d12b471d8f71c44e29fcce22c466ce789434c6780d2439bb14f3b761
This commit is contained in:
engel
parent
3bbe2e4ac9
commit
1888314fa7
@ -2,7 +2,7 @@ nom="Reçus fiscaux"
|
||||
description="Génération de reçus fiscaux pour les dons des membres"
|
||||
auteur="jce"
|
||||
url="https://git.roflcopter.fr/lesanges/recus-fiscaux-garradin"
|
||||
version="0.6"
|
||||
version="0.6.4"
|
||||
menu=1
|
||||
config=1
|
||||
min_version="1.1"
|
||||
|
||||
@ -7,8 +7,11 @@
|
||||
<input type="checkbox" class="check_global" id="check_global"
|
||||
onclick="cocherDecocherToutesLesPersonnes(check_global)" />
|
||||
<label for="check_global">Cliquer pour cocher toutes les lignes</label>
|
||||
<button type="button" data-icon="↑" class="icn-btn" id="close_details_personne" onclick="montrerMasquerDetails(this.id, 'details.personne', 'toutes les personnes')">Replier toutes les personnes</button>
|
||||
<input type="submit" value="Générer les reçus" form="versements_personnes" onclick="return verifierChoix(this.form)">
|
||||
<button type="button" data-icon="↑" class="icn-btn" id="close_details_personne"
|
||||
onclick="montrerMasquerDetails(this.id, 'details.personne', 'toutes les personnes')">Replier toutes les
|
||||
personnes</button>
|
||||
<input type="submit" value="Générer les reçus" form="versements_personnes"
|
||||
onclick="return verifierChoix(this.form)">
|
||||
</fieldset>
|
||||
|
||||
<form method="post" id="versements_personnes" action="generer_recus.php?type=personne">
|
||||
|
||||
@ -71,14 +71,8 @@ $tpl->register_function('afficher_debut_personne', function ($params)
|
||||
|
||||
$personne = $_SESSION['membresDonateurs'][$idUser];
|
||||
$out = '<details class="personne" open="open">
|
||||
<summary class="personne">';
|
||||
$out .= sprintf('<h4 class="personne">Versements de %s : <span class="total" id="total_%s">0,00 €</span></h4>',
|
||||
$personne->nomPrenom,
|
||||
$idVersement);
|
||||
$out .= '</summary>';
|
||||
$out .= sprintf('
|
||||
<fieldset class="versements" id="versements_%s">',
|
||||
$idVersement);
|
||||
<summary class="personne">
|
||||
<h4 class="personne">';
|
||||
$out .= sprintf('
|
||||
<input type="checkbox" id="check_%s"',
|
||||
$idVersement);
|
||||
@ -86,10 +80,15 @@ $tpl->register_function('afficher_debut_personne', function ($params)
|
||||
$idVersement,
|
||||
$idVersement);
|
||||
$out .= sprintf('
|
||||
<label for="check_%s">Cliquer pour cocher toutes les lignes</label>',
|
||||
<label for="check_%s"></label>',
|
||||
$idVersement);
|
||||
$out .= sprintf('%s : <span class="total" id="total_%s">0,00 €</span>',
|
||||
$personne->nomPrenom,
|
||||
$idVersement);
|
||||
$out .= '</h4></summary>';
|
||||
$out .= sprintf('
|
||||
<fieldset class="versements" id="versements_%s">',
|
||||
$idVersement);
|
||||
$out .= '<br />
|
||||
<hr>';
|
||||
return $out;
|
||||
});
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Fonction appelée quand on (dé)coche la case de sélection globale
|
||||
* (dé)sélectionner toutes les cases à cocher de toutes les activités
|
||||
* @param id de la case globale
|
||||
* @param {HTMLInputElement} idCaseGlobale id de la case globale
|
||||
*/
|
||||
function cocherDecocherTout(idCaseGlobale)
|
||||
{
|
||||
// itérer sur la liste des éléments détails : 1 par couple <activité, tarif>
|
||||
var lesDetails = document.querySelectorAll("details.activite");
|
||||
for (var i = 0; i < lesDetails.length; ++i)
|
||||
let lesDetails = document.querySelectorAll("details.activite");
|
||||
for (let i = 0; i < lesDetails.length; ++i)
|
||||
{
|
||||
// itérer sur les personnes
|
||||
var lesPersonnes = lesDetails[i].querySelectorAll("h4.personne");
|
||||
let lesPersonnes = lesDetails[i].querySelectorAll("h4.personne");
|
||||
cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes);
|
||||
}
|
||||
// changer le message
|
||||
@ -19,26 +21,30 @@ function cocherDecocherTout(idCaseGlobale)
|
||||
|
||||
/**
|
||||
* idem dans le cas des versements des personnes
|
||||
* @param {HTMLInputElement} idCaseGlobale id de la case globale
|
||||
*/
|
||||
function cocherDecocherToutesLesPersonnes(idCaseGlobale)
|
||||
{
|
||||
var lesPersonnes = document.querySelectorAll("h4.personne");
|
||||
let lesPersonnes = document.querySelectorAll("h4.personne");
|
||||
cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes);
|
||||
changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLInputElement} idCaseGlobale
|
||||
* @param {NodeListOf<Element>} lesPersonnes
|
||||
*/
|
||||
function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
|
||||
{
|
||||
for (var j = 0; j < lesPersonnes.length; ++j)
|
||||
for (let j = 0; j < lesPersonnes.length; ++j)
|
||||
{
|
||||
// trouver l'élément total de la personne
|
||||
var idTotal = lesPersonnes[j].querySelector("span");
|
||||
let idTotal = lesPersonnes[j].querySelector("span");
|
||||
// puis la case à cocher
|
||||
var fieldset = lesPersonnes[j].closest("details").querySelector("fieldset");
|
||||
var idCase = fieldset.querySelector("input");
|
||||
let idCase = lesPersonnes[j].closest("summary").querySelector("input");
|
||||
idCase.checked = idCaseGlobale.checked;
|
||||
// puis traiter toutes les cases de la personne
|
||||
cocherDecocherPersonne(idCase, idTotal, false);
|
||||
cocherDecocherPersonne(idCase, idTotal);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,58 +52,54 @@ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
|
||||
* Fonction appelée quand on (dé)coche la case globale d'une personne
|
||||
* - (dé)sélectionner toutes les cases à cocher
|
||||
* - faire le total des cases cochées et l'afficher
|
||||
*
|
||||
* @param id de la case qui a été cochée
|
||||
* @param id de l'élément où afficher le total
|
||||
* @param changer : vrai, s'il faut changer le message de la personne
|
||||
* @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, changer = true)
|
||||
function cocherDecocherPersonne(idCase, idTotal)
|
||||
{
|
||||
// chercher le fieldset des versements
|
||||
var fieldset = idCase.closest("details").querySelector("fieldset");
|
||||
var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
|
||||
for (var i = 0; i < listeCases.length; ++i)
|
||||
let fieldset = idCase.closest("details").querySelector("fieldset");
|
||||
let listeCases = fieldset.querySelectorAll("input[type=checkbox]");
|
||||
for (let i = 0; i < listeCases.length; ++i)
|
||||
{
|
||||
listeCases[i].checked = idCase.checked;
|
||||
}
|
||||
// calculer et afficher le total
|
||||
var listeMontants = fieldset.querySelectorAll("span.montant");
|
||||
let listeMontants = fieldset.querySelectorAll("span.montant");
|
||||
calculerTotal(listeCases, listeMontants, idTotal);
|
||||
// changer le message
|
||||
if (changer) { changerMessage(idCase.nextElementSibling, idCase); }
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction appelée quand on (dé)coche la case d'un versement
|
||||
* Faire le total des cases cochées et l'afficher
|
||||
*
|
||||
* @param id de la case qui a été cochée
|
||||
* @param id de l'élément où afficher le total
|
||||
* @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)
|
||||
{
|
||||
var fieldset = idCase.closest("fieldset");
|
||||
var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
|
||||
var listeMontants = fieldset.querySelectorAll("span.montant");
|
||||
let fieldset = idCase.closest("fieldset");
|
||||
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 listes des cases
|
||||
* @param listes des montants associés
|
||||
* @param id de l'élément où afficher le total
|
||||
* @param {NodeListOf<Element>} listeCases liste des cases
|
||||
* @param {NodeListOf<Element>} listeMontants liste des montants associés
|
||||
* @param {HTMLSpanElement} idTotal id de l'élément où afficher le total
|
||||
*/
|
||||
function calculerTotal(listeCases, listeMontants, idTotal)
|
||||
{
|
||||
var total = 0;
|
||||
for (var i = 1; i < listeCases.length; ++i)
|
||||
let total = 0;
|
||||
for (let i = 0; i < listeCases.length; ++i)
|
||||
{
|
||||
if (listeCases[i].checked) {
|
||||
total += parseFloat(listeMontants[i-1].textContent.replace(/\s/g, ""));
|
||||
total += parseFloat(listeMontants[i].textContent.replace(/\s/g, ""));
|
||||
}
|
||||
}
|
||||
// "afficher" le total
|
||||
// afficher le total
|
||||
idTotal.innerHTML =
|
||||
total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR',
|
||||
minimumFractionDigits: 2});
|
||||
@ -105,6 +107,8 @@ function calculerTotal(listeCases, listeMontants, idTotal)
|
||||
|
||||
/**
|
||||
* changer le message en fonction de l'état coché de la case
|
||||
* @param {Element} message
|
||||
* @param {HTMLInputElement} idCase
|
||||
*/
|
||||
function changerMessage(message, idCase)
|
||||
{
|
||||
@ -118,13 +122,13 @@ function changerMessage(message, idCase)
|
||||
/**
|
||||
* fonction appelée lors de la validation du formulaire
|
||||
* @return vrai si au moins un choix a été fait
|
||||
* @param : formulaire
|
||||
* @param {HTMLFormElement} formulaire
|
||||
*/
|
||||
function verifierChoix(formulaire)
|
||||
{
|
||||
var listeCheck = formulaire.getElementsByTagName("input");
|
||||
var ok = false;
|
||||
for (var i = 1; i < listeCheck.length; ++i)
|
||||
let listeCheck = formulaire.getElementsByTagName("input");
|
||||
let ok = false;
|
||||
for (let i = 1; i < listeCheck.length; ++i)
|
||||
{
|
||||
if (listeCheck[i].checked)
|
||||
{
|
||||
@ -139,39 +143,55 @@ function verifierChoix(formulaire)
|
||||
return ok;
|
||||
}
|
||||
|
||||
/**
|
||||
* afficher et masquer des portions de formulaire selon l'action
|
||||
* @param {HTMLFormElement} formulaire
|
||||
* @param {string} action après envoi du formulaire
|
||||
* @param {any} nomClasse1 classe des éléments à afficher
|
||||
* @param {any} nomClasse2 classe des éléments à masquer
|
||||
*/
|
||||
function choixMethodeGeneration(formulaire, action, nomClasse1, nomClasse2)
|
||||
{
|
||||
formulaire.setAttribute('action', 'action.php?action=' + action);
|
||||
afficherMasquer(formulaire, nomClasse1, nomClasse2);
|
||||
}
|
||||
|
||||
/**
|
||||
* afficher et masquer des portions de formulaire
|
||||
* @param {HTMLFormElement} formulaire
|
||||
* @param {any} nomClasse1 classe des éléments à afficher
|
||||
* @param {any} nomClasse2 classe des éléments à masquer
|
||||
*/
|
||||
function afficherMasquer(formulaire, nomClasse1, nomClasse2)
|
||||
{
|
||||
for (var elem of formulaire.querySelectorAll(nomClasse1)) {
|
||||
for (let elem of formulaire.querySelectorAll(nomClasse1)) {
|
||||
elem.classList.remove('hidden');
|
||||
}
|
||||
for (var elem of formulaire.querySelectorAll(nomClasse2)) {
|
||||
for (let elem of formulaire.querySelectorAll(nomClasse2)) {
|
||||
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é :)
|
||||
/**
|
||||
* 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)
|
||||
{
|
||||
var div = document.getElementById(idElem);
|
||||
var nbChoix = 0;
|
||||
let div = document.getElementById(idElem);
|
||||
let nbChoix = 0;
|
||||
// parcourir les cases à cocher
|
||||
for (var idCase of div.querySelectorAll("input[type=checkbox]"))
|
||||
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é
|
||||
var ligneCorrecte = false;
|
||||
let ligneCorrecte = false;
|
||||
// trouver la ligne englobante
|
||||
var ligne = idCase.closest("tr");
|
||||
for (var idRadio of ligne.querySelectorAll('input[type=radio]'))
|
||||
let ligne = idCase.closest("tr");
|
||||
for (let idRadio of ligne.querySelectorAll('input[type=radio]'))
|
||||
{
|
||||
if (idRadio.checked) { ligneCorrecte = true; break; }
|
||||
}
|
||||
@ -187,11 +207,14 @@ function verifierCases(idElem)
|
||||
return nbChoix != 0;
|
||||
}
|
||||
|
||||
// vérifier qu'un radio a été sélectionné dans la div paramètre
|
||||
/**
|
||||
* 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)
|
||||
{
|
||||
var div = document.getElementById(idElem);
|
||||
for (var idRadio of div.querySelectorAll('input[type=radio]'))
|
||||
let div = document.getElementById(idElem);
|
||||
for (let idRadio of div.querySelectorAll('input[type=radio]'))
|
||||
{
|
||||
if (idRadio.checked) { return true; }
|
||||
}
|
||||
@ -199,12 +222,18 @@ function verifierRadio(idElem)
|
||||
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)
|
||||
{
|
||||
var lesDetails = document.querySelectorAll(classe);
|
||||
let lesDetails = document.querySelectorAll(classe);
|
||||
if (lesDetails.length > 0)
|
||||
{
|
||||
var leBouton = document.getElementById(idElem);
|
||||
let leBouton = document.getElementById(idElem);
|
||||
if (leBouton.textContent.startsWith('Replier'))
|
||||
{
|
||||
// masquer
|
||||
|
||||
@ -32,7 +32,8 @@ summary.personne
|
||||
padding-top : 0;
|
||||
padding-bottom : 0;
|
||||
}
|
||||
h3.personne, h4.personne {
|
||||
h3.personne, h4.personne
|
||||
{
|
||||
font-weight : normal;
|
||||
background: rgba(var(--gSecondColor), 0.25);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user