-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feat/create-and-delete-shopping-lists' into feat/sync
- Loading branch information
Showing
13 changed files
with
404 additions
and
20 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <script> | ||
| export let liste; | ||
| // Hier könntest du Funktionen für das Löschen oder Bearbeiten hinzufügen | ||
| </script> | ||
|
|
||
| <div> | ||
| <h3>{liste.titel}</h3> | ||
| <ul> | ||
| {#each liste.artikel as artikel} | ||
| <li>{artikel.name} ({artikel.menge}) - {artikel.geschäft}</li> | ||
| {/each} | ||
| </ul> | ||
| // Buttons für Bearbeiten und Löschen hier einfügen | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <script> | ||
| import { onMount } from 'svelte'; | ||
| import { db } from '$lib/db'; | ||
| import ListenItem from './ListenItem.svelte'; | ||
| let listen = []; | ||
| onMount(async () => { | ||
| const result = await db.allDocs({ include_docs: true, descending: true }); | ||
| listen = result.rows.map((row) => row.doc); | ||
| }); | ||
| </script> | ||
|
|
||
| <div> | ||
| {#each listen as liste} | ||
| <ListenItem {liste} /> | ||
| {/each} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <script lang="ts"> | ||
| import type { ExistingDocument, Product, ProductList } from '$lib/db'; | ||
| import { db as DB } from '$lib/db'; | ||
| import { get } from 'svelte/store'; | ||
| import { Card, Heading, Span, Button } from 'flowbite-svelte'; | ||
| export let product: ExistingDocument<Product>; | ||
| async function deleteProduct() { | ||
| const db = get(DB); | ||
| await db.remove(product); | ||
| } | ||
| </script> | ||
|
|
||
| <Card {...$$restProps} class="flex flex-row items-center justify-between"> | ||
| <div class="flex-grow"> | ||
| <Heading class="inline-block flex-shrink" tag="h4">{product.name}</Heading> | ||
| </div> | ||
| <div class="flex flex-col items-center text-neutral-500 dark:text-neutral-300"> | ||
| <span class="text-xl">{product.count}</span> | ||
| <span class="text-sm">Stück</span> | ||
| </div> | ||
| <Button on:click={deleteProduct} class="ml-4"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| class="h-6 w-6" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" | ||
| ></path> | ||
| </svg> | ||
| </Button> | ||
| </Card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <script> | ||
| import { db as DB } from '$lib/db'; | ||
| import { get } from 'svelte/store'; | ||
| import { Button, Input, Label } from 'flowbite-svelte'; | ||
| import { goto } from '$app/navigation'; | ||
| let name = ''; | ||
| async function addList() { | ||
| if (name.trim() !== '') { | ||
| const db = get(DB); | ||
| await db.post({ | ||
| type: 'list', | ||
| name: name, | ||
| version: '' | ||
| }); | ||
| name = ''; | ||
| goto('/'); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <div class="flex min-h-screen flex-col items-center justify-center"> | ||
| <h1 class="mb-8 text-3xl font-bold text-gray-700">Neue Einkaufsliste erstellen</h1> | ||
|
|
||
| <form | ||
| class="w-full max-w-md rounded bg-white px-8 py-6 shadow-md" | ||
| on:submit|preventDefault={addList} | ||
| > | ||
| <div class="mb-4"> | ||
| <Label for="list-name" class="mb-2">Name der Einkaufsliste:</Label> | ||
| <Input id="list-name" bind:value={name} placeholder="List name" required class="w-full" /> | ||
| </div> | ||
|
|
||
| <Button type="submit" variant="primary" class="w-full">Liste hinzufügen</Button> | ||
| </form> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <script lang="ts"> | ||
| import Product from '$lib/components/Product.svelte'; | ||
| import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte'; | ||
| import type { PageData } from './$types'; | ||
| import { db, type ExistingDocument, type Product as PT } from '$lib/db'; | ||
| import { browser } from '$app/environment'; | ||
| console.log($db); | ||
| export let data: PageData; | ||
| export let products: ExistingDocument<PT>[] = []; | ||
| data.products.then((result) => { | ||
| products = result.docs as ExistingDocument<PT>[]; | ||
| if (browser) { | ||
| $db | ||
| .changes({ | ||
| since: 'now', | ||
| live: true, | ||
| include_docs: true, | ||
| filter: (doc) => { | ||
| return doc.type === 'product' || doc._deleted; | ||
| } | ||
| }) | ||
| .on('change', (change) => { | ||
| if (change.deleted) { | ||
| products = products.filter((list) => list._id !== change.id); | ||
| } else { | ||
| const index = products.findIndex((list) => list._id === change.id); | ||
| if (change.doc && change.doc.type === 'product') { | ||
| if (index === -1) { | ||
| products = [...products, change.doc]; | ||
| } else { | ||
| products[index] = change.doc; | ||
| } | ||
| } else { | ||
| console.error('Unreachable. Change event without doc.'); | ||
| } | ||
| } | ||
| }).cancel; | ||
| } | ||
| return result; | ||
| }); | ||
| import { db as DB } from '$lib/db'; | ||
| import { get } from 'svelte/store'; | ||
| import { Button, Card, Input } from 'flowbite-svelte'; | ||
| let showPopup = false; | ||
| let productName = ''; | ||
| let productCount = 1; | ||
| async function createProduct() { | ||
| if (productName.trim() !== '') { | ||
| console.log(`Produkt erstellt: ${productName}`); | ||
| const db = get(DB); | ||
| await db.put({ | ||
| _id: `${data.id}:${productName}`, | ||
| type: 'product', | ||
| list: data.id, | ||
| name: productName, | ||
| count: productCount | ||
| }); | ||
| productName = ''; | ||
| productCount = 1; | ||
| showPopup = false; | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <svelte:head> | ||
| <title>G'schäft'lhaberer</title> | ||
| </svelte:head> | ||
|
|
||
| <Heading class="my-5 text-center">G'schäft'l<wbr />Haberer</Heading> | ||
|
|
||
| <div class="mb-5 mt-12 flex flex-col items-center"> | ||
| {#await data.products} | ||
| <ListPlaceholder class="w-full max-w-sm" /> | ||
| {:then} | ||
| {#each products as product} | ||
| <Product {product} class="my-2" /> | ||
| {:else} | ||
| <P>Keine Produkte vorhanden</P> | ||
| {/each} | ||
| {:catch error} | ||
| <Alert color="red">Ein Fehler ist aufgetreten: {error.message}</Alert> | ||
| {/await} | ||
| </div> | ||
|
|
||
| <div class="flex items-center justify-center"> | ||
| <Button on:click={() => (showPopup = true)}>Produkt erstellen</Button> | ||
| </div> | ||
|
|
||
| {#if showPopup} | ||
| <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> | ||
| <Card class="rounded bg-white p-6 shadow-lg"> | ||
| <h2 class="mb-4 text-center text-xl font-bold">Produkt erstellen</h2> | ||
| <Input bind:value={productName} placeholder="Produktname" class="mb-4" /> | ||
| <Input type="number" bind:value={productCount} placeholder="Anzahl" class="mb-4" /> | ||
| <div class="flex justify-end space-x-2"> | ||
| <Button on:click={createProduct} class="bg-blue-500 text-white hover:bg-blue-700" | ||
| >Erstellen</Button | ||
| > | ||
| <Button | ||
| variant="secondary" | ||
| on:click={() => (showPopup = false)} | ||
| class="bg-gray-500 text-white hover:bg-gray-700">Schließen</Button | ||
| > | ||
| </div> | ||
| </Card> | ||
| </div> | ||
| {/if} |
Oops, something went wrong.