Ajout calcul total général case cochées

FossilOrigin-Name: 3a1cdc3cd5b81be5a45684569107bbe48f547d471a6873aaa508652cf8103b0b
This commit is contained in:
engel 2025-12-30 09:35:39 +00:00
parent 358c44d23c
commit 57f0d77527
5 changed files with 120 additions and 73 deletions

View file

@ -71,8 +71,8 @@ $tpl->register_function('afficher_debut_tarif', function ($params)
<summary class="activite">
<div class="activite">
<input type="checkbox" id="check_%1$s"
onclick="cocherDecocherTarif(check_%1$s)" />',
$idTarif);
onclick="cocherDecocherTarif(check_%1$s, %2$s)" />',
$idTarif, "total_general");
if ($idTarif == 0) {
// versement sur un compte non rattaché à une activité
$out .= sprintf('
@ -122,7 +122,7 @@ $tpl->register_function('afficher_debut_personne', function ($params)
<summary class="personne">
<div class="personne">
<input type="checkbox" id="check_%1$s"
onclick="cocherDecocherPersonne(check_%1$s, total_%1$s)" />
onclick="cocherDecocherPersonne(check_%1$s, total_%1$s, %3$s)" />
<label for="check_%1$s">
%2$s : <span class="total" id="total_%1$s">0,00 </span>
</label>
@ -130,7 +130,8 @@ $tpl->register_function('afficher_debut_personne', function ($params)
</summary>
<div class="versements">',
$idVersement,
$personne->nomPrenom
$personne->nomPrenom,
"total_general"
);
return $out;
});
@ -163,7 +164,7 @@ $tpl->register_function('afficher_versement', function ($params)
id="check_%1$s_%2$s"
name="selected[]"
value="%2$s"
onclick="cocherDecocherVersement(check_%1$s_%2$s, total_%1$s)" />
onclick="cocherDecocherCase(check_%1$s_%2$s, total_%1$s, %5$s)" />
<label for="check_%1$s_%2$s"><span class="montant">%3$s</span>
<span>%4$s</span>
</label>
@ -176,7 +177,8 @@ $tpl->register_function('afficher_versement', function ($params)
",",
"&nbsp;"
),
date_format(date_create($versement->date),"d/m/Y")
date_format(date_create($versement->date),"d/m/Y"),
"total_general"
);
return $out;
});

View file

@ -1,5 +1,26 @@
"use strict";
/**
* renvoyer la valeur numérique d'un montant formaté en
* @param texte qui représente nu nombre
*/
function getNumber(texte) {
return Number(texte.replace(/[^0-9,]/g, '').replace(/,/, '.'));
}
/**
* afficher un montant au format monétaire
* @param montant à afficher
* @param idElem : élément faire l'affichage
*/
function displayNumber(montant, idElem) {
idElem.innerHTML =
montant.toLocaleString('fr-FR', {
style: 'currency', currency: 'EUR',
minimumFractionDigits: 2
});
}
// ------------------------------------------------------------------------
// actions sur la liste des versements
// ------------------------------------------------------------------------
@ -8,14 +29,15 @@
* Fonction appelée quand on ()coche la case globale
* ()sélectionner toutes les cases de toutes les activités
* @param {HTMLInputElement} idCaseGlobale id de la case globale
* @param {HTMLSpanElement} idTotalGeneral id du total général
*/
function cocherDecocherTout(idCaseGlobale) {
function cocherDecocherTout(idCaseGlobale, idTotalGeneral) {
// itérer sur la liste des éléments détails : 1 par couple <activité, tarif>
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);
cocherDecocherTarif(idCase, idTotalGeneral);
}
// changer le message
changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale);
@ -25,35 +47,37 @@ function cocherDecocherTout(idCaseGlobale) {
* Fonction appelée quand on ()coche la case d'activité
* ()sélectionner toutes les cases de cette activité
* @param {HTMLInputElement} idCaseGlobale id de la case d'activité
* @param {HTMLSpanElement} idTotalGeneral id du total général
*/
function cocherDecocherTarif(idCaseGlobale) {
function cocherDecocherTarif(idCaseGlobale, idTotalGeneral) {
let lesPersonnes = idCaseGlobale.closest("details").querySelectorAll("div.personne");
cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes);
cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes, idTotalGeneral);
}
/**
* 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);
function cocherDecocherToutesLesPersonnes(idCaseGlobale, idTotalGeneral) {
let lesPersonnes = document.querySelectorAll("summary.personne");
cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes, idTotalGeneral);
changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale);
}
/**
* @param {HTMLInputElement} idCaseGlobale
* @param {NodeListOf<Element>} lesPersonnes
*/
function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes) {
* @param {HTMLSpanElement} idTotalGeneral id du total général
*/
function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes, idTotalGeneral) {
for (let j = 0; j < lesPersonnes.length; ++j) {
// trouver l'élément total de la personne
let idTotal = lesPersonnes[j].querySelector("span");
let idTotal = lesPersonnes[j].querySelector("span.total");
// puis la case à cocher
let idCase = lesPersonnes[j].closest("summary").querySelector("input");
let idCase = lesPersonnes[j].querySelector("input[type=checkbox]");
idCase.checked = idCaseGlobale.checked;
// puis traiter toutes les cases de la personne
cocherDecocherPersonne(idCase, idTotal);
cocherDecocherPersonne(idCase, idTotal, idTotalGeneral);
}
}
@ -62,51 +86,45 @@ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes) {
* - ()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 afficher le total
* @param {HTMLSpanElement} idTotal id de l'élément afficher le total de la personne
* @param {HTMLSpanElement} idTotalGeneral id de l'élément afficher le total général
*/
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);
}
function cocherDecocherPersonne(idCase, idTotal, idTotalGeneral) {
let conteneur = idCase.closest("details").querySelector("div.versements");
let listeCases = conteneur.querySelectorAll("input[type=checkbox]");
for (let i = 0; i < listeCases.length; ++i) {
if (listeCases[i].checked != idCase.checked) {
listeCases[i].checked = idCase.checked;
cocherDecocherVersement(listeCases[i], idTotal, idTotalGeneral);
}
}
}
/**
* Fonction appelée quand on ()coche la case d'un versement
* Faire le total des cases cochées et l'afficher
* Mettre à jour le total des cases cochées et le total global et les afficher
*
* @param {HTMLInputElement} idCase id de la case qui a été cochée
* @param {HTMLSpanElement} idTotal id de l'élément afficher le total
* @param {HTMLInputElement} idCase id de la case qui a été ()cochée
* @param {HTMLSpanElement} idTotal id du total de la personne
* @param {HTMLSpanElement} idTotalGeneral id du total général
*/
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<Element>} listeCases liste des cases
* @param {NodeListOf<Element>} listeMontants liste des montants associés
* @param {HTMLSpanElement} idTotal id de l'élément 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
});
function cocherDecocherVersement(idCase, idTotal, idTotalGeneral) {
let div = idCase.closest("div");
let idmontant = div.querySelector("span.montant");
let montant = getNumber(idmontant.textContent);
let totalPersonne = getNumber(idTotal.textContent);
let totalGeneral = getNumber(idTotalGeneral.textContent);
if (idCase.checked) {
totalPersonne += montant;
totalGeneral += montant;
} else {
totalPersonne -= montant;
totalGeneral -= montant;
}
displayNumber(totalPersonne, idTotal);
displayNumber(totalGeneral, idTotalGeneral);
}
/**
@ -273,4 +291,4 @@ function changerStyle(document) {
if (sheet.href.includes('imprimer_recu.css')) { sheet.media = 'print'; }
}
// console.log(styles);
}
}

View file

@ -2,6 +2,10 @@
* liste des versements
*/
label.strong {
font-weight : bold;
}
div.pair {
background-color: rgba(var(--gSecondColor), 0.15);
}

