Set logging is now a united. Sporadic set table removed.

This commit is contained in:
AG
2025-12-05 08:55:59 +02:00
parent a632de65ea
commit 41d1d0f16a
19 changed files with 1129 additions and 1232 deletions

View File

@@ -1,58 +1,45 @@
import React, { useState, useEffect } from 'react';
import { Dumbbell, Scale, Activity, Timer as TimerIcon, ArrowRight, ArrowUp, Plus, CheckCircle, Edit, Trash2 } from 'lucide-react';
import { ExerciseType, Language, SporadicSet } from '../../types';
import { CheckCircle, Plus, Pencil, Trash2, X, Save } from 'lucide-react';
import { Language, WorkoutSet } from '../../types';
import { t } from '../../services/i18n';
import FilledInput from '../FilledInput';
import ExerciseModal from '../ExerciseModal';
import { useTracker } from './useTracker';
import SetLogger from './SetLogger';
interface SporadicViewProps {
tracker: ReturnType<typeof useTracker>;
lang: Language;
sporadicSets?: SporadicSet[];
}
const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang, sporadicSets }) => {
const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
const {
searchQuery,
setSearchQuery,
setShowSuggestions,
showSuggestions,
filteredExercises,
setSelectedExercise,
selectedExercise,
weight,
setWeight,
reps,
setReps,
duration,
setDuration,
distance,
setDistance,
height,
setHeight,
handleLogSporadicSet,
sporadicSuccess,
setIsSporadicMode,
isCreating,
setIsCreating,
handleCreateExercise,
exercises,
resetForm
resetForm,
quickLogSession,
selectedExercise,
loadQuickLogSession
} = tracker;
const [todaysSets, setTodaysSets] = useState<SporadicSet[]>([]);
const [todaysSets, setTodaysSets] = useState<WorkoutSet[]>([]);
const [editingSetId, setEditingSetId] = useState<string | null>(null);
const [editingSet, setEditingSet] = useState<WorkoutSet | null>(null);
const [deletingSetId, setDeletingSetId] = useState<string | null>(null);
useEffect(() => {
if (sporadicSets) {
const startOfDay = new Date();
startOfDay.setHours(0, 0, 0, 0);
const todayS = sporadicSets.filter(s => s.timestamp >= startOfDay.getTime());
setTodaysSets(todayS.sort((a, b) => b.timestamp - a.timestamp));
if (quickLogSession && quickLogSession.sets) {
// Sets are already ordered by timestamp desc in the backend query, but let's ensure
setTodaysSets([...quickLogSession.sets].sort((a, b) => b.timestamp - a.timestamp));
} else {
setTodaysSets([]);
}
}, [sporadicSets]);
}, [quickLogSession]);
const renderSetMetrics = (set: SporadicSet) => {
const renderSetMetrics = (set: WorkoutSet) => {
const metrics: string[] = [];
if (set.weight) metrics.push(`${set.weight} ${t('weight_kg', lang)}`);
if (set.reps) metrics.push(`${set.reps} ${t('reps', lang)}`);
@@ -93,254 +80,45 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang, sporadicSets
</div>
<div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6">
{/* Exercise Selection */}
<div className="relative">
<FilledInput
label={t('select_exercise', lang)}
value={searchQuery}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchQuery(e.target.value);
setShowSuggestions(true);
}}
onFocus={() => {
setSearchQuery('');
setShowSuggestions(true);
}}
onBlur={() => setTimeout(() => setShowSuggestions(false), 100)}
icon={<Dumbbell size={10} />}
autoComplete="off"
type="text"
/>
<button
onClick={() => setIsCreating(true)}
className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-primary hover:bg-primary-container/20 rounded-full z-10"
>
<Plus size={24} />
</button>
{showSuggestions && (
<div className="absolute top-full left-0 w-full bg-surface-container rounded-xl shadow-elevation-3 overflow-hidden z-20 mt-1 max-h-60 overflow-y-auto animate-in fade-in slide-in-from-top-2">
{filteredExercises.length > 0 ? (
filteredExercises.map(ex => (
<button
key={ex.id}
onMouseDown={(e) => {
e.preventDefault();
setSelectedExercise(ex);
setSearchQuery(ex.name);
setShowSuggestions(false);
}}
className="w-full text-left px-4 py-3 text-on-surface hover:bg-surface-container-high transition-colors text-lg"
>
{ex.name}
</button>
))
) : (
<div className="px-4 py-3 text-on-surface-variant text-lg">{t('no_exercises_found', lang)}</div>
)}
</div>
)}
</div>
{selectedExercise && (
<div className="animate-in fade-in slide-in-from-bottom-4 duration-300 space-y-6">
{/* Unilateral Exercise Toggle */}
{selectedExercise.isUnilateral && (
<div className="flex items-center gap-3 px-2 py-3 bg-surface-container rounded-xl">
<input
type="checkbox"
id="sameValuesBothSidesSporadic"
checked={tracker.sameValuesBothSides}
onChange={(e) => tracker.handleToggleSameValues(e.target.checked)}
className="w-5 h-5 rounded border-2 border-outline bg-surface-container-high checked:bg-primary checked:border-primary cursor-pointer"
/>
<label htmlFor="sameValuesBothSidesSporadic" className="text-sm text-on-surface cursor-pointer flex-1">
{t('same_values_both_sides', lang)}
</label>
</div>
)}
{/* Input Forms */}
{selectedExercise.isUnilateral && !tracker.sameValuesBothSides ? (
/* Separate Left/Right Inputs */
<div className="space-y-4">
{/* Left Side */}
<div className="space-y-2">
<div className="text-sm font-medium text-primary flex items-center gap-2 px-2">
<span className="w-6 h-6 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center text-xs font-bold">L</span>
{t('left', lang)}
</div>
<div className="grid grid-cols-2 gap-4">
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={selectedExercise.type === ExerciseType.BODYWEIGHT ? t('add_weight', lang) : t('weight_kg', lang)}
value={tracker.weightLeft}
step="0.1"
onChange={(e: any) => tracker.setWeightLeft(e.target.value)}
icon={<Scale size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
<FilledInput
label={t('reps', lang)}
value={tracker.repsLeft}
onChange={(e: any) => tracker.setRepsLeft(e.target.value)}
icon={<Activity size={10} />}
type="number"
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={t('time_sec', lang)}
value={tracker.durationLeft}
onChange={(e: any) => tracker.setDurationLeft(e.target.value)}
icon={<TimerIcon size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
<FilledInput
label={t('dist_m', lang)}
value={tracker.distanceLeft}
onChange={(e: any) => tracker.setDistanceLeft(e.target.value)}
icon={<ArrowRight size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
<FilledInput
label={t('height_cm', lang)}
value={tracker.heightLeft}
onChange={(e: any) => tracker.setHeightLeft(e.target.value)}
icon={<ArrowUp size={10} />}
/>
)}
</div>
</div>
{/* Right Side */}
<div className="space-y-2">
<div className="text-sm font-medium text-secondary flex items-center gap-2 px-2">
<span className="w-6 h-6 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center text-xs font-bold">R</span>
{t('right', lang)}
</div>
<div className="grid grid-cols-2 gap-4">
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={selectedExercise.type === ExerciseType.BODYWEIGHT ? t('add_weight', lang) : t('weight_kg', lang)}
value={tracker.weightRight}
step="0.1"
onChange={(e: any) => tracker.setWeightRight(e.target.value)}
icon={<Scale size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
<FilledInput
label={t('reps', lang)}
value={tracker.repsRight}
onChange={(e: any) => tracker.setRepsRight(e.target.value)}
icon={<Activity size={10} />}
type="number"
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={t('time_sec', lang)}
value={tracker.durationRight}
onChange={(e: any) => tracker.setDurationRight(e.target.value)}
icon={<TimerIcon size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
<FilledInput
label={t('dist_m', lang)}
value={tracker.distanceRight}
onChange={(e: any) => tracker.setDistanceRight(e.target.value)}
icon={<ArrowRight size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
<FilledInput
label={t('height_cm', lang)}
value={tracker.heightRight}
onChange={(e: any) => tracker.setHeightRight(e.target.value)}
icon={<ArrowUp size={10} />}
/>
)}
</div>
</div>
</div>
) : (
/* Single Input Form (for bilateral or unilateral with same values) */
<div className="grid grid-cols-2 gap-4">
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={selectedExercise.type === ExerciseType.BODYWEIGHT ? t('add_weight', lang) : t('weight_kg', lang)}
value={weight}
step="0.1"
onChange={(e: any) => setWeight(e.target.value)}
icon={<Scale size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.PLYOMETRIC) && (
<FilledInput
label={t('reps', lang)}
value={reps}
onChange={(e: any) => setReps(e.target.value)}
icon={<Activity size={10} />}
type="number"
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.STATIC) && (
<FilledInput
label={t('time_sec', lang)}
value={duration}
onChange={(e: any) => setDuration(e.target.value)}
icon={<TimerIcon size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.CARDIO || selectedExercise.type === ExerciseType.LONG_JUMP) && (
<FilledInput
label={t('dist_m', lang)}
value={distance}
onChange={(e: any) => setDistance(e.target.value)}
icon={<ArrowRight size={10} />}
/>
)}
{(selectedExercise.type === ExerciseType.HIGH_JUMP) && (
<FilledInput
label={t('height_cm', lang)}
value={height}
onChange={(e: any) => setHeight(e.target.value)}
icon={<ArrowUp size={10} />}
/>
)}
</div>
)}
<button
onClick={handleLogSporadicSet}
className={`w-full h-14 font-medium text-lg rounded-full shadow-elevation-2 hover:shadow-elevation-3 active:scale-[0.98] transition-all flex items-center justify-center gap-2 ${sporadicSuccess
? 'bg-green-500 text-white'
: 'bg-primary-container text-on-primary-container'
}`}
>
{sporadicSuccess ? <CheckCircle size={24} /> : <Plus size={24} />}
<span>{sporadicSuccess ? t('saved', lang) : t('log_set', lang)}</span>
</button>
</div>
)}
<SetLogger
tracker={tracker}
lang={lang}
onLogSet={handleLogSporadicSet}
isSporadic={true}
/>
{/* History Section */}
{todaysSets.length > 0 && (
<div className="mt-6">
<h3 className="text-title-medium font-medium mb-3">{t('history_section', lang)}</h3>
<div className="space-y-2">
{todaysSets.map(set => (
{todaysSets.map((set, idx) => (
<div key={set.id} className="bg-surface-container rounded-lg p-3 flex items-center justify-between shadow-elevation-1 animate-in fade-in">
<div>
<p className="font-medium text-on-surface">{set.exerciseName}</p>
<p className="text-sm text-on-surface-variant">{renderSetMetrics(set)}</p>
<div className="flex items-center gap-4 flex-1">
<div className="w-8 h-8 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center text-xs font-bold">
{todaysSets.length - idx}
</div>
<div>
<p className="font-medium text-on-surface">{set.exerciseName}{set.side && <span className="ml-2 text-xs font-medium text-on-surface-variant">{t(set.side.toLowerCase() as any, lang)}</span>}</p>
<p className="text-sm text-on-surface-variant">{renderSetMetrics(set)}</p>
</div>
</div>
<div className="flex items-center gap-2">
{/* Edit and Delete buttons can be added here in the future */}
<button
onClick={() => {
setEditingSetId(set.id);
setEditingSet(JSON.parse(JSON.stringify(set)));
}}
className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
>
<Pencil size={18} />
</button>
<button
onClick={() => setDeletingSetId(set.id)}
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
>
<Trash2 size={18} />
</button>
</div>
</div>
))}
@@ -358,6 +136,149 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang, sporadicSets
existingExercises={exercises}
/>
)}
{/* Edit Set Modal */}
{editingSetId && editingSet && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
<div className="bg-surface-container w-full max-w-md rounded-[28px] p-6 shadow-elevation-3 max-h-[80vh] overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<h3 className="text-xl font-normal text-on-surface">{t('edit', lang)}</h3>
<button
onClick={() => {
setEditingSetId(null);
setEditingSet(null);
}}
className="p-2 hover:bg-surface-container-high rounded-full transition-colors"
>
<X size={20} />
</button>
</div>
<div className="space-y-4">
{(editingSet.type === 'STRENGTH' || editingSet.type === 'BODYWEIGHT') && (
<>
<div>
<label className="text-sm text-on-surface-variant">{t('weight_kg', lang)}</label>
<input
type="number"
step="0.1"
value={editingSet.weight || ''}
onChange={(e) => setEditingSet({ ...editingSet, weight: parseFloat(e.target.value) || 0 })}
className="w-full mt-1 px-4 py-2 bg-surface-container-high text-on-surface rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
<div>
<label className="text-sm text-on-surface-variant">{t('reps', lang)}</label>
<input
type="number"
value={editingSet.reps || ''}
onChange={(e) => setEditingSet({ ...editingSet, reps: parseInt(e.target.value) || 0 })}
className="w-full mt-1 px-4 py-2 bg-surface-container-high text-on-surface rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
</>
)}
{(editingSet.type === 'CARDIO' || editingSet.type === 'STATIC') && (
<div>
<label className="text-sm text-on-surface-variant">{t('time_sec', lang)}</label>
<input
type="number"
value={editingSet.durationSeconds || ''}
onChange={(e) => setEditingSet({ ...editingSet, durationSeconds: parseInt(e.target.value) || 0 })}
className="w-full mt-1 px-4 py-2 bg-surface-container-high text-on-surface rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
)}
{editingSet.type === 'CARDIO' && (
<div>
<label className="text-sm text-on-surface-variant">{t('dist_m', lang)}</label>
<input
type="number"
step="0.1"
value={editingSet.distanceMeters || ''}
onChange={(e) => setEditingSet({ ...editingSet, distanceMeters: parseFloat(e.target.value) || 0 })}
className="w-full mt-1 px-4 py-2 bg-surface-container-high text-on-surface rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
)}
</div>
<div className="flex justify-end gap-2 mt-6">
<button
onClick={() => {
setEditingSetId(null);
setEditingSet(null);
}}
className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
>
{t('cancel', lang)}
</button>
<button
onClick={async () => {
try {
const response = await fetch(`/api/sessions/active/set/${editingSetId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(editingSet)
});
if (response.ok) {
await loadQuickLogSession();
setEditingSetId(null);
setEditingSet(null);
}
} catch (error) {
console.error('Failed to update set:', error);
}
}}
className="px-4 py-2 rounded-full bg-primary text-on-primary font-medium flex items-center gap-2"
>
<Save size={18} />
{t('save', lang)}
</button>
</div>
</div>
</div>
)}
{/* Delete Confirmation Modal */}
{deletingSetId && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
<div className="bg-surface-container w-full max-w-xs rounded-[28px] p-6 shadow-elevation-3">
<h3 className="text-xl font-normal text-on-surface mb-2">{t('delete', lang)}</h3>
<p className="text-sm text-on-surface-variant mb-8">{t('delete_confirm', lang)}</p>
<div className="flex justify-end gap-2">
<button
onClick={() => setDeletingSetId(null)}
className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
>
{t('cancel', lang)}
</button>
<button
onClick={async () => {
try {
const response = await fetch(`/api/sessions/active/set/${deletingSetId}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
await loadQuickLogSession();
setDeletingSetId(null);
}
} catch (error) {
console.error('Failed to delete set:', error);
}
}}
className="px-4 py-2 rounded-full bg-error-container text-on-error-container font-medium"
>
{t('delete', lang)}
</button>
</div>
</div>
</div>
)}
</div>
);
};