87 lines
2.5 KiB
Svelte
87 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import ExerciseField from './ExerciseField.svelte';
|
|
import { getTodayDateString, exampleWorkout, type WorkoutData, exercises } from '$lib/workout';
|
|
import { getTodaysWorkout, saveWorkout } from './workout.remote';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
const todayDate = getTodayDateString();
|
|
|
|
// Form state
|
|
let form: WorkoutData = $state({
|
|
pushups: 0,
|
|
situps: 0,
|
|
plankSeconds: 0,
|
|
hangups: 0,
|
|
runKm: 0
|
|
});
|
|
|
|
onMount(async () => {
|
|
const result = await getTodaysWorkout();
|
|
form = result.data ?? form;
|
|
});
|
|
|
|
function loadExample() {
|
|
form = { ...exampleWorkout };
|
|
}
|
|
</script>
|
|
|
|
<div class="mx-auto w-full max-w-md rounded-lg bg-white p-4 shadow-lg sm:p-6">
|
|
<!-- Header -->
|
|
<header class="mb-6 text-center">
|
|
<h2 class="text-xl font-bold text-gray-800">Log Today's Workout</h2>
|
|
<div class="mt-2 text-gray-600">📅 {todayDate}</div>
|
|
</header>
|
|
|
|
<!-- Main Form -->
|
|
<form {...saveWorkout}>
|
|
<!-- Exercise Fields -->
|
|
{#each exercises as { config, key }}
|
|
<ExerciseField {...config} bind:value={form[key]} />
|
|
{/each}
|
|
|
|
<!-- 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"
|
|
>
|
|
{#if saveWorkout.pending !== 0}
|
|
Loading...
|
|
{:else}
|
|
💾 Save Workout
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Message Display -->
|
|
{#if saveWorkout.result?.success}
|
|
<div
|
|
transition:fade={{ duration: 300 }}
|
|
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}
|
|
|
|
<!-- Example Section -->
|
|
<section class="rounded-md bg-gray-50 p-3 sm: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>
|