View file

@ -4,15 +4,24 @@
<h2>Année {$annee_recu} : versements par activité et tarif</h2>
<fieldset class="noprint">
<input type="checkbox" class="check_global" id="check_global" onclick="cocherDecocherTout(check_global)" />
<dl>
<dd>
<label class="strong">Total des cases cochées : </label>
<span class="total" id="total_general">0,00 €</span>
</dd>
<dd>
<input type="checkbox" class="check_global" id="check_global" onclick="cocherDecocherTout(check_global, total_general)" />
<label for="check_global">Cliquer pour cocher toutes les lignes</label>
</dd>
<dd>
<button type="button" data-icon="↑" class="icn-btn" id="close_details_activite"
onclick="montrerMasquerDetails(this.id, 'details.activite', 'toutes les activités')">
Replier toutes les activités</button>
<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>
<br />
</dd>
<dd>
{button type="submit" label="Télécharger les reçus au format PDF" shape="download"
form="versements_activites"
formaction="generer_recus.php?type=activite&format=pdf"
@ -21,6 +30,8 @@
form="versements_activites"
formaction="generer_recus.php?type=activite&format=print"
onclick="return verifierChoix(this.form)"}
</dd>
</dl>
</fieldset>
<form method="post" target="_blank" id="versements_activites">

View file

@ -4,21 +4,33 @@
<h2>Année {$annee_recu} : versements par personne</h2>
<fieldset class="noprint">
<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>
<br />
{button type="submit" label="Télécharger les reçus au format PDF" shape="download"
form="versements_personnes"
formaction="generer_recus.php?type=personne&format=pdf"
onclick="return verifierChoix(this.form)"}
{button type="submit" label="Imprimer les reçus" shape="print"
form="versements_personnes"
formaction="generer_recus.php?type=personne&format=print"
onclick="return verifierChoix(this.form)"}
<dl>
<dd>
<label class="strong">Total des cases cochées : </label>
<span class="total" id="total_general">0,00 €</span>
</dd>
<dd>
<input type="checkbox" class="check_global" id="check_global"
onclick="cocherDecocherToutesLesPersonnes(check_global, total_general)" />
<label for="check_global">Cliquer pour cocher toutes les lignes</label>
</dd>
<dd>
<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>
</dd>
<dd>
{button type="submit" label="Télécharger les reçus au format PDF" shape="download"
form="versements_personnes"
formaction="generer_recus.php?type=personne&format=pdf"
onclick="return verifierChoix(this.form)"}
{button type="submit" label="Imprimer les reçus" shape="print"
form="versements_personnes"
formaction="generer_recus.php?type=personne&format=print"
onclick="return verifierChoix(this.form)"}
</dd>
</dl>
</fieldset>
<form method="post" target="_dialog" id="versements_personnes">