Implement data/season substitutions page

src/lib/components/DriverCard.svelte

@@ -17,11 +17,15 @@
     /** Require all inputs if [true] */
     require_inputs?: boolean;
 
-    /** The [src] of the team logo template preview */
-    logo_template?: string;
+    /** The [src] of the driver headshot template preview */
+    headshot_template?: string;
 
-    team_select_values: { [key: string]: string };
+    // TODO: Move into this component?
 
+    /** The value this component's team select dropdown will bind to */
+    team_select_value: string;
+
+    /** The options this component's team select dropdown will display */
     team_select_options: DropdownOption[];
   }
 
@@ -29,14 +33,14 @@
     driver = undefined,
     disable_inputs = false,
     require_inputs = false,
-    logo_template = "",
-    team_select_values,
+    headshot_template = "",
+    team_select_value,
     team_select_options,
   }: DriverCardProps = $props();
 </script>
 
 <Card
-  imgsrc={driver?.headshot_url ?? logo_template}
+  imgsrc={driver?.headshot_url ?? headshot_template}
   imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
 >
   <form method="POST" enctype="multipart/form-data">
@@ -78,7 +82,7 @@
       <!-- Driver team input -->
       <Dropdown
         name="team"
-        input_variable={team_select_values[driver?.id ?? "create"]}
+        input_variable={team_select_value}
         options={team_select_options}
         labelwidth="120px"
         disabled={disable_inputs}

src/lib/components/Dropdown.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
   import type { Snippet } from "svelte";
+  import type { Action } from "svelte/action";
   import type { HTMLInputAttributes } from "svelte/elements";
   import { v4 as uuid } from "uuid";
