Heftig rekatorering

This commit is contained in:
Håkon Størdal 2025-09-03 16:05:08 +02:00
parent e5e68a7764
commit 201280dc54
16 changed files with 700 additions and 534 deletions

View file

@ -1,15 +1,6 @@
<script lang="ts">
import WorkoutLogger from '$lib/WorkoutLogger.svelte';
import WorkoutDisplay from '$lib/WorkoutDisplay.svelte';
let workoutDisplayComponent: WorkoutDisplay;
function handleWorkoutSaved() {
// Refresh the display when workout is saved
if (workoutDisplayComponent) {
workoutDisplayComponent.loadTodaysWorkout();
}
}
import WorkoutDisplay from './WorkoutDisplay.svelte';
import WorkoutLogger from './WorkoutLogger.svelte';
</script>
<div class="min-h-screen bg-gray-100 py-8">
@ -18,15 +9,9 @@
<p class="mb-8 text-center text-gray-600">Track your daily fitness progress</p>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<!-- Display today's workout -->
<div>
<WorkoutDisplay bind:this={workoutDisplayComponent} />
</div>
<WorkoutDisplay />
<!-- Log new workout -->
<div>
<WorkoutLogger on:workoutSaved={handleWorkoutSaved} />
</div>
<WorkoutLogger />
</div>
</div>
</div>

View file

