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>