Data/Season: Implement substitutions page

src/routes/data/season/+page.server.ts

@@ -15,7 +15,7 @@ export const actions = {
     const data: FormData = form_data_clean(await request.formData());
     form_data_ensure_keys(data, ["name", "logo"]);
 
-    const record: Team = await locals.pb.collection("teams").create(data);
+    await locals.pb.collection("teams").create(data);
 
     return { tab: 0 };
   },
@@ -26,7 +26,7 @@ export const actions = {
     const data: FormData = form_data_clean(await request.formData());
     const id: string = form_data_get_and_remove_id(data);
 
-    const record: Team = await locals.pb.collection("teams").update(id, data);
+    await locals.pb.collection("teams").update(id, data);
 
     return { tab: 0 };
   },
@@ -48,7 +48,7 @@ export const actions = {
     const data: FormData = form_data_clean(await request.formData());
     form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot", "active"]);
 
-    const record: Driver = await locals.pb.collection("drivers").create(data);
+    await locals.pb.collection("drivers").create(data);
 
     return { tab: 1 };
   },
@@ -59,7 +59,7 @@ export const actions = {
     const data: FormData = form_data_clean(await request.formData());
     const id: string = form_data_get_and_remove_id(data);
 
-    const record: Driver = await locals.pb.collection("drivers").update(id, data);
+    await locals.pb.collection("drivers").update(id, data);
 
     return { tab: 1 };
   },
@@ -82,7 +82,7 @@ export const actions = {
     form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
     form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
 
-    const record: Race = await locals.pb.collection("races").create(data);
+    await locals.pb.collection("races").create(data);
 
     return { tab: 2 };
   },
@@ -98,7 +98,7 @@ export const actions = {
     form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
     const id: string = form_data_get_and_remove_id(data);
 
-    const record: Race = await locals.pb.collection("races").update(id, data);
+    await locals.pb.collection("races").update(id, data);
 
     return { tab: 2 };
   },
@@ -117,19 +117,34 @@ export const actions = {
   create_substitution: async ({ request, locals }) => {
     if (!locals.admin) return { unauthorized: true };
 
-    return { tab: 2 };
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["substitute", "for", "race"]);
+
+    await locals.pb.collection("substitutions").create(data);
+
+    return { tab: 3 };
   },
 
   update_substitution: async ({ request, locals }) => {
     if (!locals.admin) return { unauthorized: true };
 
-    return { tab: 2 };
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").update(id, data);
+
+    return { tab: 3 };
   },
 
   delete_substitution: async ({ request, locals }) => {
     if (!locals.admin) return { unauthorized: true };
 
-    return { tab: 2 };
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").delete(id);
+
+    return { tab: 3 };
   },
 } satisfies Actions;
 

src/routes/data/season/+page.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { Input, Button, Card, Search, Dropdown } from "$lib/components";
+  import type { Driver, Race, Substitution, Team } from "$lib/schema";
-  import { get_image_preview_event_handler } from "$lib/image";
-  import type { Driver, Team } from "$lib/schema";
   import { type PageData, type ActionData } from "./$types";
-  import { FileDropzone, Tab, TabGroup, type AutocompleteOption } from "@skeletonlabs/skeleton";
+  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
 
   // TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
   import type { DropdownOption } from "$lib/components/Dropdown.svelte";
@@ -11,6 +9,7 @@
   import TeamCard from "$lib/components/TeamCard.svelte";
   import DriverCard from "$lib/components/DriverCard.svelte";
   import RaceCard from "$lib/components/RaceCard.svelte";
+  import SubstitutionCard from "$lib/components/SubstitutionCard.svelte";
 
   let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -27,9 +26,32 @@
   });
   update_driver_team_select_values["create"] = "";
 
-  const driver_team_select_options: DropdownOption[] = data.teams.map((team: Team) => {
+  let update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  let update_substitution_for_select_values: { [key: string]: string } = $state({});
+  let update_substitution_race_select_values: { [key: string]: string } = $state({});
+  data.substitutions.forEach((substitution: Substitution) => {
+    update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
+    update_substitution_for_select_values[substitution.id] = substitution.for;
+    update_substitution_race_select_values[substitution.id] = substitution.race;
+  });
+  update_substitution_substitute_select_values["create"] = "";
+  update_substitution_for_select_values["create"] = "";
+  update_substitution_race_select_values["create"] = "";
+
+  // All options to create a <Dropdown> component for the teams
+  const team_dropdown_options: DropdownOption[] = data.teams.map((team: Team) => {
     return { label: team.name, value: team.id } as DropdownOption;
   });
+
+  // All options to create a <Dropdown> component for the drivers
+  const driver_dropdown_options: DropdownOption[] = data.drivers.map((driver: Driver) => {
+    return { label: driver.code, value: driver.id } as DropdownOption;
+  });
+
+  // All options to create a <Dropdown> component for the races
+  const race_dropdown_options: DropdownOption[] = data.races.map((race: Race) => {
+    return { label: race.name, value: race.id } as DropdownOption;
+  });
 </script>
 
 <svelte:head>
@@ -81,17 +103,17 @@
           <DriverCard
             {driver}
             disable_inputs={!data.admin}
-            team_select_values={update_driver_team_select_values}
+            team_select_value={update_driver_team_select_values[driver.id]}
-            team_select_options={driver_team_select_options}
+            team_select_options={team_dropdown_options}
           />
         {/each}
 
         <!-- Add a new driver -->
         {#if data.admin}
           <DriverCard
-            logo_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
+            headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
-            team_select_values={update_driver_team_select_values}
+            team_select_value={update_driver_team_select_values["create"]}
-            team_select_options={driver_team_select_options}
+            team_select_options={team_dropdown_options}
             require_inputs
           />
         {/if}
@@ -116,7 +138,33 @@
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
-      <span>Substitutions</span>
+      <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+        {#each data.substitutions as substitution}
+          <SubstitutionCard
+            {substitution}
+            drivers={data.drivers}
+            substitute_select_value={update_substitution_substitute_select_values[substitution.id]}
+            driver_select_value={update_substitution_for_select_values[substitution.id]}
+            race_select_value={update_substitution_race_select_values[substitution.id]}
+            driver_select_options={driver_dropdown_options}
+            race_select_options={race_dropdown_options}
+            disable_inputs={!data.admin}
+          />
+        {/each}
+
+        {#if data.admin}
+          <SubstitutionCard
+            drivers={data.drivers}
+            substitute_select_value={update_substitution_substitute_select_values["create"]}
+            driver_select_value={update_substitution_for_select_values["create"]}
+            race_select_value={update_substitution_race_select_values["create"]}
+            driver_select_options={driver_dropdown_options}
+            race_select_options={race_dropdown_options}
+            headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
+            require_inputs
+          />
+        {/if}
+      </div>
     {/if}
   </svelte:fragment>
 </TabGroup>