Changement structure code html et javascript

FossilOrigin-Name: 5d8368da9ebcec86dbee43bd4b7bf7282afe71cf1b2b28ffa332d935f32411e8

www/admin/script.js

@@ -0,0 +1,90 @@
+/**
+ * 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
+ * 
+ * @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 listeCheck = fieldset.getElementsByTagName("input");
+    var listeMontants = fieldset.querySelectorAll("span.montant");
+    var total = 0;
+    for (var i = 1; i < listeCheck.length; ++i)
+    {
+        listeCheck[i].checked = listeCheck[0].checked;
+        if (listeCheck[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 foncion cocherDecocher 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');
+  });
+};
+*/