Refactor & add aggregated entries

src/lib/components/AggregatedFood/AggregatedFoodTable.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+
+	import FoodComp from '$components/Food/FoodComp.svelte'
+	import type { Food } from '$lib/database/food'
+
+	export let items: Food[] = []
+</script>
+
+<template>
+	<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+				<tr>
+					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+						Period
+					</th>
+					<th scope="col" class="px-6 py-3">
+						Amount
+					</th>
+					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+						AvgPer100
+					</th>
+					<th scope="col" class="px-6 py-3">
+						Energy
+					</th>
+				</tr>
+				</thead>
+				<tbody>
+				{#each items as f}
+					<FoodComp item="{f}" />
+				{/each}
+				</tbody>
+			</table>
+		</div>
+		<div>
+		</div>
+	</div>
+</template>

src/lib/components/Food/FoodTable.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import EmptyFoodComp from '$components/EmptyFoodComp.svelte'
+	import FoodComp from '$components/Food/FoodComp.svelte'
+	import type { Food } from '$lib/database/food'
+
+	export let create: boolean = false
+	export let items: Food[] = []
+</script>
+
+<template>
+	<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+				<tr>
+					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+						Date
+					</th>
+					<th scope="col" class="px-6 py-3">
+						Food
+					</th>
+					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+						Description
+					</th>
+					<th scope="col" class="px-6 py-3">
+						Amount
+					</th>
+					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+						Cal Per 100
+					</th>
+					<th scope="col" class="px-6 py-3">
+						Energy
+					</th>
+				</tr>
+				</thead>
+				<tbody>
+				{#if create}
+					<EmptyFoodComp />
+				{/if}
+				{#each items as f}
+					<FoodComp item="{f}" />
+				{/each}
+				</tbody>
+			</table>
+		</div>
+		<div>
+		</div>
+	</div>
+</template>

src/lib/database/food.ts

@@ -12,6 +12,7 @@ export type Food = {
 }
 
 const columns = ['rowid', 'date', 'food', 'description', 'amount', 'per100', 'energy']
+const aggColumns = ['date', 'amount', 'avgPer100', 'energy']
 
 const FoodService = {
 	async GetAll() {
@@ -30,7 +31,6 @@ or strftime('%Y-%m-%d', date) = strftime('%Y-%m-%d', date('2024-06-12', '-1 day'
 order by date DESC;
 `, [date])
 	},
-	// TODO: Rework this to use Err in Go style
 	async Create(food: Food): Promise<[Food[], Err]> {
 		if (!food.food) return [[food], 'food.food is required']
 		if (!food.amount) throw [[food], 'food.amount is required']
@@ -39,7 +39,23 @@ order by date DESC;
 		const row = await db.select<Food[]>(`select ${columns.join(', ')} from food where rowid = $1`, [res.lastInsertId])
 
 		return [row, null]
-	}
+	},
+	async GetDaily(): Promise<[Food[], Err]> {
+		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from daily limit 100`)
+		return [rows, null]
+	},
+	async GetWeekly(): Promise<[Food[], Err]> {
+		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from weekly limit 100`)
+		return [rows, null]
+	},
+	async GetMonthly(): Promise<[Food[], Err]> {
+		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from monthly limit 100`)
+		return [rows, null]
+	},
+	async GetYearly(): Promise<[Food[], Err]> {
+		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from yearly limit 100`)
+		return [rows, null]
+	},
 }
 
 export { FoodService }

src/lib/router/Router.svelte

@@ -2,13 +2,11 @@
 	import Router from 'svelte-spa-router'
 
 	import Home from '$lib/router/routes/Home.svelte'
-	import IPC from '$lib/router/routes/IPC.svelte'
+	import Daily from '$router/routes/Daily.svelte'
-	import Versions from '$router/routes/Versions.svelte'
 
 	const routes = {
 		'/': Home,
-		'/#ipc': IPC,
+		'/daily': Daily
-		'/#versions': Versions
 	}
 </script>
 

src/lib/router/routes/Daily.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { type Food, FoodService } from '$lib/database/food'
+	import { onMount } from 'svelte'
+	import FoodTable from '$components/Food/FoodTable.svelte'
+
+	let foods: Food[] = []
+	onMount(async () => {
+		const [dbfoods, err] = await FoodService.GetDaily()
+		if (err) {
+			console.error(err)
+			return
+		}
+		foods = dbfoods
+	})
+</script>
+
+<template>
+	<FoodTable items="{foods}"/>
+</template>

src/lib/router/routes/Home.svelte

@@ -1,54 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
-	import { type Food, FoodService } from '$lib/database/food'
-	import FoodComp from '$components/FoodComp.svelte'
-	import EmptyFoodComp from '$components/EmptyFoodComp.svelte'
 	import { foodStore } from '$lib/store/foodStore'
-
+	import FoodTable from '$components/Food/FoodTable.svelte'
-	function newFood(event: CustomEvent<Food>) {
-		console.log(event)
-		foodStore.update((food) => {
-			food.push(event.detail)
-			return food
-		})
-	}
 </script>
 
 <template>
-	<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
+	<FoodTable items="{$foodStore}" create="true" />
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-				<tr>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
-						Date
-					</th>
-					<th scope="col" class="px-6 py-3">
-						Food
-					</th>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
-						Description
-					</th>
-					<th scope="col" class="px-6 py-3">
-						Amount
-					</th>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
-						Cal Per 100
-					</th>
-					<th scope="col" class="px-6 py-3">
-						Energy
-					</th>
-				</tr>
-				</thead>
-				<tbody>
-				<EmptyFoodComp/>
-				{#each $foodStore as f}
-					<FoodComp item="{f}" />
-				{/each}
-				</tbody>
-			</table>
-		</div>
-		<div>
-		</div>
-	</div>
 </template>