Sporadic set logging added
This commit is contained in:
220
TRACKER_QUICK_LOG_IMPLEMENTATION.txt
Normal file
220
TRACKER_QUICK_LOG_IMPLEMENTATION.txt
Normal file
@@ -0,0 +1,220 @@
|
||||
// Add this to Tracker.tsx imports (line 9, after api import):
|
||||
import { logSporadicSet } from '../services/sporadicSets';
|
||||
|
||||
// Add this to TrackerProps interface (after onUpdateSet, around line 21):
|
||||
onSporadicSetAdded?: () => void;
|
||||
|
||||
// Update component function signature (line 28):
|
||||
const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, activePlan, onSessionStart, onSessionEnd, onSessionQuit, onSetAdded, onRemoveSet, onUpdateSet, onSporadicSetAdded, lang }) => {
|
||||
|
||||
// Add these state variables (after editHeight state, around line 69):
|
||||
const [isSporadicMode, setIsSporadicMode] = useState(false);
|
||||
const [sporadicSuccess, setSporadicSuccess] = useState(false);
|
||||
|
||||
// Add this handler function (after handleCancelEdit, around line 289):
|
||||
const handleLogSporadicSet = async () => {
|
||||
if (!selectedExercise) return;
|
||||
|
||||
const setData: any = { 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;
|
||||
}
|
||||
|
||||
const result = await logSporadicSet(setData);
|
||||
if (result) {
|
||||
setSporadicSuccess(true);
|
||||
setTimeout(() => setSporadicSuccess(false), 2000);
|
||||
|
||||
// Reset form
|
||||
setWeight(''); setReps(''); setDuration('');
|
||||
setDistance(''); setHeight('');
|
||||
setSelectedExercise(null);
|
||||
setSearchQuery('');
|
||||
|
||||
if (onSporadicSetAdded) onSporadicSetAdded();
|
||||
}
|
||||
};
|
||||
|
||||
// Replace the single "Free Workout" button section (around line 347-355) with:
|
||||
<div className="w-full max-w-xs space-y-3">
|
||||
<button
|
||||
onClick={() => handleStart()}
|
||||
className="w-full h-16 rounded-full bg-primary text-on-primary font-medium text-lg shadow-elevation-2 hover:shadow-elevation-3 active:shadow-elevation-1 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<PlayCircle size={24} />
|
||||
{t('free_workout', lang)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsSporadicMode(true)}
|
||||
className="w-full h-16 rounded-full bg-secondary-container text-on-secondary-container font-medium text-lg shadow-elevation-1 hover:shadow-elevation-2 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<CheckCircle size={24} />
|
||||
{t('quick_log', lang)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
// Add this new section after the "no active session" return statement (after line 396, before the main return):
|
||||
if (!activeSession && isSporadicMode) {
|
||||
return (
|
||||
<div className="flex flex-col h-full p-4 md:p-8 overflow-y-auto bg-surface">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSporadicMode(false);
|
||||
setSelectedExercise(null);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
className="p-2 rounded-full hover:bg-surface-container-high transition-colors"
|
||||
>
|
||||
<X size={24} className="text-on-surface" />
|
||||
</button>
|
||||
<h2 className="text-2xl font-normal text-on-surface">{t('quick_log', lang)}</h2>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
{sporadicSuccess && (
|
||||
<div className="mb-4 p-4 bg-primary-container text-on-primary-container rounded-xl animate-in fade-in slide-in-from-top-2">
|
||||
{t('log_sporadic_success', lang)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Exercise Selection and Form - reuse existing components */}
|
||||
<div className="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={() => 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">
|
||||
{filteredExercises.length > 0 ? (
|
||||
filteredExercises.map(ex => (
|
||||
<button
|
||||
key={ex.id}
|
||||
onClick={() => {
|
||||
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="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{(selectedExercise.type === ExerciseType.STRENGTH || selectedExercise.type === ExerciseType.BODYWEIGHT) && (
|
||||
<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
|
||||
/>
|
||||
)}
|
||||
{(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} />}
|
||||
/>
|
||||
)}
|
||||
{(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={<Footprints size={10} />}
|
||||
/>
|
||||
)}
|
||||
{selectedExercise.type === ExerciseType.HIGH_JUMP && (
|
||||
<FilledInput
|
||||
label={t('height_cm', lang)}
|
||||
value={height}
|
||||
onChange={(e: any) => setHeight(e.target.value)}
|
||||
icon={<Ruler size={10} />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleLogSporadicSet}
|
||||
className="w-full h-14 rounded-full bg-primary text-on-primary font-medium text-lg shadow-elevation-2 hover:shadow-elevation-3 active:shadow-elevation-1 transition-all"
|
||||
>
|
||||
{t('log_set', lang)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Exercise Modal */}
|
||||
{isCreating && (
|
||||
<ExerciseModal
|
||||
onClose={() => setIsCreating(false)}
|
||||
onCreate={handleCreateExercise}
|
||||
lang={lang}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user