clawd/gravl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(06-01): Implement workout swap/rotation system - API, DB, frontend

Browse Source 
- Add workout_swaps table migration (007_add_workout_swap_tracking.sql)
- Implement 4 API endpoints: POST /swap, DELETE /undo, GET /swaps, GET /available
- Add request validation, error handling, user isolation, muscle group checks
- Create SwapWorkoutModal React component with modal UI
- Integrate swap functionality into WorkoutPage
- Add proper styling for swap modal
- All endpoints require authentication
- Database migration includes performance indexes
This commit is contained in:
Clawd Agent
2026-03-06 15:06:31 +01:00
parent 0af9c3935b
commit 6ad917c9b9
6 changed files with 1022 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/WorkoutPage.jsx
+150 -21
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { Icon } from '../components/Icons'
import AlternativeModal from '../components/AlternativeModal'
import SwapWorkoutModal from '../components/SwapWorkoutModal'
const API_URL = '/api'
@@ -59,6 +59,9 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
const [alternativesLoading, setAlternativesLoading] = useState(false)
const [alternativesError, setAlternativesError] = useState('')
const [swappedExercises, setSwappedExercises] = useState({})
const [originalExercises, setOriginalExercises] = useState({}) // { exerciseId: originalExercise }
const [recentSwaps, setRecentSwaps] = useState({}) // { exerciseId: { undoId, timer } }
const [toast, setToast] = useState(null) // { message, type: 'success'|'error' }
const defaultRestSeconds = 90
const [restSeconds, setRestSeconds] = useState(defaultRestSeconds)
const [restRunning, setRestRunning] = useState(false)
@@ -81,6 +84,12 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
return () => clearInterval(timer)
}, [restRunning])
useEffect(() => {
if (!toast) return
const timer = setTimeout(() => setToast(null), 3000)
return () => clearTimeout(timer)
}, [toast])
const loadProgressions = async () => {
const progs = {}
for (const exercise of day.exercises) {
@@ -116,15 +125,106 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
}
}
const handleSelectAlternative = (alternative) => {
const handleSwapWorkout = async (alternative) => {
if (!swapExercise) return
setSwappedExercises(prev => ({
...prev,
[swapExercise.id]: alternative
}))
setSwapExercise(null)
try {
setAlternativesLoading(true)
// Call API to swap exercise
const res = await fetch(`${API_URL}/workouts/${swapExercise.id}/swap`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
fromExerciseId: swapExercise.exercise_id,
toExerciseId: alternative.exercise_id || alternative.id,
workoutDate: day.date
})
})
if (!res.ok) throw new Error('Swap failed')
const swapData = await res.json()
// Update local state
setSwappedExercises(prev => ({
...prev,
[swapExercise.id]: alternative
}))
// Store original exercise for undo
setOriginalExercises(prev => ({
...prev,
[swapExercise.id]: swapExercise
}))
// Show undo button for 30 seconds
const undoId = swapData.id || `swap-${swapExercise.id}-${Date.now()}`
const timer = setTimeout(() => {
setRecentSwaps(prev => {
const newSwaps = { ...prev }
delete newSwaps[swapExercise.id]
return newSwaps
})
}, 30000)
setRecentSwaps(prev => ({
...prev,
[swapExercise.id]: { undoId, timer }
}))
setToast({ message: `${swapExercise.name} bytt mot ${alternative.name}`, type: 'success' })
setSwapExercise(null)
} catch (err) {
console.error('Swap failed:', err)
setToast({ message: 'Kunde inte byta övning', type: 'error' })
} finally {
setAlternativesLoading(false)
}
}
const undoSwap = async (exerciseId) => {
try {
const swapInfo = recentSwaps[exerciseId]
if (!swapInfo) return
// Clear timer
clearTimeout(swapInfo.timer)
// Call API to undo
const res = await fetch(`${API_URL}/workouts/${swapInfo.undoId}/undo`, {
method: 'DELETE'
})
if (!res.ok) throw new Error('Undo failed')
// Update local state
setSwappedExercises(prev => {
const newSwaps = { ...prev }
delete newSwaps[exerciseId]
return newSwaps
})
setOriginalExercises(prev => {
const newOriginals = { ...prev }
delete newOriginals[exerciseId]
return newOriginals
})
setRecentSwaps(prev => {
const newSwaps = { ...prev }
delete newSwaps[exerciseId]
return newSwaps
})
setToast({ message: 'Byte ångrat', type: 'success' })
} catch (err) {
console.error('Undo failed:', err)
setToast({ message: 'Kunde inte ångra byte', type: 'error' })
}
}
const exercises = day.exercises?.filter(e => e.name) || []
const muscleGroups = getMuscleGroups(exercises)
@@ -330,6 +430,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
<h2>Övningar</h2>
{exercises.map((exercise, idx) => {
const swapped = swappedExercises[exercise.id]
const original = originalExercises[exercise.id]
const displayExercise = swapped
? { ...exercise, name: swapped.name, muscle_group: swapped.muscle_group, description: swapped.description }
: exercise
@@ -338,6 +439,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
<ExerciseCard
key={exercise.id || idx}
exercise={displayExercise}
originalExercise={original}
isSwapped={Boolean(swapped)}
logs={logs[exercise.id] || []}
progression={progressions[exercise.id]}
@@ -349,6 +451,8 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
onDeleteSet={onDeleteSet}
onStartRest={startRest}
onSwap={() => openAlternatives(exercise)}
onUndo={() => undoSwap(exercise.id)}
canUndo={Boolean(recentSwaps[exercise.id])}
/>
)
})}
@@ -365,19 +469,26 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
</button>
</main>
<AlternativeModal
<SwapWorkoutModal
exercise={swapExercise}
alternatives={alternatives}
loading={alternativesLoading}
error={alternativesError}
onSelect={handleSelectAlternative}
onSwap={handleSwapWorkout}
onClose={() => setSwapExercise(null)}
/>
{/* Toast Notification */}
{toast && (
<div className={`toast-notification toast-${toast.type}`}>
{toast.message}
</div>
)}
</div>
)
}
function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet, onDeleteSet, onSwap, isSwapped, onStartRest }) {
function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet, onDeleteSet, onSwap, isSwapped, onStartRest, originalExercise, onUndo, canUndo }) {
const [setList, setSetList] = useState([])
const [showAddModal, setShowAddModal] = useState(false)
const weightStep = 2.5
@@ -464,7 +575,9 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
<div className="exercise-info">
<h3>{exercise.name}</h3>
<span className="muscle-group">{exercise.muscle_group}</span>
{isSwapped && <span className="swap-badge">Alternativ</span>}
{isSwapped && originalExercise && (
<span className="swap-badge">Bytt från {originalExercise.name}</span>
)}
</div>
<div className="exercise-actions">
<div className="exercise-meta">
@@ -473,16 +586,32 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
{completedSets}/{setList.length}
</span>
</div>
<button
className="swap-btn"
onClick={(event) => {
event.stopPropagation()
onSwap?.()
}}
aria-label="Byt övning"
>
<Icon name="swap" size={16} />
</button>
<div className="exercise-buttons">
<button
className="swap-btn"
onClick={(event) => {
event.stopPropagation()
onSwap?.()
}}
aria-label="Byt övning"
title="Byt övning"
>
<Icon name="swap" size={16} />
</button>
{canUndo && (
<button
className="undo-btn"
onClick={(event) => {
event.stopPropagation()
onUndo?.()
}}
aria-label="Ångra byte"
title="Ångra byte"
>
<Icon name="undo" size={16} />
</button>
)}
</div>
</div>
</div>