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

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->

<script lang="ts">
    import { activeCategory, drinks } from "../stores.js";
</script>

<section class="section">
    <div class="container">
        {#if $activeCategory == ""}
            <article class="message is-info">
                <div class="message-header">
                    <p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
                </div>
                <div class="message-body">
                    <p>
                        Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
                        <br>
                        Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
                        <br>
                        Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
                        <br><br>
                        Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
                    </p>

                </div>
            </article>
            <article class="message is-link">
                <div class="message-body">
                    <p>
                        ℹ️ Inventur begonnen am TBD
                        <!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
                    </p>
                </div>
            </article>
        {:else}
            {#each $drinks as drink, name}
                {#if drink.type == $activeCategory}
                    <div class="box">
                        <div class="columns">
                            <div class="column is-one-third">
                                {drink.name}
                            </div>
                            <div class="column">
                                <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen">
                            </div>
                            <div class="column">
                                <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen">
                            </div>
                        </div>

                    </div>
                {/if}
            {/each}
        {/if}
    </div>
</section>