feat: restructure JSON objects a bit for backend

src/components/Drink.svelte

@@ -1,45 +1,44 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { inventory } from "../stores/inventory"
+    import { inventory, inventoryStartedAt } from "../stores/inventory"
     import inventoryApi from "../lib/api";
 
-    export let drinkName: string;
+    export let drinkName: string
+    export let drinkType: string
 
-    let amountContainers: number;
+    let amountContainers: number
-    let amountBottles: number;
+    let amountBottles: number
+
+    const setStartOfInventory = () => {
+        if ($inventoryStartedAt.length < 1) {
+            $inventoryStartedAt = inventoryApi.createTimestamp()
+            inventoryApi.save("inventoryStartedAt", $inventoryStartedAt)
+        }
+    }
 
     const saveInventory = () => {
-        // If there is not a timestamp entry yet, create one. This one is only used to show an info window for the user
-        // to indicate when the inventory was started. It won't get processed by the backend.
-        if ( !$inventory.some(item => "inventoryStartedAt" in item)) {
-            let _unixTime = Date.now();
-            let _date = new Date(_unixTime).toLocaleDateString();
-            let _time = new Date(_unixTime).toLocaleTimeString();
-            $inventory = [{
-                inventoryStartedAt: _date + " um " + _time
-            }, ...$inventory];
-        }
         // Check if a drink is already in the inventory. If yes, then update the amounts. If not, add it.
         if ($inventory.some(item => item.name === drinkName)) {
             $inventory.forEach(item => {
                 if (drinkName === item.name) {
-                    item.amountContainers = amountContainers;
+                    item.amountContainers = amountContainers
-                    item.amountBottles = amountBottles;
+                    item.amountBottles = amountBottles
                 }
-            });
+            })
         }
         else {
             $inventory = [
                 {
                     name: drinkName,
+                    type: drinkType,
                     amountContainers: amountContainers,
                     amountBottles: amountBottles,
                 },
                 ...$inventory,
             ];
         }
-        inventoryApi.save("drinks", $inventory);
+        inventoryApi.save("drinks", $inventory)
-    };
+    }
 
     const loadAmountsFromInventory = () => {
         $inventory.forEach(item => {
@@ -47,11 +46,13 @@
                 amountContainers = item.amountContainers;
                 amountBottles = item.amountBottles;
             }
-        });
+        })
     }
 
     onMount(async () => {
-        loadAmountsFromInventory();
+        loadAmountsFromInventory()
+        // Check if an inventory has been ongoing on the current device
+        $inventoryStartedAt = await inventoryApi.load("inventoryStartedAt")
     })
 
 </script>
@@ -62,10 +63,16 @@
             {drinkName}
         </div>
         <div class="column">
-            <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={saveInventory}>
+            <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={() => {
+                saveInventory()
+                setStartOfInventory()
+            }}>
         </div>
         <div class="column">
-            <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={saveInventory}>
+            <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={() => {
+                saveInventory()
+                setStartOfInventory()
+            }}>
         </div>
     </div>
 </div>

src/components/Finish.svelte

@@ -20,9 +20,9 @@
     const fillInventoryWithZeroes = () => {
         $drinks.forEach(drink => {
             if (!$inventory.some(item => item.name === drink.name)) {
-               $inventory = [{name: drink.name, amountContainers: 0, amountBottles: 0 }, ...$inventory] 
+               $inventory = [{name: drink.name, type: drink.type, amountContainers: 0, amountBottles: 0 }, ...$inventory] 
             }
-        });
+        })
     }
     
 </script>

src/components/Info.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-    import { inventory } from "../stores/inventory";
+    import { onMount } from "svelte";
+    import { inventoryStartedAt } from "../stores/inventory";
+    import inventoryApi from "../lib/api";
+
+    onMount(async () => {
+        $inventoryStartedAt = await inventoryApi.load("inventoryStartedAt")
+    })
 </script>
 
 <article class="message is-info">
@@ -18,11 +24,11 @@
     </div>
 </article>
 
-{#if $inventory.some(item => "inventoryStartedAt" in item)}
+{#if $inventoryStartedAt.length > 0}
 <article class="message is-link">
     <div class="message-body">
         <p>
-            Du hast <strong>am {$inventory.at(-1).inventoryStartedAt}</strong> auf deinem aktuellen Gerät eine Inventur gestartet.
+            Du hast <strong>am {$inventoryStartedAt}</strong> auf deinem aktuellen Gerät eine Inventur gestartet.
             <br>
             Klicke oben rechts auf <span class="tag is-danger"><strong>Reset</strong></span>, wenn du deinen Fortschritt löschen möchtest.
         </p>

src/components/List.svelte

@@ -36,7 +36,7 @@
             </div>
             <div class="block">
                 {#each filteredDrinks as drink (drink.name)}
-                    <Drink drinkName={drink.name} /> 
+                    <Drink drinkName={drink.name} drinkType={drink.type} /> 
                 {/each}
             </div>
         {/if}

src/lib/api.ts

@@ -1,6 +1,6 @@
 const backendProtocol = "http"
 const backendHost = "localhost"
-const backendPort = "8151"
+const backendPort = "8161"
 const backendEndpoint = "drinks"
 
 export default class inventoryApi {
@@ -14,6 +14,7 @@ export default class inventoryApi {
 
     static async reset() {
         localStorage.removeItem("drinks")
+        localStorage.removeItem("inventoryStartedAt")
         window.location.reload();
     }
 
@@ -22,7 +23,7 @@ export default class inventoryApi {
             inventory: inventory,
             name: name,
             comment: comment,
-            timestamp: await inventoryApi.createTimestamp()
+            inventoryFinishedAt: inventoryApi.createTimestamp()
         }
 
         try {
@@ -40,7 +41,7 @@ export default class inventoryApi {
         }
     }
 
-    static async createTimestamp() {
+    static createTimestamp() {
         let _unixTime = Date.now();
         let _date = new Date(_unixTime).toLocaleDateString();
         let _time = new Date(_unixTime).toLocaleTimeString();
@@ -57,4 +58,4 @@ export default class inventoryApi {
         inventoryApi.save("performingPerson", performingPerson)
     }
 
-}
+}

src/stores/inventory.ts

@@ -46,3 +46,5 @@ export const drinks = readable([
 export const activeCategory = writable("")
 
 export const inventory = writable([])
+
+export const inventoryStartedAt = writable("")