Lib: Simplify RaceCard

src/lib/components/cards/RaceCard.svelte

@@ -6,214 +6,193 @@
   import { format } from "date-fns";
   import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
   import { enhance } from "$app/forms";
+  import { get_race_pictogram_template } from "$lib/database";
 
   interface RaceCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Race] object used to prefill values. */
-    race?: Race | undefined;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the race pictogram template preview */
-    pictogram_template?: string;
+    race?: Race;
   }
 
-  let {
-    race = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    pictogram_template = "",
-  }: RaceCardProps = $props();
+  let { data, race = undefined }: RaceCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     race = meta.race;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    pictogram_template = meta.pictogram_template;
   }
 
+  const clear_sprint = () => {
+    (document.getElementById("sqdate") as HTMLInputElement).value = "";
+    (document.getElementById("sdate") as HTMLInputElement).value = "";
+  };
+
+  const required: boolean = $derived(!race);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth = "80px";
+
   // Dates have to be formatted to datetime-local format
   const dateformat: string = "yyyy-MM-dd'T'HH:mm";
-  const sprintqualidate: string | undefined =
-    race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined;
-  const sprintdate: string | undefined =
-    race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined;
-  const qualidate: string | undefined = race
-    ? format(new Date(race.qualidate), dateformat)
-    : undefined;
-  const racedate: string | undefined = race
-    ? format(new Date(race.racedate), dateformat)
-    : undefined;
-
-  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 = "";
-  };
-
-  const labelwidth = "80px";
+  const sprintqualidate: string | undefined = $derived(
+    race?.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined,
+  );
+  const sprintdate: string | undefined = $derived(
+    race?.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined,
+  );
+  const qualidate: string | undefined = $derived(
+    race ? format(new Date(race.qualidate), dateformat) : undefined,
+  );
+  const racedate: string | undefined = $derived(
+    race ? format(new Date(race.racedate), dateformat) : undefined,
+  );
 </script>
 
