christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Lib: Move dropdown options creation into library

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-03 19:35:53 +01:00
parent 49c08eeead
commit 6dd3f24d32
8 changed files with 112 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/components/cards/DriverCard.svelte
View File

@ -6,14 +6,18 @@
SlideToggle,
type ModalStore,
} from "@skeletonlabs/skeleton";
import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
import type { Driver } from "$lib/schema";
import { Button, Input, Card, Dropdown } from "$lib/components";
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}

12
src/lib/components/cards/RacePickCard.svelte
View File

@ -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}
>

15
src/lib/components/cards/RaceResultCard.svelte
View File

@ -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}

25
src/lib/components/cards/SubstitutionCard.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts">
import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
import type { Driver, Substitution } from "$lib/schema";
import { Card, Button, Dropdown } from "$lib/components";
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}

79
src/lib/dropdown.ts Normal file
View File

@ -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;
};

19
src/routes/data/season/drivers/+page.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { Button, type DropdownOption, type TableColumn, Table } from "$lib/components";
import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
import { Button, type TableColumn, Table } from "$lib/components";
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,

41
src/routes/data/season/substitutions/+page.svelte
View File

@ -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",

22
src/routes/racepicks/+page.svelte
View File

@ -1,12 +1,5 @@
<script lang="ts">
import {
Button,
ChequeredFlagIcon,
Countdown,
LazyImage,
StopwatchIcon,
type DropdownOption,
} from "$lib/components";
import { ChequeredFlagIcon, Countdown, LazyImage, StopwatchIcon } 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,
},
};