Phase 06 Tier 1: Complete Backend Implementation - Recovery Tracking & Swap System
COMPLETED TASKS: ✅ 06-01: Workout Swap System - Added swapped_from_id to workout_logs - Created workout_swaps table for history - POST /api/workouts/:id/swap endpoint - GET /api/workouts/available endpoint - Reversible swaps with audit trail ✅ 06-02: Muscle Group Recovery Tracking - Created muscle_group_recovery table - Implemented calculateRecoveryScore() function - GET /api/recovery/muscle-groups endpoint - GET /api/recovery/most-recovered endpoint - Auto-tracking on workout log completion ✅ 06-03: Smart Workout Recommendations - GET /api/recommendations/smart-workout endpoint - 7-day workout analysis algorithm - Recovery-based filtering (>30% threshold) - Top 3 recommendations with context - Context-aware reasoning messages DATABASE CHANGES: - Added 4 new tables: muscle_group_recovery, workout_swaps, custom_workouts, custom_workout_exercises - Extended workout_logs with: swapped_from_id, source_type, custom_workout_id, custom_workout_exercise_id - Created 7 new indexes for performance IMPLEMENTATION: - Recovery service with 4 core functions - 2 new route handlers (recovery, smartRecommendations) - Updated workouts router with swap endpoints - Integrated recovery tracking into POST /api/logs - Full error handling and logging TESTING: - Test file created: /backend/test/phase-06-tests.js - Ready for E2E and staging validation STATUS: Ready for frontend integration and production review Branch: feature/06-phase-06
This commit is contained in:
@@ -267,6 +267,41 @@ export const Icons = {
|
||||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
|
||||
</svg>
|
||||
),
|
||||
alertCircle: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="12" y1="8" x2="12" y2="12"/>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
),
|
||||
checkCircle: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
),
|
||||
zap: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</svg>
|
||||
),
|
||||
arrowDown: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<polyline points="19 12 12 19 5 12"/>
|
||||
</svg>
|
||||
),
|
||||
play: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
),
|
||||
undo: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 7v6h6"/>
|
||||
<path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/>
|
||||
</svg>
|
||||
),
|
||||
}
|
||||
|
||||
// Icon component wrapper
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
.muscle-recovery-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 16px;
|
||||
background: #0a0a1f;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.muscle-recovery-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.muscle-recovery-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.muscle-recovery-subtitle {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.muscle-recovery-refresh {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ccff00;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.muscle-recovery-refresh:hover {
|
||||
background: rgba(204, 255, 0, 0.1);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.muscle-recovery-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 40px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.muscle-recovery-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid rgba(204, 255, 0, 0.2);
|
||||
border-top: 2px solid #ccff00;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.muscle-recovery-loading p {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.muscle-recovery-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 68, 68, 0.1);
|
||||
border: 1px solid rgba(255, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #ff8888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.muscle-recovery-empty {
|
||||
padding: 40px 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.muscle-recovery-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.muscle-recovery-grid--grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.muscle-recovery-grid--list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.muscle-recovery-item {
|
||||
padding: 12px;
|
||||
background: rgba(42, 42, 62, 0.6);
|
||||
border: 1px solid rgba(204, 255, 0, 0.15);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.muscle-recovery-item:hover {
|
||||
background: rgba(42, 42, 62, 1);
|
||||
border-color: rgba(204, 255, 0, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.muscle-recovery-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.muscle-recovery-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.muscle-recovery-time {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.muscle-recovery-grid--grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.muscle-recovery-list {
|
||||
padding: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.muscle-recovery-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.muscle-recovery-grid--grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.muscle-recovery-item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* MuscleGroupRecoveryList.jsx
|
||||
* Displays all muscle groups with their recovery percentages
|
||||
* Shows last workout date for each muscle group
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import RecoveryBadge from './RecoveryBadge'
|
||||
import { Icon } from './Icons'
|
||||
import './MuscleGroupRecoveryList.css'
|
||||
|
||||
const API_URL = '/api'
|
||||
|
||||
function MuscleGroupRecoveryList({ layout = 'grid', onSelect = null, className = '' }) {
|
||||
const [recoveryData, setRecoveryData] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecoveryData()
|
||||
}, [])
|
||||
|
||||
const fetchRecoveryData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const response = await fetch(`${API_URL}/recovery/muscle-groups`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch recovery data')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setRecoveryData(data)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch recovery data:', err)
|
||||
setError('Kunde inte hämta återhämtningsdata')
|
||||
// Fallback mock data for testing
|
||||
setRecoveryData([
|
||||
{ muscleGroup: 'Bröst', percentage: 85, lastWorkout: '2 dagar sedan' },
|
||||
{ muscleGroup: 'Rygg', percentage: 42, lastWorkout: '4 dagar sedan' },
|
||||
{ muscleGroup: 'Ben', percentage: 95, lastWorkout: '1 dag sedan' },
|
||||
{ muscleGroup: 'Axlar', percentage: 60, lastWorkout: '3 dagar sedan' },
|
||||
{ muscleGroup: 'Armar', percentage: 75, lastWorkout: '2 dagar sedan' },
|
||||
])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchRecoveryData()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={`muscle-recovery-list ${className}`}>
|
||||
<div className="muscle-recovery-loading">
|
||||
<div className="muscle-recovery-spinner" />
|
||||
<p>Laddar återhämtningsdata...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`muscle-recovery-list muscle-recovery-list--${layout} ${className}`}>
|
||||
<div className="muscle-recovery-header">
|
||||
<div>
|
||||
<h2>Muskelgruppers återhämtning</h2>
|
||||
<p className="muscle-recovery-subtitle">Beredskap för träning baserat på senaste aktivitet</p>
|
||||
</div>
|
||||
<button
|
||||
className="muscle-recovery-refresh"
|
||||
onClick={handleRefresh}
|
||||
aria-label="Uppdatera"
|
||||
title="Uppdatera"
|
||||
>
|
||||
<Icon name="refresh" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="muscle-recovery-error">
|
||||
<Icon name="alertCircle" size={16} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recoveryData.length === 0 ? (
|
||||
<div className="muscle-recovery-empty">
|
||||
<p>Ingen träningsdata tillgänglig än</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`muscle-recovery-grid muscle-recovery-grid--${layout}`}>
|
||||
{recoveryData.map((item, idx) => (
|
||||
<div
|
||||
key={item.muscleGroup || idx}
|
||||
className="muscle-recovery-item"
|
||||
onClick={() => onSelect?.(item)}
|
||||
>
|
||||
<div className="muscle-recovery-item-header">
|
||||
<span className="muscle-recovery-name">{item.muscleGroup}</span>
|
||||
{item.lastWorkout && (
|
||||
<span className="muscle-recovery-time">{item.lastWorkout}</span>
|
||||
)}
|
||||
</div>
|
||||
<RecoveryBadge
|
||||
percentage={item.percentage || 0}
|
||||
compact={layout === 'grid'}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MuscleGroupRecoveryList
|
||||
@@ -0,0 +1,124 @@
|
||||
.recovery-badge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(26, 26, 46, 0.8);
|
||||
border: 1px solid rgba(204, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.recovery-badge--red {
|
||||
border-color: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.recovery-badge--yellow {
|
||||
border-color: rgba(255, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.recovery-badge--green {
|
||||
border-color: rgba(0, 255, 65, 0.3);
|
||||
}
|
||||
|
||||
.recovery-badge-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.recovery-badge-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #ccc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recovery-badge-stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recovery-badge-percent {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.recovery-badge--red .recovery-badge-percent {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.recovery-badge--yellow .recovery-badge-percent {
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.recovery-badge--green .recovery-badge-percent {
|
||||
color: #00ff41;
|
||||
}
|
||||
|
||||
.recovery-badge-group {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.recovery-badge-meta {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.recovery-badge-last {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.recovery-badge-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.recovery-badge-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.recovery-badge-fill--red {
|
||||
background: linear-gradient(90deg, #ff4444, #ff6666);
|
||||
}
|
||||
|
||||
.recovery-badge-fill--yellow {
|
||||
background: linear-gradient(90deg, #ffff00, #ffff44);
|
||||
}
|
||||
|
||||
.recovery-badge-fill--green {
|
||||
background: linear-gradient(90deg, #00ff41, #44ff88);
|
||||
}
|
||||
|
||||
/* Compact variant */
|
||||
.recovery-badge--compact {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.recovery-badge--compact .recovery-badge-percent {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.recovery-badge {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.recovery-badge-percent {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* RecoveryBadge.jsx
|
||||
* Shows recovery % as a colored badge
|
||||
* Colors: red (0-33%), yellow (34-66%), green (67-100%)
|
||||
*/
|
||||
|
||||
import './RecoveryBadge.css'
|
||||
|
||||
function RecoveryBadge({ percentage = 0, muscleGroup = null, lastWorkout = null, compact = false }) {
|
||||
// Clamp percentage between 0-100
|
||||
const percent = Math.max(0, Math.min(100, percentage))
|
||||
|
||||
// Determine color based on recovery percentage
|
||||
const getColor = (percent) => {
|
||||
if (percent <= 33) return 'red'
|
||||
if (percent <= 66) return 'yellow'
|
||||
return 'green'
|
||||
}
|
||||
|
||||
const color = getColor(percent)
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className={`recovery-badge recovery-badge--compact recovery-badge--${color}`}>
|
||||
<span className="recovery-badge-percent">{Math.round(percent)}%</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`recovery-badge recovery-badge--${color}`}>
|
||||
<div className="recovery-badge-content">
|
||||
<span className="recovery-badge-label">Återhämtad</span>
|
||||
<div className="recovery-badge-stat">
|
||||
<span className="recovery-badge-percent">{Math.round(percent)}%</span>
|
||||
{muscleGroup && <span className="recovery-badge-group">{muscleGroup}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{lastWorkout && (
|
||||
<div className="recovery-badge-meta">
|
||||
<span className="recovery-badge-last">Senast: {lastWorkout}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="recovery-badge-bar">
|
||||
<div
|
||||
className={`recovery-badge-fill recovery-badge-fill--${color}`}
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecoveryBadge
|
||||
@@ -0,0 +1,257 @@
|
||||
.workout-recommendation-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(0, 255, 65, 0.05) 0%, rgba(204, 255, 0, 0.05) 100%);
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.workout-recommendation-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workout-recommendation-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid rgba(204, 255, 0, 0.2);
|
||||
border-top: 2px solid #ccff00;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.workout-recommendation-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.workout-recommendation-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #00ff41;
|
||||
}
|
||||
|
||||
.workout-recommendation-title h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-recommendation-subtitle {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.workout-recommendation-recovered {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.recovered-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #00ff41;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recovered-muscles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recovered-tag {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
color: #00ff41;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(0, 255, 65, 0.3);
|
||||
}
|
||||
|
||||
.workout-recommendation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workout-recommendation-card {
|
||||
padding: 16px;
|
||||
background: rgba(42, 42, 62, 0.7);
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.workout-recommendation-card:hover {
|
||||
background: rgba(42, 42, 62, 0.9);
|
||||
border-color: rgba(0, 255, 65, 0.4);
|
||||
}
|
||||
|
||||
.workout-rec-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workout-rec-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
color: #00ff41;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workout-rec-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.workout-rec-info h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-rec-meta {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.workout-rec-reason {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(0, 255, 65, 0.1);
|
||||
border-radius: 8px;
|
||||
color: #00ff41;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workout-rec-muscles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.workout-muscle-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(204, 255, 0, 0.1);
|
||||
color: #ccff00;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workout-rec-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(204, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
.workout-rec-select-btn,
|
||||
.workout-rec-swap-btn {
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.workout-rec-select-btn {
|
||||
background: #00ff41;
|
||||
color: #0a0a1f;
|
||||
}
|
||||
|
||||
.workout-rec-select-btn:hover {
|
||||
background: #44ff88;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 65, 0.3);
|
||||
}
|
||||
|
||||
.workout-rec-swap-btn {
|
||||
background: rgba(0, 255, 65, 0.2);
|
||||
color: #00ff41;
|
||||
border: 1px solid rgba(0, 255, 65, 0.3);
|
||||
}
|
||||
|
||||
.workout-rec-swap-btn:hover {
|
||||
background: rgba(0, 255, 65, 0.3);
|
||||
border-color: rgba(0, 255, 65, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.workout-recommendation-panel {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workout-rec-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workout-recommendation-title h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.recovered-muscles {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.recovered-tag {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/**
|
||||
* WorkoutRecommendationPanel.jsx
|
||||
* Shows smart workout recommendations based on recovery status
|
||||
* Displays which muscle groups are well-recovered and suggests workouts
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Icon } from './Icons'
|
||||
import './WorkoutRecommendationPanel.css'
|
||||
|
||||
const API_URL = '/api'
|
||||
|
||||
function WorkoutRecommendationPanel({
|
||||
onSelect = null,
|
||||
onSwapClick = null,
|
||||
className = ''
|
||||
}) {
|
||||
const [recommendations, setRecommendations] = useState([])
|
||||
const [recoveredMuscles, setRecoveredMuscles] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecommendations()
|
||||
}, [])
|
||||
|
||||
const fetchRecommendations = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const response = await fetch(`${API_URL}/recommendations/smart-workout`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch recommendations')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setRecommendations(data.recommendations || [])
|
||||
setRecoveredMuscles(data.recoveredMuscles || [])
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch recommendations:', err)
|
||||
setError('Kunde inte hämta rekommendationer')
|
||||
// Mock data for testing
|
||||
setRecommendations([
|
||||
{
|
||||
id: 5,
|
||||
name: 'Push (Bröst/Axlar/Triceps)',
|
||||
type: 'PUSH',
|
||||
exercises: 9,
|
||||
duration: 60,
|
||||
targetMuscles: ['Bröst', 'Axlar', 'Triceps'],
|
||||
reason: 'Du är väl återhämtad för Bröst (95%)'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Shoulder Focus',
|
||||
type: 'SHOULDERS',
|
||||
exercises: 7,
|
||||
duration: 45,
|
||||
targetMuscles: ['Axlar'],
|
||||
reason: 'Axlar klara för träning (88%)'
|
||||
}
|
||||
])
|
||||
setRecoveredMuscles(['Bröst', 'Axlar', 'Triceps'])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={`workout-recommendation-panel ${className}`}>
|
||||
<div className="workout-recommendation-loading">
|
||||
<div className="workout-recommendation-spinner" />
|
||||
<p>Laddar rekommendationer...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || recommendations.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`workout-recommendation-panel ${className}`}>
|
||||
<div className="workout-recommendation-header">
|
||||
<div>
|
||||
<div className="workout-recommendation-title">
|
||||
<Icon name="zap" size={20} />
|
||||
<h2>Rekommenderat för dig</h2>
|
||||
</div>
|
||||
<p className="workout-recommendation-subtitle">
|
||||
Baserat på din återhämtning och träningshistoria
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{recoveredMuscles.length > 0 && (
|
||||
<div className="workout-recommendation-recovered">
|
||||
<div className="recovered-label">Du är väl återhämtad för:</div>
|
||||
<div className="recovered-muscles">
|
||||
{recoveredMuscles.map((muscle, idx) => (
|
||||
<span key={idx} className="recovered-tag">{muscle}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="workout-recommendation-list">
|
||||
{recommendations.map((workout, idx) => (
|
||||
<div key={workout.id || idx} className="workout-recommendation-card">
|
||||
<div className="workout-rec-header">
|
||||
<div className="workout-rec-badge">{workout.type || 'WORKOUT'}</div>
|
||||
<div className="workout-rec-info">
|
||||
<h3>{workout.name}</h3>
|
||||
<p className="workout-rec-meta">
|
||||
{workout.exercises || 0} övningar • {workout.duration || 60} min
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{workout.reason && (
|
||||
<div className="workout-rec-reason">
|
||||
<Icon name="checkCircle" size={16} />
|
||||
<span>{workout.reason}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{workout.targetMuscles && workout.targetMuscles.length > 0 && (
|
||||
<div className="workout-rec-muscles">
|
||||
{workout.targetMuscles.map((muscle, idx) => (
|
||||
<span key={idx} className="workout-muscle-tag">{muscle}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="workout-rec-actions">
|
||||
{onSelect && (
|
||||
<button
|
||||
className="workout-rec-select-btn"
|
||||
onClick={() => onSelect(workout)}
|
||||
>
|
||||
<Icon name="play" size={16} />
|
||||
Välj det här passet
|
||||
</button>
|
||||
)}
|
||||
{onSwapClick && (
|
||||
<button
|
||||
className="workout-rec-swap-btn"
|
||||
onClick={() => onSwapClick(workout)}
|
||||
>
|
||||
<Icon name="swap" size={16} />
|
||||
Byt till detta
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkoutRecommendationPanel
|
||||
@@ -0,0 +1,60 @@
|
||||
.workout-swap-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.workout-swap-modal {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.workout-swap-modal-overlay {
|
||||
padding: 0;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.workout-swap-modal {
|
||||
max-width: 100%;
|
||||
border-radius: 16px 16px 0 0;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* WorkoutSwapModal.jsx
|
||||
* Modal overlay for swapping workouts
|
||||
* Wraps WorkoutSwapPanel
|
||||
*/
|
||||
|
||||
import WorkoutSwapPanel from './WorkoutSwapPanel'
|
||||
import './WorkoutSwapModal.css'
|
||||
|
||||
function WorkoutSwapModal({
|
||||
isOpen = false,
|
||||
currentWorkout = null,
|
||||
onSwap = null,
|
||||
onClose = null,
|
||||
loading = false
|
||||
}) {
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="workout-swap-modal-overlay" onClick={onClose}>
|
||||
<div className="workout-swap-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<WorkoutSwapPanel
|
||||
currentWorkout={currentWorkout}
|
||||
onSwap={onSwap}
|
||||
onClose={onClose}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkoutSwapModal
|
||||
@@ -0,0 +1,301 @@
|
||||
.workout-swap-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #0a0a1f 0%, #1a1a2e 100%);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(204, 255, 0, 0.15);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.workout-swap-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.workout-swap-header h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-swap-close {
|
||||
background: rgba(204, 255, 0, 0.1);
|
||||
border: 1px solid rgba(204, 255, 0, 0.2);
|
||||
color: #ccff00;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.workout-swap-close:hover {
|
||||
background: rgba(204, 255, 0, 0.2);
|
||||
border-color: rgba(204, 255, 0, 0.4);
|
||||
}
|
||||
|
||||
.workout-swap-current {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.workout-swap-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.workout-swap-card {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: rgba(42, 42, 62, 0.8);
|
||||
border: 1px solid rgba(204, 255, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.workout-swap-card--current {
|
||||
border-color: rgba(0, 255, 65, 0.3);
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
}
|
||||
|
||||
.workout-card-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(204, 255, 0, 0.2);
|
||||
color: #ccff00;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.workout-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-card-meta {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.workout-swap-divider {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: rgba(204, 255, 0, 0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.workout-swap-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 68, 68, 0.1);
|
||||
border: 1px solid rgba(255, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #ff8888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.workout-swap-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workout-swap-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid rgba(204, 255, 0, 0.2);
|
||||
border-top: 2px solid #ccff00;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.workout-swap-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.workout-swap-empty {
|
||||
padding: 30px 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.workout-swap-item {
|
||||
padding: 14px;
|
||||
background: rgba(42, 42, 62, 0.6);
|
||||
border: 1px solid rgba(204, 255, 0, 0.15);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.workout-swap-item:hover {
|
||||
background: rgba(42, 42, 62, 0.9);
|
||||
border-color: rgba(204, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.workout-swap-item.selected {
|
||||
background: rgba(204, 255, 0, 0.1);
|
||||
border-color: rgba(204, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.workout-swap-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workout-swap-item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.workout-swap-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-swap-item-meta {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.workout-swap-item-select {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(204, 255, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.workout-swap-item.selected .workout-swap-item-select {
|
||||
background: #ccff00;
|
||||
border-color: #ccff00;
|
||||
color: #0a0a1f;
|
||||
}
|
||||
|
||||
.workout-swap-item-muscles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.muscle-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(204, 255, 0, 0.1);
|
||||
color: #ccff00;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.workout-swap-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(204, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
.workout-swap-btn-cancel,
|
||||
.workout-swap-btn-confirm {
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.workout-swap-btn-cancel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.workout-swap-btn-cancel:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workout-swap-btn-confirm {
|
||||
background: #ccff00;
|
||||
color: #0a0a1f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.workout-swap-btn-confirm:hover:not(:disabled) {
|
||||
background: #ffff44;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.workout-swap-btn-cancel:disabled,
|
||||
.workout-swap-btn-confirm:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.workout-swap-panel {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workout-swap-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workout-swap-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* WorkoutSwapPanel.jsx
|
||||
* Modal/panel for swapping current workout with another available workout
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Icon } from './Icons'
|
||||
import './WorkoutSwapPanel.css'
|
||||
|
||||
const API_URL = '/api'
|
||||
|
||||
function WorkoutSwapPanel({
|
||||
currentWorkout = null,
|
||||
onSwap = null,
|
||||
onClose = null,
|
||||
loading = false
|
||||
}) {
|
||||
const [availableWorkouts, setAvailableWorkouts] = useState([])
|
||||
const [listLoading, setListLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selectedWorkout, setSelectedWorkout] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentWorkout) return
|
||||
fetchAvailableWorkouts()
|
||||
}, [currentWorkout])
|
||||
|
||||
const fetchAvailableWorkouts = async () => {
|
||||
try {
|
||||
setListLoading(true)
|
||||
setError('')
|
||||
|
||||
const response = await fetch(`${API_URL}/workouts/available`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch workouts')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
// Filter out current workout
|
||||
const filtered = data.filter(w => w.id !== currentWorkout?.id)
|
||||
setAvailableWorkouts(filtered)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch workouts:', err)
|
||||
setError('Kunde inte hämta tillgängliga pass')
|
||||
// Mock data for testing
|
||||
setAvailableWorkouts([
|
||||
{
|
||||
id: 2,
|
||||
name: 'Push (Bröst/Axlar/Triceps)',
|
||||
type: 'PUSH',
|
||||
exercises: 9,
|
||||
duration: 60,
|
||||
targetMuscles: ['Bröst', 'Axlar', 'Triceps']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Cardio',
|
||||
type: 'CARDIO',
|
||||
exercises: 3,
|
||||
duration: 30,
|
||||
targetMuscles: ['Cardiovascular']
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Full Body',
|
||||
type: 'FULL',
|
||||
exercises: 8,
|
||||
duration: 75,
|
||||
targetMuscles: ['Hela kroppen']
|
||||
}
|
||||
])
|
||||
} finally {
|
||||
setListLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSwap = async () => {
|
||||
if (!selectedWorkout || !onSwap) return
|
||||
|
||||
try {
|
||||
setListLoading(true)
|
||||
setError('')
|
||||
await onSwap(selectedWorkout)
|
||||
} catch (err) {
|
||||
console.error('Swap failed:', err)
|
||||
setError('Kunde inte byta pass')
|
||||
} finally {
|
||||
setListLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="workout-swap-panel">
|
||||
<div className="workout-swap-header">
|
||||
<h2>Byt pass</h2>
|
||||
{onClose && (
|
||||
<button
|
||||
className="workout-swap-close"
|
||||
onClick={onClose}
|
||||
aria-label="Stäng"
|
||||
title="Stäng"
|
||||
>
|
||||
<Icon name="x" size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{currentWorkout && (
|
||||
<div className="workout-swap-current">
|
||||
<div className="workout-swap-label">Nuvarande pass</div>
|
||||
<div className="workout-swap-card workout-swap-card--current">
|
||||
<div className="workout-card-badge">{currentWorkout.type || 'WORKOUT'}</div>
|
||||
<div className="workout-card-title">{currentWorkout.name}</div>
|
||||
{currentWorkout.exercises && (
|
||||
<div className="workout-card-meta">
|
||||
{currentWorkout.exercises} övningar • {currentWorkout.duration || 60} min
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="workout-swap-divider">
|
||||
<Icon name="arrowDown" size={16} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="workout-swap-error">
|
||||
<Icon name="alertCircle" size={16} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{listLoading ? (
|
||||
<div className="workout-swap-loading">
|
||||
<div className="workout-swap-spinner" />
|
||||
<p>Laddar alternativ...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="workout-swap-label">Välj pass att byta till</div>
|
||||
<div className="workout-swap-list">
|
||||
{availableWorkouts.length === 0 ? (
|
||||
<div className="workout-swap-empty">
|
||||
<p>Inga andra pass tillgängliga</p>
|
||||
</div>
|
||||
) : (
|
||||
availableWorkouts.map((workout) => (
|
||||
<div
|
||||
key={workout.id}
|
||||
className={`workout-swap-item ${selectedWorkout?.id === workout.id ? 'selected' : ''}`}
|
||||
onClick={() => setSelectedWorkout(workout)}
|
||||
>
|
||||
<div className="workout-swap-item-header">
|
||||
<div className="workout-swap-item-info">
|
||||
<div className="workout-swap-item-name">{workout.name}</div>
|
||||
<div className="workout-swap-item-meta">
|
||||
{workout.exercises || 0} övningar • {workout.duration || 60} min
|
||||
</div>
|
||||
</div>
|
||||
<div className={`workout-swap-item-select ${selectedWorkout?.id === workout.id ? 'checked' : ''}`}>
|
||||
{selectedWorkout?.id === workout.id && <Icon name="check" size={16} />}
|
||||
</div>
|
||||
</div>
|
||||
{workout.targetMuscles && workout.targetMuscles.length > 0 && (
|
||||
<div className="workout-swap-item-muscles">
|
||||
{workout.targetMuscles.map((muscle, idx) => (
|
||||
<span key={idx} className="muscle-tag">{muscle}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="workout-swap-actions">
|
||||
{onClose && (
|
||||
<button
|
||||
className="workout-swap-btn-cancel"
|
||||
onClick={onClose}
|
||||
disabled={loading || listLoading}
|
||||
>
|
||||
Avbryt
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="workout-swap-btn-confirm"
|
||||
onClick={handleSwap}
|
||||
disabled={!selectedWorkout || loading || listLoading}
|
||||
>
|
||||
{loading ? 'Byter...' : 'Byt pass'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkoutSwapPanel
|
||||
Reference in New Issue
Block a user