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;
+    race?: Race;
-
-    /** 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;
   }
 
-  let {
+  let { data, race = undefined }: RaceCardProps = $props();
-    race = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    pictogram_template = "",
-  }: 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 =
+  const sprintqualidate: string | undefined = $derived(
-    race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined;
+    race?.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined,
-  const sprintdate: string | undefined =
+  );
-    race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined;
+  const sprintdate: string | undefined = $derived(
-  const qualidate: string | undefined = race
+    race?.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined,
-    ? format(new Date(race.qualidate), dateformat)
+  );
-    : undefined;
+  const qualidate: string | undefined = $derived(
-  const racedate: string | undefined = race
+    race ? format(new Date(race.qualidate), dateformat) : undefined,
-    ? format(new Date(race.racedate), dateformat)
+  );
-    : undefined;
+  const racedate: string | undefined = $derived(
-
+    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";
 </script>
 
-<Card
+{#await data.graphics then graphics}
-  imgsrc={race?.pictogram_url ?? pictogram_template}
+  <Card
-  imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
+    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>
+    <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 && !disable_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}
+          {disabled}
-        required={require_inputs}>Name</Input
+          {required}
         >
+          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}
+          {labelwidth}
-        required={require_inputs}>Step</Input
+          {disabled}
+          {required}
         >
+          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}
+          {labelwidth}
-        required={require_inputs}>PXX</Input
+          {disabled}
+          {required}
         >
+          PXX
+        </Input>
 
         <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
         <Input
-        id="race_sprintqualidate_{race?.id ?? 'create'}"
+          id="sqdate"
           name="sprintqualidate"
           value={sprintqualidate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}>SQuali</Input
+          {labelwidth}
+          {disabled}
         >
+          SQuali
+        </Input>
         <Input
-        id="race_sprintdate_{race?.id ?? 'create'}"
+          id="sdate"
           name="sprintdate"
           value={sprintdate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}>SRace</Input
+          {labelwidth}
+          {disabled}
         >
+          SRace
+        </Input>
         <Input
-        id="race_qualidate_{race?.id ?? 'create'}"
           name="qualidate"
           value={qualidate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}
+          {labelwidth}
-        required={require_inputs}>Quali</Input
+          {disabled}
+          {required}
         >
+          Quali
+        </Input>
         <Input
-        id="race_racedate_{race?.id ?? 'create'}"
           name="racedate"
           value={racedate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}
+          {labelwidth}
-        required={require_inputs}>Race</Input
+          {disabled}
+          {required}
         >
+          Race
+        </Input>
 
         <!-- Headshot upload -->
         <FileDropzone
           name="pictogram"
-        id="race_pictogram_{race?.id ?? 'create'}"
+          onchange={get_image_preview_event_handler("pictogram_preview")}
-        onchange={get_image_preview_event_handler(
+          {disabled}
-          `update_race_pictogram_preview_${race?.id ?? "create"}`,
+          {required}
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Pictogram</span></svelte:fragment
         >
+          <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 onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
+          <Button
+            onclick={clear_sprint}
+            color="secondary"
+            {disabled}
+            width={race ? "w-1/3" : "w-1/2"}
+          >
             Remove Sprint
           </Button>
           {#if race}
-          <Button
+            <Button formaction="?/update_race" color="secondary" {disabled} submit width="w-1/3">
-            formaction="?/update_race"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/3"
-            onclick={() => modalStore.close()}
-          >
               Save Changes
             </Button>
-          <Button
+            <Button formaction="?/delete_race" color="primary" {disabled} submit width="w-1/3">
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_race"
-            width="w-1/3"
-            onclick={() => modalStore.close()}
-          >
               Delete
             </Button>
           {:else}
-          <Button
+            <Button formaction="?/create_race" color="tertiary" {disabled} submit width="w-1/2">
-            formaction="?/create_race"
-            color="tertiary"
-            submit
-            width="w-1/2"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
               Create Race
             </Button>
           {/if}
         </div>
       </div>
     </form>
-</Card>
+  </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}