recusfiscaux/www/admin/script.js

/**
 * 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 id de la case qui a été cochée
 * @param id de l'élément où afficher le total
 */
function cocherDecocherPersonne(idCase, idTotal) {
    // chercher le fieldset englobant
    var fieldset = idCase.closest("fieldset");
    var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
    for (var i = 1; i < listeCases.length; ++i)
    {
        listeCases[i].checked = idCase.checked;
    }
    // changer le message
    var message = idCase.nextElementSibling;
    if (idCase.checked) {
        message.innerHTML = "Cliquer pour dé-cocher toutes les lignes";
    } else {
        message.innerHTML = "Cliquer pour cocher toutes les lignes";
    }
    // calculer et afficher le total
    var listeMontants = fieldset.querySelectorAll("span.montant");
    calculerTotal(listeCases, listeMontants, idTotal);
}

/**
 * Fonction appelée quand on (dé)coche la case d'un versement
 * - (dé)sélectionner cette case (?)
 * - 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
 */
function cocherDecocherVersement(idCase, idTotal) {
    var fieldset = idCase.closest("fieldset");
    var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
    var 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
*/
function calculerTotal(listeCases, listeMontants, idTotal) {
    var total = 0;
    for (var i = 1; i < listeCases.length; ++i)
    {
        if (listeCases[i].checked) {
            total += Number(listeMontants[i-1].textContent);
        }
    }
    // "afficher" le total
    idTotal.innerHTML =
        total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR',
                                       minimumFractionDigits: 2});
}

/**
 * Cocher/décocher toutes les cases d'un tableau
 * en fonction de l'état de la première (ligne d'entête)
 * @param evt : événement déclencheur
* @remarks : est remplacé par la fonction cocherDecocherPersonne ci-dessus
 */
function cocherDecocher_old(evt) {
    console.log("this = " + this.className);
    console.log("currentTarget = " + evt.currentTarget.className);
    console.log("evt.target = " + evt.target.className);
    var composed = evt.composedPath();
    console.log("composedPath = " + composed);

    var firstInput = evt.target;
    // voir si la case tousCochés est cochée
    var tousCoches = firstInput.checked;
    // chercher la table englobante
    var laTable = firstInput.closest("table");
    console.log("Table trouvée = " + laTable.id);
    // et la liste des lignes
    var rows = laTable.getElementsByTagName("tr");
    // modifier les autres cases en fonction de celle-ci
    for (let i = 1; i < rows.length; ++i) {
        var input = rows[i].getElementsByTagName("input")[0];
        input.checked = tousCoches;
    }
}

/**
 * Associer un écouteur à la première case à cocher de chaque table
 * @remarks : n'est plus utile
 */
function activerListener() {
    // parcourir les tables
    const lesTables = document.querySelectorAll("table.list");
    for (let i = 0; i < lesTables.length; ++i) {
	// vérifier si c'est l'une des tables qui nous intéresse
	// l'id est du genre : versements_xx où xx est un entier
	const id = lesTables[i].id;
	const re = /^versements_[0-9]+/;
	console.log("id = " + id + " => " + re.test(id));
	if (re.test(id)) {
	    // chercher le premier élément input
	    const premierInput = lesTables[i].querySelector("input");
	    // associer un écouteur à la première case à cocher
	    premierInput.addEventListener('change', cocherDecocher);
	}
    }
}

/*
// ouvrir/fermer les détails
document.querySelector('#open_details').onclick = () => {
  document.querySelectorAll('details').forEach((e) => {
    e.setAttribute('open', 'open');
  });
};
document.querySelector('#close_details').onclick = () => {
  document.querySelectorAll('details').forEach((e) => {
    e.removeAttribute('open');
  });
};
*/