Set logging is now a united. Sporadic set table removed.
This commit is contained in:
@@ -1,24 +1,20 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Calendar, Clock, TrendingUp, Gauge, Pencil, Trash2, X, Save, ArrowRight, ArrowUp, Timer, Activity, Dumbbell, Percent } from 'lucide-react';
|
||||
import { WorkoutSession, ExerciseType, WorkoutSet, Language, SporadicSet } from '../types';
|
||||
import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
|
||||
import { t } from '../services/i18n';
|
||||
|
||||
interface HistoryProps {
|
||||
sessions: WorkoutSession[];
|
||||
sporadicSets?: SporadicSet[];
|
||||
onUpdateSession?: (session: WorkoutSession) => void;
|
||||
onDeleteSession?: (sessionId: string) => void;
|
||||
onUpdateSporadicSet?: (set: SporadicSet) => void;
|
||||
onDeleteSporadicSet?: (setId: string) => void;
|
||||
lang: Language;
|
||||
}
|
||||
|
||||
const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSession, onDeleteSession, onUpdateSporadicSet, onDeleteSporadicSet, lang }) => {
|
||||
const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSession, lang }) => {
|
||||
const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [editingSporadicSet, setEditingSporadicSet] = useState<SporadicSet | null>(null);
|
||||
const [deletingSporadicId, setDeletingSporadicId] = useState<string | null>(null);
|
||||
|
||||
|
||||
const calculateSessionWork = (session: WorkoutSession) => {
|
||||
const bw = session.userBodyWeight || 70;
|
||||
@@ -93,26 +89,9 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveSporadicEdit = () => {
|
||||
if (editingSporadicSet && onUpdateSporadicSet) {
|
||||
onUpdateSporadicSet(editingSporadicSet);
|
||||
setEditingSporadicSet(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateSporadicField = (field: keyof SporadicSet, value: number) => {
|
||||
if (!editingSporadicSet) return;
|
||||
setEditingSporadicSet({ ...editingSporadicSet, [field]: value });
|
||||
};
|
||||
|
||||
const handleConfirmDeleteSporadic = () => {
|
||||
if (deletingSporadicId && onDeleteSporadicSet) {
|
||||
onDeleteSporadicSet(deletingSporadicId);
|
||||
setDeletingSporadicId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (sessions.length === 0 && (!sporadicSets || sporadicSets.length === 0)) {
|
||||
if (sessions.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-on-surface-variant p-8 text-center">
|
||||
<Clock size={48} className="mb-4 opacity-50" />
|
||||
@@ -128,7 +107,8 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20">
|
||||
{sessions.map((session) => {
|
||||
{/* Regular Workout Sessions */}
|
||||
{sessions.filter(s => s.type === 'STANDARD').map((session) => {
|
||||
const totalWork = calculateSessionWork(session);
|
||||
|
||||
return (
|
||||
@@ -198,30 +178,35 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Sporadic Sets Section */}
|
||||
{sporadicSets && sporadicSets.length > 0 && (
|
||||
{/* Quick Log Sessions */}
|
||||
{sessions.filter(s => s.type === 'QUICK_LOG').length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-xl font-medium text-on-surface mb-4 px-2">{t('sporadic_sets_title', lang)}</h3>
|
||||
<h3 className="text-xl font-medium text-on-surface mb-4 px-2">{t('quick_log', lang)}</h3>
|
||||
{Object.entries(
|
||||
sporadicSets.reduce((groups: Record<string, SporadicSet[]>, set) => {
|
||||
const date = new Date(set.timestamp).toISOString().split('T')[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(set);
|
||||
return groups;
|
||||
}, {})
|
||||
sessions
|
||||
.filter(s => s.type === 'QUICK_LOG')
|
||||
.reduce((groups: Record<string, WorkoutSession[]>, session) => {
|
||||
const date = new Date(session.startTime).toISOString().split('T')[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(session);
|
||||
return groups;
|
||||
}, {})
|
||||
)
|
||||
.sort(([a], [b]) => b.localeCompare(a))
|
||||
.map(([date, sets]) => (
|
||||
.map(([date, daySessions]) => (
|
||||
<div key={date} className="mb-4">
|
||||
<div className="text-sm text-on-surface-variant px-2 mb-2 font-medium">{date}</div>
|
||||
<div className="space-y-2">
|
||||
{(sets as SporadicSet[]).map(set => (
|
||||
{daySessions.flatMap(session => session.sets).map((set, idx) => (
|
||||
<div
|
||||
key={set.id}
|
||||
className="bg-surface-container-low rounded-xl p-4 border border-outline-variant/10 flex justify-between items-center"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-on-surface">{set.exerciseName}</div>
|
||||
<div 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>}
|
||||
</div>
|
||||
<div className="text-sm text-on-surface-variant mt-1">
|
||||
{set.type === ExerciseType.STRENGTH && `${set.weight || 0}kg x ${set.reps || 0}`}
|
||||
{set.type === ExerciseType.BODYWEIGHT && `${set.weight ? `+${set.weight}kg` : 'BW'} x ${set.reps || 0}`}
|
||||
@@ -237,13 +222,26 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setEditingSporadicSet(JSON.parse(JSON.stringify(set)))}
|
||||
onClick={() => {
|
||||
// Find the session this set belongs to and open edit mode
|
||||
const parentSession = daySessions.find(s => s.sets.some(st => st.id === set.id));
|
||||
if (parentSession) {
|
||||
setEditingSession(JSON.parse(JSON.stringify(parentSession)));
|
||||
}
|
||||
}}
|
||||
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={() => setDeletingSporadicId(set.id)}
|
||||
onClick={() => {
|
||||
// Find the session and set up for deletion
|
||||
const parentSession = daySessions.find(s => s.sets.some(st => st.id === set.id));
|
||||
if (parentSession) {
|
||||
setEditingSession(JSON.parse(JSON.stringify(parentSession)));
|
||||
setDeletingId(set.id); // Use set ID for deletion
|
||||
}
|
||||
}}
|
||||
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
@@ -256,6 +254,7 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* DELETE CONFIRMATION DIALOG (MD3) */}
|
||||
@@ -336,7 +335,7 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
<div className="flex justify-between items-center border-b border-outline-variant pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-secondary-container text-on-secondary-container text-xs font-bold flex items-center justify-center">{idx + 1}</span>
|
||||
<span className="font-medium text-on-surface text-sm">{set.exerciseName}</span>
|
||||
<span className="font-medium text-on-surface text-sm">{set.exerciseName}{set.side && <span className="ml-2 text-xs font-medium text-on-surface-variant">{t(set.side.toLowerCase(), lang)}</span>}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteSet(set.id)}
|
||||
@@ -422,29 +421,7 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sporadic Set Delete Confirmation */}
|
||||
{deletingSporadicId && (
|
||||
<div className="fixed inset-0 z-[60] 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={() => setDeletingSporadicId(null)}
|
||||
className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
|
||||
>
|
||||
{t('cancel', lang)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirmDeleteSporadic}
|
||||
className="px-4 py-2 rounded-full bg-error-container text-on-error-container font-medium"
|
||||
>
|
||||
{t('delete', lang)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,6 +5,7 @@ import { t } from '../../services/i18n';
|
||||
import FilledInput from '../FilledInput';
|
||||
import ExerciseModal from '../ExerciseModal';
|
||||
import { useTracker } from './useTracker';
|
||||
import SetLogger from './SetLogger';
|
||||
|
||||
interface ActiveSessionViewProps {
|
||||
tracker: ReturnType<typeof useTracker>;
|
||||
@@ -178,237 +179,11 @@ const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSe
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6">
|
||||
|
||||
<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)} // Delay hiding to allow click
|
||||
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(); // Prevent input blur
|
||||
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="sameValuesBothSides"
|
||||
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="sameValuesBothSides" 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} />}
|
||||
autoFocus={activePlan && !isPlanFinished && activePlan.steps[currentStepIndex]?.isWeighted && (selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STRENGTH)}
|
||||
/>
|
||||
)}
|
||||
{(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={handleAddSet}
|
||||
className="w-full h-14 bg-primary-container text-on-primary-container 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"
|
||||
>
|
||||
<CheckCircle size={24} />
|
||||
<span>{t('log_set', lang)}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<SetLogger
|
||||
tracker={tracker}
|
||||
lang={lang}
|
||||
onLogSet={handleAddSet}
|
||||
/>
|
||||
|
||||
{activeSession.sets.length > 0 && (
|
||||
<div className="pt-4">
|
||||
@@ -425,7 +200,7 @@ const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSe
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<div className="flex-1">
|
||||
<div className="text-base font-medium text-on-surface mb-2">{set.exerciseName}</div>
|
||||
<div className="text-base font-medium text-on-surface mb-2">{set.exerciseName}{set.side && <span className="ml-2 text-xs font-medium text-on-surface-variant">{t(set.side.toLowerCase() as any, lang)}</span>}</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{set.weight !== undefined && (
|
||||
<input
|
||||
@@ -479,7 +254,7 @@ const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSe
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="text-base font-medium text-on-surface">{set.exerciseName}</div>
|
||||
<div className="text-base 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>}</div>
|
||||
<div className="text-sm text-on-surface-variant">
|
||||
{set.type === ExerciseType.STRENGTH &&
|
||||
`${set.weight ? `${set.weight}kg` : ''} ${set.reps ? `x ${set.reps}` : ''}`.trim()
|
||||
|
||||
179
components/Tracker/SetLogger.tsx
Normal file
179
components/Tracker/SetLogger.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import React from 'react';
|
||||
import { Dumbbell, Scale, Activity, Timer as TimerIcon, ArrowRight, ArrowUp, Plus, CheckCircle } from 'lucide-react';
|
||||
import { ExerciseType, Language } from '../../types';
|
||||
import { t } from '../../services/i18n';
|
||||
import FilledInput from '../FilledInput';
|
||||
import { useTracker } from './useTracker';
|
||||
|
||||
interface SetLoggerProps {
|
||||
tracker: ReturnType<typeof useTracker>;
|
||||
lang: Language;
|
||||
onLogSet: () => void;
|
||||
isSporadic?: boolean;
|
||||
}
|
||||
|
||||
const SetLogger: React.FC<SetLoggerProps> = ({ tracker, lang, onLogSet, isSporadic = false }) => {
|
||||
const {
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
setShowSuggestions,
|
||||
showSuggestions,
|
||||
filteredExercises,
|
||||
setSelectedExercise,
|
||||
selectedExercise,
|
||||
weight,
|
||||
setWeight,
|
||||
reps,
|
||||
setReps,
|
||||
duration,
|
||||
setDuration,
|
||||
distance,
|
||||
setDistance,
|
||||
height,
|
||||
setHeight,
|
||||
setIsCreating,
|
||||
sporadicSuccess,
|
||||
activePlan,
|
||||
currentStepIndex,
|
||||
unilateralSide,
|
||||
setUnilateralSide
|
||||
} = tracker;
|
||||
|
||||
const isPlanFinished = activePlan && currentStepIndex >= activePlan.steps.length;
|
||||
|
||||
return (
|
||||
<div className="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-2 bg-surface-container rounded-full p-1">
|
||||
<button
|
||||
onClick={() => setUnilateralSide('LEFT')}
|
||||
className={`w-full text-center px-4 py-2 rounded-full text-sm font-medium transition-colors ${unilateralSide === 'LEFT' ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant hover:bg-surface-container-high'
|
||||
}`}
|
||||
>
|
||||
{t('left', lang)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setUnilateralSide('RIGHT')}
|
||||
className={`w-full text-center px-4 py-2 rounded-full text-sm font-medium transition-colors ${unilateralSide === 'RIGHT' ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-surface-container-high'
|
||||
}`}
|
||||
>
|
||||
{t('right', lang)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input Forms */}
|
||||
<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} />}
|
||||
autoFocus={!isSporadic && activePlan && !isPlanFinished && activePlan.steps[currentStepIndex]?.isWeighted && (selectedExercise.type === ExerciseType.BODYWEIGHT || selectedExercise.type === ExerciseType.STRENGTH)}
|
||||
/>
|
||||
)}
|
||||
{(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={onLogSet}
|
||||
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 ${isSporadic && sporadicSuccess
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-primary-container text-on-primary-container'
|
||||
}`}
|
||||
>
|
||||
{isSporadic && sporadicSuccess ? <CheckCircle size={24} /> : (isSporadic ? <Plus size={24} /> : <CheckCircle size={24} />)}
|
||||
<span>{isSporadic && sporadicSuccess ? t('saved', lang) : t('log_set', lang)}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetLogger;
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import React from 'react';
|
||||
import { WorkoutSession, WorkoutSet, WorkoutPlan, Language, SporadicSet } from '../../types';
|
||||
import { WorkoutSession, WorkoutSet, WorkoutPlan, Language } from '../../types';
|
||||
import { useTracker } from './useTracker';
|
||||
import IdleView from './IdleView';
|
||||
import SporadicView from './SporadicView';
|
||||
@@ -11,7 +11,6 @@ interface TrackerProps {
|
||||
userWeight?: number;
|
||||
activeSession: WorkoutSession | null;
|
||||
activePlan: WorkoutPlan | null;
|
||||
sporadicSets?: SporadicSet[];
|
||||
onSessionStart: (plan?: WorkoutPlan, startWeight?: number) => void;
|
||||
onSessionEnd: () => void;
|
||||
onSessionQuit: () => void;
|
||||
@@ -25,7 +24,7 @@ interface TrackerProps {
|
||||
const Tracker: React.FC<TrackerProps> = (props) => {
|
||||
const tracker = useTracker(props);
|
||||
const { isSporadicMode } = tracker;
|
||||
const { activeSession, lang, onSessionEnd, onSessionQuit, onRemoveSet, sporadicSets } = props;
|
||||
const { activeSession, lang, onSessionEnd, onSessionQuit, onRemoveSet } = props;
|
||||
|
||||
if (activeSession) {
|
||||
return (
|
||||
@@ -41,7 +40,7 @@ const Tracker: React.FC<TrackerProps> = (props) => {
|
||||
}
|
||||
|
||||
if (isSporadicMode) {
|
||||
return <SporadicView tracker={tracker} lang={lang} sporadicSets={sporadicSets} />;
|
||||
return <SporadicView tracker={tracker} lang={lang} />;
|
||||
}
|
||||
|
||||
return <IdleView tracker={tracker} lang={lang} />;
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
|
||||
import { WorkoutSession, WorkoutSet, ExerciseDef, ExerciseType, WorkoutPlan, Language } from '../../types';
|
||||
import { getExercises, getLastSetForExercise, saveExercise, getPlans } from '../../services/storage';
|
||||
import { api } from '../../services/api';
|
||||
import { logSporadicSet } from '../../services/sporadicSets';
|
||||
|
||||
|
||||
interface UseTrackerProps {
|
||||
userId: string;
|
||||
@@ -73,39 +73,13 @@ export const useTracker = ({
|
||||
const [editDistance, setEditDistance] = useState<string>('');
|
||||
const [editHeight, setEditHeight] = useState<string>('');
|
||||
|
||||
// Sporadic Set State
|
||||
// Quick Log State
|
||||
const [quickLogSession, setQuickLogSession] = useState<WorkoutSession | null>(null);
|
||||
const [isSporadicMode, setIsSporadicMode] = useState(false);
|
||||
const [sporadicSuccess, setSporadicSuccess] = useState(false);
|
||||
|
||||
// Unilateral Exercise State
|
||||
const [sameValuesBothSides, setSameValuesBothSides] = useState(true);
|
||||
const [weightLeft, setWeightLeft] = useState<string>('');
|
||||
const [weightRight, setWeightRight] = useState<string>('');
|
||||
const [repsLeft, setRepsLeft] = useState<string>('');
|
||||
const [repsRight, setRepsRight] = useState<string>('');
|
||||
const [durationLeft, setDurationLeft] = useState<string>('');
|
||||
const [durationRight, setDurationRight] = useState<string>('');
|
||||
const [distanceLeft, setDistanceLeft] = useState<string>('');
|
||||
const [distanceRight, setDistanceRight] = useState<string>('');
|
||||
const [heightLeft, setHeightLeft] = useState<string>('');
|
||||
const [heightRight, setHeightRight] = useState<string>('');
|
||||
|
||||
const handleToggleSameValues = (checked: boolean) => {
|
||||
setSameValuesBothSides(checked);
|
||||
if (!checked) {
|
||||
// Propagate values from single fields to left/right fields
|
||||
setWeightLeft(weight);
|
||||
setWeightRight(weight);
|
||||
setRepsLeft(reps);
|
||||
setRepsRight(reps);
|
||||
setDurationLeft(duration);
|
||||
setDurationRight(duration);
|
||||
setDistanceLeft(distance);
|
||||
setDistanceRight(distance);
|
||||
setHeightLeft(height);
|
||||
setHeightRight(height);
|
||||
}
|
||||
};
|
||||
const [unilateralSide, setUnilateralSide] = useState<'LEFT' | 'RIGHT'>('LEFT');
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
@@ -120,10 +94,34 @@ export const useTracker = ({
|
||||
} else if (userWeight) {
|
||||
setUserBodyWeight(userWeight.toString());
|
||||
}
|
||||
|
||||
// Load Quick Log Session
|
||||
try {
|
||||
const response = await api.get('/sessions/quick-log');
|
||||
if (response.success && response.session) {
|
||||
setQuickLogSession(response.session);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load quick log session:", error);
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, [activeSession, userId, userWeight, activePlan]);
|
||||
|
||||
// Function to reload Quick Log session
|
||||
const loadQuickLogSession = async () => {
|
||||
try {
|
||||
const response = await api.get('/sessions/quick-log');
|
||||
if (response.success && response.session) {
|
||||
setQuickLogSession(response.session);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load quick log session:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Timer Logic
|
||||
useEffect(() => {
|
||||
let interval: number;
|
||||
@@ -167,7 +165,6 @@ export const useTracker = ({
|
||||
}
|
||||
}, [activeSession, activePlan]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSession && activePlan && exercises.length > 0 && activePlan.steps.length > 0) {
|
||||
if (currentStepIndex < activePlan.steps.length) {
|
||||
@@ -222,6 +219,7 @@ export const useTracker = ({
|
||||
updateSelection();
|
||||
}, [selectedExercise, userId]);
|
||||
|
||||
|
||||
const filteredExercises = searchQuery === ''
|
||||
? exercises
|
||||
: exercises.filter(ex =>
|
||||
@@ -246,363 +244,126 @@ export const useTracker = ({
|
||||
const handleAddSet = async () => {
|
||||
if (!activeSession || !selectedExercise) return;
|
||||
|
||||
// For unilateral exercises, create two sets (LEFT and RIGHT)
|
||||
const setData: Partial<WorkoutSet> = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
|
||||
if (selectedExercise.isUnilateral) {
|
||||
const setsToCreate: Array<Partial<WorkoutSet> & { side: 'LEFT' | 'RIGHT' }> = [];
|
||||
setData.side = unilateralSide;
|
||||
}
|
||||
|
||||
if (sameValuesBothSides) {
|
||||
// Create two identical sets with LEFT and RIGHT sides
|
||||
const setData: Partial<WorkoutSet> = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) setData.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) setData.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
try {
|
||||
const response = await api.post('/sessions/active/log-set', setData);
|
||||
if (response.success) {
|
||||
const { newSet, activeExerciseId } = response;
|
||||
onSetAdded(newSet);
|
||||
|
||||
setsToCreate.push({ ...setData, side: 'LEFT' });
|
||||
setsToCreate.push({ ...setData, side: 'RIGHT' });
|
||||
} else {
|
||||
// Create separate sets for LEFT and RIGHT with different values
|
||||
const leftSetData: Partial<WorkoutSet> = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
const rightSetData: Partial<WorkoutSet> = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weightLeft) leftSetData.weight = parseFloat(weightLeft);
|
||||
if (repsLeft) leftSetData.reps = parseInt(repsLeft);
|
||||
if (weightRight) rightSetData.weight = parseFloat(weightRight);
|
||||
if (repsRight) rightSetData.reps = parseInt(repsRight);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weightLeft) leftSetData.weight = parseFloat(weightLeft);
|
||||
if (repsLeft) leftSetData.reps = parseInt(repsLeft);
|
||||
leftSetData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
if (weightRight) rightSetData.weight = parseFloat(weightRight);
|
||||
if (repsRight) rightSetData.reps = parseInt(repsRight);
|
||||
rightSetData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (durationLeft) leftSetData.durationSeconds = parseInt(durationLeft);
|
||||
if (distanceLeft) leftSetData.distanceMeters = parseFloat(distanceLeft);
|
||||
if (durationRight) rightSetData.durationSeconds = parseInt(durationRight);
|
||||
if (distanceRight) rightSetData.distanceMeters = parseFloat(distanceRight);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (durationLeft) leftSetData.durationSeconds = parseInt(durationLeft);
|
||||
leftSetData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
if (durationRight) rightSetData.durationSeconds = parseInt(durationRight);
|
||||
rightSetData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (heightLeft) leftSetData.height = parseFloat(heightLeft);
|
||||
if (heightRight) rightSetData.height = parseFloat(heightRight);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distanceLeft) leftSetData.distanceMeters = parseFloat(distanceLeft);
|
||||
if (distanceRight) rightSetData.distanceMeters = parseFloat(distanceRight);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (repsLeft) leftSetData.reps = parseInt(repsLeft);
|
||||
if (repsRight) rightSetData.reps = parseInt(repsRight);
|
||||
break;
|
||||
}
|
||||
|
||||
setsToCreate.push({ ...leftSetData, side: 'LEFT' });
|
||||
setsToCreate.push({ ...rightSetData, side: 'RIGHT' });
|
||||
}
|
||||
|
||||
// Log both sets
|
||||
try {
|
||||
for (const setData of setsToCreate) {
|
||||
const response = await api.post('/sessions/active/log-set', setData);
|
||||
if (response.success) {
|
||||
const { newSet } = response;
|
||||
onSetAdded(newSet);
|
||||
if (activePlan && activeExerciseId) {
|
||||
const nextStepIndex = activePlan.steps.findIndex(step => step.exerciseId === activeExerciseId);
|
||||
if (nextStepIndex !== -1) {
|
||||
setCurrentStepIndex(nextStepIndex);
|
||||
}
|
||||
} else if (activePlan && !activeExerciseId) {
|
||||
// Plan is finished
|
||||
setCurrentStepIndex(activePlan.steps.length);
|
||||
}
|
||||
|
||||
// Update plan progress after logging both sets
|
||||
if (activePlan) {
|
||||
const response = await api.post('/sessions/active/log-set', { exerciseId: selectedExercise.id });
|
||||
if (response.success && response.activeExerciseId) {
|
||||
const nextStepIndex = activePlan.steps.findIndex(step => step.exerciseId === response.activeExerciseId);
|
||||
if (nextStepIndex !== -1) {
|
||||
setCurrentStepIndex(nextStepIndex);
|
||||
}
|
||||
} else if (response.success && !response.activeExerciseId) {
|
||||
setCurrentStepIndex(activePlan.steps.length);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to log unilateral sets:", error);
|
||||
}
|
||||
} else {
|
||||
// Regular bilateral exercise - single set
|
||||
const setData: Partial<WorkoutSet> = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) setData.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await api.post('/sessions/active/log-set', setData);
|
||||
if (response.success) {
|
||||
const { newSet, activeExerciseId } = response;
|
||||
onSetAdded(newSet);
|
||||
|
||||
if (activePlan && activeExerciseId) {
|
||||
const nextStepIndex = activePlan.steps.findIndex(step => step.exerciseId === activeExerciseId);
|
||||
if (nextStepIndex !== -1) {
|
||||
setCurrentStepIndex(nextStepIndex);
|
||||
}
|
||||
} else if (activePlan && !activeExerciseId) {
|
||||
// Plan is finished
|
||||
setCurrentStepIndex(activePlan.steps.length);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to log set:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to log set:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogSporadicSet = async () => {
|
||||
if (!selectedExercise) return;
|
||||
|
||||
// For unilateral exercises, create two sets (LEFT and RIGHT)
|
||||
const setData: any = {
|
||||
exerciseId: selectedExercise.id,
|
||||
};
|
||||
|
||||
if (selectedExercise.isUnilateral) {
|
||||
const setsToCreate: any[] = [];
|
||||
setData.side = unilateralSide;
|
||||
}
|
||||
|
||||
if (sameValuesBothSides) {
|
||||
// Create two identical sets with LEFT and RIGHT sides
|
||||
const set: any = {
|
||||
exerciseId: selectedExercise.id,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) setData.weight = parseFloat(weight);
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) setData.durationSeconds = parseInt(duration);
|
||||
setData.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) setData.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) setData.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) setData.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) set.weight = parseFloat(weight);
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) set.weight = parseFloat(weight);
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
set.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) set.durationSeconds = parseInt(duration);
|
||||
if (distance) set.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) set.durationSeconds = parseInt(duration);
|
||||
set.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) set.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) set.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
|
||||
setsToCreate.push({ ...set, side: 'LEFT' });
|
||||
setsToCreate.push({ ...set, side: 'RIGHT' });
|
||||
} else {
|
||||
// Create separate sets for LEFT and RIGHT with different values
|
||||
const leftSet: any = {
|
||||
exerciseId: selectedExercise.id,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
const rightSet: any = {
|
||||
exerciseId: selectedExercise.id,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weightLeft) leftSet.weight = parseFloat(weightLeft);
|
||||
if (repsLeft) leftSet.reps = parseInt(repsLeft);
|
||||
if (weightRight) rightSet.weight = parseFloat(weightRight);
|
||||
if (repsRight) rightSet.reps = parseInt(repsRight);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weightLeft) leftSet.weight = parseFloat(weightLeft);
|
||||
if (repsLeft) leftSet.reps = parseInt(repsLeft);
|
||||
leftSet.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
if (weightRight) rightSet.weight = parseFloat(weightRight);
|
||||
if (repsRight) rightSet.reps = parseInt(repsRight);
|
||||
rightSet.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (durationLeft) leftSet.durationSeconds = parseInt(durationLeft);
|
||||
if (distanceLeft) leftSet.distanceMeters = parseFloat(distanceLeft);
|
||||
if (durationRight) rightSet.durationSeconds = parseInt(durationRight);
|
||||
if (distanceRight) rightSet.distanceMeters = parseFloat(distanceRight);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (durationLeft) leftSet.durationSeconds = parseInt(durationLeft);
|
||||
leftSet.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
if (durationRight) rightSet.durationSeconds = parseInt(durationRight);
|
||||
rightSet.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (heightLeft) leftSet.height = parseFloat(heightLeft);
|
||||
if (heightRight) rightSet.height = parseFloat(heightRight);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distanceLeft) leftSet.distanceMeters = parseFloat(distanceLeft);
|
||||
if (distanceRight) rightSet.distanceMeters = parseFloat(distanceRight);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (repsLeft) leftSet.reps = parseInt(repsLeft);
|
||||
if (repsRight) rightSet.reps = parseInt(repsRight);
|
||||
break;
|
||||
}
|
||||
|
||||
setsToCreate.push({ ...leftSet, side: 'LEFT' });
|
||||
setsToCreate.push({ ...rightSet, side: 'RIGHT' });
|
||||
}
|
||||
|
||||
// Log both sets
|
||||
try {
|
||||
for (const set of setsToCreate) {
|
||||
await logSporadicSet(set);
|
||||
}
|
||||
try {
|
||||
const response = await api.post('/sessions/quick-log/set', setData);
|
||||
if (response.success) {
|
||||
setSporadicSuccess(true);
|
||||
setTimeout(() => setSporadicSuccess(false), 2000);
|
||||
|
||||
// Refresh quick log session
|
||||
const sessionRes = await api.get('/sessions/quick-log');
|
||||
if (sessionRes.success && sessionRes.session) {
|
||||
setQuickLogSession(sessionRes.session);
|
||||
}
|
||||
|
||||
// Reset form
|
||||
setWeight('');
|
||||
setReps('');
|
||||
setDuration('');
|
||||
setDistance('');
|
||||
setHeight('');
|
||||
setWeightLeft('');
|
||||
setWeightRight('');
|
||||
setRepsLeft('');
|
||||
setRepsRight('');
|
||||
setDurationLeft('');
|
||||
setDurationRight('');
|
||||
setDistanceLeft('');
|
||||
setDistanceRight('');
|
||||
setHeightLeft('');
|
||||
setHeightRight('');
|
||||
if (onSporadicSetAdded) onSporadicSetAdded();
|
||||
} catch (error) {
|
||||
console.error("Failed to log unilateral sporadic sets:", error);
|
||||
}
|
||||
} else {
|
||||
// Regular bilateral exercise - single set
|
||||
const set: any = {
|
||||
exerciseId: selectedExercise.id,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
switch (selectedExercise.type) {
|
||||
case ExerciseType.STRENGTH:
|
||||
if (weight) set.weight = parseFloat(weight);
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
break;
|
||||
case ExerciseType.BODYWEIGHT:
|
||||
if (weight) set.weight = parseFloat(weight);
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
set.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.CARDIO:
|
||||
if (duration) set.durationSeconds = parseInt(duration);
|
||||
if (distance) set.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.STATIC:
|
||||
if (duration) set.durationSeconds = parseInt(duration);
|
||||
set.bodyWeightPercentage = parseFloat(bwPercentage) || 100;
|
||||
break;
|
||||
case ExerciseType.HIGH_JUMP:
|
||||
if (height) set.height = parseFloat(height);
|
||||
break;
|
||||
case ExerciseType.LONG_JUMP:
|
||||
if (distance) set.distanceMeters = parseFloat(distance);
|
||||
break;
|
||||
case ExerciseType.PLYOMETRIC:
|
||||
if (reps) set.reps = parseInt(reps);
|
||||
break;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await logSporadicSet(set);
|
||||
if (result) {
|
||||
setSporadicSuccess(true);
|
||||
setTimeout(() => setSporadicSuccess(false), 2000);
|
||||
// Reset form
|
||||
setWeight('');
|
||||
setReps('');
|
||||
setDuration('');
|
||||
setDistance('');
|
||||
setHeight('');
|
||||
if (onSporadicSetAdded) onSporadicSetAdded();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to log sporadic set:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to log quick log set:", error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -721,29 +482,9 @@ export const useTracker = ({
|
||||
handleCancelEdit,
|
||||
jumpToStep,
|
||||
resetForm,
|
||||
// Unilateral exercise state
|
||||
sameValuesBothSides,
|
||||
setSameValuesBothSides,
|
||||
weightLeft,
|
||||
setWeightLeft,
|
||||
weightRight,
|
||||
setWeightRight,
|
||||
repsLeft,
|
||||
setRepsLeft,
|
||||
repsRight,
|
||||
setRepsRight,
|
||||
durationLeft,
|
||||
setDurationLeft,
|
||||
durationRight,
|
||||
setDurationRight,
|
||||
distanceLeft,
|
||||
setDistanceLeft,
|
||||
distanceRight,
|
||||
setDistanceRight,
|
||||
heightLeft,
|
||||
setHeightLeft,
|
||||
heightRight,
|
||||
setHeightRight,
|
||||
handleToggleSameValues,
|
||||
unilateralSide,
|
||||
setUnilateralSide,
|
||||
quickLogSession, // Export this
|
||||
loadQuickLogSession, // Export reload function
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user