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

62 lines
1.9 KiB
Svelte
Raw Normal View History

2023-01-17 20:14:05 +01:00
<script lang="ts">
import { onMount } from "svelte";
import { inventory } from "../stores/inventory"
import drinksAPI from "../stores/drinksApi";
2023-01-17 20:14:05 +01:00
export let drinkName: string;
2023-01-19 00:17:51 +01:00
let amountContainers: number;
let amountBottles: number;
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)) {
// Potentially inefficient, how to refactor forEach?
$inventory.forEach(item => {
if (drinkName === item.name) {
item.amountContainers = amountContainers;
item.amountBottles = amountBottles;
}
});
}
else {
$inventory = [
{
name: drinkName,
amountContainers: amountContainers,
amountBottles: amountBottles,
},
...$inventory,
];
}
drinksAPI.save($inventory);
};
const loadAmountsFromInventory = () => {
$inventory.forEach(item => {
if (item.name === drinkName) {
amountContainers = item.amountContainers;
amountBottles = item.amountBottles;
}
});
}
onMount(async () => {
loadAmountsFromInventory();
})
</script>
2023-01-19 00:17:51 +01:00
<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>
2023-01-18 22:58:07 +01:00
</div>
</div>