Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fitness: add exercise reorder buttons in template editor and active workout
All checks were successful
CI / update (push) Successful in 2m6s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-03-21 16:46:25 +01:00
parent 56bb606740
commit c5bfba5440
3 changed files with 88 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/js/workout.svelte.ts
View File

@@ -276,6 +276,14 @@ export function createWorkout() {
_persist();
}
function moveExercise(index: number, direction: number) {
const newIndex = index + direction;
if (newIndex < 0 || newIndex >= exercises.length) return;
const [item] = exercises.splice(index, 1);
exercises.splice(newIndex, 0, item);
_persist();
}
function addSet(exerciseIndex: number) {
const ex = exercises[exerciseIndex];
if (ex) {
@@ -487,6 +495,7 @@ export function createWorkout() {
resumeTimer,
addExercise,
removeExercise,
moveExercise,
addSet,
removeSet,
updateSet,

46
src/routes/fitness/workout/+page.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { Plus, Trash2, Play, Pencil, X, Save, CalendarClock, ChevronUp, ChevronDown, ArrowRight } from 'lucide-svelte';
import { Plus, Trash2, Play, Pencil, X, Save, CalendarClock, ChevronUp, ChevronDown, ArrowRight, GripVertical } from 'lucide-svelte';
import { getWorkout } from '$lib/js/workout.svelte';
import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
import { getExerciseById, getExerciseMetrics, METRIC_LABELS } from '$lib/data/exercises';
@@ -135,6 +135,15 @@
editorExercises = editorExercises.filter((_, i) => i !== idx);
}
/** @param {number} idx @param {number} dir */
function editorMoveExercise(idx, dir) {
const newIdx = idx + dir;
if (newIdx < 0 || newIdx >= editorExercises.length) return;
const copy = [...editorExercises];
[copy[idx], copy[newIdx]] = [copy[newIdx], copy[idx]];
editorExercises = copy;
}
/** @param {number} exIdx */
function editorAddSet(exIdx) {
const metrics = getExerciseMetrics(getExerciseById(editorExercises[exIdx].exerciseId));
@@ -404,9 +413,17 @@
<div class="editor-exercise">
<div class="editor-ex-header">
<span class="editor-ex-name">{exercise?.name ?? ex.exerciseId}</span>
<button class="remove-exercise" onclick={() => editorRemoveExercise(exIdx)} aria-label="Remove">
<Trash2 size={14} />
</button>
<div class="editor-ex-actions">
<button class="move-exercise" disabled={exIdx === 0} onclick={() => editorMoveExercise(exIdx, -1)} aria-label="Move up">
<ChevronUp size={14} />
</button>
<button class="move-exercise" disabled={exIdx === editorExercises.length - 1} onclick={() => editorMoveExercise(exIdx, 1)} aria-label="Move down">
<ChevronDown size={14} />
</button>
<button class="remove-exercise" onclick={() => editorRemoveExercise(exIdx)} aria-label="Remove">
<Trash2 size={14} />
</button>
</div>
</div>
<div class="editor-sets">
{#each ex.sets as set, setIdx (setIdx)}
@@ -841,6 +858,27 @@
font-weight: 600;
font-size: 0.85rem;
}
.editor-ex-actions {
display: flex;
align-items: center;
gap: 0.15rem;
}
.move-exercise {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
opacity: 0.6;
}
.move-exercise:hover:not(:disabled) {
opacity: 1;
color: var(--color-primary);
}
.move-exercise:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.remove-exercise {
background: none;
border: none;

45
src/routes/fitness/workout/active/+page.svelte
View File

@@ -1,6 +1,6 @@
<script>
import { goto } from '$app/navigation';
import { Plus, Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check } from 'lucide-svelte';
import { Plus, Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check, ChevronUp, ChevronDown } from 'lucide-svelte';
import { getWorkout } from '$lib/js/workout.svelte';
import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
import { getExerciseById, getExerciseMetrics } from '$lib/data/exercises';
@@ -487,13 +487,21 @@
<div class="exercise-block">
<div class="exercise-header">
<ExerciseName exerciseId={ex.exerciseId} />
<button
class="remove-exercise"
onclick={() => workout.removeExercise(exIdx)}
aria-label="Remove exercise"
>
<Trash2 size={16} />
</button>
<div class="exercise-header-actions">
<button class="move-exercise" disabled={exIdx === 0} onclick={() => workout.moveExercise(exIdx, -1)} aria-label="Move up">
<ChevronUp size={16} />
</button>
<button class="move-exercise" disabled={exIdx === workout.exercises.length - 1} onclick={() => workout.moveExercise(exIdx, 1)} aria-label="Move down">
<ChevronDown size={16} />
</button>
<button
class="remove-exercise"
onclick={() => workout.removeExercise(exIdx)}
aria-label="Remove exercise"
>
<Trash2 size={16} />
</button>
</div>
</div>
<SetTable
@@ -837,6 +845,27 @@
align-items: center;
margin-bottom: 0.5rem;
}
.exercise-header-actions {
display: flex;
align-items: center;
gap: 0.15rem;
}
.move-exercise {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
opacity: 0.6;
}
.move-exercise:hover:not(:disabled) {
opacity: 1;
color: var(--color-primary);
}
.move-exercise:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.remove-exercise {
background: none;
border: none;