Immo en cours : ajout total général + modif présentation

_unfinished.html

@@ -16,9 +16,12 @@
 			</p>
 			<div class="shortFormRight informations" id="total_amount">
 				<legend>Montants sélectionnés</legend>
-				<ul>
-					<li>&nbsp;</li>
-				</ul>
+				<table class="montant">
+					<tbody>
+					</tbody>
+					<tfoot>
+					</tfoot>
+				</table>
 			</div>
 			<div>
 				<p class="submit">
@@ -181,15 +184,13 @@
 <script type="text/javascript" src="scripts.js"></script>
 <script type="text/javascript" async="async">
 
-	let lines = document.querySelectorAll('.list tbody tr');
-	for (const line of lines) {
-		let button = line.querySelector('input[type=checkbox]');
-
-		button.onchange = () => {
-			computeTotal('total_amount', 'transfer');
-		};
-
-	}
+let lines = document.querySelectorAll('.list tbody tr');
+for (const line of lines) {
+	let button = line.querySelector('input[type=checkbox]');
+	button.onchange = () => {
+		computeTotal('total_amount', 'transfer');
+	};
+}
 
 function changeVisibility(evt, idcheck = 'f_unhide_1') {
 	this.form.dispatchEvent(new Event('submit'));

scripts.js

@@ -189,11 +189,29 @@ function addLine(button, codes) {
 	};
 }
 
+// afficher le montant
+function addAmountLine(amount, label, parent) {
+	const node = document.createElement("tr");
+	const col_compte = document.createElement("td");
+	col_compte.classList.add("label");
+	const col_montant = document.createElement("td");
+	col_montant.classList.add("money");
+	const span = document.createElement("strong");
+	const montant = document.createTextNode(new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(amount / 100., ));
+	span.appendChild(montant);
+	col_compte.appendChild(document.createTextNode(label));
+	col_montant.appendChild(span);
+	node.appendChild(col_compte);
+	node.appendChild(col_montant);
+	parent.appendChild(node);
+}
+
 // calculer et afficher le total des lignes sélectionnées
 function computeTotal(id_total, id_url) {
 
-	// calculer le total par compte
+	// calculer le total par compte et le total général
 	let total = new Object;
+	let total_general = 0;
 	const transactions = [];
 	let lines = document.querySelectorAll('.list tbody tr');
 	for (const line of lines) {
@@ -206,28 +224,31 @@ function computeTotal(id_total, id_url) {
 			} else {
 				total[code] = getNumber(money.innerText) * 100;
 			}
+			total_general += getNumber(money.innerText) * 100;
 			const number = line.querySelector('.num a').innerText.slice(1);
 			transactions.push(number);
 		}
 	}
 	// afficher les totaux
-	const liste = document.getElementById(id_total).querySelector('ul');
-	while (liste.firstChild) {
-		liste.removeChild(liste.firstChild);
-	}
-	for (const code in total) {
-		const node = document.createElement("li");
-		const para = document.createElement("p");
-		const libelle = document.createTextNode("Compte " + code + " : ");
-		const span = document.createElement("strong");
-		span.classList.add("money");
-		const montant = document.createTextNode(new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(total[code] / 100., ));
+	const body = document.getElementById(id_total).querySelector('table tbody');
+	const new_body = document.createElement('tbody');
 
-		span.appendChild(montant);
-		para.appendChild(libelle);
-		para.appendChild(span);
-		node.appendChild(para);
-		liste.appendChild(node);
+	for (const code in total) {
+		addAmountLine(total[code], "Compte " + code + " : ", new_body);
+	}
+	body.parentNode.replaceChild(new_body, body);
+
+	// et le total général
+	const foot = document.getElementById(id_total).querySelector('table tfoot');
+	if (Object.keys(total).length > 1) {
+		const new_foot = document.createElement('tfoot');
+		addAmountLine(total_general, "Total : ", new_foot);
+		foot.parentNode.replaceChild(new_foot, foot);
+	} else {
+		// pas besoin de total général si moins de 2 comptes
+		for (const e of foot.children) {
+			foot.removeChild(e);
+		}
 	}
 
 	// mettre à jour les paramètres de l'url

style.css

@@ -55,3 +55,8 @@ fieldset.shortFormLeft div.informations {
 span.strong {
 	font-weight: bold;
 }
+
+table.montant td.label {
+	text-align : right;
+	padding-right : 1em;
+}