Heftig rekatorering
This commit is contained in:
Håkon Størdal
parent
e5e68a7764
commit
201280dc54
16 changed files with 700 additions and 534 deletions
63
Dockerfile
63
Dockerfile
|
|
@ -1,64 +1,37 @@
|
|||
# Use the official Node.js runtime as the base image
|
||||
FROM node:20-alpine AS base
|
||||
# Build stage - includes dev dependencies for building the app
|
||||
FROM node:22-alpine AS build
|
||||
|
||||
# Set the working directory inside the container
|
||||
# Set working directory for build operations
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package.json and package-lock.json (if available)
|
||||
# Copy package files to install dependencies
|
||||
COPY package*.json ./
|
||||
# Install all dependencies including dev dependencies needed for build
|
||||
RUN npm ci
|
||||
|
||||
# Install all dependencies (including devDependencies for building)
|
||||
RUN npm ci && npm cache clean --force
|
||||
|
||||
# Copy the rest of the application code
|
||||
# Copy source code and build the application
|
||||
COPY . .
|
||||
|
||||
# Set build-time environment variables for SvelteKit
|
||||
ARG DATABASE_URL="postgresql://builduser:buildpass@localhost:5432/builddb"
|
||||
ENV DATABASE_URL=${DATABASE_URL}
|
||||
|
||||
# Run SvelteKit sync to generate .svelte-kit directory and prepare the build
|
||||
RUN npm run prepare
|
||||
|
||||
# Build the application with environment variables available
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM node:20-alpine AS production
|
||||
# Production stage - clean runtime environment
|
||||
FROM node:22-alpine AS production
|
||||
|
||||
# Install dumb-init for proper signal handling
|
||||
RUN apk add --no-cache dumb-init
|
||||
|
||||
# Create a non-root user
|
||||
RUN addgroup -g 1001 -S nodejs
|
||||
RUN adduser -S svelte -u 1001
|
||||
|
||||
# Set the working directory
|
||||
# Set working directory for runtime
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package.json and package-lock.json
|
||||
# Copy package files for production install
|
||||
COPY package*.json ./
|
||||
# Install only production dependencies (excludes dev dependencies)
|
||||
RUN npm ci --only=production
|
||||
|
||||
# Install only production dependencies
|
||||
RUN npm ci --only=production && npm cache clean --force
|
||||
# Copy built application from build stage
|
||||
COPY --from=build /app/build ./build
|
||||
|
||||
# Copy the built application from the previous stage
|
||||
COPY --from=base --chown=svelte:nodejs /app/build ./build
|
||||
COPY --from=base --chown=svelte:nodejs /app/package.json ./package.json
|
||||
|
||||
# Switch to the non-root user
|
||||
USER svelte
|
||||
|
||||
# Expose the port the app runs on
|
||||
# Expose the port the application will run on
|
||||
EXPOSE 3000
|
||||
|
||||
# Set environment variables - DATABASE_URL can be overridden at runtime
|
||||
# Set environment to production
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV DATABASE_URL=""
|
||||
|
||||
# Use dumb-init to handle signals properly
|
||||
ENTRYPOINT ["dumb-init", "--"]
|
||||
|
||||
# Start the application with environment file support
|
||||
# Start the application
|
||||
CMD ["node", "build"]
|
||||
|
|
|
|||
|
|
@ -1,148 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { getTodaysWorkout } from '../routes/workout.remote';
|
||||
|
||||
// Workout data
|
||||
let workoutData: any = null;
|
||||
let loading = true;
|
||||
let error = '';
|
||||
|
||||
// Today's date for display
|
||||
let todayDate = '';
|
||||
|
||||
onMount(() => {
|
||||
const today = new Date();
|
||||
todayDate = today.toLocaleDateString('en-CA'); // YYYY-MM-DD format
|
||||
loadTodaysWorkout();
|
||||
});
|
||||
|
||||
export async function loadTodaysWorkout() {
|
||||
loading = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const result = await getTodaysWorkout();
|
||||
workoutData = result.data;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to load workout data';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
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`;
|
||||
}
|
||||
</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>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<div class="text-gray-500">⏳ Loading workout data...</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<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
|
||||
on:click={loadTodaysWorkout}
|
||||
class="mt-2 rounded bg-red-200 px-3 py-1 text-xs text-red-700 hover:bg-red-300"
|
||||
>
|
||||
🔄 Retry
|
||||
</button>
|
||||
</div>
|
||||
{:else 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 -->
|
||||
<div class="rounded-lg bg-blue-50 p-4 text-center">
|
||||
<div class="text-2xl">💪</div>
|
||||
<div class="text-lg font-bold text-blue-700">{workoutData.pushups}</div>
|
||||
<div class="text-sm text-blue-600">Push-ups</div>
|
||||
</div>
|
||||
|
||||
<!-- Sit-ups -->
|
||||
<div class="rounded-lg bg-green-50 p-4 text-center">
|
||||
<div class="text-2xl">🏋️</div>
|
||||
<div class="text-lg font-bold text-green-700">{workoutData.situps}</div>
|
||||
<div class="text-sm text-green-600">Sit-ups</div>
|
||||
</div>
|
||||
|
||||
<!-- Plank -->
|
||||
<div class="rounded-lg bg-orange-50 p-4 text-center">
|
||||
<div class="text-2xl">🧘</div>
|
||||
<div class="text-lg font-bold text-orange-700">
|
||||
{formatTime(workoutData.plank_time_seconds)}
|
||||
</div>
|
||||
<div class="text-sm text-orange-600">Plank</div>
|
||||
</div>
|
||||
|
||||
<!-- Running -->
|
||||
<div class="rounded-lg bg-red-50 p-4 text-center">
|
||||
<div class="text-2xl">🏃</div>
|
||||
<div class="text-lg font-bold text-red-700">{workoutData.run_distance_km} km</div>
|
||||
<div class="text-sm text-red-600">Running</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Stats -->
|
||||
<div class="mt-6 rounded-md bg-gray-50 p-4">
|
||||
<h3 class="mb-2 font-medium text-gray-700">📊 Summary</h3>
|
||||
<div class="space-y-1 text-sm text-gray-600">
|
||||
<div class="flex justify-between">
|
||||
<span>Total exercises:</span>
|
||||
<span class="font-medium">{workoutData.pushups + workoutData.situps}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Plank time:</span>
|
||||
<span class="font-medium">{formatTime(workoutData.plank_time_seconds)}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>Distance:</span>
|
||||
<span class="font-medium">{workoutData.run_distance_km} km</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timestamps -->
|
||||
{#if workoutData.created_at || workoutData.updated_at}
|
||||
<div class="mt-4 text-xs text-gray-500">
|
||||
{#if workoutData.created_at}
|
||||
<div>Created: {new Date(workoutData.created_at).toLocaleString()}</div>
|
||||
{/if}
|
||||
{#if workoutData.updated_at && workoutData.updated_at !== workoutData.created_at}
|
||||
<div>Updated: {new Date(workoutData.updated_at).toLocaleString()}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Refresh button -->
|
||||
<div class="mt-6 text-center">
|
||||
<button
|
||||
on:click={loadTodaysWorkout}
|
||||
disabled={loading}
|
||||
class="rounded bg-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 disabled:opacity-50"
|
||||
>
|
||||
{loading ? '⏳ Loading...' : '🔄 Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
import { saveWorkout as saveWorkoutRemote, getTodaysWorkout } from '../routes/workout.remote';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Form data
|
||||
let pushups = 0;
|
||||
let situps = 0;
|
||||
let plankSeconds = 0;
|
||||
let runKm = 0;
|
||||
|
||||
// UI state
|
||||
let loading = false;
|
||||
let message = '';
|
||||
let messageType: 'success' | 'error' | '' = '';
|
||||
|
||||
// Today's date for display
|
||||
let todayDate = '';
|
||||
|
||||
onMount(() => {
|
||||
const today = new Date();
|
||||
todayDate = today.toLocaleDateString('en-CA'); // YYYY-MM-DD format
|
||||
loadTodaysWorkout();
|
||||
});
|
||||
|
||||
async function loadTodaysWorkout() {
|
||||
try {
|
||||
const result = await getTodaysWorkout();
|
||||
if (result.data) {
|
||||
pushups = result.data.pushups || 0;
|
||||
situps = result.data.situps || 0;
|
||||
plankSeconds = result.data.plank_time_seconds || 0;
|
||||
runKm = result.data.run_distance_km || 0.0;
|
||||
}
|
||||
} catch (error) {
|
||||
// If no data for today, that's fine - keep defaults
|
||||
console.log('No workout data for today yet');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveWorkout() {
|
||||
loading = true;
|
||||
message = '';
|
||||
|
||||
try {
|
||||
const result = await saveWorkoutRemote({
|
||||
pushups,
|
||||
situps,
|
||||
plankSeconds,
|
||||
runKm
|
||||
});
|
||||
|
||||
message = result.message || 'Workout saved successfully! 🎉';
|
||||
messageType = 'success';
|
||||
|
||||
// Dispatch event to refresh display
|
||||
dispatch('workoutSaved');
|
||||
} catch (error) {
|
||||
message = error instanceof Error ? error.message : 'Error saving workout. Please try again.';
|
||||
messageType = 'error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
pushups = 0;
|
||||
situps = 0;
|
||||
plankSeconds = 0;
|
||||
runKm = 0;
|
||||
message = '';
|
||||
messageType = '';
|
||||
}
|
||||
|
||||
// Quick add buttons
|
||||
function quickAdd(exercise: string, amount: number) {
|
||||
switch (exercise) {
|
||||
case 'pushups':
|
||||
pushups += amount;
|
||||
break;
|
||||
case 'situps':
|
||||
situps += amount;
|
||||
break;
|
||||
case 'plank':
|
||||
plankSeconds += amount;
|
||||
break;
|
||||
case 'run':
|
||||
runKm += amount;
|
||||
break;
|
||||
}
|
||||
}
|
||||
</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">Log Today's Workout</h2>
|
||||
|
||||
<div class="mb-4 text-center text-gray-600">
|
||||
📅 {todayDate}
|
||||
</div>
|
||||
|
||||
<!-- Push-ups -->
|
||||
<div class="mb-6">
|
||||
<label for="pushups" class="mb-2 block text-sm font-medium text-gray-700"> 💪 Push-ups </label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
id="pushups"
|
||||
type="number"
|
||||
bind:value={pushups}
|
||||
min="0"
|
||||
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="0"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('pushups', 10)}
|
||||
class="rounded bg-blue-100 px-3 py-1 text-xs text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
+10
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('pushups', 25)}
|
||||
class="rounded bg-blue-100 px-3 py-1 text-xs text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
+25
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sit-ups -->
|
||||
<div class="mb-6">
|
||||
<label for="situps" class="mb-2 block text-sm font-medium text-gray-700"> 🏋️ Sit-ups </label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
id="situps"
|
||||
type="number"
|
||||
bind:value={situps}
|
||||
min="0"
|
||||
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="0"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('situps', 10)}
|
||||
class="rounded bg-green-100 px-3 py-1 text-xs text-green-700 hover:bg-green-200"
|
||||
>
|
||||
+10
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('situps', 20)}
|
||||
class="rounded bg-green-100 px-3 py-1 text-xs text-green-700 hover:bg-green-200"
|
||||
>
|
||||
+20
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plank -->
|
||||
<div class="mb-6">
|
||||
<label for="plank" class="mb-2 block text-sm font-medium text-gray-700">
|
||||
🧘 Plank (seconds)
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
id="plank"
|
||||
type="number"
|
||||
bind:value={plankSeconds}
|
||||
min="0"
|
||||
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="0"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('plank', 30)}
|
||||
class="rounded bg-orange-100 px-3 py-1 text-xs text-orange-700 hover:bg-orange-200"
|
||||
>
|
||||
+30s
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('plank', 60)}
|
||||
class="rounded bg-orange-100 px-3 py-1 text-xs text-orange-700 hover:bg-orange-200"
|
||||
>
|
||||
+60s
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Running -->
|
||||
<div class="mb-6">
|
||||
<label for="run" class="mb-2 block text-sm font-medium text-gray-700"> 🏃 Running (km) </label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
id="run"
|
||||
type="number"
|
||||
bind:value={runKm}
|
||||
min="0"
|
||||
step="0.1"
|
||||
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="0"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('run', 1)}
|
||||
class="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
|
||||
>
|
||||
+1km
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => quickAdd('run', 2.5)}
|
||||
class="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
|
||||
>
|
||||
+2.5km
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="mb-4 flex space-x-3">
|
||||
<button
|
||||
on:click={saveWorkout}
|
||||
disabled={loading}
|
||||
class="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{loading ? '⏳ Saving...' : '💾 Save Workout'}
|
||||
</button>
|
||||
<button
|
||||
on:click={resetForm}
|
||||
disabled={loading}
|
||||
class="rounded-md bg-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-400 disabled:opacity-50"
|
||||
>
|
||||
🔄 Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Message display -->
|
||||
{#if message}
|
||||
<div
|
||||
class="rounded-md p-3 text-sm font-medium {messageType === 'success'
|
||||
? 'border border-green-200 bg-green-100 text-green-800'
|
||||
: 'border border-red-200 bg-red-100 text-red-800'}"
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick example -->
|
||||
<div class="mt-6 rounded-md bg-gray-50 p-4">
|
||||
<h3 class="mb-2 text-sm font-medium text-gray-700">Your Example:</h3>
|
||||
<div class="space-y-1 text-sm text-gray-600">
|
||||
<div>💪 Push-ups: 100</div>
|
||||
<div>🏋️ Sit-ups: 50</div>
|
||||
<div>🧘 Plank: 0 seconds</div>
|
||||
<div>🏃 Running: 4.0 km</div>
|
||||
</div>
|
||||
<button
|
||||
on:click={() => {
|
||||
pushups = 100;
|
||||
situps = 50;
|
||||
plankSeconds = 0;
|
||||
runKm = 4.0;
|
||||
}}
|
||||
class="mt-2 rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300"
|
||||
>
|
||||
Load Example
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<p>Here be connection: {await testConnection().current}</p>
|
||||
|
||||
<p>Here be connection: {testConnection().current}</p>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading...</p>
|
||||
107
src/lib/components/ExampleNewExercise.svelte
Normal file
107
src/lib/components/ExampleNewExercise.svelte
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script lang="ts">
|
||||
import ExerciseField from "../../routes/ExerciseField.svelte";
|
||||
import WorkoutStatCard from "../../routes/WorkoutStatCard.svelte";
|
||||
|
||||
// Example of how to easily add new exercises to the system
|
||||
// Just define the configuration and use the reusable components
|
||||
|
||||
let squats = $state(0);
|
||||
let burpees = $state(0);
|
||||
|
||||
// New exercise configurations
|
||||
const newExerciseConfigs = {
|
||||
squats: {
|
||||
name: 'Squats',
|
||||
icon: '🦵',
|
||||
color: 'purple' as const,
|
||||
quickAddOptions: [
|
||||
{ label: '+15', value: 15 },
|
||||
{ label: '+30', value: 30 }
|
||||
],
|
||||
max: 9999,
|
||||
step: 1
|
||||
},
|
||||
burpees: {
|
||||
name: 'Burpees',
|
||||
icon: '🤸',
|
||||
color: 'yellow' as const,
|
||||
quickAddOptions: [
|
||||
{ label: '+5', value: 5 },
|
||||
{ label: '+10', value: 10 }
|
||||
],
|
||||
max: 999,
|
||||
step: 1
|
||||
}
|
||||
};
|
||||
|
||||
function handleSquatsChange(value: number) {
|
||||
squats = value;
|
||||
}
|
||||
|
||||
function handleBurpeesChange(value: number) {
|
||||
burpees = value;
|
||||
}
|
||||
</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">Example: Adding New Exercises</h2>
|
||||
|
||||
<!-- Form Fields using reusable ExerciseField component -->
|
||||
<div class="mb-6">
|
||||
<ExerciseField
|
||||
label={newExerciseConfigs.squats.name}
|
||||
icon={newExerciseConfigs.squats.icon}
|
||||
name="squats"
|
||||
bind:value={squats}
|
||||
onchange={handleSquatsChange}
|
||||
quickAddOptions={newExerciseConfigs.squats.quickAddOptions}
|
||||
color="blue"
|
||||
max={newExerciseConfigs.squats.max}
|
||||
step={newExerciseConfigs.squats.step}
|
||||
/>
|
||||
|
||||
<ExerciseField
|
||||
label={newExerciseConfigs.burpees.name}
|
||||
icon={newExerciseConfigs.burpees.icon}
|
||||
name="burpees"
|
||||
bind:value={burpees}
|
||||
onchange={handleBurpeesChange}
|
||||
quickAddOptions={newExerciseConfigs.burpees.quickAddOptions}
|
||||
color="green"
|
||||
max={newExerciseConfigs.burpees.max}
|
||||
step={newExerciseConfigs.burpees.step}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Display Cards using reusable WorkoutStatCard component -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<WorkoutStatCard
|
||||
icon={newExerciseConfigs.squats.icon}
|
||||
value={squats}
|
||||
label={newExerciseConfigs.squats.name}
|
||||
color="blue"
|
||||
/>
|
||||
|
||||
<WorkoutStatCard
|
||||
icon={newExerciseConfigs.burpees.icon}
|
||||
value={burpees}
|
||||
label={newExerciseConfigs.burpees.name}
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div class="mt-6 rounded-md bg-gray-50 p-4">
|
||||
<h3 class="mb-2 text-sm font-medium text-gray-700">How to add new exercises:</h3>
|
||||
<ol class="list-inside list-decimal space-y-1 text-sm text-gray-600">
|
||||
<li>Define exercise config with name, icon, color, and quick-add options</li>
|
||||
<li>
|
||||
Use <code class="rounded bg-gray-200 px-1">ExerciseField</code> component for input forms
|
||||
</li>
|
||||
<li>
|
||||
Use <code class="rounded bg-gray-200 px-1">WorkoutStatCard</code> component for display
|
||||
</li>
|
||||
<li>Add to <code class="rounded bg-gray-200 px-1">workout-utils.ts</code> for consistency</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
29
src/lib/components/QuickAddButton.svelte
Normal file
29
src/lib/components/QuickAddButton.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import type { ColorExercise } from '../../routes/workoutData';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
onclick: () => void;
|
||||
color: ColorExercise;
|
||||
}
|
||||
|
||||
let { label, onclick, color = 'blue' }: Props = $props();
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
|
@ -10,7 +10,8 @@ const getPool = () => {
|
|||
if (!pool) {
|
||||
pool = new Pool({
|
||||
connectionString: getDatabaseUrl,
|
||||
ssl: false
|
||||
ssl: false,
|
||||
options: '-c timezone=Europe/Oslo'
|
||||
});
|
||||
}
|
||||
return pool;
|
||||
|
|
@ -63,6 +64,11 @@ export const db = {
|
|||
)
|
||||
`);
|
||||
|
||||
await this.query(`
|
||||
ALTER TABLE daily_exercises
|
||||
ADD COLUMN IF NOT EXISTS hangups INTEGER DEFAULT 0
|
||||
`);
|
||||
|
||||
// Create index for faster date lookups
|
||||
await this.query(`
|
||||
CREATE INDEX IF NOT EXISTS idx_daily_exercises_date
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
55
src/routes/ExerciseField.svelte
Normal file
55
src/routes/ExerciseField.svelte
Normal 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>
|
||||
120
src/routes/WorkoutDisplay.svelte
Normal file
120
src/routes/WorkoutDisplay.svelte
Normal 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>
|
||||
152
src/routes/WorkoutLogger.svelte
Normal file
152
src/routes/WorkoutLogger.svelte
Normal 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>
|
||||
37
src/routes/WorkoutStatCard.svelte
Normal file
37
src/routes/WorkoutStatCard.svelte
Normal 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>
|
||||
|
|
@ -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
72
src/routes/workoutData.ts
Normal 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
|
||||
}
|
||||
};
|
||||
28
src/routes/workoutUtils.ts
Normal file
28
src/routes/workoutUtils.ts
Normal 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
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue