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

Implement weight components

Browse Source
This commit is contained in:
PhatPhuckDave
2024-08-09 23:40:31 +02:00
parent e8da257bf1
commit 2f161bed79
6 changed files with 68 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/Energy/EmptyFoodComp.svelte
View File

@@ -47,11 +47,7 @@
return; return;
} }
foodStore.update((value) => { foodStore.update((value) => [res.data, ...value]);
const updatedValue = [res.data, ...value];
console.log("Updated items:", updatedValue.length);
return updatedValue;
});
} }
if (!per100Edited) if (!per100Edited)

31
frontend/src/lib/components/Weight/EmptyWeightComp.svelte
View File

@@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import type { Err } from '$lib/types' import { main } from "$wails/models";
import { type Weight, WeightService } from '$lib/database/weight' import { CreateWeight } from '$wails/main/App';
import { weightStore } from '$lib/store/weight/weightStore' import { weightStore } from '$lib/store/Weight/weightStore';
import { RefreshStores } from '$lib/utils'
let item: Weight = { let item: main.Weight = {
weight: 0 weight: 0,
rowid: 0,
date: ''
} }
let weight: string | null = null let weight: string | null = null
@@ -18,14 +19,20 @@
event.preventDefault() event.preventDefault()
item.weight = parseFloat(weight) item.weight = parseFloat(weight)
const [dbRow, err]: [Weight, Err] = await WeightService.Create(item) if (isNaN(item.weight)) {
weight = '' toast.error('Weight must be a number')
if (err) {
toast.error(err)
return return
} }
RefreshStores() const res = await CreateWeight(item)
weight = ''
if (!res.success) {
toast.error(`failed to create weight with error ${res.error}`)
return
}
console.log("update");
weightStore.update((value) => [res.data, ...value]);
} }
} }
</script> </script>

30
frontend/src/lib/components/Weight/WeightComp.svelte
View File

@@ -1,34 +1,8 @@
<script lang="ts"> <script lang="ts">
import { type Weight, WeightService } from '$lib/database/weight' import { main } from "$wails/models";
export let item: Weight export let item: main.Weight
export let dateColor: string export let dateColor: string
let weight: string = item.weight.toString()
async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
if (event.key == 'Enter') {
event.preventDefault()
await updateItem()
}
}
async function focusOutUpdate() {
await updateItem()
}
async function updateItem() {
weight = weight.trim()
item.weight = weight
const [newItem, err] = await WeightService.Update(item)
if (newItem && !err) {
item = newItem
}
weight = item.weight
}
</script> </script>
<template> <template>

51
frontend/src/lib/components/Weight/WeightTable.svelte
View File

@@ -1,50 +1,45 @@
<script lang="ts"> <script lang="ts">
import { GenerateColor } from '$lib/utils' import { GenerateColor } from "$lib/utils";
import EmptyWeightComp from '$components/Weight/EmptyWeightComp.svelte' import EmptyWeightComp from "$components/Weight/EmptyWeightComp.svelte";
import WeightComp from '$components/Weight/WeightComp.svelte' import WeightComp from "$components/Weight/WeightComp.svelte";
import type { Weight } from '$lib/database/weight' import { main } from "$wails/models";
export let items: Weight[] = [] export let items: main.Weight[] = [];
const dateColors: Map<string, string> = new Map<string, string>() const dateColors: Map<string, string> = new Map<string, string>();
function getDateColor(item: Weight): string { function getDateColor(item: main.Weight): string {
if (!item) return GenerateColor() if (!item) return GenerateColor();
if (!item.date) return GenerateColor() if (!item.date) return GenerateColor();
const date = item.date.toString().split(' ')[0] const date = item.date.toString().split("T")[0];
if (!date) return GenerateColor() if (!date) return GenerateColor();
if (!dateColors.has(date)) dateColors.set(date, GenerateColor()) if (!dateColors.has(date)) dateColors.set(date, GenerateColor());
// THERE'S NOTHING UNDEFINED HERE // THERE'S NOTHING UNDEFINED HERE
// WE GOT RID OF UNDEFINED ON LINE 33 // WE GOT RID OF UNDEFINED ON LINE 33
// ASSHOLE // ASSHOLE
// @ts-ignore // @ts-ignore
return dateColors.get(date) return dateColors.get(date);
} }
</script> </script>
<template> <template>
<div class="relative flex flex-col flex-grow h-[95vh]" data-vaul-drawer-wrapper id="page"> <div class="relative flex flex-col flex-grow h-[93vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-auto h-full shadow-md sm:rounded-lg"> <div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> <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"> <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr> <tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> <th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
Date <th class="px-6 py-3 w-10/12" scope="col"> Weight </th>
</th> </tr>
<th class="px-6 py-3 w-10/12" scope="col">
Weight
</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<EmptyWeightComp /> <EmptyWeightComp />
{#each items as f} {#each items as f}
<WeightComp item="{f}" dateColor="{getDateColor(f)}" /> <WeightComp item={f} dateColor={getDateColor(f)} />
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<div> <div></div>
</div>
</div> </div>
</template> </template>

10
frontend/src/lib/router/Router.svelte
View File

@@ -5,6 +5,11 @@
import Weekly from './routes/Energy/Weekly.svelte' import Weekly from './routes/Energy/Weekly.svelte'
import Monthly from './routes/Energy/Monthly.svelte' import Monthly from './routes/Energy/Monthly.svelte'
import Yearly from './routes/Energy/Yearly.svelte' import Yearly from './routes/Energy/Yearly.svelte'
import Weight from './routes/Weight/Weight.svelte'
// import WDaily from './routes/Weight/WDaily.svelte'
// import WWeekly from './routes/Weight/WWeekly.svelte'
// import WMonthly from './routes/Weight/WMonthly.svelte'
// import WYearly from './routes/Weight/WYearly.svelte'
const routes = { const routes = {
'/': Energy, '/': Energy,
@@ -12,6 +17,11 @@
'/Energy/weekly': Weekly, '/Energy/weekly': Weekly,
'/Energy/monthly': Monthly, '/Energy/monthly': Monthly,
'/Energy/yearly': Yearly, '/Energy/yearly': Yearly,
'/Weight': Weight,
// '/Weight/daily': WDaily,
// '/Weight/weekly': WWeekly,
// '/Weight/monthly': WMonthly,
// '/Weight/yearly': WYearly
} }
</script> </script>

16
frontend/src/lib/router/routes/Weight/Weight.svelte
View File

@@ -1,8 +1,18 @@
<script lang="ts"> <script lang="ts">
import WeightTable from '$components/Weight/WeightTable.svelte' import WeightTable from "$components/Weight/WeightTable.svelte";
import { weightStore } from '$lib/store/weight/weightStore' import { weightStore } from "$lib/store/Weight/weightStore";
let forceUpdate = false;
weightStore.subscribe(() => {
console.log("updte");
forceUpdate = !forceUpdate;
});
</script> </script>
<template> <template>
<WeightTable items="{$weightStore}" /> {#if forceUpdate}
<WeightTable items={$weightStore} />
{:else}
<WeightTable items={$weightStore} />
{/if}
</template> </template>