04-05: Reset to Original feature - custom workouts can be reverted to program versions

- Added reset button (refresh icon) to custom workout cards
- Implemented confirmation dialog to prevent accidental resets
- Integrated with DELETE /api/custom-workouts/:id endpoint
- Added CSS styling: reset button, success message, modal dialog
- Added refresh icon to SVG library
- Frontend build successful

Changes:
- frontend/src/pages/WorkoutSelectPage.jsx (reset flow logic)
- frontend/src/App.css (170 new lines for reset/modal styling)
- frontend/src/components/Icons.jsx (refresh icon)
- Checkpoint updated with task completion metadata
This commit is contained in:
2026-03-01 20:44:45 +01:00
parent b5c9250a10
commit cf85e9e314
4 changed files with 288 additions and 9 deletions
+96
View File
@@ -20,12 +20,23 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
const [customWorkouts, setCustomWorkouts] = useState([])
const [loading, setLoading] = useState(true)
const [selectedWorkout, setSelectedWorkout] = useState(null)
const [resetConfirm, setResetConfirm] = useState(null)
const [resetting, setResetting] = useState(false)
const [successMessage, setSuccessMessage] = useState(null)
useEffect(() => {
fetchProgram()
fetchCustomWorkouts()
}, [])
// Auto-clear success message after 3 seconds
useEffect(() => {
if (successMessage) {
const timer = setTimeout(() => setSuccessMessage(null), 3000)
return () => clearTimeout(timer)
}
}, [successMessage])
const fetchProgram = async () => {
try {
const res = await fetch(`${API_URL}/programs/1`)
@@ -52,6 +63,11 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
}
}
const getCustomWorkoutId = (programDayId) => {
const customWorkout = customWorkouts.find(cw => cw.source_program_day_id === programDayId)
return customWorkout?.id
}
const isWorkoutCustom = (programDayId) => {
return customWorkouts.some(cw => cw.source_program_day_id === programDayId)
}
@@ -66,6 +82,38 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
}
}
const handleResetClick = (e, workoutId) => {
e.stopPropagation()
setResetConfirm(workoutId)
}
const handleConfirmReset = async () => {
if (!resetConfirm) return
setResetting(true)
try {
const token = localStorage.getItem('token')
const res = await fetch(`${API_URL}/custom-workouts/${resetConfirm}`, {
method: 'DELETE',
headers: { 'Authorization': `Bearer ${token}` }
})
if (res.ok) {
// Refresh custom workouts list
await fetchCustomWorkouts()
setSuccessMessage('Passet återställdes till original')
setSelectedWorkout(null)
setResetConfirm(null)
} else {
console.error('Failed to reset workout:', res.status)
}
} catch (err) {
console.error('Error resetting workout:', err)
} finally {
setResetting(false)
}
}
if (loading) {
return (
<div className="select-page loading">
@@ -90,6 +138,13 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
Vilken träning vill du köra idag?
</p>
{successMessage && (
<div className="success-message">
<Icon name="check" size={18} />
{successMessage}
</div>
)}
<div className="workout-grid">
{program?.days?.map((workout) => {
const iconName = getWorkoutIconName(workout.name)
@@ -97,6 +152,7 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
const isSelected = selectedWorkout?.id === workout.id
const exerciseCount = workout.exercises?.filter(e => e.name).length || 0
const isCustom = isWorkoutCustom(workout.id)
const customWorkoutId = getCustomWorkoutId(workout.id)
return (
<div
@@ -112,6 +168,16 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
<span className={`workout-badge ${isCustom ? 'custom' : 'program'}`}>
{isCustom ? 'Anpassad' : 'Program'}
</span>
{isCustom && (
<button
className="reset-btn"
title="Återställ till original"
onClick={(e) => handleResetClick(e, customWorkoutId)}
aria-label="Återställ workout"
>
<Icon name="refresh" size={16} />
</button>
)}
</div>
<div className="workout-details">
<h3>{workout.name}</h3>
@@ -146,6 +212,36 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
</div>
)}
</main>
{/* Reset confirmation dialog */}
{resetConfirm && (
<div className="modal-overlay" onClick={() => setResetConfirm(null)}>
<div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2>Återställ till original?</h2>
</div>
<div className="modal-body">
<p>Är du säker? Dina ändringar kommer att försvinna och passet återställs till programversionen.</p>
</div>
<div className="modal-footer">
<button
className="modal-btn cancel"
onClick={() => setResetConfirm(null)}
disabled={resetting}
>
Avbryt
</button>
<button
className="modal-btn confirm"
onClick={handleConfirmReset}
disabled={resetting}
>
{resetting ? 'Återställer...' : 'Återställ'}
</button>
</div>
</div>
</div>
)}
</div>
)
}