dave/calorie-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor & add aggregated entries

Browse Source
This commit is contained in:
David Majdandžić
2024-06-12 10:06:54 +02:00
parent a7d76a1f14
commit 5b28ea62b1
7 changed files with 129 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/components/AggregatedFood/AggregatedFoodTable.svelte Normal file
View File

@@ -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>

0
src/lib/components/FoodComp.svelte → src/lib/components/Food/FoodComp.svelte
View File

49
src/lib/components/Food/FoodTable.svelte Normal file
View File

@@ -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>

20
src/lib/database/food.ts
View File

@@ -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 }

6
src/lib/router/Router.svelte
View File

@@ -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 Versions from '$router/routes/Versions.svelte'
import Daily from '$router/routes/Daily.svelte'
const routes = {
'/': Home,
'/#ipc': IPC,
'/#versions': Versions
'/daily': Daily
}
</script>

19
src/lib/router/routes/Daily.svelte Normal file
View File

@@ -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>

50
src/lib/router/routes/Home.svelte
View File

@@ -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'
function newFood(event: CustomEvent<Food>) {
console.log(event)
foodStore.update((food) => {
food.push(event.detail)
return food
})
}
import FoodTable from '$components/Food/FoodTable.svelte'
</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>
<EmptyFoodComp/>
{#each $foodStore as f}
<FoodComp item="{f}" />
{/each}
</tbody>
</table>
</div>
<div>
</div>
</div>
<FoodTable items="{$foodStore}" create="true" />
</template>