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}