Data/Season: Add value formatting functions for substitutions page

This is loading fast and non-lazy, on row-click the card opens

src/lib/components/Image.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from "svelte/elements";
+  import { fetch_image_base64 } from "$lib/image";
+
+  interface ImageProps extends HTMLImgAttributes {
+    /** The URL to the image resource to load */
+    src: string;
+  }
+
+  let { src, ...restProps }: ImageProps = $props();
+</script>
+
+{#await fetch_image_base64(src) then data}
+  <img src={data} class="bg-surface-100 transition-opacity" {...restProps} />
+{/await}

src/lib/components/Table.svelte

@@ -7,9 +7,12 @@
 
     /** The columns the table should have. */
     columns: TableColumn[];
+
+    /** An optional function handling clicking on a table row */
+    handler?: (event: Event, id: string) => Promise<void>;
   }
 
-  let { data, columns }: TableProps = $props();
+  let { data, columns, handler = undefined }: TableProps = $props();
 </script>
 
 <div class="table-container bg-white shadow">
@@ -17,28 +20,29 @@
     <thead>
       <tr class="bg-white">
         {#each columns as col}
-          <th>{col.label}</th>
+          <th class="!px-3">{col.label}</th>
         {/each}
       </tr>
     </thead>
+
     <tbody>
       {#each data as row}
-        <tr>
+        <tr
+          onclick={async (event: Event) => {
+            if (handler) await handler(event, row.id);
+          }}
+        >
           {#each columns as col}
             {#if col.valuefun}
-              <td>{@html col.valuefun(row[col.data_value_name])}</td>
+              <td class="!align-middle">
+                {#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
+              </td>
             {:else}
-              <td>{row[col.data_value_name]}</td>
+              <td class="!align-middle">{row[col.data_value_name]}</td>
             {/if}
           {/each}
         </tr>
       {/each}
     </tbody>
-    <!-- <tfoot> -->
-    <!--   <tr> -->
-    <!--     <th colspan="3">Calculated Total Weight</th> -->
-    <!--     <td>{totalWeight}</td> -->
-    <!--   </tr> -->
-    <!-- </tfoot> -->
   </table>
 </div>

src/lib/components/Table.ts

@@ -6,5 +6,5 @@ export interface TableColumn {
   label: string;
 
   /** Any function to further customize the displayed value. May return HTML. */
-  valuefun?: (value: any) => string;
+  valuefun?: (value: any) => Promise<string>;
 }

src/lib/components/cards/Card.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Image } from "$lib/components";
+
+  interface CardProps {
+    children: Snippet;
+
+    /** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
+    imgsrc?: string | undefined;
+
+    /** The id of the header image element for JS access. */
+    imgid?: string | undefined;
+
+    /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
+    imghidden?: boolean;
+
+    /** The width class for the card, defaults to [w-auto] */
+    width?: string;
+  }
+
+  let {
+    children,
+    imgsrc = undefined,
+    imgid = undefined,
+    imghidden = false,
+    width = "w-auto",
+    ...restProps
+  }: CardProps = $props();
+</script>
+
+<div class="card {width} overflow-hidden bg-white shadow">
+  <!-- Allow empty strings for images that only appear after user action -->
+  {#if imgsrc !== undefined}
+    <Image
+      id={imgid}
+      src={imgsrc}
+      alt="Card header"
+      draggable="false"
+      class="select-none shadow"
+      hidden={imghidden}
+    />
+  {/if}
+
+  <div class="p-2" {...restProps}>
+    {@render children()}
+  </div>
+</div>

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/LazyCard.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import LazyImage from "../LazyImage.svelte";
+  import { LazyImage } from "$lib/components";
   import { lazyload } from "$lib/lazyload";
 
-  interface CardProps {
+  interface LazyCardProps {
     children: Snippet;
 
     /** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
@@ -38,7 +38,7 @@
     cardwidth,
     cardheight,
     ...restProps
-  }: CardProps = $props();
+  }: LazyCardProps = $props();
 
   let load: boolean = $state(false);
 
@@ -50,7 +50,7 @@
 <div
   use:lazyload
   onLazyVisible={lazy_visible_handler}
-  style="width: 100%; aspect-ratio: {cardwidth} / {cardheight};"
+  style="aspect-ratio: {cardwidth} / {cardheight};"
 >
   <div class="card w-full overflow-hidden bg-white shadow">
     <!-- Allow empty strings for images that only appear after user action -->

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 -->
@@ -166,20 +164,34 @@
 
       <!-- Save/Delete buttons -->
       <div class="flex justify-end gap-2">
-        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs}
+        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
-          >Remove Sprint</Button
+          Remove Sprint
-        >
+        </Button>
         {#if race}
-          <Button formaction="?/update_race" color="secondary" disabled={disable_inputs} submit
+          <Button
-            >Save Changes</Button
+            formaction="?/update_race"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/3"
           >
-          <Button color="primary" submit disabled={disable_inputs} formaction="?/delete_race"
+            Save Changes
-            >Delete</Button
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_race"
+            width="w-1/3"
           >
+            Delete
+          </Button>
         {:else}
-          <Button formaction="?/create_race" color="tertiary" submit>Create Race</Button>
+          <Button formaction="?/create_race" color="tertiary" submit width="w-1/2"
+            >Create Race</Button
+          >
         {/if}
       </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,26 @@
             formaction="?/update_substitution"
             color="secondary"
             disabled={disable_inputs}
-            submit>Save Changes</Button
+            submit
+            width="w-1/2"
           >
+            Save Changes
+          </Button>
           <Button
             color="primary"
             submit
             disabled={disable_inputs}
-            formaction="?/delete_substitution">Delete</Button
+            formaction="?/delete_substitution"
+            width="w-1/2"
           >
+            Delete
+          </Button>
         {:else}
-          <Button formaction="?/create_substitution" color="tertiary" submit
+          <Button formaction="?/create_substitution" color="tertiary" submit width="w-full">
-            >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>

src/lib/components/form/Dropdown.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+  import type { Action } from "svelte/action";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { v4 as uuid } from "uuid";
+  import { type DropdownOption, Image } from "$lib/components";
+
+  interface DropdownProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Placeholder for the empty input element */
+    placeholder?: string;
+
+    /** Form name of the input element, to reference input data after form submission */
+    name?: string;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    input_variable: string;
+
+    /** Any action to bind to the input element */
+    action?: Action;
+
+    /** The ID of the popup to trigger. UUID by default. */
+    popup_id?: string;
+
+    /** The [PopupSettings] object for the popup to trigger. */
+    popup_settings?: PopupSettings;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: DropdownOption[];
+  }
+
+  let {
+    children,
+    placeholder = "",
+    name = "",
+    labelwidth = "auto",
+    input_variable,
+    action = undefined,
+    popup_id = uuid(),
+    popup_settings = {
+      event: "click",
+      target: popup_id,
+      placement: "bottom",
+      closeQuery: ".listbox-item",
+    },
+    options,
+    ...restProps
+  }: DropdownProps = $props();
+
+  /** Find the "label" of an option by its "value" */
+  const get_label = (value: string): string | undefined => {
+    return options.find((o) => o.value === value)?.label;
+  };
+
+  // Use an action to fill the "input" variable
+  // required to dispatch the custom event using $effect
+  let input: HTMLInputElement | undefined = undefined;
+  const obtain_input: Action = (node: HTMLElement) => {
+    input = node as HTMLInputElement;
+  };
+
+  // This will run everyting "input_variable" changes.
+  // The event is fired when the input's value is updated via JavaScript.
+  $effect(() => {
+    // Just list this so SvelteKit picks it up as dependency
+    input_variable;
+
+    if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
+  });
+</script>
+
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
+  {#if action}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      use:action
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {:else}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {/if}
+</div>
+
+<div
+  data-popup={popup_id}
+  class="card z-10 w-auto overflow-y-scroll p-2 shadow"
+  style="max-height: 350px;"
+>
+  <ListBox>
+    {#each options as option}
+      <ListBoxItem bind:group={input_variable} {name} value={option.value}>
+        <div class="flex flex-nowrap">
+          {#if option.icon_url}
+            <Image src={option.icon_url} alt="" class="rounded" style="height: 24px;" />
+          {/if}
+          <span class="ml-2">{option.label}</span>
+        </div>
+      </ListBoxItem>
+    {/each}
+  </ListBox>
+</div>

src/lib/components/form/Dropdown.ts

@@ -0,0 +1,10 @@
+export interface DropdownOption {
+  /** The label displayed in the list of options. */
+  label: string;
+
+  /** The value assigned to the dropdown value variable */
+  value: string;
+
+  /** An optional icon displayed left to the label */
+  icon_url?: string;
+}

src/lib/components/form/LazyDropdown.ts

@@ -1,4 +1,6 @@
-export interface LazyDropdownOption {
+import { type DropdownOption } from "$lib/components";
+
+export interface LazyDropdownOption extends DropdownOption {
   /** The label displayed in the list of options. */
   label: string;
 

src/lib/components/index.ts

@@ -1,18 +1,22 @@
+import Image from "./Image.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import Table from "./Table.svelte";
 
 import Button from "./form/Button.svelte";
+import Dropdown from "./form/Dropdown.svelte";
 import Input from "./form/Input.svelte";
 import LazyDropdown from "./form/LazyDropdown.svelte";
 import Search from "./form/Search.svelte";
 
+import Card from "./cards/Card.svelte";
 import DriverCard from "./cards/DriverCard.svelte";
 import LazyCard from "./cards/LazyCard.svelte";
 import RaceCard from "./cards/RaceCard.svelte";
 import SubstitutionCard from "./cards/SubstitutionCard.svelte";
 import TeamCard from "./cards/TeamCard.svelte";
 
+import type { DropdownOption } from "./form/Dropdown";
 import type { LazyDropdownOption } from "./form/LazyDropdown";
 import type { TableColumn } from "./Table";
 
@@ -22,17 +26,20 @@ import UserIcon from "./svg/UserIcon.svelte";
 
 export {
   // Components
+  Image,
   LazyImage,
   LoadingIndicator,
   Table,
 
   // Form
   Button,
+  Dropdown,
   Input,
   LazyDropdown,
   Search,
 
   // Cards
+  Card,
   DriverCard,
   LazyCard,
   RaceCard,
@@ -40,6 +47,7 @@ export {
   TeamCard,
 
   // Types
+  type DropdownOption,
   type LazyDropdownOption,
   type TableColumn,
 

src/lib/config.ts

@@ -21,14 +21,14 @@ export const RACE_PICTOGRAM_WIDTH: number = 512;
 export const RACE_PICTOGRAM_HEIGHT: number = 384;
 
 // Card aspect ratios
-export const TEAM_CARD_ASPECT_WIDTH: number = 413;
+// export const TEAM_CARD_ASPECT_WIDTH: number = 413;
-export const TEAM_CARD_ASPECT_HEIGHT: number = 438;
+// export const TEAM_CARD_ASPECT_HEIGHT: number = 438;
 
-export const DRIVER_CARD_ASPECT_WIDTH: number = 411;
+// export const DRIVER_CARD_ASPECT_WIDTH: number = 411;
-export const DRIVER_CARD_ASPECT_HEIGHT: number = 769;
+// export const DRIVER_CARD_ASPECT_HEIGHT: number = 769;
 
-export const RACE_CARD_ASPECT_WIDTH: number = 497;
+// export const RACE_CARD_ASPECT_WIDTH: number = 497;
-export const RACE_CARD_ASPECT_HEIGHT: number = 879;
+// export const RACE_CARD_ASPECT_HEIGHT: number = 879;
 
-export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413;
+// export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413;
-export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625;
+// export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625;

src/routes/+layout.svelte

@@ -12,6 +12,10 @@
     Input,
     PasswordIcon,
     LoadingIndicator,
+    DriverCard,
+    TeamCard,
+    RaceCard,
+    SubstitutionCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
 
@@ -21,17 +25,33 @@
     initializeStores,
     Drawer,
     getDrawerStore,
+    Modal,
+    getModalStore,
     type DrawerSettings,
     Avatar,
     FileDropzone,
     type DrawerStore,
+    type ModalStore,
+    type ModalComponent,
   } from "@skeletonlabs/skeleton";
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
-  // Drawer config
+  // Init skeleton stores for drawer + modal
   initializeStores();
+
+  // Modal config
+  const modalStore: ModalStore = getModalStore();
+  const modalRegistry: Record<string, ModalComponent> = {
+    // Card data (e.g. team, driver etc.) is passed using $modalStore[0].meta
+    teamCard: { ref: TeamCard },
+    driverCard: { ref: DriverCard },
+    raceCard: { ref: RaceCard },
+    substitutionCard: { ref: SubstitutionCard },
+  };
+
+  // Drawer config
   const drawerStore: DrawerStore = getDrawerStore();
   let drawerOpen: boolean = false;
   let drawerId: string = "";
@@ -99,21 +119,12 @@
 
   // Popups config
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
-  // Example: https://www.skeleton.dev/utilities/popups
-  // const data_popup_settings: PopupSettings = {
-  //   event: "click",
-  //   target: "data_popup",
-  //   placement: "bottom",
-  //   middleware: {
-  //     offset: { mainAxis: 22, crossAxis: 0 },
-  //     // shift: { mainAxis: true, crossAxis: false },
-  //   },
-  // };
 </script>
 
 <LoadingIndicator />
 
+<Modal components={modalRegistry} regionBackdrop="!overflow-y-scroll" />
+
 <Drawer zIndex="z-30">
   <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
   {#if $drawerStore.id === "menu_drawer"}
@@ -121,28 +132,32 @@
     <!-- Menu Drawer -->
     <!-- Menu Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
+      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full">
-      <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
+        Race Picks
-        >Season Picks
       </Button>
-      <Button href="/leaderboard" onclick={close_drawer} color="surface" fullwidth
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full">
-        >Leaderboard
+        Season Picks
       </Button>
-      <Button href="/statistics" onclick={close_drawer} color="surface" fullwidth
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full">
-        >Statistics
+        Leaderboard
       </Button>
-      <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
+      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full">
+        Statistics
+      </Button>
+      <Button href="/rules" onclick={close_drawer} color="surface" width="w-full">Rules</Button>
     </div>
   {:else if $drawerStore.id === "data_drawer"}
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
+      <Button href="/data/raceresult" onclick={close_drawer} color="surface" width="w-full"
         >Race Results
       </Button>
-      <Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button>
+      <Button href="/data/season" onclick={close_drawer} color="surface" width="w-full"
-      <Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button>
+        >Season</Button
+      >
+      <Button href="/data/user" onclick={close_drawer} color="surface" width="w-full">Users</Button>
     </div>
   {:else if $drawerStore.id === "login_drawer"}
     <!-- Login Drawer -->
@@ -195,7 +210,7 @@
           name="avatar"
           onchange={get_avatar_preview_event_handler("user_avatar_preview")}
         >
-          <svelte:fragment slot="message"><b>Upload Avatar</b> or Drag and Drop</svelte:fragment>
+          <svelte:fragment slot="message"><b>Upload Avatar</b></svelte:fragment>
         </FileDropzone>
         <div class="flex justify-end gap-2">
           <Button

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

@@ -1,19 +1,23 @@
 <script lang="ts">
   import type { Driver, Race, Substitution, Team } from "$lib/schema";
   import { type PageData, type ActionData } from "./$types";
-  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
+  import {
+    getModalStore,
+    Tab,
+    TabGroup,
+    type ModalSettings,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
 
-  // TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
+  import { Table, type LazyDropdownOption, type TableColumn } from "$lib/components";
-  import type { LazyDropdownOption } from "$lib/components/LazyDropdown.svelte";
-  import { TeamCard, DriverCard, RaceCard, SubstitutionCard } from "$lib/components";
   import { get_by_value } from "$lib/database";
   import {
     DRIVER_HEADSHOT_HEIGHT,
     DRIVER_HEADSHOT_WIDTH,
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
-    TEAM_LOGO_HEIGHT,
+    TEAM_BANNER_HEIGHT,
-    TEAM_LOGO_WIDTH,
+    TEAM_BANNER_WIDTH,
   } from "$lib/config";
 
   let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -58,8 +62,8 @@
       label: team.name,
       value: team.id,
       icon_url: team.logo_url,
-      icon_width: TEAM_LOGO_WIDTH,
+      icon_width: TEAM_BANNER_WIDTH,
-      icon_height: TEAM_LOGO_HEIGHT,
+      icon_height: TEAM_BANNER_HEIGHT,
     });
   });
 
@@ -90,6 +94,173 @@
       });
     }),
   );
+
+  const modalStore: ModalStore = getModalStore();
+
+  const teams_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "color",
+      label: "Color",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
+    },
+  ];
+
+  const teams_handler = async (event: Event, id: string) => {
+    const team: Team | undefined = get_by_value(data.teams, "id", id);
+    if (!team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        team: team,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const drivers_columns: TableColumn[] = [
+    {
+      data_value_name: "code",
+      label: "Driver Code",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "firstname", label: "First Name" },
+    { data_value_name: "lastname", label: "Last Name" },
+    {
+      data_value_name: "team",
+      label: "Team",
+      valuefun: async (value: string): Promise<string> => {
+        const team: Team | undefined = get_by_value(data.teams, "id", value);
+        return team
+          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
+          : "<span class='badge variant-filled-primary'>Invalid</span>";
+      },
+    },
+    {
+      data_value_name: "active",
+      label: "Active",
+      valuefun: async (value: boolean): Promise<string> =>
+        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
+    },
+  ];
+
+  /** Shows the DriverCard modal to edit the clicked driver */
+  const drivers_handler = async (event: Event, id: string) => {
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
+    if (!driver) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        driver: driver,
+        team_select_value: update_driver_team_select_values[driver.id],
+        team_select_options: team_dropdown_options,
+        active_value: update_driver_active_values[driver.id],
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const races_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "step", label: "Step" },
+    {
+      data_value_name: "sprintqualidate",
+      label: "Sprint Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "sprintdate",
+      label: "Sprint Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "qualidate",
+      label: "Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "racedate",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+  ];
+
+  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,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const substitutions_columns: TableColumn[] = [
+    {
+      data_value_name: "substitute",
+      label: "Substitute",
+      valuefun: async (value: string): Promise<string> => {
+        const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${substitute}</span>`;
+      },
+    },
+    {
+      data_value_name: "for",
+      label: "For",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
+    },
+    {
+      data_value_name: "race",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.races, "id", value)?.name ?? "Invalid",
+    },
+  ];
+
+  const substitutions_handler = async (event: Event, id: string) => {
+    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
+    if (!substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        substitution: substitution,
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
+        driver_select_value: update_substitution_for_select_values[substitution.id],
+        race_select_value: update_substitution_race_select_values[substitution.id],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
 </script>
 
 <svelte:head>
@@ -116,104 +287,34 @@
       <!-- Teams Tab -->
       <!-- Teams Tab -->
       <!-- Teams Tab -->
-      <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+      <!-- TODO: Add team -->
-        <!-- Add a new team -->
+      <Table data={data.teams} columns={teams_columns} handler={teams_handler} />
-        {#if data.admin}
-          <TeamCard
-            logo_template={get_by_value(data.graphics, "name", "team_template")?.file_url}
-            require_inputs
-          />
-        {/if}
-
-        <!-- List all teams inside the database -->
-        {#each data.teams as team}
-          <TeamCard {team} disable_inputs={!data.admin} />
-        {/each}
-      </div>
     {:else if current_tab === 1}
       <!-- Drivers Tab -->
       <!-- Drivers Tab -->
       <!-- Drivers Tab -->
-      <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+      <!-- TODO: Add driver -->
-        <!-- Add a new driver -->
-        {#if data.admin}
-          <DriverCard
-            headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
-            team_select_value={update_driver_team_select_values["create"]}
-            team_select_options={team_dropdown_options}
-            active_value={update_driver_active_values["create"]}
-            require_inputs
-          />
-        {/if}
-
-        <!-- List all drivers inside the database -->
       {#await data.drivers then drivers}
-          {#each drivers as driver}
+        <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
-            <DriverCard
-              {driver}
-              disable_inputs={!data.admin}
-              team_select_value={update_driver_team_select_values[driver.id]}
-              team_select_options={team_dropdown_options}
-              active_value={update_driver_active_values[driver.id]}
-            />
-          {/each}
       {/await}
-      </div>
     {:else if current_tab === 2}
       <!-- Races Tab -->
       <!-- Races Tab -->
       <!-- Races Tab -->
-      <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-3 2xl:grid-cols-5">
-        {#if data.admin}
-          <RaceCard
-            pictogram_template={get_by_value(data.graphics, "name", "race_template")?.file_url}
-            require_inputs
-          />
-        {/if}
-
       {#await data.races then races}
-          {#each races as race}
+        <Table data={races} columns={races_columns} handler={races_handler} />
-            <RaceCard {race} disable_inputs={!data.admin} />
-          {/each}
       {/await}
-      </div>
     {:else if current_tab === 3}
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
-      <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
-        {#await data.drivers then drivers}
-          {#if data.admin}
-            <SubstitutionCard
-              {drivers}
-              substitute_select_value={update_substitution_substitute_select_values["create"]}
-              driver_select_value={update_substitution_for_select_values["create"]}
-              race_select_value={update_substitution_race_select_values["create"]}
-              driver_select_options={driver_dropdown_options}
-              race_select_options={race_dropdown_options}
-              headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
-              require_inputs
-            />
-          {/if}
-
       {#await data.substitutions then substitutions}
-            {#each substitutions as substitution}
+        <Table
-              <SubstitutionCard
+          data={substitutions}
-                {substitution}
+          columns={substitutions_columns}
-                {drivers}
+          handler={substitutions_handler}
-                substitute_select_value={update_substitution_substitute_select_values[
-                  substitution.id
-                ]}
-                driver_select_value={update_substitution_for_select_values[substitution.id]}
-                race_select_value={update_substitution_race_select_values[substitution.id]}
-                driver_select_options={driver_dropdown_options}
-                race_select_options={race_dropdown_options}
-                disable_inputs={!data.admin}
         />
-            {/each}
       {/await}
-        {/await}
-      </div>
     {/if}
   </svelte:fragment>
 </TabGroup>