Add routes for daily weekly and the rest

frontend/src/lib/components/Energy/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.period}
+		</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>

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { Line } from 'svelte-chartjs'
+	import type { AggregatedFood } from '$lib/database/food'
+	import AggregatedFoodComp from '$components/Energy/AggregatedFood/AggregatedFoodComp.svelte'
+	import type { ChartData, Point } from 'chart.js'
+	import {
+		CategoryScale,
+		Chart as ChartJS,
+		Legend,
+		LinearScale,
+		LineElement,
+		PointElement,
+		Title,
+		Tooltip
+	} from 'chart.js'
+
+	ChartJS.register(
+		Title,
+		Tooltip,
+		Legend,
+		LineElement,
+		LinearScale,
+		PointElement,
+		CategoryScale
+	)
+
+	export let items: AggregatedFood[] = []
+	export let energyTarget: number = 2000
+	export let energyLimit: number = 2500
+	let reversedItems = items.slice().reverse()
+
+	const defaultOptions = {
+		backgroundColor: 'rgba(225, 204,230, .3)',
+		borderColor: 'rgb(205, 130, 158)',
+		pointBorderColor: 'rgb(205, 130, 158)',
+		pointBackgroundColor: 'rgb(255, 255, 255)',
+		pointBorderWidth: 10,
+		pointHoverRadius: 5,
+		pointHoverBackgroundColor: 'rgb(0, 157, 123)',
+		pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+		pointHoverBorderWidth: 2,
+		pointRadius: 1,
+		pointHitRadius: 10
+	}
+	const data: ChartData<'line', (number | Point)[]> = {
+		labels: reversedItems.map(f => f.period),
+		datasets: [
+			{
+				...defaultOptions,
+				label: 'Amount',
+				data: reversedItems.map(f => f.amount),
+				borderColor: '#ff4dff',
+				pointBorderColor: '#ff4dff',
+			},
+			{
+				...defaultOptions,
+				label: 'AvgPer100',
+				data: reversedItems.map(f => f.avgPer100),
+				borderColor: '#ffb84d',
+				pointBorderColor: '#ffb84d',
+			},
+			{
+				...defaultOptions,
+				label: 'Energy',
+				data: reversedItems.map(f => f.energy),
+				borderColor: '#b8ff4d',
+				pointBorderColor: '#b8ff4d',
+			},
+			{
+				...defaultOptions,
+				label: 'Target',
+				data: reversedItems.map(f => energyTarget),
+				borderColor: '#00ff00',
+				pointBorderColor: '#00ff00',
+			},
+			{
+				...defaultOptions,
+				label: 'Limit',
+				data: reversedItems.map(f => energyLimit),
+				borderColor: '#ff0000',
+				pointBorderColor: '#ff0000',
+			}
+		]
+	}
+</script>
+
+<template>
+	<Line data="{data}" class="max-h-[50vh] h-[50vh]" />
+	<div class="relative flex flex-col h-[43vh]" 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 class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
+						Period
+					</th>
+					<th class="px-6 py-3" scope="col">
+						Amount
+					</th>
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+						AvgPer100
+					</th>
+					<th class="px-6 py-3" scope="col">
+						Energy
+					</th>
+				</tr>
+				</thead>
+				<tbody>
+				{#each items as f}
+					<AggregatedFoodComp item="{f}" />
+				{/each}
+				</tbody>
+			</table>
+		</div>
+		<div>
+		</div>
+	</div>
+</template>

frontend/src/lib/components/Energy/Energy.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { foodStore } from "$lib/store/FoodStore";
-	import FoodTable from "./Food/FoodTable.svelte";
-
-	// Fuck this hacky shit
-	// Svelte won't re-render FoodTable when using the store directly
-	// It won't do it when using a variable and subscribing to the store
-	// It won't do it when reassigning the store
-	// Not when pushing unshifting the store
-	// This is the only thing that works
-	// Hacky ass shit
-    let forceUpdate = false;
-    foodStore.subscribe(() => {
-        forceUpdate = !forceUpdate;
-    });
-</script>
-
-<template>
-    {#if forceUpdate}
-        <FoodTable items={$foodStore} />
-    {:else}
-        <FoodTable items={$foodStore} />
-    {/if}
-</template>

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

@@ -2,7 +2,7 @@
 	import { toast } from "svelte-sonner";
 	import { main } from "$wails/models";
 	import { CreateFood, GetLastPer100 } from "$wails/main/App";
-	import { foodStore } from "$lib/store/FoodStore";
+	import { foodStore } from "$lib/store/Energy/foodStore";
 
 	let item: main.Food = {
 		food: "",