Refactor routing

src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Line } from 'svelte-chartjs'
 	import type { AggregatedFood } from '$lib/database/food'
-	import AggregatedFoodComp from '$components/AggregatedFood/AggregatedFoodComp.svelte'
+	import AggregatedFoodComp from '$components/Energy/AggregatedFood/AggregatedFoodComp.svelte'
 	import type { ChartData, Point } from 'chart.js'
 	import {
 		CategoryScale,

src/lib/components/Energy/Food/EmptyFoodComp.svelte

@@ -2,7 +2,7 @@
 	import { type Food, FoodService } from '$lib/database/food'
 	import { toast } from 'svelte-sonner'
 	import type { Err } from '$lib/types'
-	import { foodStore } from '$lib/store/foodStore'
+	import { foodStore } from '$lib/store/energy/foodStore'
 
 	let item: Food = {
 		food: '',

src/lib/components/Energy/Food/FoodTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import EmptyFoodComp from '$components/Food/EmptyFoodComp.svelte'
+	import EmptyFoodComp from '$components/Energy/Food/EmptyFoodComp.svelte'
-	import FoodComp from '$components/Food/FoodComp.svelte'
+	import FoodComp from '$components/Energy/Food/FoodComp.svelte'
 	import type { Food } from '$lib/database/food'
 	import { GenerateColor } from '$lib/utils'
 

src/lib/components/Header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { appWindow } from '@tauri-apps/api/window'
 	import { faWindowMinimize, faXmark } from '@fortawesome/free-solid-svg-icons'
-	import { faGithub } from '@fortawesome/free-brands-svg-icons'
 	import Fa from 'svelte-fa'
 	import { link, location } from 'svelte-spa-router'
 	import { Button } from '$components/ui/button'
@@ -10,7 +9,7 @@
 	import { cn } from '$lib/utils'
 	import { dbStateStore } from '$lib/store/dbState'
 	import { DBService } from '$lib/database'
-	import { lookbackDaysStore } from '$lib/store/lookbackDaysStore'
+	import { lookbackDaysStore } from '$lib/store/energy/lookbackDaysStore'
 
 	Fa
 
@@ -18,36 +17,47 @@
 	type Link = {
 		label: string
 		href: string
+		base: string?
 	}
-	const links: Link[] = [
+	let sublinks: Link[] = [
-		{
-			label: 'Home',
-			href: '/'
-		},
 		{
 			label: 'Daily',
-			href: '/daily'
+			href: '/daily',
+			base: '/daily'
 		},
 		{
 			label: 'Weekly',
-			href: '/weekly'
+			href: '/weekly',
+			base: '/weekly'
 		},
 		{
 			label: 'Monthly',
-			href: '/monthly'
+			href: '/monthly',
+			base: '/monthly'
 		},
 		{
 			label: 'Yearly',
-			href: '/yearly'
+			href: '/yearly',
+			base: '/yearly'
 		}
 	]
+
+	let selected = 'Energy'
+	$: {
+		console.log('update')
+		sublinks = sublinks.map((sublink: Link) => {
+			return {
+				...sublink,
+				href: `/${selected}${sublink.base}`
+			}
+		})
+	}
 </script>
 
 <header
-	class="flex h-14 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
+	class="flex h-22 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
    border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
-	data-tauri-drag-region
+	data-tauri-drag-region>
->
 	<Button class="ml-2" on:click={toggleMode} size="icon" variant="outline">
 		<Sun
 			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
@@ -58,38 +68,40 @@
 		<span class="sr-only">Toggle theme</span>
 	</Button>
 
-	<nav
+	<div>
-		class="flex space-x-4 text-xl font-bold select-none"
+		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
-		on:dragstart|preventDefault
-	>
 			<div class="cursor-pointer" class:text-amber-500="{$dbStateStore.transacting}" on:click={DBService.Begin}>T
 			</div>
 			<div class="cursor-pointer" class:text-emerald-600={$dbStateStore.transacting} on:click={DBService.Commit}>C
 			</div>
-		<div class="cursor-pointer" class:text-red-700={$dbStateStore.transacting} on:click={DBService.Rollback}>R</div>
+			<div class="cursor-pointer" class:text-red-700={$dbStateStore.transacting} on:click={DBService.Rollback}>R
+			</div>
 			<div contenteditable="true" bind:innerText={$lookbackDaysStore}></div>
-		{#each links as { href, label }}
+			<a use:link
-			<a
+			   class={cn(
-				use:link
+				'transition-colors hover:text-foreground/80',
+				"/" === $location ? '' : 'text-foreground/60')}
+			   href="/"
+			   on:click={e => selected = 'Energy'}>Energy</a>
+			<a use:link
+			   class={cn(
+				'transition-colors hover:text-foreground/80',
+				"/Weight" === $location ? '' : 'text-foreground/60')}
+			   href="/Weight"
+			   on:click={e => selected = 'Weight'}>Weight</a>
+		</nav>
+		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+			{#each sublinks as { label, href }}
+				<a use:link
 				   {href}
 				   class={cn(
 			          'transition-colors hover:text-foreground/80',
-          href === $location ? '' : 'text-foreground/60'
+			          href === $location ? '' : 'text-foreground/60')}>{label}</a>
-        )}>{label}</a
-			>
 			{/each}
 		</nav>
+	</div>
 
 	<div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
-		<a
-			class="flex items-center hover:text-secondary"
-			href="https://github.com/Fractal-Tess/Svelte-Tauri"
-			on:dragstart|preventDefault
-			rel="noreferrer noopener"
-			target="_blank"
-		>
-			<Fa icon={faGithub} size="lg" />
-		</a>
 		<button class="text-xl hover:text-secondary" on:click={appWindow.minimize}>
 			<Fa icon={faWindowMinimize} />
 		</button>

src/lib/database/food.ts

@@ -1,6 +1,6 @@
 import { db } from '$lib/database'
 import type { Err } from '$lib/types'
-import { lookbackDaysStore } from '$lib/store/lookbackDaysStore'
+import { lookbackDaysStore } from '$lib/store/energy/lookbackDaysStore'
 import { get } from 'svelte/store'
 
 export type Food = {

src/lib/database/weight.ts

@@ -0,0 +1,77 @@
+import { db } from '$lib/database'
+import type { Err } from '$lib/types'
+import { lookbackDaysStore } from '$lib/store/energy/lookbackDaysStore'
+import { get } from 'svelte/store'
+
+export type Weight = {
+	rowid?: number,
+	date?: Date,
+	weight: string,
+}
+export type AggregatedWeight = {
+	period: string,
+	amount: number,
+}
+
+const columns = ['rowid', 'date', 'weight']
+const aggColumns = ['period', 'amount']
+
+const FoodService = {
+	async GetAll() {
+		return await db.select<Weight[]>(`
+select ${columns.join(', ')}
+from food
+order by date desc
+		`)
+	},
+	async GetRecent() {
+		return await db.select<Weight[]>(`
+select ${columns.join(', ')}
+from weightView
+where date > datetime('now', "-${get(lookbackDaysStore)} days")
+order by date DESC;
+`)
+	},
+	async Create(entry: Weight): Promise<[Weight, Err]> {
+		if (!entry.weight) return [entry, 'entry.weight is required']
+
+		const res = await db.execute(`insert into weight (weight) values ($1)`, [entry.weight])
+		const rows = await db.select<Weight[]>(`select ${columns.join(', ')} from weightView where rowid = $1`, [res.lastInsertId])
+
+		if (!rows) return [entry, 'no data found']
+		if (rows.length == 0) return [entry, 'no data found']
+		// Its not undefined mannnnnnnnnnnnnnnnnnnnnnnnnn............
+		// @ts-ignore
+		return [rows[0], null]
+	},
+	async GetDaily(): Promise<[AggregatedWeight[], Err]> {
+		const rows = await db.select<AggregatedWeight[]>(`select ${aggColumns.join(', ')} from weightDaily limit 100`)
+		return [rows, null]
+	},
+	async GetWeekly(): Promise<[AggregatedWeight[], Err]> {
+		const rows = await db.select<AggregatedWeight[]>(`select ${aggColumns.join(', ')} from weightWeekly limit 100`)
+		return [rows, null]
+	},
+	async GetMonthly(): Promise<[AggregatedWeight[], Err]> {
+		const rows = await db.select<AggregatedWeight[]>(`select ${aggColumns.join(', ')} from weightMonthly limit 100`)
+		return [rows, null]
+	},
+	async GetYearly(): Promise<[AggregatedWeight[], Err]> {
+		const rows = await db.select<AggregatedWeight[]>(`select ${aggColumns.join(', ')} from weightYearly limit 100`)
+		return [rows, null]
+	},
+	async Update(entry: Weight): Promise<[Weight, Err]> {
+		await db.execute(`
+update weight set
+weight = $1,
+where rowid = $2
+		`, [entry.weight, entry.rowid])
+		const res = await db.select<Weight[]>(`select ${columns.join(', ')} from weightView where rowid = $1`, [entry.rowid])
+		if (!res) return [entry, 'no data found']
+		if (res.length == 0) return [entry, 'no data found']
+		if (!res[0]) return [entry, 'no data found']
+		return [res[0], null]
+	}
+}
+
+export { FoodService }

src/lib/router/Router.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
 	import Router from 'svelte-spa-router'
-
+	import Daily from '$router/routes/Energy/Daily.svelte'
-	import Home from '$lib/router/routes/Home.svelte'
+	import Weekly from '$router/routes/Energy/Weekly.svelte'
-	import Daily from '$router/routes/Daily.svelte'
+	import Monthly from '$router/routes/Energy/Monthly.svelte'
-	import Weekly from '$router/routes/Weekly.svelte'
+	import Yearly from '$router/routes/Energy/Yearly.svelte'
-	import Monthly from '$router/routes/Monthly.svelte'
+	import Energy from '$router/routes/Energy/Energy.svelte'
-	import Yearly from '$router/routes/Yearly.svelte'
 
 	const routes = {
-		'/': Home,
+		'/': Energy,
-		'/daily': Daily,
+		'/Energy/daily': Daily,
-		'/weekly': Weekly,
+		'/Energy/weekly': Weekly,
-		'/monthly': Monthly,
+		'/Energy/monthly': Monthly,
-		'/yearly': Yearly
+		'/Energy/yearly': Yearly
 	}
 </script>
 

src/lib/router/routes/Daily.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
-	import { dailyFoodStore } from '$lib/store/dailyFoodStore'
-	import { energyStore } from '$lib/store/energyStore'
-</script>
-
-<template>
-	<AggregatedFoodTable items="{$dailyFoodStore}"
-	                     energyLimit="{$energyStore.limit}"
-	                     energyTarget="{$energyStore.target}" />
-</template>

src/lib/router/routes/Energy/Daily.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
+	import { dailyFoodStore } from '$lib/store/energy/dailyFoodStore'
+	import { energyStore } from '$lib/store/energy/energyStore'
+</script>
+
+<template>
+	<AggregatedFoodTable items="{$dailyFoodStore}"
+	                     energyLimit="{$energyStore.limit}"
+	                     energyTarget="{$energyStore.target}" />
+</template>

src/lib/router/routes/Energy/Energy.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { foodStore } from '$lib/store/energy/foodStore'
+	import FoodTable from '$components/Energy/Food/FoodTable.svelte'
+	import { lookbackDaysStore } from '$lib/store/energy/lookbackDaysStore'
+	// @ts-ignore
+	lookbackDaysStore.subscribe((n) => foodStore.refresh())
+</script>
+
+<template>
+	<FoodTable items="{$foodStore}" />
+</template>

src/lib/router/routes/Energy/Monthly.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
+	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { monthlyFoodStore } from '$lib/store/monthlyFoodStore'
+	import { monthlyFoodStore } from '$lib/store/energy/monthlyFoodStore'
-	import { energyStore } from '$lib/store/energyStore'
+	import { energyStore } from '$lib/store/energy/energyStore'
 </script>
 
 <template>

src/lib/router/routes/Energy/Weekly.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
+	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { energyStore } from '$lib/store/energyStore'
+	import { energyStore } from '$lib/store/energy/energyStore'
-	import { weeklyFoodStore } from '$lib/store/weeklyFoodStore'
+	import { weeklyFoodStore } from '$lib/store/energy/weeklyFoodStore'
 </script>
 
 <template>

src/lib/router/routes/Energy/Yearly.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
+	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { yearlyFoodStore } from '$lib/store/yearlyFoodStore'
+	import { yearlyFoodStore } from '$lib/store/energy/yearlyFoodStore'
-	import { energyStore } from '$lib/store/energyStore'
+	import { energyStore } from '$lib/store/energy/energyStore'
 </script>
 
 <template>

src/lib/router/routes/Home.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { foodStore } from '$lib/store/foodStore'
-	import FoodTable from '$components/Food/FoodTable.svelte'
-	import { lookbackDaysStore } from '$lib/store/lookbackDaysStore'
-	// @ts-ignore
-	lookbackDaysStore.subscribe((n) => foodStore.refresh())
-</script>
-
-<template>
-	<FoodTable items="{$foodStore}" />
-</template>