Lib: Move dropdown options creation into library

src/lib/components/cards/DriverCard.svelte

@@ -6,14 +6,18 @@
     SlideToggle,
     type ModalStore,
   } from "@skeletonlabs/skeleton";
-  import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import { Button, Input, Card, Dropdown } from "$lib/components";
-  import type { Driver } from "$lib/schema";
+  import type { Driver, Team } from "$lib/schema";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+  import { team_dropdown_options } from "$lib/dropdown";
 
   interface DriverCardProps {
     /** The [Driver] object used to prefill values. */
     driver?: Driver | undefined;
 
+    /** The teams (for the dropdown options) */
+    teams: Team[];
+
     /** Disable all inputs if [true] */
     disable_inputs?: boolean;
 
@@ -28,20 +32,17 @@
     //       This also applies to the other card components...
     team_select_value: string;
 
-    /** The options this component's team select dropdown will display */
-    team_select_options: DropdownOption[];
-
     /** The value this component's active switch will bind to */
     active_value: boolean;
   }
 
   let {
     driver = undefined,
+    teams,
     disable_inputs = false,
     require_inputs = false,
     headshot_template = undefined,
     team_select_value,
-    team_select_options,
     active_value,
   }: DriverCardProps = $props();
 
@@ -51,8 +52,8 @@
 
     // Stuff thats required for the "update" card
     driver = meta.driver;
+    teams = meta.teams;
     team_select_value = meta.team_select_value;
-    team_select_options = meta.team_select_options;
     active_value = meta.active_value;
     disable_inputs = meta.disable_inputs;
 
@@ -116,7 +117,7 @@
       <Dropdown
         name="team"
         input_variable={team_select_value}
-        options={team_select_options}
+        options={team_dropdown_options(teams)}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}

src/lib/components/cards/RacePickCard.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
+  import { Card, Button, Dropdown } from "$lib/components";
   import type { Driver, Race, RacePick, User } from "$lib/schema";
   import { get_by_value } 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 } from "$lib/dropdown";
 
   interface RacePickCardProps {
     /** The [RacePick] object used to prefill values. */
@@ -30,9 +31,6 @@
 
     /** The value this component's dnf select dropdown will bind to */
     dnf_select_value: string;
-
-    /** The options this component's driver select dropdowns will display */
-    driver_select_options: DropdownOption[];
   }
 
   let {
@@ -44,7 +42,6 @@
     headshot_template = "",
     pxx_select_value,
     dnf_select_value,
-    driver_select_options,
   }: RacePickCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
@@ -60,7 +57,6 @@
     headshot_template = meta.headshot_template;
     pxx_select_value = meta.pxx_select_value;
     dnf_select_value = meta.dnf_select_value;
-    driver_select_options = meta.driver_select_options;
   }
 
   // This action is used on the <Dropdown> element.
@@ -111,7 +107,7 @@
         name="pxx"
         input_variable={pxx_select_value}
         action={register_pxx_preview_handler}
-        options={driver_select_options}
+        options={driver_dropdown_options(drivers)}
         labelwidth="60px"
         disabled={disable_inputs}
       >
@@ -122,7 +118,7 @@
       <Dropdown
         name="dnf"
         input_variable={dnf_select_value}
-        options={driver_select_options}
+        options={driver_dropdown_options(drivers)}
         labelwidth="60px"
         disabled={disable_inputs}
       >

src/lib/components/cards/RaceResultCard.svelte

@@ -6,10 +6,10 @@
     type AutocompleteOption,
     type ModalStore,
   } from "@skeletonlabs/skeleton";
