Lib: Make driver-/race-/team- and substitution-card non-lazy

src/lib/components/cards/DriverCard.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
-  import { Button, Input, LazyCard, LazyDropdown, type LazyDropdownOption } from "$lib/components";
-  import type { Driver } from "$lib/schema";
   import {
-    DRIVER_CARD_ASPECT_HEIGHT,
+    FileDropzone,
-    DRIVER_CARD_ASPECT_WIDTH,
+    getModalStore,
-    DRIVER_HEADSHOT_HEIGHT,
+    SlideToggle,
-    DRIVER_HEADSHOT_WIDTH,
+    type ModalStore,
-  } from "$lib/config";
+  } from "@skeletonlabs/skeleton";
+  import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import type { Driver } from "$lib/schema";
 
   interface DriverCardProps {
     /** The [Driver] object used to prefill values. */
@@ -27,7 +26,7 @@
     team_select_value: string;
 
     /** The options this component's team select dropdown will display */
-    team_select_options: LazyDropdownOption[];
+    team_select_options: DropdownOption[];
 
     /** The value this component's active switch will bind to */
     active_value: boolean;
@@ -42,15 +41,22 @@
     team_select_options,
     active_value,
   }: DriverCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    driver = meta.driver;
+    team_select_value = meta.team_select_value;
+    team_select_options = meta.team_select_options;
+    active_value = meta.active_value;
+  }
 </script>
 
-<LazyCard
+<Card
-  cardwidth={DRIVER_CARD_ASPECT_WIDTH}
-  cardheight={DRIVER_CARD_ASPECT_HEIGHT}
   imgsrc={driver?.headshot_url ?? headshot_template}
-  imgwidth={DRIVER_HEADSHOT_WIDTH}
-  imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+  width="w-full sm:w-auto"
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->
@@ -95,15 +101,16 @@
       </Input>
 
       <!-- Driver team input -->
-      <LazyDropdown
+      <Dropdown
         name="team"
         input_variable={team_select_value}
         options={team_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
-        >Team
+      >
-      </LazyDropdown>
+        Team
+      </Dropdown>
 
       <!-- Headshot upload -->
       <FileDropzone
@@ -149,11 +156,11 @@
             Delete
           </Button>
         {:else}
-          <Button formaction="?/create_driver" color="tertiary" submit width="w-full"
+          <Button formaction="?/create_driver" color="tertiary" submit width="w-full">
-            >Create Driver</Button
+            Create Driver
-          >
+          </Button>
         {/if}
       </div>
     </div>
   </form>
-</LazyCard>
+</Card>

src/lib/components/cards/RaceCard.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone } from "@skeletonlabs/skeleton";
+  import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
-  import { Button, LazyCard, Input } from "$lib/components";
+  import { Button, Card, Input } from "$lib/components";
   import type { Race } from "$lib/schema";
   import { format } from "date-fns";
-  import {
-    RACE_CARD_ASPECT_HEIGHT,
-    RACE_CARD_ASPECT_WIDTH,
-    RACE_PICTOGRAM_HEIGHT,
-    RACE_PICTOGRAM_WIDTH,
-  } from "$lib/config";
 
   interface RaceCardProps {
     /** The [Race] object used to prefill values. */
@@ -32,6 +26,13 @@
     pictogram_template = "",
   }: RaceCardProps = $props();
 
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    race = meta.race;
+  }
+
   // Dates have to be formatted to datetime-local format
   const dateformat: string = "yyyy-MM-dd'T'HH:mm";
   const sprintqualidate: string | undefined =
@@ -60,13 +61,10 @@
   const labelwidth = "80px";
 </script>
 
-<LazyCard
+<Card
-  cardwidth={RACE_CARD_ASPECT_WIDTH}
-  cardheight={RACE_CARD_ASPECT_HEIGHT}
   imgsrc={race?.pictogram_url ?? pictogram_template}
-  imgwidth={RACE_PICTOGRAM_WIDTH}
-  imgheight={RACE_PICTOGRAM_HEIGHT}
   imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
+  width="w-full sm:w-auto"
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->
@@ -182,4 +180,4 @@
       </div>
     </div>
   </form>
-</LazyCard>
+</Card>

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
-  import LazyCard from "./LazyCard.svelte";
+  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
-  import { Button, LazyDropdown, type LazyDropdownOption } from "$lib/components";
   import type { Driver, Substitution } from "$lib/schema";
   import { get_by_value } from "$lib/database";
   import type { Action } from "svelte/action";
