New exercise creation added to Quick Log. History fixed.
This commit is contained in:
@@ -112,7 +112,7 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
}
|
||||
};
|
||||
|
||||
if (sessions.length === 0) {
|
||||
if (sessions.length === 0 && (!sporadicSets || sporadicSets.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" />
|
||||
@@ -197,66 +197,66 @@ const History: React.FC<HistoryProps> = ({ sessions, sporadicSets, onUpdateSessi
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Sporadic Sets Section */}
|
||||
{sporadicSets && sporadicSets.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-xl font-medium text-on-surface mb-4 px-2">{t('sporadic_sets_title', lang)}</h3>
|
||||
{Object.entries(
|
||||
sporadicSets.reduce((groups: Record<string, SporadicSet[]>, set) => {
|
||||
const date = new Date(set.timestamp).toISOString().split('T')[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(set);
|
||||
return groups;
|
||||
}, {})
|
||||
)
|
||||
.sort(([a], [b]) => b.localeCompare(a))
|
||||
.map(([date, sets]) => (
|
||||
<div key={date} className="mb-4">
|
||||
<div className="text-sm text-on-surface-variant px-2 mb-2 font-medium">{date}</div>
|
||||
<div className="space-y-2">
|
||||
{sets.map(set => (
|
||||
<div
|
||||
key={set.id}
|
||||
className="bg-surface-container-low rounded-xl p-4 border border-outline-variant/10 flex justify-between items-center"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-on-surface">{set.exerciseName}</div>
|
||||
<div className="text-sm text-on-surface-variant mt-1">
|
||||
{set.type === ExerciseType.STRENGTH && `${set.weight || 0}kg x ${set.reps || 0}`}
|
||||
{set.type === ExerciseType.BODYWEIGHT && `${set.weight ? `+${set.weight}kg` : 'BW'} x ${set.reps || 0}`}
|
||||
{set.type === ExerciseType.CARDIO && `${set.durationSeconds || 0}s ${set.distanceMeters ? `/ ${set.distanceMeters}m` : ''}`}
|
||||
{set.type === ExerciseType.STATIC && `${set.durationSeconds || 0}s`}
|
||||
{set.type === ExerciseType.HIGH_JUMP && `${set.height || 0}cm`}
|
||||
{set.type === ExerciseType.LONG_JUMP && `${set.distanceMeters || 0}m`}
|
||||
{set.type === ExerciseType.PLYOMETRIC && `x ${set.reps || 0}`}
|
||||
{/* Sporadic Sets Section */}
|
||||
{sporadicSets && sporadicSets.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-xl font-medium text-on-surface mb-4 px-2">{t('sporadic_sets_title', lang)}</h3>
|
||||
{Object.entries(
|
||||
sporadicSets.reduce((groups: Record<string, SporadicSet[]>, set) => {
|
||||
const date = new Date(set.timestamp).toISOString().split('T')[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(set);
|
||||
return groups;
|
||||
}, {})
|
||||
)
|
||||
.sort(([a], [b]) => b.localeCompare(a))
|
||||
.map(([date, sets]) => (
|
||||
<div key={date} className="mb-4">
|
||||
<div className="text-sm text-on-surface-variant px-2 mb-2 font-medium">{date}</div>
|
||||
<div className="space-y-2">
|
||||
{(sets as SporadicSet[]).map(set => (
|
||||
<div
|
||||
key={set.id}
|
||||
className="bg-surface-container-low rounded-xl p-4 border border-outline-variant/10 flex justify-between items-center"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-on-surface">{set.exerciseName}</div>
|
||||
<div className="text-sm text-on-surface-variant mt-1">
|
||||
{set.type === ExerciseType.STRENGTH && `${set.weight || 0}kg x ${set.reps || 0}`}
|
||||
{set.type === ExerciseType.BODYWEIGHT && `${set.weight ? `+${set.weight}kg` : 'BW'} x ${set.reps || 0}`}
|
||||
{set.type === ExerciseType.CARDIO && `${set.durationSeconds || 0}s ${set.distanceMeters ? `/ ${set.distanceMeters}m` : ''}`}
|
||||
{set.type === ExerciseType.STATIC && `${set.durationSeconds || 0}s`}
|
||||
{set.type === ExerciseType.HIGH_JUMP && `${set.height || 0}cm`}
|
||||
{set.type === ExerciseType.LONG_JUMP && `${set.distanceMeters || 0}m`}
|
||||
{set.type === ExerciseType.PLYOMETRIC && `x ${set.reps || 0}`}
|
||||
</div>
|
||||
<div className="text-xs text-on-surface-variant mt-1">
|
||||
{new Date(set.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-on-surface-variant mt-1">
|
||||
{new Date(set.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setEditingSporadicSet(JSON.parse(JSON.stringify(set)))}
|
||||
className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
|
||||
>
|
||||
<Pencil size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeletingSporadicId(set.id)}
|
||||
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setEditingSporadicSet(JSON.parse(JSON.stringify(set)))}
|
||||
className="p-2 text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-full transition-colors"
|
||||
>
|
||||
<Pencil size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeletingSporadicId(set.id)}
|
||||
className="p-2 text-on-surface-variant hover:text-error hover:bg-surface-container-high rounded-full transition-colors"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* DELETE CONFIRMATION DIALOG (MD3) */}
|
||||
{deletingId && (
|
||||
|
||||
@@ -204,7 +204,8 @@ const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSe
|
||||
filteredExercises.map(ex => (
|
||||
<button
|
||||
key={ex.id}
|
||||
onClick={() => {
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault(); // Prevent input blur
|
||||
setSelectedExercise(ex);
|
||||
setSearchQuery(ex.name);
|
||||
setShowSuggestions(false);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Dumbbell, Scale, Activity, Timer as TimerIcon, ArrowRight, ArrowUp, Plu
|
||||
import { ExerciseType, Language } from '../../types';
|
||||
import { t } from '../../services/i18n';
|
||||
import FilledInput from '../FilledInput';
|
||||
import ExerciseModal from '../ExerciseModal';
|
||||
import { useTracker } from './useTracker';
|
||||
|
||||
interface SporadicViewProps {
|
||||
@@ -31,23 +32,41 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
|
||||
setHeight,
|
||||
handleLogSporadicSet,
|
||||
sporadicSuccess,
|
||||
setIsSporadicMode
|
||||
setIsSporadicMode,
|
||||
isCreating,
|
||||
setIsCreating,
|
||||
handleCreateExercise,
|
||||
exercises,
|
||||
resetForm
|
||||
} = tracker;
|
||||
|
||||
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">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setIsSporadicMode(false);
|
||||
}}
|
||||
className="text-error font-medium text-sm hover:opacity-80 transition-opacity"
|
||||
>
|
||||
{t('cancel', 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={() => setIsSporadicMode(false)}
|
||||
className="px-5 py-2 rounded-full bg-primary-container text-on-primary-container text-sm font-medium hover:opacity-90 transition-opacity"
|
||||
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('done', lang)}
|
||||
{t('log_set', lang)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -67,13 +86,20 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
|
||||
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}
|
||||
onClick={() => {
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault(); // Prevent input blur
|
||||
setSelectedExercise(ex);
|
||||
setSearchQuery(ex.name);
|
||||
setShowSuggestions(false);
|
||||
@@ -140,8 +166,8 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
|
||||
<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'
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-primary-container text-on-primary-container'
|
||||
}`}
|
||||
>
|
||||
{sporadicSuccess ? <CheckCircle size={24} /> : <Plus size={24} />}
|
||||
@@ -150,6 +176,16 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isCreating && (
|
||||
<ExerciseModal
|
||||
isOpen={isCreating}
|
||||
onClose={() => setIsCreating(false)}
|
||||
onSave={handleCreateExercise}
|
||||
lang={lang}
|
||||
existingExercises={exercises}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -308,7 +308,7 @@ export const useTracker = ({
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await logSporadicSet(userId, set);
|
||||
const result = await logSporadicSet(set);
|
||||
if (result) {
|
||||
setSporadicSuccess(true);
|
||||
setTimeout(() => setSporadicSuccess(false), 2000);
|
||||
@@ -329,6 +329,7 @@ export const useTracker = ({
|
||||
await saveExercise(userId, newEx);
|
||||
setExercises(prev => [...prev, newEx].sort((a, b) => a.name.localeCompare(b.name)));
|
||||
setSelectedExercise(newEx);
|
||||
setSearchQuery(newEx.name);
|
||||
setIsCreating(false);
|
||||
};
|
||||
|
||||
@@ -364,6 +365,17 @@ export const useTracker = ({
|
||||
setShowPlanList(false);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setWeight('');
|
||||
setReps('');
|
||||
setDuration('');
|
||||
setDistance('');
|
||||
setHeight('');
|
||||
setSelectedExercise(null);
|
||||
setSearchQuery('');
|
||||
setSporadicSuccess(false);
|
||||
};
|
||||
|
||||
return {
|
||||
exercises,
|
||||
plans,
|
||||
@@ -426,5 +438,6 @@ export const useTracker = ({
|
||||
handleSaveEdit,
|
||||
handleCancelEdit,
|
||||
jumpToStep,
|
||||
resetForm,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user