feat(fitness): label finish button "FINISH EARLY" with unfinished sets
CI / update (push) Has been cancelled

Switches the active-workout finish button to "FINISH EARLY" /
"VORZEITIG BEENDEN" with an orange tint when any set in the workout is
still incomplete, so users can tell at a glance whether they're
wrapping up cleanly or cutting it short.
This commit is contained in:
2026-05-10 14:56:12 +02:00
parent e87b8bd864
commit 5fd8027d3e
4 changed files with 14 additions and 2 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.69.4",
"version": "1.69.5",
"private": true,
"type": "module",
"scripts": {
+1
View File
@@ -98,6 +98,7 @@ export const de = {
workout_name_placeholder: "Trainingsname",
cancel_workout: "TRAINING ABBRECHEN",
finish: "BEENDEN",
finish_early: "VORZEITIG BEENDEN",
new_set_added: "neuer Satz",
new_sets_added: "neue Sätze",
exercises_title: "Übungen",
+1
View File
@@ -98,6 +98,7 @@ export const en = {
workout_name_placeholder: "Workout name",
cancel_workout: "CANCEL WORKOUT",
finish: "FINISH",
finish_early: "FINISH EARLY",
new_set_added: "new set",
new_sets_added: "new sets",
exercises_title: "Exercises",
@@ -97,6 +97,7 @@
const workoutSetsTotal = $derived(
workout.exercises.reduce((/** @type {number} */ n, /** @type {any} */ ex) => n + ex.sets.length, 0)
);
const hasUnfinishedSets = $derived(workoutSetsTotal > 0 && workoutSetsDone < workoutSetsTotal);
/** @param {number} idx */
function setFocus(idx) { focusedIdx = idx; }
@@ -1770,7 +1771,9 @@
<button class="cancel-btn" onclick={async () => { if (gps.isTracking) await gps.stop(); gps.reset(); workout.cancel(); await sync.onWorkoutEnd(); await goto(`/fitness/${sl.workout}`); }}>
{t.cancel_workout}
</button>
<button class="finish-btn" onclick={finishWorkout}>{t.finish}</button>
<button class="finish-btn" class:premature={hasUnfinishedSets} onclick={finishWorkout}>
{hasUnfinishedSets ? t.finish_early : t.finish}
</button>
</div>
</main>
</div>
@@ -2132,6 +2135,13 @@
.finish-btn:active {
transform: scale(0.98);
}
.finish-btn.premature {
background: var(--orange);
color: var(--nord0);
}
.finish-btn.premature:hover {
background: color-mix(in srgb, var(--orange) 85%, var(--nord0));
}
/* GPS section */
.gps-section {