Add a "calorie remaining today" display
This commit is contained in:
59
frontend/src/lib/components/Energy/EnergyToday.svelte
Normal file
59
frontend/src/lib/components/Energy/EnergyToday.svelte
Normal file
@@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { foodStore } from "$lib/store/Energy/foodStore";
|
||||
import { settingsStore } from "$lib/store/settingsStore";
|
||||
import { LerpColor } from "$lib/utils";
|
||||
import type { Color } from "$lib/utils";
|
||||
|
||||
let remainingToday: number;
|
||||
let color: string;
|
||||
const green: Color = {
|
||||
h: 137,
|
||||
s: 100,
|
||||
l: 45,
|
||||
};
|
||||
const red: Color = {
|
||||
h: 0,
|
||||
s: 100,
|
||||
l: 45,
|
||||
};
|
||||
|
||||
$: {
|
||||
remainingToday = $settingsStore.target;
|
||||
computeColor();
|
||||
}
|
||||
|
||||
const formatter = new Intl.DateTimeFormat("en-GB", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
// Maybe add this to settings...
|
||||
timeZone: "Europe/Berlin",
|
||||
});
|
||||
|
||||
$: {
|
||||
remainingToday = $settingsStore.target;
|
||||
let now = new Date();
|
||||
let todayDate = formatter.format(now);
|
||||
const [day, month, year] = todayDate.split('/');
|
||||
todayDate = `${year}-${month}-${day}`;
|
||||
|
||||
$foodStore.forEach((food) => {
|
||||
if (food.date.split("T")[0] == todayDate) {
|
||||
remainingToday -= food.energy;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
remainingToday = Math.round(remainingToday);
|
||||
computeColor();
|
||||
}
|
||||
|
||||
function computeColor() {
|
||||
const newcolor = LerpColor(red, green, remainingToday / $settingsStore.target);
|
||||
color = `hsl(${newcolor.h}, ${newcolor.s}%, ${newcolor.l}%)`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-4 text-bold text-3xl" style="color: {color}">{remainingToday}</div>
|
||||
</template>
|
||||
@@ -3,6 +3,7 @@
|
||||
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";
|
||||
Fa;
|
||||
|
||||
type Link = {
|
||||
@@ -87,6 +88,7 @@
|
||||
<Fa icon={faGear} scale={2} />
|
||||
</button>
|
||||
</div>
|
||||
<EnergyToday />
|
||||
</header>
|
||||
|
||||
<Settings bind:showModal />
|
||||
|
||||
@@ -1,106 +1,108 @@
|
||||
import { cubicOut } from 'svelte/easing'
|
||||
import type { TransitionConfig } from 'svelte/transition'
|
||||
import { cubicOut } from "svelte/easing";
|
||||
import type { TransitionConfig } from "svelte/transition";
|
||||
|
||||
type FlyAndScaleParams = {
|
||||
y?: number
|
||||
x?: number
|
||||
start?: number
|
||||
duration?: number
|
||||
}
|
||||
y?: number;
|
||||
x?: number;
|
||||
start?: number;
|
||||
duration?: number;
|
||||
};
|
||||
|
||||
export const flyAndScale = (
|
||||
node: Element,
|
||||
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
||||
): TransitionConfig => {
|
||||
const style = getComputedStyle(node)
|
||||
const transform = style.transform === 'none' ? '' : style.transform
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === "none" ? "" : style.transform;
|
||||
|
||||
const scaleConversion = (
|
||||
valueA: number,
|
||||
scaleA: [number, number],
|
||||
scaleB: [number, number]
|
||||
) => {
|
||||
const [minA, maxA] = scaleA
|
||||
const [minB, maxB] = scaleB
|
||||
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
|
||||
const [minA, maxA] = scaleA;
|
||||
const [minB, maxB] = scaleB;
|
||||
|
||||
const percentage = (valueA - minA) / (maxA - minA)
|
||||
const valueB = percentage * (maxB - minB) + minB
|
||||
const percentage = (valueA - minA) / (maxA - minA);
|
||||
const valueB = percentage * (maxB - minB) + minB;
|
||||
|
||||
return valueB
|
||||
}
|
||||
return valueB;
|
||||
};
|
||||
|
||||
const styleToString = (
|
||||
style: Record<string, number | string | undefined>
|
||||
): string => {
|
||||
const styleToString = (style: Record<string, number | string | undefined>): string => {
|
||||
return Object.keys(style).reduce((str, key) => {
|
||||
if (style[key] === undefined) return str
|
||||
return str + `${key}:${style[key]};`
|
||||
}, '')
|
||||
}
|
||||
if (style[key] === undefined) return str;
|
||||
return str + `${key}:${style[key]};`;
|
||||
}, "");
|
||||
};
|
||||
|
||||
return {
|
||||
duration: params.duration ?? 200,
|
||||
delay: 0,
|
||||
css: t => {
|
||||
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
|
||||
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
|
||||
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
|
||||
css: (t) => {
|
||||
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
|
||||
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
|
||||
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
|
||||
|
||||
return styleToString({
|
||||
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
||||
opacity: t
|
||||
})
|
||||
opacity: t,
|
||||
});
|
||||
},
|
||||
easing: cubicOut
|
||||
}
|
||||
}
|
||||
easing: cubicOut,
|
||||
};
|
||||
};
|
||||
|
||||
type Color = {
|
||||
h: number
|
||||
s: number
|
||||
l: number
|
||||
}
|
||||
h: number;
|
||||
s: number;
|
||||
l: number;
|
||||
};
|
||||
|
||||
function ColorDistance(color1: Color, color2: Color) {
|
||||
return Math.abs(color1.h - color2.h)
|
||||
return Math.abs(color1.h - color2.h);
|
||||
}
|
||||
|
||||
function GenerateRandomHSL(): Color {
|
||||
const hue = Math.floor(Math.random() * 360)
|
||||
const saturation = 70
|
||||
const lightness = 60
|
||||
return { h: hue, s: saturation, l: lightness }
|
||||
const hue = Math.floor(Math.random() * 360);
|
||||
const saturation = 70;
|
||||
const lightness = 60;
|
||||
return { h: hue, s: saturation, l: lightness };
|
||||
}
|
||||
|
||||
const existingColors: Color[] = []
|
||||
const existingColors: Color[] = [];
|
||||
|
||||
function GenerateColor(): string {
|
||||
const minDistance = 15
|
||||
const minDistance = 15;
|
||||
|
||||
let newColor: Color
|
||||
let isDistinct = false
|
||||
let iterations = 0
|
||||
let newColor: Color;
|
||||
let isDistinct = false;
|
||||
let iterations = 0;
|
||||
while (!isDistinct) {
|
||||
iterations++
|
||||
if (iterations > 1000) {
|
||||
console.error('Failed to generate a distinct color after 1000 iterations')
|
||||
break
|
||||
iterations++;
|
||||
if (iterations > 100) {
|
||||
console.error("Failed to generate a distinct color after 100 iterations");
|
||||
break;
|
||||
}
|
||||
newColor = GenerateRandomHSL()
|
||||
isDistinct = true
|
||||
newColor = GenerateRandomHSL();
|
||||
isDistinct = true;
|
||||
|
||||
for (const color of existingColors) {
|
||||
if (ColorDistance(newColor, color) < minDistance) {
|
||||
isDistinct = false
|
||||
break
|
||||
isDistinct = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
existingColors.push(newColor)
|
||||
existingColors.push(newColor);
|
||||
}
|
||||
|
||||
// We can not reach this point without having a color generated
|
||||
// @ts-ignore
|
||||
return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`
|
||||
return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`;
|
||||
}
|
||||
|
||||
export { GenerateColor }
|
||||
function LerpColor(color1: Color, color2: Color, t: number): Color {
|
||||
const h = color1.h + (color2.h - color1.h) * t;
|
||||
const s = color1.s + (color2.s - color1.s) * t;
|
||||
const l = color1.l + (color2.l - color1.l) * t;
|
||||
return { h, s, l };
|
||||
}
|
||||
|
||||
export { GenerateColor, LerpColor };
|
||||
export type { Color };
|
||||
|
||||
Reference in New Issue
Block a user