Working example

src/routes/+page.svelte

@@ -1,3 +1,32 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Here by text</p>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<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();
+		}
+	}
+</script>
+
+<div class="min-h-screen bg-gray-100 py-8">
+	<div class="container mx-auto px-4">
+		<h1 class="mb-8 text-center text-4xl font-bold text-gray-800">🏋️ Egentrening</h1>
+		<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>
+
+			<!-- Log new workout -->
+			<div>
+				<WorkoutLogger on:workoutSaved={handleWorkoutSaved} />
+			</div>
+		</div>
+	</div>
+</div>

src/routes/DbConnection.svelte

@@ -0,0 +1,12 @@
+<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>

src/routes/db.remote.js

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

src/routes/workout.remote.ts

@@ -0,0 +1,109 @@
+import { query } from '$app/server';
+import { db } from '$lib/db';
+import { z } from 'zod';
+
+interface WorkOutData {
+	pushups: number;
+	situps: number;
+	plankSeconds: number;
+	runKm: number;
+}
+
+export const saveWorkout = query(
+	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;
+
+		// 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');
+		}
+
+		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)
+			ON CONFLICT (date)
+			DO UPDATE SET
+				pushups = $1,
+				situps = $2,
+				plank_time_seconds = $3,
+				run_distance_km = $4,
+				updated_at = CURRENT_TIMESTAMP
+			RETURNING *
+			`,
+				[pushups, situps, plankSeconds, runKm]
+			);
+
+			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 {
+		// Get today's workout data
+		const result = await db.query('SELECT * FROM daily_exercises WHERE date = CURRENT_DATE');
+
+		if (result.rows.length === 0) {
+			return {
+				data: null,
+				message: 'No workout recorded for today'
+			};
+		}
+
+		return {
+			success: true,
+			data: result.rows[0]
+		};
+	} catch (error) {
+		console.error('Error fetching workout:', error);
+		throw new Error('Failed to fetch workout from database');
+	}
+});
+
+export const getWorkoutHistory = query(async (days: number = 7) => {
+	try {
+		// Get workout history for the last N days
+		const result = await db.query(
+			`
+			SELECT * FROM daily_exercises
+			WHERE date >= CURRENT_DATE - INTERVAL '$1 days'
+			ORDER BY date DESC
+			`,
+			[days]
+		);
+
+		return {
+			success: true,
+			data: result.rows,
+			message: `Retrieved ${result.rows.length} workout records`
+		};
+	} catch (error) {
+		console.error('Error fetching workout history:', error);
+		throw new Error('Failed to fetch workout history from database');
+	}
+});