Heftig rekatorering

src/routes/WorkoutLogger.svelte

@@ -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>