diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 35 |
1 files changed, 34 insertions, 1 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0e9e1ac..325d15a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,6 +4,9 @@ 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) ?? []); </script> <h1>Groceries</h1> @@ -23,11 +26,31 @@ <p class="error">{form.error}</p> {/if} +<h2>List</h2> + +<form method="POST" action="?/toggle" use:enhance> + <ul class="item-list"> + {#each listItems as item (item.id)} + <li> + <button name="id" value={item.id} type="submit"> + {item.name} + </button> + </li> + {/each} + </ul> +</form> + +{#if listItems.length === 0} + <p class="empty">Nothing to buy</p> +{/if} + <hr /> +<h2>Catalog</h2> + <form method="POST" action="?/toggle" use:enhance> <ul class="item-list"> - {#each data?.items ?? [] as item (item.id)} + {#each catalogItems as item (item.id)} <li> <button name="id" value={item.id} type="submit"> {item.name} @@ -37,6 +60,10 @@ </ul> </form> +{#if catalogItems.length === 0} + <p class="empty">No items yet</p> +{/if} + <style> .add-form { display: flex; @@ -94,4 +121,10 @@ .item-list li button:hover { background: #f5f5f5; } + + .empty { + color: #999; + font-size: 0.875rem; + margin-top: 0.5rem; + } </style> |