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();
const defaultOptions = {
backgroundColor: "rgba(225, 204,230, .3)",
borderColor: "rgb(205, 130, 158)",
pointBorderColor: "rgb(205, 130, 158)",
backgroundColor: "rgba(59, 130, 246, 0.1)",
borderColor: "rgb(59, 130, 246)",
pointBorderColor: "rgb(59, 130, 246)",
pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(0, 157, 123)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)",
pointBorderWidth: 2,
pointHoverRadius: 6,
pointHoverBackgroundColor: "rgb(59, 130, 246)",
pointHoverBorderColor: "rgb(255, 255, 255)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointRadius: 3,
pointHitRadius: 20,
tension: 0.4,
};
const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map((f) => f.period),
@@ -87,25 +88,70 @@
</script>
<template>
<Line {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 class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
<Line {data}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
padding: 20,
color: 'rgb(229, 231, 235)',
font: {
size: 12,
family: "'Nunito', sans-serif"
}
}
}
},
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>
</template>

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

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

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

@@ -57,5 +57,8 @@
</script>
<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>

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

@@ -1,15 +1,13 @@
<script>
// This doesn't update when navigating with arrows keys...
// Fucking svelte and reactivity again, here we fucking go
export let itemLabel;
export let highlighted;
<script lang="ts">
export let itemLabel: string;
export let highlighted: boolean;
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<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:bg-DodgerBlue={highlighted}
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-blue-600={highlighted}
class:text-white={highlighted}
on:click>
on:click
>
{itemLabel}
</li>

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

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

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

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

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

@@ -35,7 +35,7 @@
<template>
<!-- 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}>
<button>
<button class="p-3 hover:bg-gray-800 rounded-lg transition-colors">
<Fa icon={faRefresh} scale={2} />
</button>
</div>

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

@@ -21,17 +21,18 @@
let reversedItems = items.slice().reverse();
const defaultOptions = {
backgroundColor: "rgba(225, 204,230, .3)",
borderColor: "rgb(205, 130, 158)",
pointBorderColor: "rgb(205, 130, 158)",
backgroundColor: "rgba(59, 130, 246, 0.1)",
borderColor: "rgb(59, 130, 246)",
pointBorderColor: "rgb(59, 130, 246)",
pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(0, 157, 123)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)",
pointBorderWidth: 2,
pointHoverRadius: 6,
pointHoverBackgroundColor: "rgb(59, 130, 246)",
pointHoverBorderColor: "rgb(255, 255, 255)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
pointRadius: 3,
pointHitRadius: 20,
tension: 0.4,
};
const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map((f) => f.period),
@@ -56,23 +57,68 @@
</script>
<template>
<Line {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>
</tr>
</thead>
<tbody>
{#each items as f}
<AggregatedWeightComp item={f} />
{/each}
</tbody>
</table>
<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
<Line {data}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
padding: 20,
color: 'rgb(229, 231, 235)',
font: {
size: 12,
family: "'Nunito', sans-serif"
}
}
}
},
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>
</template>

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

@@ -15,25 +15,22 @@
const date = item.date.toString().split("T")[0];
if (!date) return 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
return dateColors.get(date);
}
</script>
<template>
<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">
<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">
<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 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-3 bg-gray-50 dark:bg-gray-800 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 w-2/12" scope="col">Date</th>
<th class="px-6 py-4 font-semibold" scope="col">Weight</th>
</tr>
</thead>
<tbody>
<tbody class="divide-y divide-gray-700">
<EmptyWeightComp />
{#each items as f}
<WeightComp item={f} dateColor={getDateColor(f)} />
@@ -41,6 +38,5 @@
</tbody>
</table>
</div>
<div></div>
</div>
</template>