-<Card
-  imgsrc={race?.pictogram_url ?? pictogram_template}
-  imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
-  width="w-full sm:w-auto"
-  imgwidth={RACE_PICTOGRAM_WIDTH}
-  imgheight={RACE_PICTOGRAM_HEIGHT}
-  imgonclick={(event: Event) => modalStore.close()}
->
-  <form method="POST" enctype="multipart/form-data" use:enhance>
-    <!-- This is also disabled, because the ID should only be -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if race && !disable_inputs}
-      <input name="id" type="hidden" value={race.id} />
-    {/if}
+{#await data.graphics then graphics}
+  <Card
+    imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)}
+    imgid="pictogram_preview"
+    width="w-full sm:w-auto"
+    imgwidth={RACE_PICTOGRAM_WIDTH}
+    imgheight={RACE_PICTOGRAM_HEIGHT}
+    imgonclick={(event: Event) => modalStore.close()}
+  >
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance
+      onsubmit={() => modalStore.close()}
+    >
+      <!-- This is also disabled, because the ID should only be -->
+      <!-- "leaked" to users that are allowed to use the inputs -->
+      {#if race && !disabled}
+        <input name="id" type="hidden" value={race.id} />
+      {/if}
 
-    <div class="flex flex-col gap-2">
-      <!-- Driver name input -->
-      <Input
-        id="race_name_{race?.id ?? 'create'}"
-        name="name"
-        value={race?.name ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        disabled={disable_inputs}
-        required={require_inputs}>Name</Input
-      >
-      <Input
-        id="race_step_{race?.id ?? 'create'}"
-        name="step"
-        value={race?.step ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="number"
-        min={1}
-        max={24}
-        disabled={disable_inputs}
-        required={require_inputs}>Step</Input
-      >
-      <Input
-        id="race_pxx_{race?.id ?? 'create'}"
-        name="pxx"
-        value={race?.pxx ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="number"
-        min={1}
-        max={20}
-        disabled={disable_inputs}
-        required={require_inputs}>PXX</Input
-      >
-
-      <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
-      <Input
-        id="race_sprintqualidate_{race?.id ?? 'create'}"
-        name="sprintqualidate"
-        value={sprintqualidate ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="datetime-local"
-        disabled={disable_inputs}>SQuali</Input
-      >
-      <Input
-        id="race_sprintdate_{race?.id ?? 'create'}"
-        name="sprintdate"
-        value={sprintdate ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="datetime-local"
-        disabled={disable_inputs}>SRace</Input
-      >
-      <Input
-        id="race_qualidate_{race?.id ?? 'create'}"
-        name="qualidate"
-        value={qualidate ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="datetime-local"
-        disabled={disable_inputs}
-        required={require_inputs}>Quali</Input
-      >
-      <Input
-        id="race_racedate_{race?.id ?? 'create'}"
-        name="racedate"
-        value={racedate ?? ""}
-        autocomplete="off"
-        {labelwidth}
-        type="datetime-local"
-        disabled={disable_inputs}
-        required={require_inputs}>Race</Input
-      >
-
-      <!-- Headshot upload -->
-      <FileDropzone
-        name="pictogram"
-        id="race_pictogram_{race?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_race_pictogram_preview_${race?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Pictogram</span></svelte:fragment
+      <div class="flex flex-col gap-2">
+        <!-- Driver name input -->
+        <Input
+          name="name"
+          value={race?.name ?? ""}
+          autocomplete="off"
+          {labelwidth}
+          {disabled}
+          {required}
         >
-      </FileDropzone>
+          Name
+        </Input>
+        <Input
+          name="step"
+          value={race?.step ?? ""}
+          autocomplete="off"
+          type="number"
+          min={1}
+          max={24}
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Step
+        </Input>
+        <Input
+          name="pxx"
+          value={race?.pxx ?? ""}
+          autocomplete="off"
+          type="number"
+          min={1}
+          max={20}
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          PXX
+        </Input>
 
-      <!-- Save/Delete buttons -->
-      <div class="flex justify-end gap-2">
-        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
-          Remove Sprint
-        </Button>
-        {#if race}
+        <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
+        <Input
+          id="sqdate"
+          name="sprintqualidate"
+          value={sprintqualidate ?? ""}
+          autocomplete="off"
+          type="datetime-local"
+          {labelwidth}
+          {disabled}
+        >
+          SQuali
+        </Input>
+        <Input
+          id="sdate"
+          name="sprintdate"
+          value={sprintdate ?? ""}
+          autocomplete="off"
+          type="datetime-local"
+          {labelwidth}
+          {disabled}
+        >
+          SRace
+        </Input>
+        <Input
+          name="qualidate"
+          value={qualidate ?? ""}
+          autocomplete="off"
+          type="datetime-local"
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Quali
+        </Input>
+        <Input
+          name="racedate"
+          value={racedate ?? ""}
+          autocomplete="off"
+          type="datetime-local"
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Race
+        </Input>
+
+        <!-- Headshot upload -->
+        <FileDropzone
+          name="pictogram"
+          onchange={get_image_preview_event_handler("pictogram_preview")}
+          {disabled}
+          {required}
+        >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Pictogram</span>
+          </svelte:fragment>
+        </FileDropzone>
+
+        <!-- Save/Delete buttons -->
+        <div class="flex justify-end gap-2">
           <Button
-            formaction="?/update_race"
+            onclick={clear_sprint}
             color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/3"
-            onclick={() => modalStore.close()}
+            {disabled}
+            width={race ? "w-1/3" : "w-1/2"}
           >
-            Save Changes
+            Remove Sprint
           </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_race"
-            width="w-1/3"
-            onclick={() => modalStore.close()}
-          >
-            Delete
-          </Button>
-        {:else}
-          <Button
-            formaction="?/create_race"
-            color="tertiary"
-            submit
-            width="w-1/2"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
-            Create Race
-          </Button>
-        {/if}
+          {#if race}
+            <Button formaction="?/update_race" color="secondary" {disabled} submit width="w-1/3">
+              Save Changes
+            </Button>
+            <Button formaction="?/delete_race" color="primary" {disabled} submit width="w-1/3">
+              Delete
+            </Button>
+          {:else}
+            <Button formaction="?/create_race" color="tertiary" {disabled} submit width="w-1/2">
+              Create Race
+            </Button>
+          {/if}
+        </div>
       </div>
-    </div>
-  </form>
-</Card>
+    </form>
+  </Card>
+{/await}

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

@@ -2,12 +2,31 @@
   import { Button, Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { get_by_value, get_race_pictogram_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import type { Race } from "$lib/schema";
 
   let { data }: { data: PageData } = $props();
 
-  const races_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+
+  const race_handler = async (event: Event, id?: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id ?? "Invalid");
+
+    if (id && !race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        data,
+        race,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const races_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -35,46 +54,14 @@
       label: "Race",
       valuefun: async (value: string): Promise<string> => value.slice(0, -5),
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const races_handler = async (event: Event, id: string) => {
-    const race: Race | undefined = get_by_value(await data.races, "id", id);
-    if (!race) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        race: race,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_race_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        pictogram_template: get_race_pictogram_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_race_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={race_handler} shadow>
     <span class="font-bold">Create New Race</span>
   </Button>
 </div>
 {#await data.races then races}
-  <Table data={races} columns={races_columns} handler={races_handler} />
+  <Table data={races} columns={races_columns} handler={race_handler} />
 {/await}