diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | src/lib/components/Nav.svelte | 40 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 4 | ||||
| -rw-r--r-- | src/routes/+page.server.ts | 8 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 47 | ||||
| -rw-r--r-- | src/routes/catalog/+page.server.ts | 52 | ||||
| -rw-r--r-- | src/routes/catalog/+page.svelte | 136 | ||||
| -rw-r--r-- | src/routes/categories/+page.svelte | 2 |
8 files changed, 240 insertions, 51 deletions
@@ -55,6 +55,6 @@ efficient shopping walk. ## TODO -- [ ] Navbar, list, catalog - [ ] Full FR - [ ] sticky bottom form, more compact, Add + Edit +- [ ] Find a design identity diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte new file mode 100644 index 0000000..2899bfc --- /dev/null +++ b/src/lib/components/Nav.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { page } from '$app/stores'; +</script> + +<nav class="navbar"> + <a href="/" class:active={$page.url.pathname === '/'}>List</a> + <a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a + > + <a href="/categories" class:active={$page.url.pathname === '/categories'} + >Categories</a + > +</nav> + +<style> + .navbar { + display: flex; + gap: 0.25rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5rem; + } + + .navbar a { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + color: #333; + text-decoration: none; + font-size: 0.875rem; + transition: background 0.15s; + } + + .navbar a:hover { + background: #f5f5f5; + } + + .navbar a.active { + background: #333; + color: #fff; + } +</style> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index db5327e..8ba4f8f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,7 @@ <script> + import '../app.css'; + import Nav from '$lib/components/Nav.svelte'; + let { children } = $props(); </script> @@ -7,6 +10,7 @@ </svelte:head> <div class="app"> + <Nav /> {@render children()} </div> diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 27ecbe1..d548d09 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,12 +1,16 @@ import { fail } from '@sveltejs/kit'; import { db } from '$lib/server/db'; import { groceries, categories, references } from '$lib/server/db/schema'; -import { eq, desc, asc } from 'drizzle-orm'; +import { eq, desc } from 'drizzle-orm'; import type { Actions, PageServerLoad } from './$types'; export const load: PageServerLoad = async () => { const [items, cats, refs] = await Promise.all([ - db.select().from(groceries).orderBy(desc(groceries.createdAt)), + db + .select() + .from(groceries) + .where(eq(groceries.checked, false)) + .orderBy(desc(groceries.createdAt)), db.select().from(categories).orderBy(desc(categories.name)), db.select().from(references).orderBy(desc(references.qualityScore)), ]); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1a70f47..57ce3d0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,8 +5,7 @@ let { data, form } = $props(); let name = $state(''); - let listItems = $derived(data?.items?.filter((i) => !i.checked) ?? []); - let catalogItems = $derived(data?.items?.filter((i) => i.checked) ?? []); + let listItems = $derived(data?.items ?? []); function groupByCategory(items: typeof listItems) { const groups: Record<string, typeof listItems> = {}; @@ -18,8 +17,6 @@ } </script> -<h1>Groceries</h1> - <form class="add-form" method="POST" action="?/add" use:enhance> <label> <span class="label">Item</span> @@ -47,8 +44,6 @@ <p class="error">{form.error}</p> {/if} -<h2>List</h2> - {#if listItems.length === 0} <p class="empty">Nothing to buy</p> {:else} @@ -79,40 +74,6 @@ </form> {/if} -<hr /> - -<h2>Catalog</h2> - -{#if catalogItems.length === 0} - <p class="empty">No items yet</p> -{:else} - <form method="POST" action="?/toggle" use:enhance> - {#each groupByCategory(catalogItems) as [cat, items] (cat)} - <h3 class="category-name">{cat}</h3> - <ul class="item-list"> - {#each items as item (item.id)} - <li class="catalog-item"> - <button name="id" value={item.id} type="submit"> - <span class="item-text"> - {item.name} - {#if item.bestRef} - <span class="best-ref" - >{item.bestRef.brand} - {#if item.bestRef.price && item.bestRef.unit} - {item.bestRef.price.toFixed(2)} {item.bestRef.unit} - {/if} - </span> - {/if} - </span> - </button> - <a class="ref-link" href="/grocery/{item.id}">→</a> - </li> - {/each} - </ul> - {/each} - </form> -{/if} - <style> .add-form { display: flex; @@ -160,12 +121,6 @@ margin-bottom: 1rem; } - hr { - border: none; - border-top: 1px solid #ddd; - margin: 1.5rem 0; - } - .item-list { list-style: none; display: flex; diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts new file mode 100644 index 0000000..34d0a06 --- /dev/null +++ b/src/routes/catalog/+page.server.ts @@ -0,0 +1,52 @@ +import { fail } from '@sveltejs/kit'; +import { db } from '$lib/server/db'; +import { groceries, categories, references } from '$lib/server/db/schema'; +import { eq, desc } from 'drizzle-orm'; +import type { Actions, PageServerLoad } from './$types'; + +export const load: PageServerLoad = async () => { + const [items, cats, refs] = await Promise.all([ + db.select().from(groceries).orderBy(desc(groceries.createdAt)), + db.select().from(categories).orderBy(desc(categories.name)), + db.select().from(references).orderBy(desc(references.qualityScore)), + ]); + + const catMap = new Map(cats.map((c) => [c.id, c.name])); + const bestRef = new Map<number, (typeof refs)[number]>(); + for (const ref of refs) { + if (!bestRef.has(ref.groceryId)) { + bestRef.set(ref.groceryId, ref); + } + } + + return { + items: items.map((i) => ({ + ...i, + categoryName: i.categoryId ? (catMap.get(i.categoryId) ?? null) : null, + bestRef: bestRef.get(i.id) ?? null, + })), + categories: cats, + }; +}; + +export const actions: Actions = { + toggle: async ({ request }) => { + const data = await request.formData(); + const id = Number(data.get('id')); + + const [item] = await db + .select() + .from(groceries) + .where(eq(groceries.id, id)); + if (!item) { + return fail(404, { error: 'Item not found' }); + } + + await db + .update(groceries) + .set({ checked: !item.checked }) + .where(eq(groceries.id, id)); + + return { success: true }; + }, +}; diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte new file mode 100644 index 0000000..0e1106c --- /dev/null +++ b/src/routes/catalog/+page.svelte @@ -0,0 +1,136 @@ +<script lang="ts"> + import '../../app.css'; + import { enhance } from '$app/forms'; + + let { data, form } = $props(); + + let catalogItems = $derived(data?.items ?? []); + + function groupByCategory(items: typeof catalogItems) { + const groups: Record<string, typeof catalogItems> = {}; + for (const item of items) { + const key = item.categoryName ?? 'Uncategorized'; + (groups[key] ??= []).push(item); + } + return Object.entries(groups); + } +</script> + +{#if catalogItems.length === 0} + <p class="empty">No items yet</p> +{:else} + <form method="POST" action="?/toggle" use:enhance> + {#each groupByCategory(catalogItems) as [cat, items] (cat)} + <h3 class="category-name">{cat}</h3> + <ul class="item-list"> + {#each items as item (item.id)} + <li class="catalog-item"> + <button name="id" value={item.id} type="submit"> + <span class="item-text"> + <span class:checked={item.checked}>{item.name}</span> + {#if item.bestRef} + <span class="best-ref" + >{item.bestRef.brand} + {#if item.bestRef.price && item.bestRef.unit} + {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + </span> + {/if} + </span> + </button> + <a class="ref-link" href="/grocery/{item.id}">→</a> + </li> + {/each} + </ul> + {/each} + </form> +{/if} + +<style> + .item-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.25rem; + } + + .item-list li button { + width: 100%; + text-align: left; + height: 2.5rem; + padding: 0 0.75rem; + border: 1px solid #e0e0e0; + border-radius: 0.5rem; + background: #fff; + font-size: 1rem; + display: flex; + align-items: center; + transition: background 0.15s; + } + + .item-list li button:hover { + background: #f5f5f5; + } + + .catalog-item { + display: flex; + gap: 0.25rem; + height: 2.5rem; + } + + .catalog-item button:first-child { + flex-grow: 1; + width: auto; + display: flex; + align-items: center; + } + + .item-text { + display: flex; + flex-direction: column; + text-align: left; + line-height: 1.2; + } + + .checked { + text-decoration: line-through; + opacity: 0.5; + } + + .best-ref { + font-size: 0.625rem; + color: #999; + } + + .ref-link { + width: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #e0e0e0; + border-radius: 0.5rem; + background: #fff; + color: #333; + text-decoration: none; + font-size: 1rem; + transition: background 0.15s; + } + + .ref-link:hover { + background: #f5f5f5; + } + + .empty { + color: #999; + font-size: 0.875rem; + margin-top: 0.5rem; + } + + .category-name { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + color: #999; + margin: 1rem 0 0.25rem; + } +</style> diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte index 0dfc96c..541b280 100644 --- a/src/routes/categories/+page.svelte +++ b/src/routes/categories/+page.svelte @@ -6,8 +6,6 @@ let name = $state(''); </script> -<h1>Categories</h1> - <form class="add-form" method="POST" action="?/add" use:enhance> <label> <span class="label">New category</span> |