bind exercises, added straight set UI

WhyAsh5114 · Jul 3, 2024 · d771134 · d771134
1 parent 1b6e9ad
commit d771134
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte b/src/routes/workouts/manage/exercises/(components)/DndComponent.svelte
@@ -35,7 +35,7 @@
 >
 	{#each itemList as exercise, idx (exercise.name)}
 		<div class="relative" animate:flip={{ duration: 200 }}>
-			<WorkoutExerciseCard {idx} {reordering} {exercise} {readOnly} />
+			<WorkoutExerciseCard {idx} {reordering} {readOnly} bind:exercise={itemList[idx]} />
 			{#if exercise[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
 				<div in:fade={{ duration: 200 }} class="custom-shadow-item"></div>
 			{/if}

diff --git a/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte b/src/routes/workouts/manage/exercises/(components)/WorkoutExerciseCard.svelte
@@ -9,15 +9,19 @@
 	import EditIcon from 'virtual:icons/lucide/pencil';
 	import DeleteIcon from 'virtual:icons/lucide/trash';
 	import { workoutRunes } from '../../workoutRunes.svelte';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import { Input } from '$lib/components/ui/input';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import CheckIcon from 'virtual:icons/lucide/check';
 
-	type exerciseCardProps = {
+	type PropsType = {
 		readOnly?: boolean;
 		idx: number;
 		reordering?: boolean;
 		exercise: WorkoutExerciseInProgress;
 	};
 
-	let { readOnly, idx, reordering, exercise }: exerciseCardProps = $props();
+	let { readOnly, idx, reordering, exercise = $bindable() }: PropsType = $props();
 	let isContextMenuOpen = $state(false);
 </script>
 
@@ -60,7 +64,8 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-0.5">
-		<span class="mr-auto text-sm text-muted-foreground">
+		<span class="mr-auto text-sm lowercase text-muted-foreground">
+			{exercise.sets.length}
 			{exercise.setType} sets of
 			{exercise.repRangeStart} to {exercise.repRangeEnd} reps
 		</span>
@@ -78,4 +83,55 @@
 			{exercise.note}
 		</div>
 	{/if}
+	<Separator class="my-1" />
+	{#if exercise.setType === 'Straight'}
+		<div class="grid grid-cols-4 gap-1">
+			<span class="text-center text-sm font-medium">Reps</span>
+			<span class="text-center text-sm font-medium">Load</span>
+			<span class="text-center text-sm font-medium">RIR</span>
+			<span></span>
+			{#each exercise.sets as set}
+				<Input
+					type="number"
+					min={0}
+					id="{exercise.name}-set-{set.setIndex}-reps"
+					disabled={set.completed}
+					bind:value={set.reps}
+				/>
+				{#if set.setIndex === 0}
+					<Input
+						type="number"
+						min={0}
+						id="{exercise.name}-set-{set.setIndex}-load"
+						disabled={set.completed}
+						bind:value={set.load}
+					/>
+				{:else}
+					<span></span>
+				{/if}
+				<Input
+					type="number"
+					min={0}
+					id="{exercise.name}-set-{set.setIndex}-RIR"
+					disabled={set.completed}
+					bind:value={set.RIR}
+				/>
+				<Button
+					size="icon"
+					class="place-self-end"
+					onclick={() => {
+						set.completed = !set.completed;
+						workoutRunes.workoutExercises = workoutRunes.workoutExercises;
+					}}
+					variant={set.completed ? 'outline' : 'default'}
+				>
+					{#if !set.completed}
+						<CheckIcon />
+					{:else}
+						<EditIcon />
+					{/if}
+				</Button>
+			{/each}
+		</div>
+	{/if}
 </div>