@ -1,12 +0,0 @@
<script lang="ts">
import { testConnection } from './db.remote';
</script>
<svelte:boundary>
<p>Here be connection: {await testConnection().current}</p>
{#snippet pending()}
<p>loading...</p>
{/snippet}
</svelte:boundary>

View file

@ -0,0 +1,55 @@
<script lang="ts">
import QuickAddButton from '$lib/components/QuickAddButton.svelte';
import type { ExerciseConfig } from './workoutData';
interface Props extends ExerciseConfig {
label: string;
value: number;
onchange: (value: number) => void;
defaultValue: number;
}
let {
label,
icon,
name,
value = $bindable(),
onchange,
min = 0,
max = 9999,
step = 1,
quickAddOptions,
defaultValue,
color = 'blue'
}: Props = $props();
function quickAdd(amount: number) {
const newValue = Math.max(min, value + amount);
value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
onchange(value);
}
</script>
<div class="mb-6">
<label for={name} class="mb-2 block text-sm font-medium text-gray-700">
{icon}
{label}
</label>
<div class="flex items-center space-x-2">
<input
id={name}
{name}
type="number"
bind:value
{min}
{max}
{step}
{defaultValue}
required={true}
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
/>
{#each quickAddOptions as option}
<QuickAddButton label={option.label} onclick={() => quickAdd(option.value)} {color} />
{/each}
</div>
</div>

View file

@ -0,0 +1,120 @@
<script lang="ts">
import { getTodaysWorkout, getWorkoutHistory } from './workout.remote';
import { getTodayDateString, formatTime, formatDistance } from './workoutUtils';
import WorkoutStatCard from './WorkoutStatCard.svelte';
import { exerciseConfigs } from './workoutData';
// Today's date for display
let todayDate = getTodayDateString();
</script>
<div class="mx-auto max-w-md rounded-lg bg-white p-6 shadow-lg">
<h2 class="mb-6 text-center text-2xl font-bold text-gray-800">Today's Workout</h2>
<div class="mb-4 text-center text-gray-600">
📅 {todayDate}
</div>
<svelte:boundary>
{@const workoutData = (await getTodaysWorkout()).data}
{#if !workoutData}
<div class="rounded-md bg-gray-50 p-6 text-center">
<div class="text-gray-600">📝 No workout recorded for today</div>
<div class="mt-2 text-sm text-gray-500">Start logging your exercises below!</div>
</div>
{:else}
<!-- Workout Stats Grid -->
<div class="grid grid-cols-2 gap-4">
<!-- Push-ups -->
<WorkoutStatCard
icon={exerciseConfigs.pushups.icon}
value={workoutData.pushups}
label={exerciseConfigs.pushups.name}
color={exerciseConfigs.pushups.color}
/>
<!-- Sit-ups -->
<WorkoutStatCard
icon={exerciseConfigs.situps.icon}
value={workoutData.situps}
label={exerciseConfigs.situps.name}
color={exerciseConfigs.situps.color}
/>
<!-- Plank -->
<WorkoutStatCard
icon={exerciseConfigs.plankSeconds.icon}
value={workoutData.plankSeconds}
label={exerciseConfigs.plankSeconds.name}
color={exerciseConfigs.plankSeconds.color}
formatter={formatTime}
/>
<!-- Hangups -->
<WorkoutStatCard
icon={exerciseConfigs.hangups.icon}
value={workoutData.hangups}
label={exerciseConfigs.hangups.name}
color={exerciseConfigs.hangups.color}
/>
<!-- Running -->
<WorkoutStatCard
icon={exerciseConfigs.runKm.icon}
value={workoutData.runKm}
label={exerciseConfigs.runKm.name}
color={exerciseConfigs.runKm.color}
formatter={formatDistance}
/>
</div>
{@const allWorkouData = (await getWorkoutHistory()).data}
<!-- Summary Stats -->
<div class="mt-6 rounded-md bg-gray-50 p-4">
<h3 class="mb-2 font-medium text-gray-700">📊 Summary for last 7 days</h3>
<div class="space-y-1 text-sm text-gray-600">
<div class="flex justify-between">
<span>Total pushups:</span>
<span class="font-medium">{allWorkouData.pushups}</span>
</div>
<div class="flex justify-between">
<span>Total situps:</span>
<span class="font-medium">{workoutData.situps}</span>
</div>
<div class="flex justify-between">
<span>Plank time:</span>
<span class="font-medium">{formatTime(workoutData.plankSeconds)}</span>
</div>
<div class="flex justify-between">
<span>Hang ups:</span>
<span class="font-medium">{workoutData.hangups}</span>
</div>
<div class="flex justify-between">
<span>Distance:</span>
<span class="font-medium">{formatDistance(workoutData.runKm)}</span>
</div>
</div>
</div>
{/if}
{#snippet pending()}
<div class="flex items-center justify-center py-8">
<div class="text-gray-500">⏳ Loading workout data...</div>
</div>
{/snippet}
{#snippet failed(error, reset)}
<div class="rounded-md border border-red-200 bg-red-100 p-4 text-red-800">
<div class="font-medium">Error loading data</div>
<div class="text-sm">{error}</div>
<button
onclick={reset}
class="mt-2 rounded bg-red-200 px-3 py-1 text-xs text-red-700 hover:bg-red-300"
>
🔄 Retry
</button>
</div>
{/snippet}
</svelte:boundary>
</div>

View file

@ -0,0 +1,152 @@
<script lang="ts">
import { onMount } from 'svelte';
import { saveWorkout, getTodaysWorkout, type WorkOutData } from './workout.remote';
import ExerciseField from './ExerciseField.svelte';
import { exerciseConfigs } from './workoutData';
import { getTodayDateString, exampleWorkout } from './workoutUtils';
let todayDate = getTodayDateString();
// Form state
let form: WorkOutData = {
pushups: 0,
situps: 0,
plankSeconds: 0,
hangups: 0,
runKm: 0
};
onMount(async () => {
const result = await getTodaysWorkout();
form = result.data ?? form;
});
function loadExample() {
form = { ...exampleWorkout };
}
function handleFieldChange(field: keyof WorkOutData, value: number) {
form[field] = value;
}
</script>
<div class="mx-auto max-w-md rounded-lg bg-white p-6 shadow-lg">
<!-- Header -->
<header class="mb-6 text-center">
<h2 class="text-2xl font-bold text-gray-800">Log Today's Workout</h2>
<div class="mt-2 text-gray-600">📅 {todayDate}</div>
</header>
<!-- Main Form -->
<form {...saveWorkout}>
<!-- Push-ups Field -->
<ExerciseField
label={exerciseConfigs.pushups.name}
icon={exerciseConfigs.pushups.icon}
name="pushups"
bind:value={form.pushups}
defaultValue={form.pushups}
onchange={(value) => handleFieldChange('pushups', value)}
quickAddOptions={exerciseConfigs.pushups.quickAddOptions}
color={exerciseConfigs.pushups.color}
max={exerciseConfigs.pushups.max}
step={exerciseConfigs.pushups.step}
/>
<!-- Sit-ups Field -->
<ExerciseField
label={exerciseConfigs.situps.name}
icon={exerciseConfigs.situps.icon}
name="situps"
bind:value={form.situps}
onchange={(value) => handleFieldChange('situps', value)}
defaultValue={form.situps}
quickAddOptions={exerciseConfigs.situps.quickAddOptions}
color={exerciseConfigs.situps.color}
max={exerciseConfigs.situps.max}
step={exerciseConfigs.situps.step}
/>
<!-- Plank Field -->
<ExerciseField
label="{exerciseConfigs.plankSeconds.name} (seconds)"
icon={exerciseConfigs.plankSeconds.icon}
name="plankSeconds"
bind:value={form.plankSeconds}
onchange={(value) => handleFieldChange('plankSeconds', value)}
defaultValue={form.plankSeconds}
quickAddOptions={exerciseConfigs.plankSeconds.quickAddOptions}
color={exerciseConfigs.plankSeconds.color}
max={exerciseConfigs.plankSeconds.max}
step={exerciseConfigs.plankSeconds.step}
/>
<!-- Running Field -->
<ExerciseField
label={exerciseConfigs.hangups.name}
icon={exerciseConfigs.hangups.icon}
name="hangups"
bind:value={form.hangups}
onchange={(value) => handleFieldChange('hangups', value)}
defaultValue={form.hangups}
quickAddOptions={exerciseConfigs.hangups.quickAddOptions}
color={exerciseConfigs.hangups.color}
max={exerciseConfigs.hangups.max}
step={exerciseConfigs.hangups.step}
/>
<ExerciseField
label="{exerciseConfigs.runKm.name} (km)"
icon={exerciseConfigs.runKm.icon}
name="runKm"
bind:value={form.runKm}
onchange={(value) => handleFieldChange('runKm', value)}
defaultValue={form.runKm}
quickAddOptions={exerciseConfigs.runKm.quickAddOptions}
color={exerciseConfigs.runKm.color}
max={exerciseConfigs.runKm.max}
step={exerciseConfigs.runKm.step}
/>
<!-- Action Buttons -->
<div class="mb-4 flex space-x-3">
<button
type="submit"
class="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>
💾 Save Workout
</button>
</div>
</form>
<!-- Message Display -->
{#if saveWorkout.result?.success}
<div
class="mb-4 rounded-md border border-green-200 bg-green-100 p-3 text-sm font-medium text-green-800"
role="alert"
>
{saveWorkout.result.message}
</div>
{/if}
{#snippet pending()}{/snippet}
<!-- Example Section -->
<section class="rounded-md bg-gray-50 p-4">
<h3 class="mb-2 text-sm font-medium text-gray-700">Quick Example:</h3>
<div class="space-y-1 text-sm text-gray-600">
<div>💪 Push-ups: {exampleWorkout.pushups}</div>
<div>🏋️ Sit-ups: {exampleWorkout.situps}</div>
<div>🧘 Plank: {exampleWorkout.plankSeconds} seconds</div>
<div>🏃 Running: {exampleWorkout.runKm} km</div>
<div>☕ Hangups: {exampleWorkout.hangups}</div>
</div>
<button
type="button"
onclick={loadExample}
class="mt-2 rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300 focus:ring-2 focus:ring-gray-500 focus:outline-none"
>
Load Example
</button>
</section>
</div>

View file

@ -0,0 +1,37 @@
<script lang="ts">
import type { ColorExercise } from './workoutData';
interface Props {
icon: string;
value: number;
label: string;
color?: ColorExercise;
formatter?: (value: number) => string;
}
let { icon, value, label, color = 'blue', formatter }: Props = $props();
const colorClasses = {
blue: 'bg-blue-50 text-blue-700',
green: 'bg-green-50 text-green-700',
orange: 'bg-orange-50 text-orange-700',
red: 'bg-red-50 text-red-700',
purple: 'bg-purple-50 text-purple-700'
};
const textColorClasses = {
blue: 'text-blue-600',
green: 'text-green-600',
orange: 'text-orange-600',
red: 'text-red-600',
purple: 'text-purple-600'
};
let displayValue = $derived(formatter ? formatter(value) : value);
</script>
<div class="rounded-lg p-4 text-center {colorClasses[color]}">
<div class="text-2xl">{icon}</div>
<div class="text-lg font-bold">{displayValue}</div>
<div class="text-sm {textColorClasses[color]}">{label}</div>
</div>

View file

@ -1,6 +0,0 @@
import { query } from '$app/server';
import { db } from '$lib/db';
export const testConnection = query(async () => {
return db.testConnection();
});

View file

@ -1,69 +1,71 @@
import { command, query } from '$app/server';
import { command, form, query } from '$app/server';
import { db } from '$lib/db';
import { z } from 'zod';
import { error } from '@sveltejs/kit';
interface WorkOutData {
export interface WorkOutData {
pushups: number;
situps: number;
plankSeconds: number;
hangups: number;
runKm: number;
}
export const saveWorkout = command(
z.object({
pushups: z.number().min(0),
situps: z.number().min(0),
plankSeconds: z.number().min(0),
runKm: z.number().min(0)
}),
async (workoutData: WorkOutData) => {
const { pushups, situps, plankSeconds, runKm } = workoutData;
export const saveWorkout = form(async (data) => {
let pushups = Number(data.get('pushups'));
let situps = Number(data.get('situps'));
let plankSeconds = Number(data.get('plankSeconds'));
let hangups = Number(data.get('hangups'));
let runKm = Number(data.get('runKm'));
// Validate input data
if (typeof pushups !== 'number' || pushups < 0) {
throw new Error('Invalid pushups value');
}
if (typeof situps !== 'number' || situps < 0) {
throw new Error('Invalid situps value');
}
if (typeof plankSeconds !== 'number' || plankSeconds < 0) {
throw new Error('Invalid plank time value');
}
if (typeof runKm !== 'number' || runKm < 0) {
throw new Error('Invalid run distance value');
}
// Validate input data
if (typeof pushups !== 'number' || isNaN(pushups) || pushups < 0) {
error(400, 'Invalid pushups value');
}
if (typeof situps !== 'number' || isNaN(situps) || situps < 0) {
error(400, 'Invalid situps value');
}
if (typeof plankSeconds !== 'number' || isNaN(plankSeconds) || plankSeconds < 0) {
error(400, 'Invalid plank time value');
}
if (typeof hangups !== 'number' || isNaN(hangups) || hangups < 0) {
error(400, 'Invalid hangups value');
}
if (typeof runKm !== 'number' || isNaN(runKm) || runKm < 0) {
error(400, 'Invalid run distance value');
}
try {
// Insert or update today's workout
const result = await db.query(
`
INSERT INTO daily_exercises (date, pushups, situps, plank_time_seconds, run_distance_km)
VALUES (CURRENT_DATE, $1, $2, $3, $4)
try {
// Insert or update today's workout
const result = await db.query(
`
INSERT INTO daily_exercises (date, pushups, situps, plank_time_seconds, hangups, run_distance_km)
VALUES (CURRENT_DATE, $1, $2, $3, $4, $5)
ON CONFLICT (date)
DO UPDATE SET
pushups = $1,
situps = $2,
plank_time_seconds = $3,
run_distance_km = $4,
hangups = $4,
run_distance_km = $5,
updated_at = CURRENT_TIMESTAMP
RETURNING *
`,
[pushups, situps, plankSeconds, runKm]
);
[pushups, situps, plankSeconds, hangups, runKm]
);
await getTodaysWorkout().refresh();
await getTodaysWorkout().refresh();
await getWorkoutHistory().refresh();
return {
success: true,
data: result.rows[0],
message: 'Workout saved successfully!'
};
} catch (error) {
console.error('Error saving workout:', error);
throw new Error('Failed to save workout to database');
}
return {
success: true,
data: result.rows[0],
message: 'Workout saved successfully!'
};
} catch (error) {
console.error('Error saving workout:', error);
throw new Error('Failed to save workout to database');
}
);
});
export const getTodaysWorkout = query(async () => {
try {
@ -77,9 +79,19 @@ export const getTodaysWorkout = query(async () => {
};
}
// Take all rows and add them up into each category
const row = result.rows[0];
const workoutData: WorkOutData = {
pushups: Number(row.pushups),
situps: Number(row.situps),
plankSeconds: Number(row.plank_time_seconds),
hangups: Number(row.hangups),
runKm: Number(row.run_distance_km)
};
return {
success: true,
data: result.rows[0]
data: workoutData
};
} catch (error) {
console.error('Error fetching workout:', error);
@ -93,15 +105,25 @@ export const getWorkoutHistory = query(async (days: number = 7) => {
const result = await db.query(
`
SELECT * FROM daily_exercises
WHERE date >= CURRENT_DATE - INTERVAL '$1 days'
WHERE date >= CURRENT_DATE - INTERVAL '1 day' * $1
ORDER BY date DESC
`,
[days]
);
// Take all rows and add them up into each category
const rows = result.rows;
const workoutData: WorkOutData = {
pushups: rows.reduce((sum, row) => sum + Number(row.pushups), 0),
situps: rows.reduce((sum, row) => sum + Number(row.situps), 0),
plankSeconds: rows.reduce((sum, row) => sum + Number(row.plank_time_seconds), 0),
hangups: rows.reduce((sum, row) => sum + Number(row.hangups), 0),
runKm: rows.reduce((sum, row) => sum + Number(row.run_distance_km), 0)
};
return {
success: true,
data: result.rows,
data: workoutData,
message: `Retrieved ${result.rows.length} workout records`
};
} catch (error) {

72
src/routes/workoutData.ts Normal file
View file

@ -0,0 +1,72 @@
export type ColorExercise = 'blue' | 'green' | 'orange' | 'red' | 'purple';
export interface ExerciseConfig {
name: string;
icon: string;
color: ColorExercise;
quickAddOptions: Array<{ label: string; value: number }>;
min?: number;
max?: number;
step?: number;
unit?: string;
}
export const exerciseConfigs: Record<string, ExerciseConfig> = {
pushups: {
name: 'Push-ups',
icon: '💪',
color: 'blue',
quickAddOptions: [
{ label: '+10', value: 10 },
{ label: '+25', value: 25 }
],
max: 9999,
step: 1
},
situps: {
name: 'Sit-ups',
icon: '🏋️',
color: 'green',
quickAddOptions: [
{ label: '+10', value: 10 },
{ label: '+20', value: 20 }
],
max: 9999,
step: 1
},
plankSeconds: {
name: 'Plank',
icon: '🧘',
color: 'orange',
quickAddOptions: [
{ label: '+30s', value: 30 },
{ label: '+60s', value: 60 }
],
max: 9999,
step: 1,
unit: 'seconds'
},
runKm: {
name: 'Running',
icon: '🏃',
color: 'red',
quickAddOptions: [
{ label: '+1km', value: 1 },
{ label: '+2.5km', value: 2.5 }
],
max: 999.99,
step: 0.01,
unit: 'km'
},
hangups: {
name: 'Hang-ups',
icon: '🪂',
color: 'purple',
quickAddOptions: [
{ label: '+1', value: 1 },
{ label: '+5', value: 5 }
],
max: 9999,
step: 1
}
};

View file

@ -0,0 +1,28 @@
import type { WorkOutData } from './workout.remote';
export function formatTime(seconds: number): string {
if (seconds === 0) return '0 seconds';
if (seconds < 60) return `${seconds} seconds`;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
if (remainingSeconds === 0) return `${minutes} minutes`;
return `${minutes}m ${remainingSeconds}s`;
}
export function formatDistance(km: number): string {
return `${km} km`;
}
export function getTodayDateString(locale: string = 'nb-NO'): string {
return new Date().toLocaleDateString(locale);
}
export const exampleWorkout: WorkOutData = {
pushups: 100,
situps: 50,
plankSeconds: 0,
hangups: 0,
runKm: 4.0
};