Racepicks: Only allow picking active drivers and apply substitutions

src/lib/components/cards/SubstitutionCard.svelte

@@ -47,6 +47,12 @@
     race_select_value,
   }: SubstitutionCardProps = $props();
 
+  const active_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => driver.active);
+
+  const inactive_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => !driver.active);
+
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
@@ -111,7 +117,7 @@
         name="substitute"
         input_variable={substitute_select_value}
         action={register_substitute_preview_handler}
-        options={driver_dropdown_options(drivers)}
+        options={driver_dropdown_options(inactive_drivers(drivers))}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
@@ -123,7 +129,7 @@
       <Dropdown
         name="for"
         input_variable={driver_select_value}
-        options={driver_dropdown_options(drivers)}
+        options={driver_dropdown_options(active_drivers(drivers))}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}

src/lib/dropdown.ts

@@ -32,27 +32,20 @@ export const team_dropdown_options = (teams: Team[]): DropdownOption[] => {
   return team_dropdown_opts;
 };
 
-let driver_dropdown_opts: DropdownOption[] | null = null;
-
 /**
  * Generates a list of [DropdownOptions] for a <Dropdown> component.
- * Cached until page reload.
+ * Not cached, because drivers are often filtered by active/inactive.
  */
 export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] => {
-  if (!driver_dropdown_opts) {
+  return drivers.map((driver: Driver) => {
-    console.log("driver_dropdown_options");
+    return {
-    driver_dropdown_opts = drivers.map((driver: Driver) => {
+      label: driver.code,
-      return {
+      value: driver.id,
-        label: driver.code,
+      icon_url: driver.headshot_url,
-        value: driver.id,
+      icon_width: DRIVER_HEADSHOT_WIDTH,
-        icon_url: driver.headshot_url,
+      icon_height: DRIVER_HEADSHOT_HEIGHT,
-        icon_width: DRIVER_HEADSHOT_WIDTH,
+    };
-        icon_height: DRIVER_HEADSHOT_HEIGHT,
+  });
-      };
-    });
-  }
-
-  return driver_dropdown_opts;
 };
 
 let race_dropdown_opts: DropdownOption[] | null = null;

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

@@ -2,7 +2,7 @@
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Race, Substitution } from "$lib/schema";
+  import type { Driver, Race, Substitution } from "$lib/schema";
   import { Button, Table, type TableColumn } from "$lib/components";
 
   let { data }: { data: PageData } = $props();

src/routes/racepicks/+page.svelte

@@ -19,7 +19,7 @@
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
   } from "$lib/config";
-  import type { CurrentPickedUser, RacePick } from "$lib/schema";
+  import type { CurrentPickedUser, Driver, RacePick, Substitution } from "$lib/schema";
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import { format } from "date-fns";
 
@@ -35,6 +35,28 @@
   let pxx_select_value: string = $state(currentpick?.pxx ?? "");
   let dnf_select_value: string = $state(currentpick?.dnf ?? "");
 
+  const active_drivers_and_substitutes = (
+    drivers: Driver[],
+    substitutions: Substitution[],
+  ): Driver[] => {
+    let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
+
+    substitutions
+      .filter((substitution: Substitution) => substitution.race === currentpick.race)
+      .forEach((substitution: Substitution) => {
+        const for_index = active_and_substitutes.findIndex(
+          (driver: Driver) => driver.id === substitution.for,
+        );
+        const sub_index = drivers.findIndex(
+          (driver: Driver) => driver.id === substitution.substitute,
+        );
+
+        active_and_substitutes[for_index] = drivers[sub_index];
+      });
+
+    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
+  };
+
   const modalStore: ModalStore = getModalStore();
   const create_guess_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
@@ -44,7 +66,7 @@
         racepick: currentpick,
         currentrace: data.currentrace,
         user: data.user,
-        drivers: await data.drivers,
+        drivers: active_drivers_and_substitutes(await data.drivers, await data.substitutions),
         disable_inputs: false, // TODO: Datelock
         headshot_template: get_driver_headshot_template(await data.graphics),
         pxx_select_value: pxx_select_value,