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

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

    export let drinkName: string
    export let drinkType: string

    let amountContainers: number
    let amountBottles: number

    const setStartOfInventory = () => {
        if ($inventoryStartedAt.length < 1) {
            $inventoryStartedAt = inventoryApi.createTimestamp()
            inventoryApi.save("inventoryStartedAt", $inventoryStartedAt)
        }
    }

    const saveInventory = () => {
        // 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,
                    type: drinkType,
                    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()
        // Check if an inventory has been ongoing on the current device
        $inventoryStartedAt = await inventoryApi.load("inventoryStartedAt")
    })

</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()
                setStartOfInventory()
            }}>
        </div>
        <div class="column">
            <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={() => {
                saveInventory()
                setStartOfInventory()
            }}>
        </div>
    </div>
</div>