ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Exercise management enhanced

Browse Source
This commit is contained in:
aodulov
2025-11-26 09:07:29 +02:00
parent e28ddccd7f
commit 6d08c2cf11
8 changed files with 211 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/Tracker.tsx
View File

@@ -18,23 +18,8 @@ interface TrackerProps {
lang: Language;
}
const FilledInput = ({ label, value, onChange, type = "number", icon, autoFocus, step }: any) => (
<div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
<label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
{icon} {label}
</label>
<input
type={type}
step={step}
inputMode="decimal"
autoFocus={autoFocus}
className="w-full pt-6 pb-2 px-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent"
placeholder="0"
value={value}
onChange={onChange}
/>
</div>
);
import FilledInput from './FilledInput';
import ExerciseModal from './ExerciseModal';
const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, activePlan, onSessionStart, onSessionEnd, onSetAdded, onRemoveSet, lang }) => {
const [exercises, setExercises] = useState<ExerciseDef[]>([]);
@@ -58,9 +43,6 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
// Create Exercise State
const [isCreating, setIsCreating] = useState(false);
const [newName, setNewName] = useState('');
const [newType, setNewType] = useState<ExerciseType>(ExerciseType.STRENGTH);
const [newBwPercentage, setNewBwPercentage] = useState<string>('100');
// Plan Execution State
const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -179,21 +161,11 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
}
};
const handleCreateExercise = async () => {
if (!newName.trim()) return;
const newEx: ExerciseDef = {
id: crypto.randomUUID(),
name: newName.trim(),
type: newType,
...(newType === ExerciseType.BODYWEIGHT && { bodyWeightPercentage: parseFloat(newBwPercentage) || 100 })
};
const handleCreateExercise = async (newEx: ExerciseDef) => {
await saveExercise(userId, newEx);
const exList = await getExercises(userId);
setExercises(exList.filter(e => !e.isArchived));
setSelectedExercise(newEx);
setNewName('');
setNewType(ExerciseType.STRENGTH);
setNewBwPercentage('100');
setIsCreating(false);
};
@@ -518,68 +490,12 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
</div>
{isCreating && (
<div className="fixed inset-0 bg-black/60 z-[60] flex items-end sm:items-center justify-center p-4 backdrop-blur-sm">
<div className="bg-surface-container w-full max-w-sm rounded-[28px] p-6 shadow-elevation-3 animate-in slide-in-from-bottom-10 duration-200">
<div className="flex justify-between items-center mb-6">
<h3 className="text-2xl font-normal text-on-surface">{t('create_exercise', lang)}</h3>
<button onClick={() => setIsCreating(false)} className="p-2 bg-surface-container-high rounded-full hover:bg-outline-variant/20"><X size={20} /></button>
</div>
<div className="space-y-6">
<FilledInput
label={t('ex_name', lang)}
value={newName}
onChange={(e: any) => setNewName(e.target.value)}
type="text"
autoFocus
/>
<div>
<label className="block text-xs text-on-surface-variant font-medium mb-3">{t('ex_type', lang)}</label>
<div className="flex flex-wrap gap-2">
{[
{ id: ExerciseType.STRENGTH, label: exerciseTypeLabels[ExerciseType.STRENGTH], icon: Dumbbell },
{ id: ExerciseType.BODYWEIGHT, label: exerciseTypeLabels[ExerciseType.BODYWEIGHT], icon: User },
{ id: ExerciseType.CARDIO, label: exerciseTypeLabels[ExerciseType.CARDIO], icon: Flame },
{ id: ExerciseType.STATIC, label: exerciseTypeLabels[ExerciseType.STATIC], icon: TimerIcon },
{ id: ExerciseType.HIGH_JUMP, label: exerciseTypeLabels[ExerciseType.HIGH_JUMP], icon: ArrowUp },
{ id: ExerciseType.LONG_JUMP, label: exerciseTypeLabels[ExerciseType.LONG_JUMP], icon: Ruler },
{ id: ExerciseType.PLYOMETRIC, label: exerciseTypeLabels[ExerciseType.PLYOMETRIC], icon: Footprints },
].map((type) => (
<button
key={type.id}
onClick={() => setNewType(type.id)}
className={`px-4 py-2 rounded-lg flex items-center gap-2 text-xs font-medium border transition-all ${newType === type.id
? 'bg-secondary-container text-on-secondary-container border-transparent'
: 'bg-transparent text-on-surface-variant border-outline hover:border-on-surface-variant'
}`}
>
<type.icon size={14} /> {type.label}
</button>
))}
</div>
</div>
{newType === ExerciseType.BODYWEIGHT && (
<FilledInput
label={t('body_weight_percent', lang)}
value={newBwPercentage}
onChange={(e: any) => setNewBwPercentage(e.target.value)}
icon={<Percent size={12} />}
/>
)}
<div className="flex justify-end mt-4">
<button
onClick={handleCreateExercise}
className="px-8 py-3 bg-primary text-on-primary rounded-full font-medium shadow-elevation-1"
>
{t('create_btn', lang)}
</button>
</div>
</div>
</div>
</div>
<ExerciseModal
isOpen={isCreating}
onClose={() => setIsCreating(false)}
onSave={handleCreateExercise}
lang={lang}
/>
)}
</div>
);