added unit table and edit mode features

src/public/src/client.ts

@@ -1,4 +1,4 @@
-
+let edit = sessionStorage.getItem("edit") === "true" ? true : false;
 
 function XHRRequest(method: string, url: string, callback: () => void, body?: any) {
     const xhr = new XMLHttpRequest();
@@ -13,6 +13,7 @@ function XHRRequest(method: string, url: string, callback: () => void, body?: an
 }
 
 function deleteItem(index: number) {
+    // FIXME 
     let num = prompt("How do you want to delete?");
     if ( num === null ) {
         return;
@@ -82,9 +83,15 @@ async function fillTable() {
     const resStorage = await fetch("/storage.json");
     const resPrices = await fetch("/prices.json");
     let sumCost = 0, sumStart = 0, sumPrice = 0, sumQuantity = 0;
-    const data = filterStorage(JSON.parse(await resStorage.text()));
+    const data = edit ? JSON.parse(await resStorage.text()) : filterStorage(JSON.parse(await resStorage.text()));
+    if (edit) data.sort((a: any, b: any) => a.name > b.name);
     const prices = JSON.parse(await resPrices.text()) as any[];
     const table = document.getElementById("itemTable")! as HTMLTableElement;
+    if (edit) {
+        const unitHeader = document.createElement("th");
+        unitHeader.innerText = "Unit";
+        table.children[0].children[0].insertBefore(unitHeader, table.children[0].children[0].children[4]);
+    } 
     const tbody = document.createElement("tbody");
     table.appendChild(tbody);
     const thead = document.createElement("thead");
@@ -101,17 +108,18 @@ async function fillTable() {
         insertString(tr, item.name);
         insertNumber(tr, item.quantity, "num");
         insertNumber(tr, item.cost, "price");
+        if (edit) insertString(tr, item.unit);
         insertStartingPrice(tr, index, item);
         insertNumber(tr, item.startingPrice * item.quantity, "price");
         insertNumber(tr, price, "price");
         insertNumber(tr, price * item.quantity, "price");
         insertProfit(tr, parseFloat((price - item.startingPrice).toFixed(2)));
         insertProfit(tr, parseFloat(((price - item.startingPrice) * item.quantity).toFixed(2)));
         insertUpdateButton(tr, index, item);
-        insertDeleteButton(tr, index);
+        if (edit) insertDeleteButton(tr, index);
     });
     const sumItems = document.getElementById("numItems")! as HTMLSpanElement;
-    sumItems.innerHTML = `${sumQuantity} - TODO should be 8417`; // TODO should be 8417
+    sumItems.innerHTML = `${sumQuantity}`;
     const totalInvest = document.getElementById("totalInvest")! as HTMLSpanElement;
     totalInvest.innerHTML = `${sumCost.toFixed(2)}€`;
     const totalStart = document.getElementById("totalStart")! as HTMLSpanElement;
@@ -181,10 +189,50 @@ function clearInputs() {
     }
 }
 
+async function unitTable() {
+    const resStorage = await fetch("/storage.json");
+    const data = JSON.parse(await resStorage.text()).map((item: any, index: number, array: any) => {
+        const dubs = array.filter((i: any) => i.unit === item.unit);
+        if ( dubs.length === 1 ) {
+            return {
+                unit: item.unit,
+                quantity: item.quantity,
+            };
+        }
+        return dubs.reduce((acc: any, i: any) => {
+            return {
+                unit: item.unit,
+                quantity: acc.quantity + i.quantity,
+            }
+        }, {
+            unit: item.unit,
+            quantity: 0,
+        });
+    }).filter((item: any, index: number, array: any[]) => array.findIndex((i: any) => i.location === item.location && i.unit === item.unit) === index).sort((a: any, b:any) => {
+        return a.unit > b.unit;
+    });
+
+    const table = document.getElementById("unitTable")! as HTMLTableElement;
+    const tbody = document.createElement("tbody");
+    table.appendChild(tbody);
+    data.forEach((item: any, index: any) => {
+        const tr = tbody.insertRow();
+        insertNumber(tr, index+1, "num");
+        insertString(tr, item.unit);
+        insertNumber(tr, item.quantity, "num");
+    });
+}
+
 async function main() {
     clearInputs();
     fillTable();
-
+    unitTable();
+
+    document.getElementById("editMode")!.innerText = edit ? "Edit Mode: ON" : "Edit Mode: OFF";
+    document.getElementById("editMode")!.onclick = () => {
+        sessionStorage.setItem("edit", (!edit).toString());
+        location.reload();
+    };
     document.getElementById("updateAll")!.onclick = updateAll;
     document.getElementById("addNewItem")!.onclick = addItem;
 }