-  import {
+  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
-    DRIVER_HEADSHOT_HEIGHT,
-    DRIVER_HEADSHOT_WIDTH,
-    SUBSTITUTION_CARD_ASPECT_HEIGHT,
-    SUBSTITUTION_CARD_ASPECT_WIDTH,
-  } from "$lib/config";
 
   interface SubstitutionCardProps {
     /** The [Substitution] object used to prefill values. */
@@ -37,10 +31,10 @@
     race_select_value: string;
 
     /** The options this component's substitute/driver select dropdowns will display */
-    driver_select_options: LazyDropdownOption[];
+    driver_select_options: DropdownOption[];
 
     /** The options this component's race select dropdown will display */
-    race_select_options: LazyDropdownOption[];
+    race_select_options: DropdownOption[];
   }
 
   let {
@@ -56,6 +50,19 @@
     race_select_options,
   }: SubstitutionCardProps = $props();
 
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    substitution = meta.substitution;
+    drivers = meta.drivers;
+    substitute_select_value = meta.substitute_select_value;
+    driver_select_value = meta.driver_select_value;
+    race_select_value = meta.race_select_value;
+    driver_select_options = meta.driver_select_options;
+    race_select_options = meta.race_select_options;
+  }
+
   // 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.
@@ -80,14 +87,11 @@
   };
 </script>
 
-<LazyCard
+<Card
-  cardwidth={SUBSTITUTION_CARD_ASPECT_WIDTH}
-  cardheight={SUBSTITUTION_CARD_ASPECT_HEIGHT}
   imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
     headshot_template}
-  imgwidth={DRIVER_HEADSHOT_WIDTH}
-  imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+  width="w-full sm:w-auto"
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->
@@ -98,7 +102,7 @@
 
     <div class="flex flex-col gap-2">
       <!-- Substitute select -->
-      <LazyDropdown
+      <Dropdown
         name="substitute"
         input_variable={substitute_select_value}
         action={register_substitute_preview_handler}
@@ -108,29 +112,31 @@
         required={require_inputs}
       >
         Substitute
-      </LazyDropdown>
+      </Dropdown>
 
       <!-- Driver select -->
-      <LazyDropdown
+      <Dropdown
         name="for"
         input_variable={driver_select_value}
         options={driver_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
-        >For
+      >
-      </LazyDropdown>
+        For
+      </Dropdown>
 
       <!-- Race select -->
-      <LazyDropdown
+      <Dropdown
         name="race"
         input_variable={race_select_value}
         options={race_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
-        >Race
+      >
-      </LazyDropdown>
+        Race
+      </Dropdown>
 
       <!-- Save/Delete buttons -->
       <div class="flex justify-end gap-2">
@@ -139,20 +145,24 @@
             formaction="?/update_substitution"
             color="secondary"
             disabled={disable_inputs}
-            submit>Save Changes</Button
+            submit
           >
+            Save Changes
+          </Button>
           <Button
             color="primary"
             submit
             disabled={disable_inputs}
-            formaction="?/delete_substitution">Delete</Button
+            formaction="?/delete_substitution"
           >
+            Delete
+          </Button>
         {:else}
-          <Button formaction="?/create_substitution" color="tertiary" submit
+          <Button formaction="?/create_substitution" color="tertiary" submit>
-            >Create Substitution</Button
+            Create Substitution
-          >
+          </Button>
         {/if}
       </div>
     </div>
   </form>
-</LazyCard>
+</Card>

src/lib/components/cards/TeamCard.svelte

@@ -1,17 +1,8 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone } from "@skeletonlabs/skeleton";
+  import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
-  import { Button, Input, LazyImage } from "$lib/components";
+  import { Card, Button, Input, Image } from "$lib/components";
   import type { Team } from "$lib/schema";
-  import {
-    TEAM_CARD_ASPECT_HEIGHT,
-    TEAM_CARD_ASPECT_WIDTH,
-    TEAM_BANNER_HEIGHT,
-    TEAM_BANNER_WIDTH,
-    TEAM_LOGO_WIDTH,
-    TEAM_LOGO_HEIGHT,
-  } from "$lib/config";
-  import LazyCard from "./LazyCard.svelte";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -41,15 +32,19 @@
   const labelwidth: string = "110px";
 
   let colorpreview: string = $state(team?.color ?? "white");
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    team = meta.team;
+  }
 </script>
 
-<LazyCard
+<Card
-  cardwidth={TEAM_CARD_ASPECT_WIDTH}
-  cardheight={TEAM_CARD_ASPECT_HEIGHT}
   imgsrc={team?.banner_url ?? banner_template}
-  imgwidth={TEAM_BANNER_WIDTH}
-  imgheight={TEAM_BANNER_HEIGHT}
   imgid="update_team_banner_preview_{team?.id ?? 'create'}"
+  width="w-full sm:w-auto"
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->
@@ -117,12 +112,10 @@
         <svelte:fragment slot="message">
           <div class="inline-flex flex-nowrap items-center gap-2">
             <b>Upload Logo</b>
-            <LazyImage
+            <Image
               src={team?.logo_url ?? logo_template}
-              imgwidth={TEAM_LOGO_WIDTH}
-              imgheight={TEAM_LOGO_HEIGHT}
-              imgstyle="width: 32px; height: 32px;"
               id="update_team_logo_preview_{team?.id ?? 'create'}"
+              style="width: 32px; height: 32px;"
             />
           </div>
         </svelte:fragment>
@@ -157,4 +150,4 @@
       </div>
     </div>
   </form>
-</LazyCard>
+</Card>