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

1. Exercise lists sorted. 2. Session finishing confirmation. 3. Quit without saving option added.

Browse Source
This commit is contained in:
aodulov
2025-11-26 09:32:29 +02:00
parent dafb8664ed
commit 34738697df
4 changed files with 128 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Plans.tsx
View File

@@ -275,16 +275,19 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
</div>
</div>
<div className="flex-1 overflow-y-auto p-2">
{availableExercises.map(ex => (
<button
key={ex.id}
onClick={() => addStep(ex)}
className="w-full text-left p-4 border-b border-outline-variant hover:bg-surface-container-high text-on-surface flex justify-between"
>
<span>{ex.name}</span>
<span className="text-xs bg-secondary-container text-on-secondary-container px-2 py-1 rounded-full">{ex.type}</span>
</button>
))}
{availableExercises
.slice()
.sort((a, b) => a.name.localeCompare(b.name))
.map(ex => (
<button
key={ex.id}
onClick={() => addStep(ex)}
className="w-full text-left p-4 border-b border-outline-variant hover:bg-surface-container-high text-on-surface flex justify-between"
>
<span>{ex.name}</span>
<span className="text-xs bg-secondary-container text-on-secondary-container px-2 py-1 rounded-full">{ex.type}</span>
</button>
))}
</div>
{isCreatingExercise && (

111
components/Tracker.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Plus, Activity, ChevronDown, ChevronUp, Dumbbell, PlayCircle, CheckCircle, User, Scale, X, Flame, Timer as TimerIcon, ArrowUp, ArrowRight, Footprints, Ruler, CheckSquare, Trash2, Percent } from 'lucide-react';
import { Plus, Activity, ChevronDown, ChevronUp, Dumbbell, PlayCircle, CheckCircle, User, Scale, X, Flame, Timer as TimerIcon, ArrowUp, ArrowRight, Footprints, Ruler, CheckSquare, Trash2, Percent, MoreVertical } from 'lucide-react';
import { WorkoutSession, WorkoutSet, ExerciseDef, ExerciseType, WorkoutPlan, Language } from '../types';
import { getExercises, getLastSetForExercise, saveExercise, getPlans } from '../services/storage';
import { getCurrentUserProfile } from '../services/auth';
@@ -49,6 +49,11 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
const [showPlanPrep, setShowPlanPrep] = useState<WorkoutPlan | null>(null);
const [showPlanList, setShowPlanList] = useState(false);
// Confirmation State
const [showFinishConfirm, setShowFinishConfirm] = useState(false);
const [showQuitConfirm, setShowQuitConfirm] = useState(false);
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {
const loadData = async () => {
const exList = await getExercises(userId);
@@ -284,12 +289,40 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
{activeSession.userBodyWeight ? ` • ${activeSession.userBodyWeight}kg` : ''}
</span>
</div>
<button
onClick={onSessionEnd}
className="px-5 py-2 rounded-full bg-error-container text-on-error-container text-sm font-medium hover:opacity-90 transition-opacity"
>
{t('finish', lang)}
</button>
<div className="flex items-center gap-2 relative">
<button
onClick={() => setShowFinishConfirm(true)}
className="px-5 py-2 rounded-full bg-error-container text-on-error-container text-sm font-medium hover:opacity-90 transition-opacity"
>
{t('finish', lang)}
</button>
<button
onClick={() => setShowMenu(!showMenu)}
className="p-2 rounded-full bg-surface-container-high text-on-surface hover:bg-surface-container-highest transition-colors"
>
<MoreVertical size={20} />
</button>
{showMenu && (
<>
<div
className="fixed inset-0 z-30"
onClick={() => setShowMenu(false)}
/>
<div className="absolute right-0 top-full mt-2 bg-surface-container rounded-xl shadow-elevation-3 overflow-hidden z-40 min-w-[200px]">
<button
onClick={() => {
setShowMenu(false);
setShowQuitConfirm(true);
}}
className="w-full px-4 py-3 text-left text-error hover:bg-error-container/20 transition-colors flex items-center gap-2"
>
<X size={18} />
{t('quit_no_save', lang)}
</button>
</div>
</>
)}
</div>
</div>
{activePlan && (
@@ -348,9 +381,12 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
onChange={(e) => setSelectedExercise(exercises.find(ex => ex.id === e.target.value) || null)}
>
<option value="" disabled>{t('select_exercise', lang)}</option>
{exercises.map(ex => (
<option key={ex.id} value={ex.id} className="bg-surface-container text-on-surface">{ex.name}</option>
))}
{exercises
.slice()
.sort((a, b) => a.name.localeCompare(b.name))
.map(ex => (
<option key={ex.id} value={ex.id} className="bg-surface-container text-on-surface">{ex.name}</option>
))}
</select>
<ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" size={24} />
@@ -497,6 +533,61 @@ const Tracker: React.FC<TrackerProps> = ({ userId, userWeight, activeSession, ac
lang={lang}
/>
)}
{/* Finish Confirmation Dialog */}
{showFinishConfirm && (
<div className="absolute inset-0 bg-black/60 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
<div className="w-full max-w-sm bg-surface-container rounded-[28px] p-6 shadow-elevation-3">
<h3 className="text-2xl font-normal text-on-surface mb-2">{t('finish_confirm_title', lang)}</h3>
<p className="text-on-surface-variant text-sm mb-8">{t('finish_confirm_msg', lang)}</p>
<div className="flex justify-end gap-2">
<button
onClick={() => setShowFinishConfirm(false)}
className="px-6 py-2.5 rounded-full text-primary font-medium hover:bg-white/5"
>
{t('cancel', lang)}
</button>
<button
onClick={() => {
setShowFinishConfirm(false);
onSessionEnd();
}}
className="px-6 py-2.5 rounded-full bg-primary text-on-primary font-medium"
>
{t('confirm', lang)}
</button>
</div>
</div>
</div>
)}
{/* Quit Without Saving Confirmation Dialog */}
{showQuitConfirm && (
<div className="absolute inset-0 bg-black/60 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
<div className="w-full max-w-sm bg-surface-container rounded-[28px] p-6 shadow-elevation-3">
<h3 className="text-2xl font-normal text-error mb-2">{t('quit_confirm_title', lang)}</h3>
<p className="text-on-surface-variant text-sm mb-8">{t('quit_confirm_msg', lang)}</p>
<div className="flex justify-end gap-2">
<button
onClick={() => setShowQuitConfirm(false)}
className="px-6 py-2.5 rounded-full text-primary font-medium hover:bg-white/5"
>
{t('cancel', lang)}
</button>
<button
onClick={() => {
setShowQuitConfirm(false);
// Quit without saving - just navigate away or reset
window.location.reload();
}}
className="px-6 py-2.5 rounded-full bg-error text-on-error font-medium"
>
{t('confirm', lang)}
</button>
</div>
</div>
</div>
)}
</div>
);
};