created separate stats and exercises components

src/routes/exerciseSplits/view/[id]/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import ViewSplitExercises from "./ViewSplitExercises.svelte";
+  import ViewSplitStats from "./ViewSplitStats.svelte";
+
+  export let data;
+  $: ({ exerciseSplit } = data);
+
+  let currentSection: "Stats" | "Exercises" = "Stats";
+</script>
+
+<h2>View split</h2>
+
+<div class="join w-full grid grid-cols-2 mb-2">
+  <input
+    name="view"
+    class="join-item btn btn-primary checked:!bg-accent checked:!text-black"
+    aria-label="Stats"
+    checked
+    type="radio"
+    value="Stats"
+    bind:group={currentSection}
+  />
+  <input
+    name="view"
+    class="join-item btn btn-primary checked:!bg-accent checked:!text-black"
+    aria-label="Exercises"
+    type="radio"
+    value="Exercises"
+    bind:group={currentSection}
+  />
+</div>
+
+{#if currentSection === "Stats"}
+  <ViewSplitStats {exerciseSplit} />
+{:else}
+  <ViewSplitExercises {exerciseSplit} />
+{/if}
+
+<div class="join grid grid-cols-2 mt-auto">
+  <button class="join-item btn btn-error">Delete</button>
+  <button class="join-item btn btn-primary">Edit</button>
+</div>

src/routes/exerciseSplits/view/[id]/ViewSplitExercises.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ExerciseSplitTable from "../../ExerciseSplitTable.svelte";
+  import SplitDaySelector from "../../SplitDaySelector.svelte";
+
+  export let exerciseSplit: ExerciseSplit;
+  let selectedSplitDayIndex: number;
+  $: selectedSplitDayExercises = exerciseSplit.splitDays[selectedSplitDayIndex]?.exerciseTemplates;
+</script>
+
+<div class="flex flex-col h-px grow overflow-y-auto shadow-xl shadow-black -mt-2">
+  <SplitDaySelector exerciseSplitDays={exerciseSplit.splitDays} bind:selectedSplitDayIndex />
+  {#if selectedSplitDayExercises}
+    <ExerciseSplitTable exerciseTemplates={selectedSplitDayExercises} readOnly />
+  {/if}
+</div>

src/routes/exerciseSplits/view/[id]/ViewSplitStats.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { muscleGroups } from "$lib/types/arrays";
+  import { getAverageSetsPerDayOfSplit, getTotalSetsOfSplit } from "$lib/utils/exerciseSplits.js";
+  export let exerciseSplit: ExerciseSplit;
+
+  type MuscleGroupStat = {
+    muscleGroup: MuscleGroup;
+    sets: number;
+    frequency: number;
+    exerciseVariations: number;
+  };
+
+  let currentStat: "sets" | "frequency" | "exerciseVariations" = "sets";
+
+  let muscleGroupStats: MuscleGroupStat[] = [];
+  muscleGroups.forEach((muscleGroup) => {
+    const stat: MuscleGroupStat = {
+      muscleGroup,
+      sets: 0,
+      frequency: 0,
+      exerciseVariations: 0
+    };
+
+    const allExercisesForMuscleGroup: Set<string> = new Set();
+    for (const splitDay of exerciseSplit.splitDays) {
+      if (!splitDay) continue;
+      let muscleGroupTargetedThisDay = false;
+
+      for (const exercise of splitDay.exerciseTemplates) {
+        if (exercise.targetMuscleGroup === muscleGroup) {
+          stat.sets += exercise.sets;
+          allExercisesForMuscleGroup.add(exercise.name);
+          muscleGroupTargetedThisDay = true;
+        }
+      }
+      if (muscleGroupTargetedThisDay) stat.frequency++;
+    }
+    stat.exerciseVariations = allExercisesForMuscleGroup.size;
+    muscleGroupStats.push(stat);
+  });
+  muscleGroupStats = muscleGroupStats;
+
+  const maxSets = Math.max(...muscleGroupStats.map((stat) => stat.sets));
+  const maxFrequency = Math.max(...muscleGroupStats.map((stat) => stat.frequency));
+  const maxExerciseVariations = Math.max(
+    ...muscleGroupStats.map((stat) => stat.exerciseVariations)
+  );
+  const maximums = {
+    sets: maxSets,
+    frequency: maxFrequency,
+    exerciseVariations: maxExerciseVariations
+  };
+</script>
+
+<div class="stats stats-vertical grid-cols-2 h-fit overflow-y-auto mb-2">
+  <div class="stat col-span-2">
+    <div class="stat-title">Split name</div>
+    <div class="stat-value">{exerciseSplit.name}</div>
+  </div>
+  <div class="stat">
+    <div class="stat-title">Sets per cycle</div>
+    <div class="stat-value">{getTotalSetsOfSplit(exerciseSplit.splitDays)}</div>
+  </div>
+  <div class="stat">
+    <div class="stat-title">Avg. sets per day</div>
+    <div class="stat-value">
+      {getAverageSetsPerDayOfSplit(exerciseSplit.splitDays).toFixed(2)}
+    </div>
+  </div>
+  <div class="stat col-span-2">
+    <div class="stat-title">Split metrics</div>
+    <div class="join w-full grid grid-cols-3 gap-x-0.5 my-2">
+      <input
+        name="stat"
+        class="join-item btn btn-sm checked:!bg-accent checked:!text-black"
+        aria-label="Sets"
+        checked
+        type="radio"
+        value="sets"
+        bind:group={currentStat}
+      />
+      <input
+        name="stat"
+        class="join-item btn btn-sm checked:!bg-accent checked:!text-black"
+        aria-label="Frequency"
+        type="radio"
+        value="frequency"
+        bind:group={currentStat}
+      />
+      <input
+        name="stat"
+        class="join-item btn btn-sm checked:!bg-accent checked:!text-black"
+        aria-label="Exercise variations"
+        type="radio"
+        value="exerciseVariations"
+        bind:group={currentStat}
+      />
+    </div>
+    <div class="flex flex-col gap-1.5 mt-2">
+      {#each muscleGroupStats.sort((a, b) => b[currentStat] - a[currentStat]) as stat}
+        <div class="flex flex-col gap-0.5">
+          <div class="flex justify-between text-xs">
+            <span>{stat.muscleGroup}</span>
+            <span class="font-semibold">{stat[currentStat]}</span>
+          </div>
+          <progress class="progress" max={maximums[currentStat]} value={stat[currentStat]}
+          ></progress>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>