Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 15 additions & 38 deletions src/lib/component/weight/WeightScore.svelte
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
<script lang="ts">
import { getDateAsStr, parseStringAsDate } from '$lib/date';
import type { NewWeightTracker, WeightTarget, WeightTracker } from '$lib/api/gen';
import { parseStringAsDate } from '$lib/date';
import type { WeightTarget, WeightTracker } from '$lib/api/gen';
import NumberFlow from '@number-flow/svelte';
import { differenceInDays } from 'date-fns';
import { Shield, ShieldCheck, ShieldWarning, TrendDown, TrendUp } from 'phosphor-svelte';
import { goto } from '$app/navigation';

interface Props {
weightTracker?: NewWeightTracker | WeightTracker;
lastWeightTracker?: WeightTracker;
weightTracker: WeightTracker;
weightTarget: WeightTarget;
onAdd?: (entry: NewWeightTracker) => Promise<WeightTracker>;
onEdit?: (id: number, entry: WeightTracker) => Promise<WeightTracker>;
}

let {
lastWeightTracker = undefined,
weightTracker = {
added: getDateAsStr(new Date()),
amount: lastWeightTracker ? lastWeightTracker.amount : 0
},
weightTarget
}: Props = $props();
let { weightTracker, weightTarget }: Props = $props();

let percentage = $derived.by(() => {
const diff = weightTarget.initialWeight - weightTracker.amount;
Expand All @@ -30,21 +20,17 @@
});

let modifier = $derived(weightTarget.initialWeight > weightTracker.amount ? '-' : '+');

let lastEntryDayDiff = $derived(
differenceInDays(new Date(), parseStringAsDate(weightTracker?.added!))
);
</script>

<div class="stat weight-stat">
<div class="stat-title">Current Weight</div>
<div class="flex flex-row justify-between stat-value">
<span>
{#if (weightTracker && 'id' in weightTracker) || lastWeightTracker}
{#if weightTracker && 'id' in weightTracker}
<NumberFlow value={weightTracker.amount} />
{:else if lastWeightTracker}
<NumberFlow value={lastWeightTracker.amount} />
{/if}
{:else}
-
{/if}
<NumberFlow value={weightTracker.amount} />
<span class="text-sm">kg</span>
</span>
<span class="flex items-center gap-1">
Expand All @@ -57,24 +43,15 @@
</div>
<div class="flex flex-row stat-desc items-center justify-between gap-1">
<span class="flex flex-row gap-1 items-center">
{#if weightTracker && 'id' in weightTracker}
{#if lastEntryDayDiff === 0}
<ShieldCheck size="1.25rem" weight="fill" color="var(--color-success)" />
Last update: Today.
{:else if lastWeightTracker}
{@const lastEntryDayDiff = differenceInDays(
new Date(),
parseStringAsDate(lastWeightTracker.added)
)}
{#if lastEntryDayDiff > 2}
<ShieldWarning size="1.25rem" weight="fill" color="var(--color-error)" />
Last update was {lastEntryDayDiff} days ago!
{:else}
<ShieldWarning size="1.25rem" weight="fill" color="var(--color-warning)" />
Last update: {lastEntryDayDiff} days ago.
{/if}
{:else if lastEntryDayDiff > 2}
<ShieldWarning size="1.25rem" weight="fill" color="var(--color-error)" />
Last update was {lastEntryDayDiff} days ago!
{:else}
<Shield size="1.25rem" class={'stat-desc'} />
Nothing tracked yet.
<ShieldWarning size="1.25rem" weight="fill" color="var(--color-warning)" />
Last update: {lastEntryDayDiff} days ago.
{/if}
</span>
<span>
Expand Down
Loading
Loading