Lib: Reorder card scripts

src/lib/components/cards/DriverCard.svelte

@@ -31,10 +31,12 @@
     driver = meta.driver;
   }
 
-  const required: boolean = $derived(!driver);
+  // Constants
-  const disabled: boolean = $derived(!data.admin);
   const labelwidth: string = "120px";
 
+  // Reactive state
+  let required: boolean = $derived(!driver);
+  let disabled: boolean = $derived(!data.admin);
   let team_select_value: string = $state(driver?.team ?? "");
   let active_value: boolean = $state(driver?.active ?? true);
 </script>

src/lib/components/cards/RaceCard.svelte

@@ -3,10 +3,10 @@
   import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { Button, Card, Input } from "$lib/components";
   import type { Race, SkeletonData } from "$lib/schema";
-  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";
+  import { format_date } from "$lib/date";
 
   interface RaceCardProps {
     /** Data passed from the page context */
@@ -26,32 +26,34 @@
     race = meta.race;
   }
 
+  // Constants
+  const labelwidth = "80px";
+  const dateformat: string = "yyyy-MM-dd'T'HH:mm";
+
   const clear_sprint = () => {
     (document.getElementById("sqdate") as HTMLInputElement).value = "";
     (document.getElementById("sdate") as HTMLInputElement).value = "";
   };
 
-  const required: boolean = $derived(!race);
+  // Reactive state
-  const disabled: boolean = $derived(!data.admin);
+  let required: boolean = $derived(!race);
-  const labelwidth = "80px";
+  let disabled: boolean = $derived(!data.admin);
-
+  let name_value: string = $state(race?.name ?? "");
-  // Dates have to be formatted to datetime-local format
-  const dateformat: string = "yyyy-MM-dd'T'HH:mm";
-  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,
-  );
-
   let step_value: string = $state(race?.step.toString() ?? "");
   let pxx_value: string = $state(race?.pxx.toString() ?? "");
+  let sprintqualidate_value: string = $state("");
+  let sprintdate_value: string = $state("");
+  let qualidate_value: string = $state("");
+  let racedate_value: string = $state("");
+
+  if (race) {
+    if (race.sprintqualidate && race.sprintdate) {
+      sprintqualidate_value = format_date(race.sprintqualidate, dateformat);
+      sprintdate_value = format_date(race.sprintdate, dateformat);
+      qualidate_value = format_date(race.qualidate, dateformat);
+      racedate_value = format_date(race.racedate, dateformat);
+    }
+  }
 </script>
 
 {#await data.graphics then graphics}
@@ -79,7 +81,7 @@
         <!-- Driver name input -->
         <Input
           name="name"
-          value={race?.name ?? ""}
+          bind:value={name_value}
           autocomplete="off"
           {labelwidth}
           {disabled}
@@ -118,7 +120,7 @@
         <Input
           id="sqdate"
           name="sprintqualidate"
-          value={sprintqualidate ?? ""}
+          bind:value={sprintqualidate_value}
           autocomplete="off"
           type="datetime-local"
           {labelwidth}
@@ -129,7 +131,7 @@
         <Input
           id="sdate"
           name="sprintdate"
-          value={sprintdate ?? ""}
+          bind:value={sprintdate_value}
           autocomplete="off"
           type="datetime-local"
           {labelwidth}
@@ -139,7 +141,7 @@
         </Input>
         <Input
           name="qualidate"
-          value={qualidate ?? ""}
+          bind:value={qualidate_value}
           autocomplete="off"
           type="datetime-local"
           {labelwidth}
@@ -150,7 +152,7 @@
         </Input>
         <Input
           name="racedate"
-          value={racedate ?? ""}
+          bind:value={racedate_value}
           autocomplete="off"
           type="datetime-local"
           {labelwidth}

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, SkeletonData, Substitution } from "$lib/schema";
+  import type { Driver, SkeletonData, Substitution } from "$lib/schema";
   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";
@@ -30,23 +29,22 @@
   let drivers: Driver[] | undefined = $state(undefined);
   data.drivers.then((d: Driver[]) => (drivers = d));
 
-  const active_drivers = (drivers: Driver[]): Driver[] =>
+  // Constants
-    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 ?? "");
+  // Reactive state
-  let driver_select_value: string = $state(substitution?.for ?? "");
+  let required: boolean = $derived(!substitution);
-  let race_select_value: string = $state(substitution?.race ?? "");
+  let disabled: boolean = $derived(!data.admin);
+  let active_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => d.active));
+  let inactive_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => !d.active));
+  let substitute_value: string = $state(substitution?.substitute ?? "");
+  let driver_value: string = $state(substitution?.for ?? "");
+  let race_value: string = $state(substitution?.race ?? "");
 
   // Update preview
   $effect(() => {
     if (!drivers) return;
-    const src: string = get_by_value(drivers, "id", substitute_select_value)?.headshot_url ?? "";
+    const src: string = get_by_value(drivers, "id", substitute_value)?.headshot_url ?? "";
     const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
     if (img) img.src = src;
   });
@@ -78,8 +76,8 @@
         <!-- Substitute select -->
         <Dropdown
           name="substitute"
-          bind:value={substitute_select_value}
+          bind:value={substitute_value}
-          options={driver_dropdown_options(inactive_drivers(drivers))}
+          options={driver_dropdown_options(inactive_drivers)}
           {labelwidth}
           {disabled}
           {required}
@@ -90,8 +88,8 @@
         <!-- Driver select -->
         <Dropdown
           name="for"
-          bind:value={driver_select_value}
+          bind:value={driver_value}
-          options={driver_dropdown_options(active_drivers(drivers))}
+          options={driver_dropdown_options(active_drivers)}
           {labelwidth}
           {disabled}
           {required}
@@ -103,7 +101,7 @@
         {#await data.races then races}
           <Dropdown
             name="race"
-            bind:value={race_select_value}
+            bind:value={race_value}
             options={race_dropdown_options(races)}
             {labelwidth}
             {disabled}

src/lib/components/cards/TeamCard.svelte

@@ -25,11 +25,14 @@
     team = meta.team;
   }
 
-  const required: boolean = $derived(!team);
+  // Constants
-  const disabled: boolean = $derived(!data.admin);
   const labelwidth: string = "110px";
 
-  let colorpreview: string = $state(team?.color ?? "Invalid");
+  // Reactive state
+  let required: boolean = $derived(!team);
+  let disabled: boolean = $derived(!data.admin);
+  let name_value: string = $state(team?.name ?? "");
+  let color_value: string = $state(team?.color ?? "");
 </script>
 
 {#await data.graphics then graphics}
@@ -57,7 +60,7 @@
         <!-- Team name input -->
         <Input
           name="name"
-          value={team?.name ?? ""}
+          bind:value={name_value}
           autocomplete="off"
           {labelwidth}
           {disabled}
@@ -69,20 +72,17 @@
         <!-- Team color input -->
         <Input
           name="color"
-          value={team?.color ?? ""}
+          bind:value={color_value}
           autocomplete="off"
           placeholder="Enter as '#XXXXXX'"
           minlength={7}
           maxlength={7}
-          oninput={(event: Event) => {
-            colorpreview = (event.target as HTMLInputElement).value;
-          }}
           {labelwidth}
           {disabled}
           {required}
         >
           Color
-          <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
+          <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
             C
           </span>
         </Input>