diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/+page.server.ts | 14 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 43 |
2 files changed, 48 insertions, 9 deletions
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 6d547e6..27ecbe1 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,21 +1,29 @@ import { fail } from '@sveltejs/kit'; import { db } from '$lib/server/db'; -import { groceries, categories } from '$lib/server/db/schema'; -import { eq, desc } from 'drizzle-orm'; +import { groceries, categories, references } from '$lib/server/db/schema'; +import { eq, desc, asc } from 'drizzle-orm'; import type { Actions, PageServerLoad } from './$types'; export const load: PageServerLoad = async () => { - const [items, cats] = await Promise.all([ + 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, }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 64c8410..1a70f47 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -59,7 +59,17 @@ {#each items as item (item.id)} <li class="catalog-item"> <button name="id" value={item.id} type="submit"> - {item.name} + <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> @@ -83,7 +93,17 @@ {#each items as item (item.id)} <li class="catalog-item"> <button name="id" value={item.id} type="submit"> - {item.name} + <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> @@ -156,7 +176,7 @@ .item-list li button { width: 100%; text-align: left; - height: 2rem; + height: 2.5rem; padding: 0 0.75rem; border: 1px solid #e0e0e0; border-radius: 0.5rem; @@ -174,7 +194,7 @@ .catalog-item { display: flex; gap: 0.25rem; - height: 2rem; + height: 2.5rem; } .catalog-item button:first-child { @@ -184,9 +204,20 @@ align-items: center; } + .item-text { + display: flex; + flex-direction: column; + text-align: left; + line-height: 1.2; + } + + .best-ref { + font-size: 0.625rem; + color: #999; + } + .ref-link { - width: 2rem; - aspect-ratio: 1; + width: 2.5rem; display: flex; align-items: center; justify-content: center; |