<script lang="ts"> import { onMount } from "svelte"; import { inventory } from "../stores/inventory" import inventoryApi from "../stores/api"; export let drinkName: string; let amountContainers: number; let amountBottles: number; const saveInventory = () => { // If there is not a timestamp entry yet, create one. if ( !$inventory.some(item => "timestamp" in item)) { let _unixTime = Date.now(); let _date = new Date(_unixTime).toLocaleDateString(); let _time = new Date(_unixTime).toLocaleTimeString(); $inventory = [{ timestamp: _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.amountBottles = amountBottles; } }); } else { $inventory = [ { name: drinkName, amountContainers: amountContainers, amountBottles: amountBottles, }, ...$inventory, ]; } inventoryApi.save($inventory); }; const loadAmountsFromInventory = () => { $inventory.forEach(item => { if (item.name === drinkName) { amountContainers = item.amountContainers; amountBottles = item.amountBottles; } }); } onMount(async () => { loadAmountsFromInventory(); }) </script> <div class="box"> <div class="columns"> <div class="column is-one-third"> {drinkName} </div> <div class="column"> <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={saveInventory}> </div> <div class="column"> <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={saveInventory}> </div> </div> </div>