Code format

src/lib/components/AggregatedFood/AggregatedFoodComp.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { AggregatedFood } from '$lib/database/food'
+
+	export let item: AggregatedFood
+</script>
+
+<template>
+	<tr class="border-b border-gray-200 dark:border-gray-700">
+		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+		    scope="row">
+			{item.date}
+		</th>
+		<td class="px-6 py-4">
+			{item.amount}
+		</td>
+		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
+			{item.avgPer100}
+		</td>
+		<td class="px-6 py-4">
+			{item.energy}
+		</td>
+	</tr>
+</template>

src/lib/components/AggregatedFood/AggregatedFoodTable.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 
-	import FoodComp from '$components/Food/FoodComp.svelte'
+	import type { AggregatedFood } from '$lib/database/food'
-	import type { Food } from '$lib/database/food'
+	import AggregatedFoodComp from '$components/AggregatedFood/AggregatedFoodComp.svelte'
 
-	export let items: Food[] = []
+	export let items: AggregatedFood[] = []
 </script>
 
 <template>
@@ -12,23 +12,23 @@
 			<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">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
 						Period
 					</th>
-					<th scope="col" class="px-6 py-3">
+					<th class="px-6 py-3" scope="col">
 						Amount
 					</th>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
 						AvgPer100
 					</th>
