Season/Drivers: Add "Switch Team" button

src/lib/components/cards/DriverCard.svelte

@@ -121,6 +121,14 @@
             toastStore.trigger(get_error_toast("Invalid driver id!"));
             return;
           }
+          // TODO: Not sure if we want to switch teams without creating a new driver
+          if (team_select_value !== driver.team) {
+            toastStore.trigger(
+              get_error_toast("Please use the team switch button to change teams!"),
+            );
+            return;
+          }
+
           await pb.collection("drivers").update(driver.id, driver_data);
         }
         modalStore.close();

src/lib/components/cards/SubstitutionCard.svelte

@@ -113,10 +113,10 @@
   };
 </script>
 
-{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
+{#await data.drivers then drivers}
   <Card
-    imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
-      get_driver_headshot_template(graphics)}
+    imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+      get_driver_headshot_template(data.graphics)}
     imgid="headshot_preview"
     width="w-full sm:w-auto"
     imgwidth={DRIVER_HEADSHOT_WIDTH}

src/lib/components/cards/TeamSwitchCard.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import {
+    getModalStore,
+    getToastStore,
+    type ModalStore,
+    type ToastStore,
+  } from "@skeletonlabs/skeleton";
+  import { Card, Button, Dropdown } from "$lib/components";
+  import type { Driver } from "$lib/schema";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_error_toast } from "$lib/toast";
+  import { pb, pbUser } from "$lib/pocketbase";
+  import type { PageData } from "../../../routes/data/season/drivers/$types";
+  import { driver_dropdown_options, team_dropdown_options } from "$lib/dropdown";
+
+  interface TeamCardProps {
+    /** Data from the page context */
+    data: PageData;
+  }
+
+  let { data }: TeamCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    data = meta.data;
+  }
+
+  const toastStore: ToastStore = getToastStore();
+
+  // Await promises
+  let drivers: Driver[] | undefined = $state(undefined);
+  data.drivers.then((d: Driver[]) => (drivers = d));
+
+  // Constants
+  const labelwidth: string = "110px";
+
+  // Reactive state
+  let required: boolean = true;
+  let disabled: boolean = $derived(!$pbUser?.admin);
+  let driver_value: string = $state("");
+  let team_value: string = $state("");
+
+  // Update preview
+  $effect(() => {
+    if (!drivers) return;
+    const src: string = get_by_value(drivers, "id", driver_value)?.headshot_url ?? "";
+    const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
+    if (img) img.src = src;
+  });
+
+  // Database actions
+  const update_driver = (): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!driver_value || driver_value === "") {
+        toastStore.trigger(get_error_toast("Please select a driver!"));
+        return;
+      }
+      const old_driver: Driver | undefined = get_by_value(await data.drivers, "id", driver_value);
+      if (!old_driver) {
+        toastStore.trigger(get_error_toast("Unable to lookup driver!"));
+        return;
+      }
+      if (!old_driver.headshot_url) {
+        toastStore.trigger(get_error_toast("Unable to lookup driver headshot!"));
+        return;
+      }
+      if (!team_value || team_value === "" || team_value === old_driver.team) {
+        toastStore.trigger(get_error_toast("Please select a new team!"));
+        return;
+      }
+
+      // Create a new driver
+      const headshot_response = await fetch(old_driver.headshot_url);
+      const headshot_blob = await headshot_response.blob();
+      let new_driver_data = {
+        code: old_driver.code,
+        firstname: old_driver.firstname,
+        lastname: old_driver.lastname,
+        headshot: headshot_blob, // NOTE: Duplicates the image, but no issue for low volume
+        team: team_value,
+        active: true,
+      };
+      try {
+        await pb.collection("drivers").create(new_driver_data);
+
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+        return;
+      }
+
+      // Disable the old driver
+      let old_driver_data = {
+        active: false,
+      };
+      try {
+        await pb.collection("drivers").update(driver_value, old_driver_data);
+
+        modalStore.close();
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
+</script>
+
+<Card
+  imgsrc={get_driver_headshot_template(data.graphics)}
+  imgid="headshot_preview"
+  width="w-full sm:w-auto"
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
+  imgonclick={(event: Event) => modalStore.close()}
+>
+  <div class="flex flex-col gap-2">
+    <!-- Driver select -->
+    {#await data.drivers then drivers}
+      <Dropdown
+        bind:value={driver_value}
+        options={driver_dropdown_options(drivers.filter((driver: Driver) => driver.active))}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Driver
+      </Dropdown>
+    {/await}
+
+    <!-- New team select -->
+    {#await data.teams then teams}
+      <Dropdown
+        bind:value={team_value}
+        options={team_dropdown_options(teams)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        New Team
+      </Dropdown>
+    {/await}
+
+    <!-- Save/Delete buttons -->
+    <div class="flex justify-end gap-2">
+      <Button onclick={update_driver()} color="tertiary" {disabled} width="w-full">
+        Switch Team
+      </Button>
+    </div>
+  </div>
+</Card>

src/lib/components/index.ts

@@ -15,6 +15,7 @@ import RaceResultCard from "./cards/RaceResultCard.svelte";
 import SeasonPickCard from "./cards/SeasonPickCard.svelte";
 import SubstitutionCard from "./cards/SubstitutionCard.svelte";
 import TeamCard from "./cards/TeamCard.svelte";
+import TeamSwitchCard from "./cards/TeamSwitchCard.svelte";
 
 import type { DropdownOption } from "./form/Dropdown";
 import type { TableColumn } from "./Table";
@@ -48,6 +49,7 @@ export {
   SeasonPickCard,
   SubstitutionCard,
   TeamCard,
+  TeamSwitchCard,
 
   // Types
   type DropdownOption,

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
     RaceResultCard,
     SeasonPickCard,
     EMailIcon,
+    TeamSwitchCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
   import {
@@ -58,13 +59,14 @@
   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 },
     racePickCard: { ref: RacePickCard },
     raceResultCard: { ref: RaceResultCard },
     seasonPickCard: { ref: SeasonPickCard },
     substitutionCard: { ref: SubstitutionCard },
+    teamCard: { ref: TeamCard },
+    teamSwitchCard: { ref: TeamSwitchCard },
   };
 
   // Toast config

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

@@ -24,6 +24,17 @@
 
     modalStore.trigger(modalSettings);
   };
+  const teamswitch_handler = async (event: Event, id?: string) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamSwitchCard",
+      meta: {
+        data,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
 
   const drivers_columns: TableColumn[] = $derived([
     {
@@ -55,10 +66,13 @@
   <title>Formula 11 - Drivers</title>
 </svelte:head>
 
-<div class="pb-2">
+<div class="flex gap-2 pb-2">
   <Button width="w-full" color="tertiary" onclick={driver_handler} shadow>
     <span class="font-bold">Create New Driver</span>
   </Button>
+  <Button width="w-full" color="secondary" onclick={teamswitch_handler} shadow>
+    <span class="font-bold">Switch Driver Team</span>
+  </Button>
 </div>
 {#await data.drivers then drivers}
   <Table