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

Lib: Update promise handling in RacePickCard

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-06 23:10:05 +01:00
parent 76a5388e18
commit bea45b8339
1 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,6 @@
Substitution, Substitution,
} from "$lib/schema"; } from "$lib/schema";
import { get_by_value, get_driver_headshot_template } from "$lib/database"; import { get_by_value, get_driver_headshot_template } from "$lib/database";
import type { Action } from "svelte/action";
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton"; import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config"; import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { driver_dropdown_options } from "$lib/dropdown"; import { driver_dropdown_options } from "$lib/dropdown";
@ -43,37 +42,41 @@
let drivers: Driver[] | undefined = $state(undefined); let drivers: Driver[] | undefined = $state(undefined);
data.drivers.then((d: Driver[]) => (drivers = d)); data.drivers.then((d: Driver[]) => (drivers = d));
const required: boolean = $derived(!racepick); let substitutions: Substitution[] | undefined = $state(undefined);
const disabled: boolean = $derived(!data.admin); data.substitutions.then((s: Substitution[]) => (substitutions = s));
// Constants
const labelwidth: string = "60px"; const labelwidth: string = "60px";
const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => { // Reactive state
let required: boolean = $derived(!racepick);
let disabled: boolean = $derived(!data.admin);
let pxx_select_value: string = $state(racepick?.pxx ?? "");
let dnf_select_value: string = $state(racepick?.dnf ?? "");
let active_drivers_and_substitutes: Driver[] = $derived.by(() => {
if (!data.currentrace) return []; if (!data.currentrace) return [];
let drivers: Driver[] = await data.drivers; let active_and_substitutes: Driver[] = (drivers ?? []).filter(
let substitutions: Substitution[] = await data.substitutions; (driver: Driver) => driver.active,
);
let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active); (substitutions ?? [])
substitutions
.filter((substitution: Substitution) => substitution.race === data.currentrace?.id) .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
.forEach((substitution: Substitution) => { .forEach((substitution: Substitution) => {
const for_index = active_and_substitutes.findIndex( const for_index = active_and_substitutes.findIndex(
(driver: Driver) => driver.id === substitution.for, (driver: Driver) => driver.id === substitution.for,
); );
const sub_index = drivers.findIndex( const sub_index = (drivers ?? []).findIndex(
(driver: Driver) => driver.id === substitution.substitute, (driver: Driver) => driver.id === substitution.substitute,
); );
active_and_substitutes[for_index] = drivers[sub_index]; active_and_substitutes[for_index] = (drivers ?? [])[sub_index];
}); });
return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code)); return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
}); });
let pxx_select_value: string = $state(racepick?.pxx ?? "");
let dnf_select_value: string = $state(racepick?.dnf ?? "");
// Update preview // Update preview
$effect(() => { $effect(() => {
if (!drivers) return; if (!drivers) return;
@ -110,30 +113,28 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<!-- PXX select --> <!-- PXX select -->
{#await active_drivers_and_substitutes then pxx_drivers} <Dropdown
<Dropdown name="pxx"
name="pxx" bind:value={pxx_select_value}
bind:value={pxx_select_value} options={driver_dropdown_options(active_drivers_and_substitutes)}
options={driver_dropdown_options(pxx_drivers)} {labelwidth}
{labelwidth} {disabled}
{disabled} {required}
{required} >
> P{data.currentrace?.pxx ?? "XX"}
P{data.currentrace?.pxx ?? "XX"} </Dropdown>
</Dropdown>
<!-- DNF select --> <!-- DNF select -->
<Dropdown <Dropdown
name="dnf" name="dnf"
bind:value={dnf_select_value} bind:value={dnf_select_value}
options={driver_dropdown_options(pxx_drivers)} options={driver_dropdown_options(active_drivers_and_substitutes)}
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
DNF DNF
</Dropdown> </Dropdown>
{/await}
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">