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

Make it not look like such dogshit

Browse Source
This commit is contained in:
PhatPhuckDave
2024-11-08 10:21:17 +01:00
parent cb0d8860ed
commit 31c7b31e65
9 changed files with 194 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
View File

@@ -24,17 +24,18 @@
let reversedItems = items.slice().reverse(); let reversedItems = items.slice().reverse();
const defaultOptions = { const defaultOptions = {
backgroundColor: "rgba(225, 204,230, .3)", backgroundColor: "rgba(59, 130, 246, 0.1)",
borderColor: "rgb(205, 130, 158)", borderColor: "rgb(59, 130, 246)",
pointBorderColor: "rgb(205, 130, 158)", pointBorderColor: "rgb(59, 130, 246)",
pointBackgroundColor: "rgb(255, 255, 255)", pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10, pointBorderWidth: 2,
pointHoverRadius: 5, pointHoverRadius: 6,
pointHoverBackgroundColor: "rgb(0, 157, 123)", pointHoverBackgroundColor: "rgb(59, 130, 246)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)", pointHoverBorderColor: "rgb(255, 255, 255)",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 3,
pointHitRadius: 20, pointHitRadius: 20,
tension: 0.4,
}; };
const data: ChartData<"line", (number | Point)[]> = { const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map((f) => f.period), labels: reversedItems.map((f) => f.period),
@@ -87,25 +88,70 @@
</script> </script>
<template> <template>
<Line {data} class="max-h-[50vh] h-[50vh]" /> <div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page"> <div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg"> <Line {data}
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> options={{
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400"> responsive: true,
<tr> maintainAspectRatio: false,
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th> plugins: {
<th class="px-6 py-3" scope="col"> Amount </th> legend: {
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th> position: 'top',
<th class="px-6 py-3" scope="col"> Energy </th> labels: {
</tr> padding: 20,
</thead> color: 'rgb(229, 231, 235)',
<tbody> font: {
{#each items as f} size: 12,
<AggregatedFoodComp item={f} /> family: "'Nunito', sans-serif"
{/each} }
</tbody> }
</table> }
},
scales: {
y: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
},
x: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
}
}
}}
class="max-h-[50vh] h-[50vh]" />
</div>
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-full text-sm text-left text-gray-400">
<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
<tr>
<th class="px-6 py-4 font-semibold" scope="col">Period</th>
<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
<th class="px-6 py-4 font-semibold" scope="col">AvgPer100</th>
<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
{#each items as f}
<AggregatedFoodComp item={f} />
{/each}
</tbody>
</table>
</div>
</div> </div>
<div></div>
</div> </div>
</template> </template>

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

@@ -151,17 +151,13 @@
<svelte:window on:keydown={navigateList} /> <svelte:window on:keydown={navigateList} />
<template> <template>
<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold relative"> <tr class="border-b border-gray-700 text-lg font-medium hover:bg-gray-800/50 transition-colors">
<th <th class="px-6 py-4 font-medium text-gray-200 whitespace-nowrap" scope="row" />
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>
<!-- svelte-ignore a11y-autofocus -->
<td <td
bind:innerText={name} bind:innerText={name}
class:border-[3px]={!name} class="px-6 py-4 overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 rounded transition-all"
class:border-red-600={!name} class:ring-2={!name}
class="px-6 py-4 overflow-hidden" class:ring-red-500={!name}
contenteditable="true" contenteditable="true"
autofocus autofocus
on:keydown={update} on:keydown={update}

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

@@ -57,5 +57,8 @@
</script> </script>
<template> <template>
<div class="px-4 text-bold text-3xl" style="color: {color}">{remainingToday}</div> <div class="px-6 py-3 text-3xl font-bold rounded-lg bg-gray-800/50 shadow-lg border border-gray-700" style="color: {color}">
<span class="mr-2">{remainingToday}</span>
<span class="text-lg text-gray-400">kcal remaining</span>
</div>
</template> </template>

16
frontend/src/lib/components/Energy/FoodSearchEntry.svelte
View File

@@ -1,15 +1,13 @@
<script> <script lang="ts">
// This doesn't update when navigating with arrows keys... export let itemLabel: string;
// Fucking svelte and reactivity again, here we fucking go export let highlighted: boolean;
export let itemLabel;
export let highlighted;
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li <li
class="list-none border-b border-gray-800 z-50 px-2 py-2 cursor-pointer bg-[#1b2636] hover:bg-[#81921f] hover:text-white active:bg-DodgerBlue active:text-white text-lg" class="list-none px-4 py-3 cursor-pointer bg-gray-800 text-gray-200 text-base border-b border-gray-700 transition-colors"
class:bg-DodgerBlue={highlighted} class:bg-blue-600={highlighted}
class:text-white={highlighted} class:text-white={highlighted}
on:click> on:click
>
{itemLabel} {itemLabel}
</li> </li>

23
frontend/src/lib/components/Energy/FoodTable.svelte
View File

@@ -59,20 +59,20 @@
</script> </script>
<template> <template>
<div class="relative flex flex-col flex-grow h-[93vh] select-none" data-vaul-drawer-wrapper id="page"> <div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" 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 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 text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400"> <thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
<tr> <tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th> <th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
<th class="px-6 py-3 w-3/12" scope="col"> Food </th> <th class="px-6 py-4 font-semibold" scope="col">Food</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-4 font-semibold" scope="col">Description</th>
<th class="px-6 py-3 w-1/12" scope="col"> Amount </th> <th class="px-6 py-4 font-semibold" 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-4 font-semibold" scope="col">Cal Per 100</th>
<th class="px-6 py-3 w-1/12" scope="col"> Energy </th> <th class="px-6 py-4 font-semibold" scope="col">Energy</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="divide-y divide-gray-700">
<EmptyFoodComp /> <EmptyFoodComp />
{#each items as f} {#each items as f}
<FoodComp <FoodComp
@@ -85,6 +85,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div></div>
</div> </div>
</template> </template>

36
frontend/src/lib/components/Header.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { link, location } from "svelte-spa-router"; import { link, location } from "svelte-spa-router";
import { faGear} from "@fortawesome/free-solid-svg-icons"; import { faGear } from "@fortawesome/free-solid-svg-icons";
import Fa from "svelte-fa"; import Fa from "svelte-fa";
import Settings from "./Settings/Settings.svelte"; import Settings from "./Settings/Settings.svelte";
import EnergyToday from "./Energy/EnergyToday.svelte"; import EnergyToday from "./Energy/EnergyToday.svelte";
@@ -49,48 +49,40 @@
</script> </script>
<header <header
class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b class="flex h-24 items-center justify-between bg-gray-900 shadow-lg sticky top-0 z-50 border-b border-gray-700/40 backdrop-blur supports-[backdrop-filter]:bg-gray-900/60 px-6"
border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
> >
<div> <div class="flex flex-col gap-2">
<nav class="flex space-x-4 text-2xl font-bold select-none justify-center"> <nav class="flex space-x-6 text-2xl font-bold select-none">
<a <a
use:link use:link
class={"/" == $location class="transition-colors hover:text-gray-200 {$location === '/' ? 'text-white' : 'text-gray-400'}"
? "transition-colors hover:text-foreground/80"
: "transition-colors hover:text-foreground/80 text-foreground/60"}
href="/" href="/"
on:click={(e) => (selected = "Energy")}>Energy</a on:click={() => (selected = "Energy")}>Energy</a
> >
<a <a
use:link use:link
class={"/Weight" == $location class="transition-colors hover:text-gray-200 {$location === '/Weight' ? 'text-white' : 'text-gray-400'}"
? "transition-colors hover:text-foreground/80"
: "transition-colors hover:text-foreground/80 text-foreground/60"}
href="/Weight" href="/Weight"
on:click={(e) => (selected = "Weight")}>Weight</a on:click={() => (selected = "Weight")}>Weight</a
> >
</nav> </nav>
<nav class="flex space-x-4 text-2xl font-bold select-none justify-center"> <nav class="flex space-x-6 text-xl font-medium select-none">
{#each sublinks as { label, href }} {#each sublinks as { label, href }}
<a <a
use:link use:link
{href} {href}
class={href == $location class="transition-colors hover:text-gray-200 {href === $location ? 'text-white' : 'text-gray-400'}"
? "transition-colors hover:text-foreground/80" >{label}</a
: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
> >
{/each} {/each}
</nav> </nav>
</div> </div>
<!-- svelte-ignore a11y-click-events-have-key-events --> <div class="flex items-center gap-6">
<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}> <EnergyToday />
<button> <button class="p-3 hover:bg-gray-800 rounded-lg transition-colors" on:click={() => (showModal = true)}>
<Fa icon={faGear} scale={2} /> <Fa icon={faGear} scale={2} />
</button> </button>
</div> </div>
<RefreshComponent />
<EnergyToday />
</header> </header>
<Settings bind:showModal /> <Settings bind:showModal />

2
frontend/src/lib/components/RefreshComponent.svelte
View File

@@ -35,7 +35,7 @@
<template> <template>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}> <div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}>
<button> <button class="p-3 hover:bg-gray-800 rounded-lg transition-colors">
<Fa icon={faRefresh} scale={2} /> <Fa icon={faRefresh} scale={2} />
</button> </button>
</div> </div>

98
frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
View File

@@ -21,17 +21,18 @@
let reversedItems = items.slice().reverse(); let reversedItems = items.slice().reverse();
const defaultOptions = { const defaultOptions = {
backgroundColor: "rgba(225, 204,230, .3)", backgroundColor: "rgba(59, 130, 246, 0.1)",
borderColor: "rgb(205, 130, 158)", borderColor: "rgb(59, 130, 246)",
pointBorderColor: "rgb(205, 130, 158)", pointBorderColor: "rgb(59, 130, 246)",
pointBackgroundColor: "rgb(255, 255, 255)", pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10, pointBorderWidth: 2,
pointHoverRadius: 5, pointHoverRadius: 6,
pointHoverBackgroundColor: "rgb(0, 157, 123)", pointHoverBackgroundColor: "rgb(59, 130, 246)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)", pointHoverBorderColor: "rgb(255, 255, 255)",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 3,
pointHitRadius: 10, pointHitRadius: 20,
tension: 0.4,
}; };
const data: ChartData<"line", (number | Point)[]> = { const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map((f) => f.period), labels: reversedItems.map((f) => f.period),
@@ -56,23 +57,68 @@
</script> </script>
<template> <template>
<Line {data} class="max-h-[50vh] h-[50vh]" /> <div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page"> <div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg"> <Line {data}
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> options={{
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400"> responsive: true,
<tr> maintainAspectRatio: false,
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th> plugins: {
<th class="px-6 py-3" scope="col"> Amount </th> legend: {
</tr> position: 'top',
</thead> labels: {
<tbody> padding: 20,
{#each items as f} color: 'rgb(229, 231, 235)',
<AggregatedWeightComp item={f} /> font: {
{/each} size: 12,
</tbody> family: "'Nunito', sans-serif"
</table> }
}
}
},
scales: {
y: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
},
x: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
}
}
}}
class="max-h-[50vh] h-[50vh]" />
</div>
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-full text-sm text-left text-gray-400">
<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
<tr>
<th class="px-6 py-4 font-semibold" scope="col">Period</th>
<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
</tr>
</thead>
<tbody>
{#each items as f}
<AggregatedWeightComp item={f} />
{/each}
</tbody>
</table>
</div>
</div> </div>
<div></div>
</div> </div>
</template> </template>

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

@@ -15,25 +15,22 @@
const date = item.date.toString().split("T")[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
// WE GOT RID OF UNDEFINED ON LINE 33
// 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-[93vh]" data-vaul-drawer-wrapper id="page"> <div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" 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 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 text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400"> <thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
<tr> <tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th> <th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
<th class="px-6 py-3 w-10/12" scope="col"> Weight </th> <th class="px-6 py-4 font-semibold" scope="col">Weight</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="divide-y divide-gray-700">
<EmptyWeightComp /> <EmptyWeightComp />
{#each items as f} {#each items as f}
<WeightComp item={f} dateColor={getDateColor(f)} /> <WeightComp item={f} dateColor={getDateColor(f)} />
@@ -41,6 +38,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div></div>
</div> </div>
</template> </template>