-					<th scope="col" class="px-6 py-3">
+					<th class="px-6 py-3" scope="col">
 						Energy
 					</th>
 				</tr>
 				</thead>
 				<tbody>
 				{#each items as f}
-					<FoodComp item="{f}" />
+					<AggregatedFoodComp item="{f}" />
 				{/each}
 				</tbody>
 			</table>

src/lib/components/EmptyFoodComp.svelte

@@ -45,18 +45,18 @@
 		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
 		    scope="row">
 		</th>
-		<td class="px-6 py-4"
+		<td bind:innerText={name}
-		    bind:innerText={name}
+		    class="px-6 py-4"
 		    contenteditable="true"
 		    on:keyup={update}>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		<td bind:innerText={description}
-		    bind:innerText={description}
+		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
 		    contenteditable="true"
 		    on:keyup={update}>
 		</td>
-		<td class="px-6 py-4"
+		<td bind:innerText={amount}
-		    bind:innerText={amount}
+		    class="px-6 py-4"
 		    contenteditable="true"
 		    on:keyup={update}>
 		</td>

src/lib/components/Food/FoodComp.svelte

@@ -8,8 +8,8 @@
 
 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700">
-		<th scope="row"
+		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
+		    scope="row">
 			{item.date}
 		</th>
 		<td class="px-6 py-4">

src/lib/components/Food/FoodTable.svelte

@@ -13,22 +13,22 @@
 			<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">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
 						Date
 					</th>
-					<th scope="col" class="px-6 py-3">
+					<th class="px-6 py-3" scope="col">
 						Food
 					</th>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
 						Description
 					</th>
-					<th scope="col" class="px-6 py-3">
+					<th class="px-6 py-3" scope="col">
 						Amount
 					</th>
-					<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
 						Cal Per 100
 					</th>
-					<th scope="col" class="px-6 py-3">
+					<th class="px-6 py-3" scope="col">
 						Energy
 					</th>
 				</tr>

src/lib/components/Header.svelte

@@ -31,11 +31,11 @@
 </script>
 
 <header
-	data-tauri-drag-region
 	class="flex h-14 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
 >
-	<Button on:click={toggleMode} size="icon" variant="outline" class="ml-2">
+	<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"
 		/>
@@ -49,11 +49,11 @@
 		class="flex space-x-4 text-xl font-bold select-none"
 		on:dragstart|preventDefault
 	>
-		<div class:text-amber-500="{$dbStateStore.transacting}" on:click={DBService.Begin} class="cursor-pointer">T
+		<div class="cursor-pointer" class:text-amber-500="{$dbStateStore.transacting}" on:click={DBService.Begin}>T
 		</div>
-		<div class:text-emerald-600={$dbStateStore.transacting} on:click={DBService.Commit} class="cursor-pointer">C
+		<div class="cursor-pointer" class:text-emerald-600={$dbStateStore.transacting} on:click={DBService.Commit}>C
 		</div>
-		<div class:text-red-700={$dbStateStore.transacting} on:click={DBService.Rollback} class="cursor-pointer">R</div>
+		<div class="cursor-pointer" class:text-red-700={$dbStateStore.transacting} on:click={DBService.Rollback}>R</div>
 		{#each links as { href, label }}
 			<a
 				use:link
@@ -68,18 +68,18 @@
 
 	<div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
 		<a
-			on:dragstart|preventDefault
-			target="_blank"
-			href="https://github.com/Fractal-Tess/Svelte-Tauri"
 			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 on:click={appWindow.minimize} class="text-xl hover:text-secondary">
+		<button class="text-xl hover:text-secondary" on:click={appWindow.minimize}>
 			<Fa icon={faWindowMinimize} />
 		</button>
-		<button on:click={appWindow.close} class="text-2xl hover:text-secondary">
+		<button class="text-2xl hover:text-secondary" on:click={appWindow.close}>
 			<Fa icon={faXmark} />
 		</button>
 	</div>

src/lib/components/IPC/CallTauri.svelte

@@ -4,13 +4,15 @@
 	import { cn } from '$lib/utils'
 
 	let message = ''
+
 	async function callTauri() {
 		message = await helloTauri()
 	}
 </script>
 
-<Button variant="outline" class="px-8 py-6" on:click={callTauri}
+<Button class="px-8 py-6" on:click={callTauri} variant="outline"
-  >Call Tauri</Button
+>Call Tauri
+</Button
 >
 
 <p

src/lib/components/IPC/HashString.svelte

@@ -13,12 +13,12 @@
 	<div class="flex flex-col w-full max-w-sm gap-1.5">
 		<Label for="hash">Hash string</Label>
 		<Input
-      placeholder="String to hash"
-      id="hash"
 			bind:value={hashInput}
-      type="text"
 			class="input-bordered input-secondary input focus:border-secondary
     focus:outline-none focus:ring-secondary"
+			id="hash"
+			placeholder="String to hash"
+			type="text"
 		/>
 	</div>
 	<code class="border border-border rounded-md px-2 py-1 text-sm"

src/lib/components/IPC/KeyValuePair.svelte

@@ -41,12 +41,12 @@
 	<div class="flex gap-4">
 		<div class="flex-1 flex-col gap-y-2 flex">
 			<Label for="key">Key</Label>
-      <Input id="key" bind:value={key} />
+			<Input bind:value={key} id="key" />
 		</div>
 
 		<div class="flex-1 flex-col gap-y-2 flex">
 			<Label for="val">Value</Label>
-      <Input id="val" bind:value={val} />
+			<Input bind:value={val} id="val" />
 		</div>
 	</div>
 	<div class="flex w-full gap-4">

src/lib/database/food.ts

@@ -11,6 +11,13 @@ export type Food = {
 	energy?: number,
 }
 
+export type AggregatedFood = {
+	date: Date,
+	amount: number,
+	avgPer100: number,
+	energy: number,
+}
+
 const columns = ['rowid', 'date', 'food', 'description', 'amount', 'per100', 'energy']
 const aggColumns = ['date', 'amount', 'avgPer100', 'energy']
 
@@ -40,22 +47,22 @@ order by date DESC;
 
 		return [row, null]
 	},
-	async GetDaily(): Promise<[Food[], Err]> {
+	async GetDaily(): Promise<[AggregatedFood[], Err]> {
-		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from daily limit 100`)
+		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from daily limit 100`)
 		return [rows, null]
 	},
-	async GetWeekly(): Promise<[Food[], Err]> {
+	async GetWeekly(): Promise<[AggregatedFood[], Err]> {
-		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from weekly limit 100`)
+		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from weekly limit 100`)
 		return [rows, null]
 	},
-	async GetMonthly(): Promise<[Food[], Err]> {
+	async GetMonthly(): Promise<[AggregatedFood[], Err]> {
-		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from monthly limit 100`)
+		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from monthly limit 100`)
 		return [rows, null]
 	},
-	async GetYearly(): Promise<[Food[], Err]> {
+	async GetYearly(): Promise<[AggregatedFood[], Err]> {
-		const rows = await db.select<Food[]>(`select ${aggColumns.join(', ')} from yearly limit 100`)
+		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from yearly limit 100`)
 		return [rows, null]
-	},
+	}
 }
 
 export { FoodService }

src/lib/ipc.ts

@@ -8,22 +8,20 @@ declare global {
 }
 
 // Function avoids 'window not defined' in SSR
-const invoke = () => window.__TAURI_INVOKE__;
+const invoke = () => window.__TAURI_INVOKE__
 
 export function helloTauri() {
-    return invoke()<string>("hello_tauri")
+	return invoke()<string>('hello_tauri')
 }
 
 export function hash256sum(hashInput: string) {
-    return invoke()<string>("hash256sum", { hashInput })
+	return invoke()<string>('hash256sum', { hashInput })
 }
 
 export function storeSetKey(key: string, value: string) {
-    return invoke()<null>("store_set_key", { key,value })
+	return invoke()<null>('store_set_key', { key, value })
 }
 
 export function storeReadKey(key: string) {
-    return invoke()<string | null>("store_read_key", { key })
+	return invoke()<string | null>('store_read_key', { key })
 }
-
-

src/lib/router/routes/Daily.svelte

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

src/lib/router/routes/Home.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <template>
-	<FoodTable items="{$foodStore}" create="true" />
+	<FoodTable create="true" items="{$foodStore}" />
 </template>