-  import UserIcon from "./svg/UserIcon.svelte";
 
   export interface DropdownOption {
     label: string;
@@ -25,6 +25,9 @@
     /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
     input_variable: string;
 
+    /** Any action to bind to the input element */
+    action?: Action;
+
     /** The ID of the popup to trigger. UUID by default. */
     popup_id?: string;
 
@@ -43,6 +46,7 @@
     name = "",
     labelwidth = "auto",
     input_variable,
+    action = undefined,
     popup_id = uuid(),
     popup_settings = {
       event: "click",
@@ -54,9 +58,26 @@
     ...restProps
   }: SearchProps = $props();
 
+  /** Find the "label" of an option by its "value" */
   const get_label = (value: string): string | undefined => {
     return options.find((o) => o.value === value)?.label;
   };
+
+  // Use an action to fill the "input" variable
+  // required to dispatch the custom event using $effect
+  let input: HTMLInputElement | undefined = undefined;
+  const obtain_input: Action = (node: HTMLElement) => {
+    input = node as HTMLInputElement;
+  };
+
+  // This will run everyting "input_variable" changes.
+  // The event is fired when the input's value is updated via JavaScript.
+  $effect(() => {
+    // Just list this so SvelteKit picks it up as dependency
+    input_variable;
+
+    if (input) input.dispatchEvent(new Event("DropdownChange"));
+  });
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -66,13 +87,26 @@
   >
     {@render children()}
   </div>
+  {#if action}
     <input
       use:popup={popup_settings}
       type="text"
+      use:obtain_input
+      use:action
       onkeypress={(event: Event) => event.preventDefault()}
       value={get_label(input_variable) ?? placeholder}
       {...restProps}
     />
+  {:else}
+    <input
+      use:popup={popup_settings}
+      type="text"
+      use:obtain_input
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {/if}
 </div>
 
 <div data-popup={popup_id} class="card z-10 w-auto p-2 shadow">

src/lib/components/RaceCard.svelte

@@ -41,13 +41,13 @@
     ? format(new Date(race.racedate), dateformat)
     : undefined;
 
-  const clear_sprint = (event: Event) => {
+  const clear_sprint = () => {
     const sprintquali: HTMLInputElement = document.getElementById(
       `race_sprintqualidate_${race?.id ?? "create"}`,
-    );
+    ) as HTMLInputElement;
     const sprint: HTMLInputElement = document.getElementById(
       `race_sprintdate_${race?.id ?? "create"}`,
-    );
+    ) as HTMLInputElement;
 
     sprintquali.value = "";
     sprint.value = "";

src/lib/components/SubstitutionCard.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import Card from "./Card.svelte";
+  import Button from "./Button.svelte";
+  import type { Driver, Substitution } from "$lib/schema";
+  import { get_by_value } from "$lib/database";
+  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import type { Action } from "svelte/action";
+
+  interface SubstitutionCardProps {
+    /** The [Substitution] object used to prefill values. */
+    substitution?: Substitution | undefined;
+
+    /** The drivers (to display the headshot) */
+    drivers: Driver[];
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the driver headshot template preview */
+    headshot_template?: string;
+
+    /** The value this component's substitute select dropdown will bind to */
+    substitute_select_value: string;
+
+    /** The value this component's driver select dropdown will bind to */
+    driver_select_value: string;
+
+    /** The value this component's race select dropdown will bind to */
+    race_select_value: string;
+
+    /** The options this component's substitute/driver select dropdowns will display */
+    driver_select_options: DropdownOption[];
+
+    /** The options this component's race select dropdown will display */
+    race_select_options: DropdownOption[];
+  }
+
+  let {
+    substitution = undefined,
+    drivers,
+    disable_inputs = false,
+    require_inputs = false,
+    headshot_template = "",
+    substitute_select_value,
+    driver_select_value,
+    race_select_value,
+    driver_select_options,
+    race_select_options,
+  }: SubstitutionCardProps = $props();
+
+  // This action is used on the <Dropdown> element.
+  // It will trigger once the Dropdown's <input> elements is mounted.
+  // This way we'll receive a reference to the object so we can register our event handler.
+  const register_substitute_preview_handler: Action = (node: HTMLElement) => {
+    node.addEventListener("DropdownChange", update_substitute_preview);
+  };
+
+  // This event handler is registered to the Dropdown's <input> element through the action above.
+  const update_substitute_preview = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+
+    // The option "label" gets put into the Dropdown's input value,
+    // so we need to lookup the driver by "code".
+    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+    if (src) {
+      const preview: HTMLImageElement = document.getElementById(
+        `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
+      ) as HTMLImageElement;
+
+      preview.src = src;
+    }
+  };
+</script>
+
+<Card
+  imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+    headshot_template}
+  imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if substitution && !disable_inputs}
+      <input name="id" type="hidden" value={substitution.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Substitute select -->
+      <Dropdown
+        name="substitute"
+        input_variable={substitute_select_value}
+        action={register_substitute_preview_handler}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}>Substitute</Dropdown
+      >
+
+      <!-- Driver select -->
+      <Dropdown
+        name="for"
+        input_variable={driver_select_value}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}>Driver</Dropdown
+      >
+
+      <!-- Race select -->
+      <Dropdown
+        name="race"
+        input_variable={race_select_value}
+        options={race_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}>Race</Dropdown
+      >
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if substitution}
+          <Button
+            formaction="?/update_substitution"
+            color="secondary"
+            disabled={disable_inputs}
+            submit>Save Changes</Button
+          >
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_substitution">Delete</Button
+          >
+        {:else}
+          <Button formaction="?/create_substitution" color="tertiary" submit
+            >Create Substitution</Button
+          >
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/schema.ts

@@ -45,7 +45,7 @@ export interface Race {
 
 export interface Substitution {
   id: string;
-  driver: string;
   substitute: string;
+  for: string;
   race: string;
 }

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 { get_image_preview_event_handler } from "$lib/image";
-  import type { Driver, Team } from "$lib/schema";
+  import type { Driver, Race, Substitution, 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_options={driver_team_select_options}
+            team_select_value={update_driver_team_select_values[driver.id]}
+            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}
-            team_select_values={update_driver_team_select_values}
-            team_select_options={driver_team_select_options}
+            headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
+            team_select_value={update_driver_team_select_values["create"]}
+            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>