Lib: Simplify SubstitutionCard

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,191 +1,157 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
   import type { Driver, Race, Substitution } from "$lib/schema";
-  import { get_by_value } from "$lib/database";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import type { Action } from "svelte/action";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
   import { driver_dropdown_options, race_dropdown_options } from "$lib/dropdown";
   import { enhance } from "$app/forms";
+  import { sub } from "date-fns";
 
   interface SubstitutionCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Substitution] object used to prefill values. */
-    substitution?: Substitution | undefined;
+    substitution?: Substitution;
-
-    /** The drivers (to display the headshot) */
-    drivers: Driver[];
-
-    races: Race[];
-
-    /** 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;
   }
 
-  let {
+  let { data, substitution = undefined }: SubstitutionCardProps = $props();
-    substitution = undefined,
-    drivers,
-    races,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = "",
-    substitute_select_value,
-    driver_select_value,
-    race_select_value,
-  }: SubstitutionCardProps = $props();
-
-  const active_drivers = (drivers: Driver[]): Driver[] =>
-    drivers.filter((driver: Driver) => driver.active);
-
-  const inactive_drivers = (drivers: Driver[]): Driver[] =>
-    drivers.filter((driver: Driver) => !driver.active);
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     substitution = meta.substitution;
-    drivers = meta.drivers;
-    races = meta.races;
-    disable_inputs = meta.disable_inputs;
-    substitute_select_value = meta.substitute_select_value;
-    driver_select_value = meta.driver_select_value;
-    race_select_value = meta.race_select_value;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
 
-  // This action is used on the <Dropdown> element.
+  // This is executed on mount of the element specifying the "action"
-  // It will trigger once the Dropdown's <input> elements is mounted.
+  const register_substitute_preview_handler: Action = (node: HTMLElement) =>
-  // 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 update_substitute_preview = async (event: Event) => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
 
-    // The option "label" gets put into the Dropdown's input value,
+    const src: string =
-    // so we need to lookup the driver by "code".
+      get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url ?? "";
-    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+    (document.getElementById("headshot_preview") as HTMLImageElement).src = src;
-    if (src) {
-      const preview: HTMLImageElement = document.getElementById(
-        `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
-      ) as HTMLImageElement;
-
-      if (preview) preview.src = src;
-    }
   };
+
+  const active_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => driver.active);
+  const inactive_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => !driver.active);
+
+  const required: boolean = $derived(!substitution);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "120px";
+
+  let substitute_select_value: string = $state(substitution?.substitute ?? "");
+  let driver_select_value: string = $state(substitution?.for ?? "");
+  let race_select_value: string = $state(substitution?.race ?? "");
 </script>
 
-<Card
+{#await data.graphics then graphics}
-  imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+  {#await data.drivers then drivers}
-    headshot_template}
+    <Card
-  imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+      imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
-  width="w-full sm:w-auto"
+        get_driver_headshot_template(graphics)}
-  imgwidth={DRIVER_HEADSHOT_WIDTH}
+      imgid="headshot_preview"
-  imgheight={DRIVER_HEADSHOT_HEIGHT}
+      width="w-full sm:w-auto"
-  imgonclick={(event: Event) => modalStore.close()}
+      imgwidth={DRIVER_HEADSHOT_WIDTH}
->
+      imgheight={DRIVER_HEADSHOT_HEIGHT}
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+      imgonclick={(event: Event) => modalStore.close()}
-    <!-- This is also disabled, because the ID should only be -->
+    >
-    <!-- "leaked" to users that are allowed to use the inputs -->
+      <form
-    {#if substitution && !disable_inputs}
+        method="POST"
-      <input name="id" type="hidden" value={substitution.id} />
+        enctype="multipart/form-data"
-    {/if}
+        use:enhance
-
+        onsubmit={() => modalStore.close()}
-    <div class="flex flex-col gap-2">
-      <!-- Substitute select -->
-      <Dropdown
-        name="substitute"
-        input_variable={substitute_select_value}
-        action={register_substitute_preview_handler}
-        options={driver_dropdown_options(inactive_drivers(drivers))}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
       >
-        Substitute
+        <!-- This is also disabled, because the ID should only be -->
-      </Dropdown>
+        <!-- "leaked" to users that are allowed to use the inputs -->
-
+        {#if substitution && !disabled}
-      <!-- Driver select -->
+          <input name="id" type="hidden" value={substitution.id} />
-      <Dropdown
-        name="for"
-        input_variable={driver_select_value}
-        options={driver_dropdown_options(active_drivers(drivers))}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        For
-      </Dropdown>
-
-      <!-- Race select -->
-      <Dropdown
-        name="race"
-        input_variable={race_select_value}
-        options={race_dropdown_options(races)}
-        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
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Save Changes
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_substitution"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Delete
-          </Button>
-        {:else}
-          <Button
-            formaction="?/create_substitution"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
-            Create Substitution
-          </Button>
         {/if}
-      </div>
+
-    </div>
+        <div class="flex flex-col gap-2">
-  </form>
+          <!-- Substitute select -->
-</Card>
+          <Dropdown
+            name="substitute"
+            input_variable={substitute_select_value}
+            action={register_substitute_preview_handler}
+            options={driver_dropdown_options(inactive_drivers(drivers))}
+            {labelwidth}
+            {disabled}
+            {required}
+          >
+            Substitute
+          </Dropdown>
+
+          <!-- Driver select -->
+          <Dropdown
+            name="for"
+            input_variable={driver_select_value}
+            options={driver_dropdown_options(active_drivers(drivers))}
+            {labelwidth}
+            {disabled}
+            {required}
+          >
+            For
+          </Dropdown>
+
+          <!-- Race select -->
+          {#await data.races then races}
+            <Dropdown
+              name="race"
+              input_variable={race_select_value}
+              options={race_dropdown_options(races)}
+              {labelwidth}
+              {disabled}
+              {required}
+            >
+              Race
+            </Dropdown>
+          {/await}
+
+          <!-- Save/Delete buttons -->
+          <div class="flex justify-end gap-2">
+            {#if substitution}
+              <Button
+                formaction="?/update_substitution"
+                color="secondary"
+                {disabled}
+                submit
+                width="w-1/2"
+              >
+                Save Changes
+              </Button>
+              <Button
+                formaction="?/delete_substitution"
+                color="primary"
+                {disabled}
+                submit
+                width="w-1/2"
+              >
+                Delete
+              </Button>
+            {:else}
+              <Button
+                formaction="?/create_substitution"
+                color="tertiary"
+                {disabled}
+                submit
+                width="w-full"
+              >
+                Create Substitution
+              </Button>
+            {/if}
+          </div>
+        </div>
+      </form>
+    </Card>
+  {/await}
+{/await}

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

@@ -1,28 +1,35 @@
 <script lang="ts">
-  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Driver, Race, Substitution } from "$lib/schema";
+  import type { Race, Substitution } from "$lib/schema";
   import { Button, Table, type TableColumn } from "$lib/components";
 
   let { data }: { data: PageData } = $props();
 
-  // TODO: Cleanup
+  const modalStore: ModalStore = getModalStore();
-  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  const substitution_handler = async (event: Event, id?: string) => {
-  const update_substitution_for_select_values: { [key: string]: string } = $state({});
+    const substitution: Substitution | undefined = get_by_value(
-  const update_substitution_race_select_values: { [key: string]: string } = $state({});
+      await data.substitutions,
-  data.substitutions.then((substitutions: Substitution[]) =>
+      "id",
-    substitutions.forEach((substitution: Substitution) => {
+      id ?? "Invalid",
-      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"] = "";
 
-  const substitutions_columns: TableColumn[] = [
+    if (id && !substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        data,
+        substitution,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const substitutions_columns: TableColumn[] = $derived([
     {
       data_value_name: "expand",
       label: "Step",
@@ -49,56 +56,14 @@
       valuefun: async (value: string): Promise<string> =>
         get_by_value(await data.races, "id", value)?.name ?? "Invalid",
     },
-  ];
+  ]);
-
-  const modalStore: ModalStore = getModalStore();
-
-  const substitutions_handler = async (event: Event, id: string) => {
-    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
-    if (!substitution) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        substitution: substitution,
-        drivers: await data.drivers,
-        races: await data.races,
-        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],
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_substitution_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        drivers: await data.drivers,
-        races: await data.races,
-        substitute_select_value: update_substitution_substitute_select_values["create"],
-        driver_select_value: update_substitution_for_select_values["create"],
-        disable_inputs: !data.admin,
-        race_select_value: update_substitution_race_select_values["create"],
-        require_inputs: true,
-        headshot_template: get_driver_headshot_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_substitution_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={substitution_handler} shadow>
     <span class="font-bold">Create New Substitution</span>
   </Button>
 </div>
 {#await data.substitutions then substitutions}
-  <Table data={substitutions} columns={substitutions_columns} handler={substitutions_handler} />
+  <Table data={substitutions} columns={substitutions_columns} handler={substitution_handler} />
 {/await}