Minor History fix
This commit is contained in:
10
App.tsx
10
App.tsx
@@ -94,13 +94,19 @@ function App() {
|
|||||||
setCurrentTab('TRACK');
|
setCurrentTab('TRACK');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEndSession = () => {
|
const handleEndSession = async () => {
|
||||||
if (activeSession && currentUser) {
|
if (activeSession && currentUser) {
|
||||||
const finishedSession = { ...activeSession, endTime: Date.now() };
|
const finishedSession = { ...activeSession, endTime: Date.now() };
|
||||||
saveSession(currentUser.id, finishedSession);
|
await saveSession(currentUser.id, finishedSession);
|
||||||
setSessions(prev => [finishedSession, ...prev]);
|
setSessions(prev => [finishedSession, ...prev]);
|
||||||
setActiveSession(null);
|
setActiveSession(null);
|
||||||
setActivePlan(null);
|
setActivePlan(null);
|
||||||
|
|
||||||
|
// Refetch user to get updated weight
|
||||||
|
const res = await getMe();
|
||||||
|
if (res.success && res.user) {
|
||||||
|
setCurrentUser(res.user);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -5,300 +5,301 @@ import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
|
|||||||
import { t } from '../services/i18n';
|
import { t } from '../services/i18n';
|
||||||
|
|
||||||
interface HistoryProps {
|
interface HistoryProps {
|
||||||
sessions: WorkoutSession[];
|
sessions: WorkoutSession[];
|
||||||
onUpdateSession?: (session: WorkoutSession) => void;
|
onUpdateSession?: (session: WorkoutSession) => void;
|
||||||
onDeleteSession?: (sessionId: string) => void;
|
onDeleteSession?: (sessionId: string) => void;
|
||||||
lang: Language;
|
lang: Language;
|
||||||
}
|
}
|
||||||
|
|
||||||
const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSession, lang }) => {
|
const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSession, lang }) => {
|
||||||
const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
|
const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
|
||||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||||
|
|
||||||
const calculateSessionWork = (session: WorkoutSession) => {
|
const calculateSessionWork = (session: WorkoutSession) => {
|
||||||
const bw = session.userBodyWeight || 70;
|
const bw = session.userBodyWeight || 70;
|
||||||
return session.sets.reduce((acc, set) => {
|
return session.sets.reduce((acc, set) => {
|
||||||
let w = 0;
|
let w = 0;
|
||||||
if (set.type === ExerciseType.STRENGTH) {
|
if (set.type === ExerciseType.STRENGTH) {
|
||||||
w = (set.weight || 0) * (set.reps || 0);
|
w = (set.weight || 0) * (set.reps || 0);
|
||||||
}
|
}
|
||||||
if (set.type === ExerciseType.BODYWEIGHT) {
|
if (set.type === ExerciseType.BODYWEIGHT) {
|
||||||
const percent = set.bodyWeightPercentage || 100;
|
const percent = set.bodyWeightPercentage || 100;
|
||||||
const effectiveBw = bw * (percent / 100);
|
const effectiveBw = bw * (percent / 100);
|
||||||
w = (effectiveBw + (set.weight || 0)) * (set.reps || 0);
|
w = (effectiveBw + (set.weight || 0)) * (set.reps || 0);
|
||||||
}
|
}
|
||||||
return acc + Math.max(0, w);
|
return acc + Math.max(0, w);
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatDateForInput = (timestamp: number) => {
|
const formatDateForInput = (timestamp: number) => {
|
||||||
const d = new Date(timestamp);
|
const d = new Date(timestamp);
|
||||||
const pad = (n: number) => n < 10 ? '0' + n : n;
|
const pad = (n: number) => n < 10 ? '0' + n : n;
|
||||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const parseDateFromInput = (value: string) => {
|
const parseDateFromInput = (value: string) => {
|
||||||
return new Date(value).getTime();
|
return new Date(value).getTime();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveEdit = () => {
|
const handleSaveEdit = () => {
|
||||||
if (editingSession && onUpdateSession) {
|
if (editingSession && onUpdateSession) {
|
||||||
onUpdateSession(editingSession);
|
onUpdateSession(editingSession);
|
||||||
setEditingSession(null);
|
setEditingSession(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUpdateSet = (setId: string, field: keyof WorkoutSet, value: number) => {
|
const handleUpdateSet = (setId: string, field: keyof WorkoutSet, value: number) => {
|
||||||
if (!editingSession) return;
|
if (!editingSession) return;
|
||||||
const updatedSets = editingSession.sets.map(s =>
|
const updatedSets = editingSession.sets.map(s =>
|
||||||
s.id === setId ? { ...s, [field]: value } : s
|
s.id === setId ? { ...s, [field]: value } : s
|
||||||
);
|
);
|
||||||
setEditingSession({ ...editingSession, sets: updatedSets });
|
setEditingSession({ ...editingSession, sets: updatedSets });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteSet = (setId: string) => {
|
const handleDeleteSet = (setId: string) => {
|
||||||
if (!editingSession) return;
|
if (!editingSession) return;
|
||||||
setEditingSession({
|
setEditingSession({
|
||||||
...editingSession,
|
...editingSession,
|
||||||
sets: editingSession.sets.filter(s => s.id !== setId)
|
sets: editingSession.sets.filter(s => s.id !== setId)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleConfirmDelete = () => {
|
const handleConfirmDelete = () => {
|
||||||
if (deletingId && onDeleteSession) {
|
if (deletingId && onDeleteSession) {
|
||||||
onDeleteSession(deletingId);
|
onDeleteSession(deletingId);
|
||||||
setDeletingId(null);
|
setDeletingId(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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" />
|
||||||
|
<p>{t('history_empty', lang)}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (sessions.length === 0) {
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center h-full text-on-surface-variant p-8 text-center">
|
<div className="h-full flex flex-col bg-surface">
|
||||||
<Clock size={48} className="mb-4 opacity-50" />
|
<div className="p-4 bg-surface-container shadow-elevation-1 z-10">
|
||||||
<p>{t('history_empty', lang)}</p>
|
<h2 className="text-2xl font-normal text-on-surface">{t('tab_history', lang)}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20">
|
||||||
|
{sessions.map((session) => {
|
||||||
|
const totalWork = calculateSessionWork(session);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={session.id} className="bg-surface-container rounded-xl p-5 shadow-elevation-1 border border-outline-variant/20">
|
||||||
|
<div className="flex justify-between items-start mb-4 border-b border-outline-variant pb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
|
||||||
|
<Calendar size={20} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-on-surface text-lg">
|
||||||
|
{new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-on-surface-variant flex items-center gap-2">
|
||||||
|
<span>{new Date(session.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||||||
|
{session.userBodyWeight && <span className="px-2 py-0.5 rounded-full bg-surface-container-high text-on-surface">{session.userBodyWeight}kg</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingSession(JSON.parse(JSON.stringify(session)))}
|
||||||
|
className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
|
||||||
|
>
|
||||||
|
<Pencil size={20} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeletingId(session.id)}
|
||||||
|
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
|
||||||
|
>
|
||||||
|
<Trash2 size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{Array.from(new Set(session.sets.map(s => s.exerciseName))).slice(0, 4).map(exName => {
|
||||||
|
const sets = session.sets.filter(s => s.exerciseName === exName);
|
||||||
|
const count = sets.length;
|
||||||
|
const bestSet = sets[0];
|
||||||
|
let detail = "";
|
||||||
|
if (bestSet.type === ExerciseType.HIGH_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.height || 0))}cm`;
|
||||||
|
else if (bestSet.type === ExerciseType.LONG_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.distanceMeters || 0))}m`;
|
||||||
|
else if (bestSet.type === ExerciseType.STRENGTH) detail = `${t('upto', lang)} ${Math.max(...sets.map(s => s.weight || 0))}kg`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={`${session.id}-${exName}`} className="flex justify-between text-sm items-center">
|
||||||
|
<span className="text-on-surface">{exName}</span>
|
||||||
|
<span className="text-on-surface-variant flex gap-2 items-center">
|
||||||
|
{detail && <span className="text-[10px] bg-surface-container-high px-2 py-0.5 rounded text-on-surface-variant">{detail}</span>}
|
||||||
|
<span>{count}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{new Set(session.sets.map(s => s.exerciseName)).size > 4 && (
|
||||||
|
<div className="text-xs text-center text-on-surface-variant mt-2">
|
||||||
|
+ ...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-3 border-t border-outline-variant flex justify-between items-center">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<span className="text-xs text-on-surface-variant">{t('sets_count', lang)}: <span className="text-on-surface font-medium">{session.sets.length}</span></span>
|
||||||
|
{totalWork > 0 && (
|
||||||
|
<span className="text-xs text-on-surface-variant flex items-center gap-1">
|
||||||
|
<Scale size={12} />
|
||||||
|
{(totalWork / 1000).toFixed(1)}t
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 text-primary text-xs font-bold tracking-wide">
|
||||||
|
<TrendingUp size={14} />
|
||||||
|
{t('finished', lang)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DELETE CONFIRMATION DIALOG (MD3) */}
|
||||||
|
{deletingId && (
|
||||||
|
<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_workout', 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={() => setDeletingId(null)}
|
||||||
|
className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
|
||||||
|
>
|
||||||
|
{t('cancel', lang)}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleConfirmDelete}
|
||||||
|
className="px-4 py-2 rounded-full bg-error-container text-on-error-container font-medium"
|
||||||
|
>
|
||||||
|
{t('delete', lang)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* EDIT SESSION FULLSCREEN DIALOG */}
|
||||||
|
{editingSession && (
|
||||||
|
<div className="fixed inset-0 z-[60] bg-surface flex flex-col animate-in slide-in-from-bottom-10 duration-200">
|
||||||
|
<div className="px-4 py-3 border-b border-outline-variant flex justify-between items-center bg-surface-container shadow-elevation-1">
|
||||||
|
<button onClick={() => setEditingSession(null)} className="text-on-surface-variant hover:text-on-surface">
|
||||||
|
<X />
|
||||||
|
</button>
|
||||||
|
<h2 className="text-lg font-medium text-on-surface">{t('edit', lang)}</h2>
|
||||||
|
<button onClick={handleSaveEdit} className="text-primary font-medium flex items-center gap-2">
|
||||||
|
{t('save', lang)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-6">
|
||||||
|
{/* Meta Info */}
|
||||||
|
<div className="bg-surface-container p-4 rounded-xl border border-outline-variant/20 space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
||||||
|
<label className="text-[10px] text-on-surface-variant font-bold block">{t('start_time', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={formatDateForInput(editingSession.startTime)}
|
||||||
|
onChange={(e) => setEditingSession({ ...editingSession, startTime: parseDateFromInput(e.target.value) })}
|
||||||
|
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
||||||
|
<label className="text-[10px] text-on-surface-variant font-bold block">{t('end_time', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
|
||||||
|
onChange={(e) => setEditingSession({ ...editingSession, endTime: parseDateFromInput(e.target.value) })}
|
||||||
|
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
||||||
|
<label className="text-[10px] text-on-surface-variant font-bold block">{t('weight_kg', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={editingSession.userBodyWeight || ''}
|
||||||
|
onChange={(e) => setEditingSession({ ...editingSession, userBodyWeight: parseFloat(e.target.value) })}
|
||||||
|
className="w-full bg-transparent text-on-surface focus:outline-none text-lg mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<h3 className="text-sm font-medium text-primary ml-1">{t('sets_count', lang)} ({editingSession.sets.length})</h3>
|
||||||
|
{editingSession.sets.map((set, idx) => (
|
||||||
|
<div key={set.id} className="bg-surface-container p-3 rounded-xl border border-outline-variant/20 flex flex-col gap-3 shadow-sm">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => handleDeleteSet(set.id)} className="text-on-surface-variant hover:text-error">
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
|
||||||
|
<div className="bg-surface-container-high rounded px-2 py-1">
|
||||||
|
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Dumbbell size={10} /> {t('weight_kg', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
||||||
|
value={set.weight ?? ''}
|
||||||
|
onChange={(e) => handleUpdateSet(set.id, 'weight', parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.PLYOMETRIC) && (
|
||||||
|
<div className="bg-surface-container-high rounded px-2 py-1">
|
||||||
|
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Activity size={10} /> {t('reps', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
||||||
|
value={set.reps ?? ''}
|
||||||
|
onChange={(e) => handleUpdateSet(set.id, 'reps', parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
|
||||||
|
<div className="bg-surface-container-high rounded px-2 py-1">
|
||||||
|
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Percent size={10} /> {t('body_weight_percent', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
||||||
|
value={set.bodyWeightPercentage ?? 100}
|
||||||
|
onChange={(e) => handleUpdateSet(set.id, 'bodyWeightPercentage', parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Add other fields similarly styled if needed */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full flex flex-col bg-surface">
|
|
||||||
<div className="p-4 bg-surface-container shadow-elevation-1 z-10">
|
|
||||||
<h2 className="text-2xl font-normal text-on-surface">{t('tab_history', lang)}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20">
|
|
||||||
{sessions.map((session) => {
|
|
||||||
const totalWork = calculateSessionWork(session);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={session.id} className="bg-surface-container rounded-xl p-5 shadow-elevation-1 border border-outline-variant/20">
|
|
||||||
<div className="flex justify-between items-start mb-4 border-b border-outline-variant pb-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
|
|
||||||
<Calendar size={20} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-on-surface text-lg">
|
|
||||||
{new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long' })}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-on-surface-variant flex items-center gap-2">
|
|
||||||
<span>{new Date(session.startTime).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
|
|
||||||
{session.userBodyWeight && <span className="px-2 py-0.5 rounded-full bg-surface-container-high text-on-surface">{session.userBodyWeight}kg</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setEditingSession(JSON.parse(JSON.stringify(session)))}
|
|
||||||
className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
|
|
||||||
>
|
|
||||||
<Pencil size={20} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeletingId(session.id)}
|
|
||||||
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
|
|
||||||
>
|
|
||||||
<Trash2 size={20} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{Array.from(new Set(session.sets.map(s => s.exerciseName))).slice(0, 4).map(exName => {
|
|
||||||
const sets = session.sets.filter(s => s.exerciseName === exName);
|
|
||||||
const count = sets.length;
|
|
||||||
const bestSet = sets[0];
|
|
||||||
let detail = "";
|
|
||||||
if (bestSet.type === ExerciseType.HIGH_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.height || 0))}cm`;
|
|
||||||
else if (bestSet.type === ExerciseType.LONG_JUMP) detail = `${t('max', lang)}: ${Math.max(...sets.map(s => s.distanceMeters || 0))}m`;
|
|
||||||
else if (bestSet.type === ExerciseType.STRENGTH) detail = `${t('upto', lang)} ${Math.max(...sets.map(s => s.weight || 0))}kg`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={exName} className="flex justify-between text-sm items-center">
|
|
||||||
<span className="text-on-surface">{exName}</span>
|
|
||||||
<span className="text-on-surface-variant flex gap-2 items-center">
|
|
||||||
{detail && <span className="text-[10px] bg-surface-container-high px-2 py-0.5 rounded text-on-surface-variant">{detail}</span>}
|
|
||||||
<span>{count}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{new Set(session.sets.map(s => s.exerciseName)).size > 4 && (
|
|
||||||
<div className="text-xs text-center text-on-surface-variant mt-2">
|
|
||||||
+ ...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 pt-3 border-t border-outline-variant flex justify-between items-center">
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<span className="text-xs text-on-surface-variant">{t('sets_count', lang)}: <span className="text-on-surface font-medium">{session.sets.length}</span></span>
|
|
||||||
{totalWork > 0 && (
|
|
||||||
<span className="text-xs text-on-surface-variant flex items-center gap-1">
|
|
||||||
<Scale size={12} />
|
|
||||||
{(totalWork / 1000).toFixed(1)}t
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1 text-primary text-xs font-bold tracking-wide">
|
|
||||||
<TrendingUp size={14} />
|
|
||||||
{t('finished', lang)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* DELETE CONFIRMATION DIALOG (MD3) */}
|
|
||||||
{deletingId && (
|
|
||||||
<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_workout', 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={() => setDeletingId(null)}
|
|
||||||
className="px-4 py-2 rounded-full text-primary font-medium hover:bg-white/5"
|
|
||||||
>
|
|
||||||
{t('cancel', lang)}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleConfirmDelete}
|
|
||||||
className="px-4 py-2 rounded-full bg-error-container text-on-error-container font-medium"
|
|
||||||
>
|
|
||||||
{t('delete', lang)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* EDIT SESSION FULLSCREEN DIALOG */}
|
|
||||||
{editingSession && (
|
|
||||||
<div className="fixed inset-0 z-[60] bg-surface flex flex-col animate-in slide-in-from-bottom-10 duration-200">
|
|
||||||
<div className="px-4 py-3 border-b border-outline-variant flex justify-between items-center bg-surface-container shadow-elevation-1">
|
|
||||||
<button onClick={() => setEditingSession(null)} className="text-on-surface-variant hover:text-on-surface">
|
|
||||||
<X />
|
|
||||||
</button>
|
|
||||||
<h2 className="text-lg font-medium text-on-surface">{t('edit', lang)}</h2>
|
|
||||||
<button onClick={handleSaveEdit} className="text-primary font-medium flex items-center gap-2">
|
|
||||||
{t('save', lang)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto p-4 space-y-6">
|
|
||||||
{/* Meta Info */}
|
|
||||||
<div className="bg-surface-container p-4 rounded-xl border border-outline-variant/20 space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
|
||||||
<label className="text-[10px] text-on-surface-variant font-bold block">{t('start_time', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
value={formatDateForInput(editingSession.startTime)}
|
|
||||||
onChange={(e) => setEditingSession({...editingSession, startTime: parseDateFromInput(e.target.value)})}
|
|
||||||
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
|
||||||
<label className="text-[10px] text-on-surface-variant font-bold block">{t('end_time', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
value={editingSession.endTime ? formatDateForInput(editingSession.endTime) : ''}
|
|
||||||
onChange={(e) => setEditingSession({...editingSession, endTime: parseDateFromInput(e.target.value)})}
|
|
||||||
className="w-full bg-transparent text-on-surface focus:outline-none text-sm mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-surface-container-high rounded-t-lg px-3 py-2 border-b border-outline-variant">
|
|
||||||
<label className="text-[10px] text-on-surface-variant font-bold block">{t('weight_kg', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={editingSession.userBodyWeight || ''}
|
|
||||||
onChange={(e) => setEditingSession({...editingSession, userBodyWeight: parseFloat(e.target.value)})}
|
|
||||||
className="w-full bg-transparent text-on-surface focus:outline-none text-lg mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-primary ml-1">{t('sets_count', lang)} ({editingSession.sets.length})</h3>
|
|
||||||
{editingSession.sets.map((set, idx) => (
|
|
||||||
<div key={set.id} className="bg-surface-container p-3 rounded-xl border border-outline-variant/20 flex flex-col gap-3 shadow-sm">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<button onClick={() => handleDeleteSet(set.id)} className="text-on-surface-variant hover:text-error">
|
|
||||||
<X size={18} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
{(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
|
|
||||||
<div className="bg-surface-container-high rounded px-2 py-1">
|
|
||||||
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Dumbbell size={10}/> {t('weight_kg', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
|
||||||
value={set.weight ?? ''}
|
|
||||||
onChange={(e) => handleUpdateSet(set.id, 'weight', parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(set.type === ExerciseType.STRENGTH || set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.PLYOMETRIC) && (
|
|
||||||
<div className="bg-surface-container-high rounded px-2 py-1">
|
|
||||||
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Activity size={10}/> {t('reps', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
|
||||||
value={set.reps ?? ''}
|
|
||||||
onChange={(e) => handleUpdateSet(set.id, 'reps', parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(set.type === ExerciseType.BODYWEIGHT || set.type === ExerciseType.STATIC) && (
|
|
||||||
<div className="bg-surface-container-high rounded px-2 py-1">
|
|
||||||
<label className="text-[10px] text-on-surface-variant flex gap-1 items-center"><Percent size={10}/> {t('body_weight_percent', lang)}</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
className="w-full bg-transparent text-sm text-on-surface focus:outline-none"
|
|
||||||
value={set.bodyWeightPercentage ?? 100}
|
|
||||||
onChange={(e) => handleUpdateSet(set.id, 'bodyWeightPercentage', parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Add other fields similarly styled if needed */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default History;
|
export default History;
|
||||||
|
|||||||
@@ -18,6 +18,24 @@ interface TrackerProps {
|
|||||||
lang: Language;
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, activePlan, onSessionStart, onSessionEnd, onSetAdded, onRemoveSet, lang }) => {
|
const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, activePlan, onSessionStart, onSessionEnd, onSetAdded, onRemoveSet, lang }) => {
|
||||||
const [exercises, setExercises] = useState<ExerciseDef[]>([]);
|
const [exercises, setExercises] = useState<ExerciseDef[]>([]);
|
||||||
const [plans, setPlans] = useState<WorkoutPlan[]>([]);
|
const [plans, setPlans] = useState<WorkoutPlan[]>([]);
|
||||||
@@ -107,11 +125,11 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
|
|||||||
setLastSet(set);
|
setLastSet(set);
|
||||||
|
|
||||||
if (set) {
|
if (set) {
|
||||||
if (set.weight !== undefined) setWeight(set.weight.toString());
|
if (set.weight != null) setWeight(set.weight.toString());
|
||||||
if (set.reps !== undefined) setReps(set.reps.toString());
|
if (set.reps != null) setReps(set.reps.toString());
|
||||||
if (set.durationSeconds !== undefined) setDuration(set.durationSeconds.toString());
|
if (set.durationSeconds != null) setDuration(set.durationSeconds.toString());
|
||||||
if (set.distanceMeters !== undefined) setDistance(set.distanceMeters.toString());
|
if (set.distanceMeters != null) setDistance(set.distanceMeters.toString());
|
||||||
if (set.height !== undefined) setHeight(set.height.toString());
|
if (set.height != null) setHeight(set.height.toString());
|
||||||
} else {
|
} else {
|
||||||
setWeight(''); setReps(''); setDuration(''); setDistance(''); setHeight('');
|
setWeight(''); setReps(''); setDuration(''); setDistance(''); setHeight('');
|
||||||
}
|
}
|
||||||
@@ -189,24 +207,6 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
|
|||||||
|
|
||||||
const isPlanFinished = activePlan && currentStepIndex >= activePlan.steps.length;
|
const isPlanFinished = activePlan && currentStepIndex >= activePlan.steps.length;
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
|
|
||||||
const exerciseTypeLabels: Record<ExerciseType, string> = {
|
const exerciseTypeLabels: Record<ExerciseType, string> = {
|
||||||
[ExerciseType.STRENGTH]: t('type_strength', lang),
|
[ExerciseType.STRENGTH]: t('type_strength', lang),
|
||||||
[ExerciseType.BODYWEIGHT]: t('type_bodyweight', lang),
|
[ExerciseType.BODYWEIGHT]: t('type_bodyweight', lang),
|
||||||
|
|||||||
Reference in New Issue
Block a user