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

Add other old components

Browse Source
This commit is contained in:
PhatPhuckDave
2024-08-09 19:52:16 +02:00
parent 27f8d2bd29
commit 715bc984be
4 changed files with 60 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/lib/components/Energy/Energy.svelte
View File

@@ -1,9 +1,8 @@
<script lang="ts"> <script lang="ts">
import { foodStore } from "$lib/store/FoodStore"; import { foodStore } from "$lib/store/FoodStore";
import FoodTable from "./Food/FoodTable.svelte";
</script> </script>
<template> <template>
{#each $foodStore as f} <FoodTable items={$foodStore} />
<div>{f.food}</div>
{/each}
</template> </template>

4
frontend/src/lib/components/Energy/Food/EmptyFoodComp.svelte
View File

@@ -1,4 +1,4 @@
<script lang="ts"> <!-- <script lang="ts">
import { type Food, FoodService } from '$lib/database/food' import { type Food, FoodService } from '$lib/database/food'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import type { Err } from '$lib/types' import type { Err } from '$lib/types'
@@ -92,4 +92,4 @@
on:keydown={update}> on:keydown={update}>
</td> </td>
</tr> </tr>
</template> </template> -->

15
frontend/src/lib/components/Energy/Food/FoodComp.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { type Food, FoodService } from '$lib/database/food' import { UpdateFood } from '$wails/main/App';
import {main} from '$wails/models'
import { toast } from 'svelte-sonner'
export let item: Food export let item: main.Food
export let energyColor: string export let energyColor: string
export let nameColor: string export let nameColor: string
export let dateColor: string export let dateColor: string
@@ -33,10 +35,11 @@
item.amount = parseInt(amount) item.amount = parseInt(amount)
item.per100 = parseInt(per100) item.per100 = parseInt(per100)
const [newItem, err] = await FoodService.Update(item) const res = await UpdateFood(item)
if (!res.success) {
if (newItem && !err) { toast.error(`failed to update food item with error ${res.error}`)
item = newItem } else {
item = res.data
} }
name = item.food name = item.food
description = item.description ?? '' description = item.description ?? ''

107
frontend/src/lib/components/Energy/Food/FoodTable.svelte
View File

@@ -1,57 +1,57 @@
<script lang="ts"> <script lang="ts">
import EmptyFoodComp from '$components/Energy/Food/EmptyFoodComp.svelte' import EmptyFoodComp from "$components/Energy/Food/EmptyFoodComp.svelte";
import FoodComp from '$components/Energy/Food/FoodComp.svelte' import FoodComp from "$components/Energy/Food/FoodComp.svelte";
import type { Food } from '$lib/database/food' import { GenerateColor } from "$lib/utils";
import { GenerateColor } from '$lib/utils' import { main } from "$wails/models";
export let items: Food[] = [] export let items: main.Food[] = [];
let minCal = 1e5 let minCal = 1e5;
let maxCal = 0 let maxCal = 0;
for (let item of items) { for (let item of items) {
if (!item.energy) continue if (!item.energy) continue;
if (item.energy > maxCal) maxCal = item.energy if (item.energy > maxCal) maxCal = item.energy;
if (item.energy < minCal) minCal = item.energy if (item.energy < minCal) minCal = item.energy;
} }
const start = '#99ff99' const start = "#99ff99";
const end = '#ff9999' const end = "#ff9999";
function lerp(item: Food) { function lerp(item: main.Food) {
if (!item) return start if (!item) return start;
if (!item.energy) return start if (!item.energy) return start;
const t = (item.energy - minCal) / (maxCal - minCal) const t = (item.energy - minCal) / (maxCal - minCal);
const r = parseInt(start.slice(1, 3), 16) * (1 - t) + parseInt(end.slice(1, 3), 16) * t const r = parseInt(start.slice(1, 3), 16) * (1 - t) + parseInt(end.slice(1, 3), 16) * t;
const g = parseInt(start.slice(3, 5), 16) * (1 - t) + parseInt(end.slice(3, 5), 16) * t const g = parseInt(start.slice(3, 5), 16) * (1 - t) + parseInt(end.slice(3, 5), 16) * t;
const b = parseInt(start.slice(5, 7), 16) * (1 - t) + parseInt(end.slice(5, 7), 16) * t const b = parseInt(start.slice(5, 7), 16) * (1 - t) + parseInt(end.slice(5, 7), 16) * t;
return `rgb(${r}, ${g}, ${b})` return `rgb(${r}, ${g}, ${b})`;
} }
const itemColors: Map<string, string> = new Map<string, string>() const itemColors: Map<string, string> = new Map<string, string>();
function getNameColor(item: Food): string { function getNameColor(item: main.Food): string {
if (!item) return GenerateColor() if (!item) return GenerateColor();
if (!item.food) return GenerateColor() if (!item.food) return GenerateColor();
if (!itemColors.has(item.food)) itemColors.set(item.food, GenerateColor()) if (!itemColors.has(item.food)) itemColors.set(item.food, 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 itemColors.get(item.food) return itemColors.get(item.food);
} }
const dateColors: Map<string, string> = new Map<string, string>() const dateColors: Map<string, string> = new Map<string, string>();
function getDateColor(item: Food): string { function getDateColor(item: main.Food): 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(" ")[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>
@@ -60,36 +60,23 @@
<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-3/12" scope="col"> Food </th>
</th> <th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col"> Description </th>
<th class="px-6 py-3 w-3/12" scope="col"> <th class="px-6 py-3 w-1/12" scope="col"> Amount </th>
Food <th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col"> Cal Per 100 </th>
</th> <th class="px-6 py-3 w-1/12" scope="col"> Energy </th>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col"> </tr>
Description
</th>
<th class="px-6 py-3 w-1/12" scope="col">
Amount
</th>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col">
Cal Per 100
</th>
<th class="px-6 py-3 w-1/12" scope="col">
Energy
</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<EmptyFoodComp /> <EmptyFoodComp />
{#each items as f} {#each items as f}
<FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" /> <FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" />
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<div> <div></div>
</div>
</div> </div>
</template> </template>