239 lines
12 KiB
TypeScript
239 lines
12 KiB
TypeScript
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 { t } from '../../services/i18n';
|
|
import FilledInput from '../FilledInput';
|
|
import ExerciseModal from '../ExerciseModal';
|
|
import { useTracker } from './useTracker';
|
|
|
|
interface SporadicViewProps {
|
|
tracker: ReturnType<typeof useTracker>;
|
|
lang: Language;
|
|
sporadicSets?: SporadicSet[];
|
|
}
|
|
|
|
const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang, sporadicSets }) => {
|
|
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
|
|
} = tracker;
|
|
|
|
const [todaysSets, setTodaysSets] = useState<SporadicSet[]>([]);
|
|
|
|
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));
|
|
}
|
|
}, [sporadicSets]);
|
|
|
|
const renderSetMetrics = (set: SporadicSet) => {
|
|
const metrics: string[] = [];
|
|
if (set.weight) metrics.push(`${set.weight} ${t('weight_kg', lang)}`);
|
|
if (set.reps) metrics.push(`${set.reps} ${t('reps', lang)}`);
|
|
if (set.durationSeconds) metrics.push(`${set.durationSeconds} ${t('time_sec', lang)}`);
|
|
if (set.distanceMeters) metrics.push(`${set.distanceMeters} ${t('dist_m', lang)}`);
|
|
if (set.height) metrics.push(`${set.height} ${t('height_cm', lang)}`);
|
|
return metrics.join(' / ');
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full max-h-full overflow-hidden relative bg-surface">
|
|
<div className="px-4 py-3 bg-surface-container shadow-elevation-1 z-20 flex justify-between items-center">
|
|
<button
|
|
onClick={() => {
|
|
resetForm();
|
|
setIsSporadicMode(false);
|
|
}}
|
|
className="text-error font-medium text-sm hover:opacity-80 transition-opacity"
|
|
>
|
|
{t('quit', lang)}
|
|
</button>
|
|
<div className="flex flex-col items-center">
|
|
<h2 className="text-title-medium text-on-surface flex items-center gap-2 font-medium">
|
|
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
|
{t('quick_log', lang)}
|
|
</h2>
|
|
</div>
|
|
<button
|
|
onClick={handleLogSporadicSet}
|
|
className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${selectedExercise
|
|
? 'bg-primary-container text-on-primary-container hover:opacity-90 shadow-elevation-1'
|
|
: 'bg-surface-container-high text-on-surface-variant opacity-50 cursor-not-allowed'
|
|
}`}
|
|
disabled={!selectedExercise}
|
|
>
|
|
{t('log_set', lang)}
|
|
</button>
|
|
</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">
|
|
<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>
|
|
)}
|
|
|
|
{/* 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 => (
|
|
<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>
|
|
<div className="flex items-center gap-2">
|
|
{/* Edit and Delete buttons can be added here in the future */}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isCreating && (
|
|
<ExerciseModal
|
|
isOpen={isCreating}
|
|
onClose={() => setIsCreating(false)}
|
|
onSave={handleCreateExercise}
|
|
lang={lang}
|
|
existingExercises={exercises}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SporadicView;
|