Heftig rekatorering
This commit is contained in:
Håkon Størdal
parent
201280dc54
commit
35ecc5f7a7
20 changed files with 220 additions and 451 deletions
|
|
@ -1,38 +1,41 @@
|
|||
<script lang="ts">
|
||||
import QuickAddButton from '$lib/components/QuickAddButton.svelte';
|
||||
import type { ExerciseConfig } from './workoutData';
|
||||
import type { ExerciseConfig, ColorExercise } from '$lib/workout';
|
||||
|
||||
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'
|
||||
color = 'blue',
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
// Destructure the remaining props for easier access
|
||||
const { icon, name, quickAddOptions, defaultValue, unit } = restProps;
|
||||
|
||||
const label = unit ? `${icon} ${name} (${unit})` : `${icon} ${name}`;
|
||||
|
||||
function quickAdd(amount: number) {
|
||||
const newValue = Math.max(min, value + amount);
|
||||
value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
|
||||
onchange(value);
|
||||
}
|
||||
|
||||
const colorClasses = {
|
||||
blue: 'bg-blue-100 text-blue-700 hover:bg-blue-200 focus:ring-blue-500',
|
||||
green: 'bg-green-100 text-green-700 hover:bg-green-200 focus:ring-green-500',
|
||||
orange: 'bg-orange-100 text-orange-700 hover:bg-orange-200 focus:ring-orange-500',
|
||||
red: 'bg-red-100 text-red-700 hover:bg-red-200 focus:ring-red-500',
|
||||
purple: 'bg-purple-100 text-purple-700 hover:bg-purple-200 focus:ring-purple-500'
|
||||
};
|
||||
</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">
|
||||
|
|
@ -48,8 +51,21 @@
|
|||
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} />
|
||||
{@render quickAddButton(option.label, () => quickAdd(option.value), color)}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#snippet quickAddButton(label: string, onclick: () => void, color: ColorExercise)}
|
||||
<button
|
||||
type="button"
|
||||
{onclick}
|
||||
class="rounded px-3 py-1 text-xs focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {colorClasses[
|
||||
color
|
||||
]}"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
{/snippet}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,31 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
getTodayDateString,
|
||||
type WorkoutData,
|
||||
type ColorExercise,
|
||||
exercises
|
||||
} from '$lib/workout';
|
||||
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();
|
||||
|
||||
// Color classes for the stat cards
|
||||
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'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-md rounded-lg bg-white p-6 shadow-lg">
|
||||
|
|
@ -26,74 +46,26 @@
|
|||
{: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}
|
||||
/>
|
||||
{#each exercises as { key, config }}
|
||||
{@render workoutStatCard(
|
||||
config.icon,
|
||||
workoutData[key],
|
||||
config.name,
|
||||
config.color,
|
||||
config.formatter
|
||||
)}
|
||||
{/each}
|
||||
</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>
|
||||
{#each exercises as { key, config }}
|
||||
{@render summaryStatRow(config.name, allWorkouData[key], config.formatter)}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -118,3 +90,24 @@
|
|||
{/snippet}
|
||||
</svelte:boundary>
|
||||
</div>
|
||||
|
||||
{#snippet workoutStatCard(
|
||||
icon: string,
|
||||
value: number,
|
||||
label: string,
|
||||
color: ColorExercise = 'blue',
|
||||
formatter?: (value: number) => string
|
||||
)}
|
||||
<div class="rounded-lg p-4 text-center {colorClasses[color]}">
|
||||
<div class="text-2xl">{icon}</div>
|
||||
<div class="text-lg font-bold">{formatter ? formatter(value) : value}</div>
|
||||
<div class="text-sm {textColorClasses[color]}">{label}</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet summaryStatRow(label: string, value: number, formatter?: (value: number) => string)}
|
||||
<div class="flex justify-between">
|
||||
<span>{label}</span>
|
||||
<span class="font-medium">{formatter ? formatter(value) : value}</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<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';
|
||||
import { getTodayDateString, exampleWorkout, type WorkoutData, exercises } from '$lib/workout';
|
||||
import { getTodaysWorkout, saveWorkout } from './workout.remote';
|
||||
|
||||
let todayDate = getTodayDateString();
|
||||
|
||||
// Form state
|
||||
let form: WorkOutData = {
|
||||
let form: WorkoutData = {
|
||||
pushups: 0,
|
||||
situps: 0,
|
||||
plankSeconds: 0,
|
||||
|
|
@ -24,10 +23,6 @@
|
|||
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">
|
||||
|
|
@ -39,74 +34,10 @@
|
|||
|
||||
<!-- 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}
|
||||
/>
|
||||
<!-- Exercise Fields -->
|
||||
{#each exercises as { config, key }}
|
||||
<ExerciseField {...config} bind:value={form[key]} defaultValue={form[key]} />
|
||||
{/each}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mb-4 flex space-x-3">
|
||||
|
|
@ -114,7 +45,11 @@
|
|||
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
|
||||
{#if saveWorkout.pending !== 0}
|
||||
Loading...
|
||||
{:else}
|
||||
💾 Save Workout
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -129,8 +64,6 @@
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,14 +1,7 @@
|
|||
import { command, form, query } from '$app/server';
|
||||
import { db } from '$lib/db';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export interface WorkOutData {
|
||||
pushups: number;
|
||||
situps: number;
|
||||
plankSeconds: number;
|
||||
hangups: number;
|
||||
runKm: number;
|
||||
}
|
||||
import type { WorkoutData } from '../lib/workout/types';
|
||||
|
||||
export const saveWorkout = form(async (data) => {
|
||||
let pushups = Number(data.get('pushups'));
|
||||
|
|
@ -81,7 +74,7 @@ export const getTodaysWorkout = query(async () => {
|
|||
|
||||
// Take all rows and add them up into each category
|
||||
const row = result.rows[0];
|
||||
const workoutData: WorkOutData = {
|
||||
const workoutData: WorkoutData = {
|
||||
pushups: Number(row.pushups),
|
||||
situps: Number(row.situps),
|
||||
plankSeconds: Number(row.plank_time_seconds),
|
||||
|
|
@ -113,7 +106,7 @@ export const getWorkoutHistory = query(async (days: number = 7) => {
|
|||
|
||||
// Take all rows and add them up into each category
|
||||
const rows = result.rows;
|
||||
const workoutData: WorkOutData = {
|
||||
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),
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
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
|
||||
}
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
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
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue