Exercise management enhanced

2025-11-26 09:07:29 +02:00
parent e28ddccd7f
commit 6d08c2cf11
8 changed files with 211 additions and 169 deletions
--- a/components/ExerciseModal.tsx
+++ b/components/ExerciseModal.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { X, Dumbbell, User, Flame, Timer as TimerIcon, ArrowUp, ArrowRight, Footprints, Ruler, Percent } from 'lucide-react';
+import { ExerciseDef, ExerciseType, Language } from '../types';
+import { t } from '../services/i18n';
+import FilledInput from './FilledInput';
+
+interface ExerciseModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (exercise: ExerciseDef) => Promise<void> | void;
+    lang: Language;
+}
+
+const ExerciseModal: React.FC<ExerciseModalProps> = ({ isOpen, onClose, onSave, lang }) => {
+    const [newName, setNewName] = useState('');
+    const [newType, setNewType] = useState<ExerciseType>(ExerciseType.STRENGTH);
+    const [newBwPercentage, setNewBwPercentage] = useState<string>('100');
+
+    const exerciseTypeLabels: Record<ExerciseType, string> = {
+        [ExerciseType.STRENGTH]: t('type_strength', lang),
+        [ExerciseType.BODYWEIGHT]: t('type_bodyweight', lang),
+        [ExerciseType.CARDIO]: t('type_cardio', lang),
+        [ExerciseType.STATIC]: t('type_static', lang),
+        [ExerciseType.HIGH_JUMP]: t('type_height', lang),
+        [ExerciseType.LONG_JUMP]: t('type_dist', lang),
+        [ExerciseType.PLYOMETRIC]: t('type_jump', lang),
+    };
+
+    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 })
+        };
+        await onSave(newEx);
+        setNewName('');
+        setNewType(ExerciseType.STRENGTH);
+        setNewBwPercentage('100');
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <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={onClose} 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>
+    );
+};
+
+export default ExerciseModal;