spartacus-inventur-frontend/src/components/Drink.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import { inventory } from "../stores/inventory"
    import inventoryApi from "../lib/api";

    export let drinkName: string;

    let amountContainers: number;
    let amountBottles: number;

    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.amountBottles = amountBottles;
                }
            });
        }
        else {
            $inventory = [
                {
                    name: drinkName,
                    amountContainers: amountContainers,
                    amountBottles: amountBottles,
                },
                ...$inventory,
            ];
        }
        inventoryApi.save("drinks", $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>