Skip to content

Commit 42b4149

Browse files
deansallinendeansallinen
committed
Add progress bars
1 parent cc71e4e commit 42b4149

6 files changed

Lines changed: 80 additions & 38 deletions

File tree

‎src/lib/components/ExerciseProgress.svelte‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script lang="ts">
2+
import type { UserExercise } from "$lib/db";
3+
4+
const props: {
5+
exercise: UserExercise;
6+
} = $props();
7+
</script>
8+
9+
<progress value={props.exercise.workingWeight} max={props.exercise.goalWeight}>
10+
</progress>

‎src/lib/state/exercise.svelte.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { db } from "$lib/db"
2+
import { liveQuery } from "dexie";
3+
4+
export const exercises = liveQuery(() => db.exercises.toArray());
5+
6+
export const getExerciseById = async (id: number) => await db.exercises.get(id)

‎src/lib/state/settings.svelte.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { liveQuery } from "dexie";
33

44
export const settings = liveQuery(() => db.settings.get(1));
55

6-
export const exercises = liveQuery(() => db.exercises.toArray());
7-
86
export const handleExerciseNumberChange = (id: number, key: 'workingWeight' | 'goalWeight' | 'incrementWeight') => (e: Event) => {
97
const target = e.target as HTMLInputElement;
108
const value = parseFloat(target.value);

‎src/routes/+page.svelte‎

Lines changed: 57 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
import { db } from "$lib/db";
44
import { getActiveProgram } from "$lib/state/program.svelte";
55
import { getWorkoutSnapshot } from "$lib/state/workout.svelte";
6+
import { exercises } from "$lib/state/exercise.svelte";
7+
import ExerciseProgress from "$lib/components/ExerciseProgress.svelte";
68
79
const program = await getActiveProgram();
810
const activeWorkout = await getWorkoutSnapshot();
@@ -11,45 +13,66 @@
1113
<main class="container">
1214
<h1>Dashboard</h1>
1315

14-
<div class="flex justify-between items-baseline">
15-
<h2>My Programs</h2>
16-
<a href={resolve("/programs")}>All programs</a>
17-
</div>
18-
{#if program}
19-
<article>
20-
<header>
21-
<h3>{program.name}</h3>
22-
</header>
16+
<section>
17+
<div class="flex justify-between items-baseline">
18+
<h2>My Programs</h2>
19+
<a href={resolve("/programs")}>All programs</a>
20+
</div>
2321

24-
{#if activeWorkout}
25-
<p>Continue {activeWorkout.name}</p>
26-
<footer>
27-
<a href={resolve("/workout")} role="button">Continue</a>
28-
</footer>
29-
{:else}
30-
{@const workout = program.workouts[program.nextWorkoutIndex]}
31-
<p>Next workout: {workout.name}</p>
22+
{#if program}
23+
<article>
24+
<header>
25+
<h3>{program.name}</h3>
26+
</header>
3227

33-
<ul class="ml-4">
34-
{#each workout.exercises as { exerciseId }}
35-
{@const exercise = await db.exercises.get(exerciseId)}
36-
<li>{exercise?.name} @ {exercise?.workingWeight}</li>
37-
{/each}
38-
</ul>
28+
{#if activeWorkout}
29+
<p>Continue {activeWorkout.name}</p>
30+
<footer>
31+
<a href={resolve("/workout")} role="button">Continue</a>
32+
</footer>
33+
{:else}
34+
{@const workout = program.workouts[program.nextWorkoutIndex]}
35+
<p>Next workout: {workout.name}</p>
3936

37+
<ul class="ml-4">
38+
{#each workout.exercises as { exerciseId }}
39+
{@const exercise = await db.exercises.get(exerciseId)}
40+
<li>{exercise?.name} @ {exercise?.workingWeight}</li>
41+
{/each}
42+
</ul>
43+
44+
<footer>
45+
<a href={resolve("/workout")} role="button">Start workout</a>
46+
</footer>
47+
{/if}
48+
</article>
49+
{:else}
50+
<article>
51+
<header>
52+
<h2>Welcome to ProgressBar!</h2>
53+
</header>
4054
<footer>
41-
<a href={resolve("/workout")} role="button">Start workout</a>
55+
<a href={resolve("/programs")} role="button">Browse Programs</a>
4256
</footer>
43-
{/if}
44-
</article>
45-
{:else}
57+
</article>
58+
{/if}
59+
</section>
60+
61+
<section>
62+
<h2>Progress</h2>
4663
<article>
47-
<header>
48-
<h2>Welcome to ProgressBar!</h2>
49-
</header>
50-
<footer>
51-
<a href={resolve("/programs")} role="button">Browse Programs</a>
52-
</footer>
64+
<ul>
65+
{#each $exercises as exercise}
66+
<li style="list-style-type:none;">
67+
<h3>
68+
{exercise.name}
69+
</h3>
70+
<ExerciseProgress {exercise} />
71+
<!-- <progress value={exercise.workingWeight} max={exercise.goalWeight}> -->
72+
<!-- </progress> -->
73+
</li>
74+
{/each}
75+
</ul>
5376
</article>
54-
{/if}
77+
</section>
5578
</main>

‎src/routes/settings/+page.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<script lang="ts">
2+
import { exercises } from "$lib/state/exercise.svelte";
23
import {
34
settings,
4-
exercises,
55
handleNameChange,
66
handleUnitChange,
77
handleUserWeightChange,
88
handleBarWeightChange,
99
handlePlatesChange,
1010
handleExerciseNumberChange,
1111
} from "$lib/state/settings.svelte";
12-
import type { UserExercise } from "$lib/db";
1312
</script>
1413

1514
<main class="container">

‎src/routes/workout/+page.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
createActiveWorkout,
1212
} from "$lib/state/workout.svelte";
1313
import { onMount } from "svelte";
14+
import ExerciseProgress from "$lib/components/ExerciseProgress.svelte";
15+
import { getExerciseById } from "$lib/state/exercise.svelte";
1416
1517
const workout = $derived($activeWorkoutStore);
1618
@@ -29,6 +31,10 @@
2931
<h2>{exercise.name}</h2>
3032
<TargetWeight {exercise} />
3133
</div>
34+
{@const userExercise = await getExerciseById(exercise.exerciseId)}
35+
{#if userExercise}
36+
<ExerciseProgress exercise={userExercise} />
37+
{/if}
3238
<table>
3339
<thead>
3440
<tr class="">

0 commit comments

Comments
 (0)