app/static/css/table_editor.css

@@ -52,6 +52,9 @@ div.title_STANDARD, .champs_STANDARD {
 div.title_MALUS {
     background-color: #ff4700;
 }
+.sums {
+    background: #ddd;
+}
 /***************************/
 /* Statut des cellules     */
 /***************************/

app/static/js/table_editor.js

@@ -4,8 +4,13 @@
 /*****************************/
 /* Mise en place des données */
 /*****************************/
+let lastX;
+let lastY;
+
 function build_table(data) {
     let output = "";
+    let sumsUE = {};
+    let sumsRessources = {};
 
     data.forEach((cellule) => {
         output += `
@@ -29,11 +34,61 @@ function build_table(data) {
                 ">
                 ${cellule.data}
             </div>`;
+
+        if (cellule.editable && cellule.data) {
+            sumsRessources[cellule.y] = (sumsRessources[cellule.y] ?? 0) + parseInt(cellule.data);
+            sumsUE[cellule.x] = (sumsUE[cellule.x] ?? 0) + parseInt(cellule.data);
+        }
     })
+
+    output += showSums(sumsRessources, sumsUE);
     document.querySelector(".tableau").innerHTML = output;
     installListeners();
 }
 
+function showSums(sumsRessources, sumsUE) {
+    lastX = Object.keys(sumsUE).length + 2;
+    lastY = Object.keys(sumsRessources).length + 2;
+
+    let output = "";
+
+    Object.entries(sumsUE).forEach(([num, value]) => {
+        output += `
+            <div 
+                class="sums"
+                data-editable="false"
+                data-x="${num}"
+                data-y="${lastY}"
+                style="
+                    --x:${num};
+                    --y:${lastY};
+                    --nbX:1;
+                    --nbY:1;
+                ">
+                ${value}
+            </div>`;
+    })
+
+    Object.entries(sumsRessources).forEach(([num, value]) => {
+        output += `
+            <div 
+                class="sums"
+                data-editable="false"
+                data-x="${lastX}"
+                data-y="${num}"
+                style="
+                    --x:${lastX};
+                    --y:${num};
+                    --nbX:1;
+                    --nbY:1;
+                ">
+                ${value}
+            </div>`;
+    })
+
+    return output;
+}
+
 /*****************************/
 /* Gestion des évènements    */
 /*****************************/
@@ -54,6 +109,7 @@ function installListeners() {
                 }
             }
         });
+        cellule.addEventListener("input", processSums);
     });
 }
 
@@ -120,11 +176,28 @@ function keyCell(event) {
             return
         }
         this.classList.remove("modifying");
+        let selected = document.querySelector(".selected");
         ArrowMove(0, 1);
-        modifCell(document.querySelector(".selected"));
+        if (selected != document.querySelector(".selected")) {
+            modifCell(document.querySelector(".selected"));
+        }
     }
 }
 
+function processSums() {
+    let sum = 0;
+    document.querySelectorAll(`[data-editable="true"][data-x="${this.dataset.x}"]`).forEach(e => {
+        sum += parseInt(e.innerText) || 0;
+    })
+    document.querySelector(`.sums[data-x="${this.dataset.x}"][data-y="${lastY}"]`).innerText = sum;
+
+    sum = 0;
+    document.querySelectorAll(`[data-editable="true"][data-y="${this.dataset.y}"]`).forEach(e => {
+        sum += parseInt(e.innerText) || 0;
+    })
+    document.querySelector(`.sums[data-x="${lastX}"][data-y="${this.dataset.y}"]`).innerText = sum;
+}
+
 /******************************/
 /* Affichage d'un message     */
 /******************************/