-  import { Button, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import { Button, Card, Dropdown } from "$lib/components";
   import type { Driver, Race, RaceResult } from "$lib/schema";
   import { get_by_value } from "$lib/database";
-  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+  import { race_dropdown_options } from "$lib/dropdown";
 
   interface RaceResultCardProps {
     /** The [RaceResult] object used to prefill values. */
@@ -64,15 +64,6 @@
   const require_inputs2 = require_inputs;
 
   let race_select_value: string = currentrace?.id ?? "";
-  const race_select_options: DropdownOption[] = races2.map((race: Race) => {
-    return {
-      label: race.name,
-      value: race.id,
-      icon_url: race.pictogram_url,
-      icon_width: RACE_PICTOGRAM_WIDTH,
-      icon_height: RACE_PICTOGRAM_HEIGHT,
-    };
-  });
 
   let pxxs_input: string = $state("");
   let pxxs_chips: string[] = $state(
@@ -160,7 +151,7 @@
     <Dropdown
       name="race"
       input_variable={race_select_value}
-      options={race_select_options}
+      options={race_dropdown_options(races2)}
       labelwidth="70px"
       disabled={disable_inputs2}
       required={require_inputs2}

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
+  import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Substitution } from "$lib/schema";
+  import type { Driver, Race, Substitution } from "$lib/schema";
   import { get_by_value } 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";
 
   interface SubstitutionCardProps {
     /** The [Substitution] object used to prefill values. */
@@ -13,6 +14,8 @@
     /** The drivers (to display the headshot) */
     drivers: Driver[];
 
+    races: Race[];
+
     /** Disable all inputs if [true] */
     disable_inputs?: boolean;
 
@@ -30,25 +33,18 @@
 
     /** The value this component's race select dropdown will bind to */
     race_select_value: string;
-
-    /** The options this component's substitute/driver select dropdowns will display */
-    driver_select_options: DropdownOption[];
-
-    /** The options this component's race select dropdown will display */
-    race_select_options: DropdownOption[];
   }
 
   let {
     substitution = undefined,
     drivers,
+    races,
     disable_inputs = false,
     require_inputs = false,
     headshot_template = "",
     substitute_select_value,
     driver_select_value,
     race_select_value,
-    driver_select_options,
-    race_select_options,
   }: SubstitutionCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
@@ -58,12 +54,11 @@
     // Stuff thats required for the "update" card
     substitution = meta.substitution;
     drivers = meta.drivers;
+    races = meta.races;
     disable_inputs = meta.disable_inputs;
     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;
 
     // Stuff thats additionally required for the "create" card
     require_inputs = meta.require_inputs;
@@ -116,7 +111,7 @@
         name="substitute"
         input_variable={substitute_select_value}
         action={register_substitute_preview_handler}
-        options={driver_select_options}
+        options={driver_dropdown_options(drivers)}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
@@ -128,7 +123,7 @@
       <Dropdown
         name="for"
         input_variable={driver_select_value}
-        options={driver_select_options}
+        options={driver_dropdown_options(drivers)}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}
@@ -140,7 +135,7 @@
       <Dropdown
         name="race"
         input_variable={race_select_value}
-        options={race_select_options}
+        options={race_dropdown_options(races)}
         labelwidth="120px"
         disabled={disable_inputs}
         required={require_inputs}

src/lib/dropdown.ts

@@ -0,0 +1,79 @@
+import type { DropdownOption } from "$lib/components";
+import type { Driver, Race, Team } from "$lib/schema";
+import {
+  DRIVER_HEADSHOT_HEIGHT,
+  DRIVER_HEADSHOT_WIDTH,
+  RACE_PICTOGRAM_HEIGHT,
+  RACE_PICTOGRAM_WIDTH,
+  TEAM_BANNER_HEIGHT,
+  TEAM_BANNER_WIDTH,
+} from "$lib/config";
+
+let team_dropdown_opts: DropdownOption[] | null = null;
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ * Cached until page reload.
+ */
+export const team_dropdown_options = (teams: Team[]): DropdownOption[] => {
+  if (!team_dropdown_opts) {
+    console.log("team_dropdown_options");
+    team_dropdown_opts = teams.map((team: Team) => {
+      return {
+        label: team.name,
+        value: team.id,
+        icon_url: team.banner_url,
+        icon_width: TEAM_BANNER_WIDTH,
+        icon_height: TEAM_BANNER_HEIGHT,
+      };
+    });
+  }
+
+  return team_dropdown_opts;
+};
+
+let driver_dropdown_opts: DropdownOption[] | null = null;
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ * Cached until page reload.
+ */
+export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] => {
+  if (!driver_dropdown_opts) {
+    console.log("driver_dropdown_options");
+    driver_dropdown_opts = drivers.map((driver: Driver) => {
+      return {
+        label: driver.code,
+        value: driver.id,
+        icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
+      };
+    });
+  }
+
+  return driver_dropdown_opts;
+};
+
+let race_dropdown_opts: DropdownOption[] | null = null;
+
+/**
+ * Generates a list of [DropdownOptions] for a <Dropdown> component.
+ * Cached until page reload.
+ */
+export const race_dropdown_options = (races: Race[]): DropdownOption[] => {
+  if (!race_dropdown_opts) {
+    console.log("race_dropdown_options");
+    race_dropdown_opts = races.map((race: Race) => {
+      return {
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      };
+    });
+  }
+
+  return race_dropdown_opts;
+};

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Button, type DropdownOption, type TableColumn, Table } from "$lib/components";
+  import { Button, type TableColumn, Table } from "$lib/components";
-  import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
   import { get_by_value } from "$lib/database";
   import type { Driver, Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
@@ -19,18 +18,6 @@
   update_driver_team_select_values["create"] = "";
   update_driver_active_values["create"] = true;
 
-  // All options to create a <Dropdown> component for the teams
-  const team_dropdown_options: DropdownOption[] = [];
-  data.teams.forEach((team: Team) => {
-    team_dropdown_options.push({
-      label: team.name,
-      value: team.id,
-      icon_url: team.logo_url,
-      icon_width: TEAM_LOGO_WIDTH,
-      icon_height: TEAM_LOGO_HEIGHT,
-    });
-  });
-
   const drivers_columns: TableColumn[] = [
     {
       data_value_name: "code",
@@ -70,8 +57,8 @@
       component: "driverCard",
       meta: {
         driver: driver,
+        teams: data.teams,
         team_select_value: update_driver_team_select_values[driver.id],
-        team_select_options: team_dropdown_options,
         active_value: update_driver_active_values[driver.id],
         disable_inputs: !data.admin,
       },
@@ -85,8 +72,8 @@
       type: "component",
       component: "driverCard",
       meta: {
+        teams: data.teams,
         team_select_value: update_driver_team_select_values["create"],
-        team_select_options: team_dropdown_options,
         active_value: update_driver_active_values["create"],
         disable_inputs: !data.admin,
         require_inputs: true,

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

@@ -2,14 +2,8 @@
   import { get_by_value } from "$lib/database";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Driver, Race, Substitution } from "$lib/schema";
+  import type { Race, Substitution } from "$lib/schema";
   import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
-  import {
-    DRIVER_HEADSHOT_HEIGHT,
-    DRIVER_HEADSHOT_WIDTH,
-    RACE_PICTOGRAM_HEIGHT,
-    RACE_PICTOGRAM_WIDTH,
-  } from "$lib/config";
 
   let { data }: { data: PageData } = $props();
 
@@ -27,33 +21,6 @@
   update_substitution_for_select_values["create"] = "";
   update_substitution_race_select_values["create"] = "";
 
-  // TODO: Duplicated code in substitutions/+page.svelte
-  const driver_dropdown_options: DropdownOption[] = [];
-  data.drivers.then((drivers: Driver[]) =>
-    drivers.forEach((driver: Driver) => {
-      driver_dropdown_options.push({
-        label: driver.code,
-        value: driver.id,
-        icon_url: driver.headshot_url,
-        icon_width: DRIVER_HEADSHOT_WIDTH,
-        icon_height: DRIVER_HEADSHOT_HEIGHT,
-      });
-    }),
-  );
-
-  const race_dropdown_options: DropdownOption[] = [];
-  data.races.then((races: Race[]) =>
-    races.forEach((race: Race) => {
-      race_dropdown_options.push({
-        label: race.name,
-        value: race.id,
-        icon_url: race.pictogram_url,
-        icon_width: RACE_PICTOGRAM_WIDTH,
-        icon_height: RACE_PICTOGRAM_HEIGHT,
-      });
-    }),
-  );
-
   const substitutions_columns: TableColumn[] = [
     {
       data_value_name: "expand",
@@ -95,11 +62,10 @@
       meta: {
         substitution: substitution,
         drivers: await data.drivers,
+        races: await data.races,
         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,
       },
     };
@@ -113,12 +79,11 @@
       component: "substitutionCard",
       meta: {
         drivers: await data.drivers,
+        races: await data.races,
         substitute_select_value: update_substitution_substitute_select_values["create"],
         driver_select_value: update_substitution_for_select_values["create"],
         disable_inputs: !data.admin,
         race_select_value: update_substitution_race_select_values["create"],
-        driver_select_options: driver_dropdown_options,
-        race_select_options: race_dropdown_options,
         require_inputs: true,
         headshot_template:
           get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",

src/routes/racepicks/+page.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-  import {
+  import { ChequeredFlagIcon, Countdown, LazyImage, StopwatchIcon } from "$lib/components";
-    Button,
-    ChequeredFlagIcon,
-    Countdown,
-    LazyImage,
-    StopwatchIcon,
-    type DropdownOption,
-  } from "$lib/components";
   import {
     Accordion,
     AccordionItem,
@@ -42,18 +35,6 @@
   let pxx_select_value: string = $state(currentpick?.pxx ?? "");
   let dnf_select_value: string = $state(currentpick?.dnf ?? "");
 
-  // TODO: Duplicated code in cards/substitutioncard.svelte
-  const driver_dropdown_options: DropdownOption[] = [];
-  data.drivers.forEach((driver: Driver) => {
-    driver_dropdown_options.push({
-      label: driver.code,
-      value: driver.id,
-      icon_url: driver.headshot_url,
-      icon_width: DRIVER_HEADSHOT_WIDTH,
-      icon_height: DRIVER_HEADSHOT_HEIGHT,
-    });
-  });
-
   const modalStore: ModalStore = getModalStore();
   const create_guess_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
@@ -69,7 +50,6 @@
           get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
         pxx_select_value: pxx_select_value,
         dnf_select_value: dnf_select_value,
-        driver_select_options: driver_dropdown_options,
       },
     };