From 705b66f6389fda4134d2d1607d00766c8f4ce968 Mon Sep 17 00:00:00 2001 From: Christoph Urlacher Date: Thu, 6 Feb 2025 23:10:23 +0100 Subject: [PATCH] Lib: Fix promise handling and reactive placeholder/chips in RaceResultCard --- .../components/cards/RaceResultCard.svelte | 179 ++++++++---------- 1 file changed, 84 insertions(+), 95 deletions(-) diff --git a/src/lib/components/cards/RaceResultCard.svelte b/src/lib/components/cards/RaceResultCard.svelte index 0d453e3..ddce45f 100644 --- a/src/lib/components/cards/RaceResultCard.svelte +++ b/src/lib/components/cards/RaceResultCard.svelte @@ -31,29 +31,28 @@ } let races: Race[] | undefined = $state(undefined); - data.races.then((r: Race[]) => { - races = r; - }); + data.races.then((r: Race[]) => (races = r)); - const required: boolean = $derived(!result); - const disabled: boolean = $derived(!data.admin); + let drivers: Driver[] | undefined = $state(undefined); + data.drivers.then((d: Driver[]) => (drivers = d)); + + // Constants const labelwidth: string = "70px"; + // Reactive state + let required: boolean = $derived(!result); + let disabled: boolean = $derived(!data.admin); let race_select_value: string = $state(result?.race ?? ""); - // TODO: Currentrace needs to be updated once a race is selected - // This way it doesn't update the placeholder (or the chips)... - // const currentrace: Promise = $derived.by(async () => - // get_by_value(await data.races, "id", race_select_value), - // ); - let currentrace: Race | undefined = $derived( - races ? (get_by_value(races, "id", race_select_value) ?? undefined) : undefined, + get_by_value(races ?? [], "id", race_select_value) ?? undefined, ); - $effect(() => { - console.log("Updated currentrace", currentrace); - }); + let pxxs_placeholder: string = $derived( + currentrace + ? `Select P${(currentrace.pxx ?? -10) - 3} to P${(currentrace.pxx ?? -10) + 3}...` + : `Select race first...`, + ); let pxxs_input: string = $state(""); let pxxs_chips: string[] = $state([]); @@ -61,12 +60,24 @@ let dnfs_input: string = $state(""); let dnfs_chips: string[] = $state([]); + // Set the pxxs/dnfs states once the drivers are loaded + data.drivers.then(async (drivers: Driver[]) => { + pxxs_chips = + result?.pxxs.map( + (id: string, index: number) => + `P${(currentrace?.pxx ?? -10) + index - 3}: ${get_by_value(drivers, "id", id)?.code ?? "Invalid"}`, + ) ?? []; + + dnfs_chips = + result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? []; + }); + // This is the actual data that gets sent through the form let pxxs_ids: string[] = $state(result?.pxxs ?? []); let dnfs_ids: string[] = $state(result?.dnfs ?? []); - const pxxs_options: Promise[]> = $derived.by(async () => - (await data.drivers) + let pxxs_options: AutocompleteOption[] = $derived.by(() => + (drivers ?? []) .filter((driver: Driver) => { // Filter out all drivers that are already selected return !pxxs_ids.includes(driver.id); @@ -81,8 +92,8 @@ }), ); - const dnfs_options: Promise[]> = $derived.by(async () => - (await data.drivers).map((driver: Driver) => { + let dnfs_options: AutocompleteOption[] = $derived.by(() => + (drivers ?? []).map((driver: Driver) => { return { // NOTE: Because Skeleton displays the values inside the autocomplete input, // we have to supply the driver code twice and manage a list of ids manually (ugh) @@ -92,15 +103,21 @@ }), ); - const pxxs_whitelist: Promise = $derived.by(async () => - (await data.drivers).map((driver: Driver) => { + let pxxs_whitelist: string[] = $derived.by(() => + (drivers ?? []).map((driver: Driver) => { return driver.code; }), ); - const on_pxxs_chip_select = async ( - event: CustomEvent>, - ): Promise => { + // Event handlers + const on_race_select = (event: Event): void => { + pxxs_chips = pxxs_chips.map( + (label: string, index: number) => + `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`, + ); + }; + + const on_pxxs_chip_select = (event: CustomEvent>): void => { if (disabled) return; // Can only select 7 drivers @@ -110,33 +127,26 @@ if (pxxs_chips.some((label: string) => label.endsWith(event.detail.value))) return; // Manage labels that are displayed - pxxs_chips.push( - `P${((await currentrace)?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`, - ); + pxxs_chips.push(`P${(currentrace?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`); pxxs_input = ""; // Manage ids that are submitted via form - const id: string = - get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid"; + const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid"; if (!pxxs_ids.includes(id)) { pxxs_ids.push(id); } }; - const on_pxxs_chip_remove = async (event: CustomEvent): Promise => { + const on_pxxs_chip_remove = (event: CustomEvent): void => { pxxs_ids.splice(event.detail.chipIndex, 1); - pxxs_chips = await Promise.all( - pxxs_chips.map( - async (label: string, index: number) => - `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`, - ), + pxxs_chips = pxxs_chips.map( + (label: string, index: number) => + `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`, ); }; - const on_dnfs_chip_select = async ( - event: CustomEvent>, - ): Promise => { + const on_dnfs_chip_select = (event: CustomEvent>): void => { if (disabled) return; // Can only select a driver once @@ -147,29 +157,15 @@ dnfs_input = ""; // Manage ids that are submitted via form - const id: string = - get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid"; + const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid"; if (!dnfs_ids.includes(id)) { dnfs_ids.push(id); } }; - const on_dnfs_chip_remove = async (event: CustomEvent): Promise => { + const on_dnfs_chip_remove = (event: CustomEvent): void => { dnfs_ids.splice(event.detail.chipIndex, 1); }; - - // Set the pxxs/dnfs states once the drivers are loaded - data.drivers.then(async (drivers: Driver[]) => { - pxxs_chips = await Promise.all( - result?.pxxs.map( - async (id: string, index: number) => - `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${get_by_value(drivers, "id", id)?.code ?? "Invalid"}`, - ) ?? [], - ); - - dnfs_chips = - result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? []; - }); @@ -194,6 +190,7 @@ name="race" bind:value={race_select_value} options={race_dropdown_options(races)} + onchange={on_race_select} {labelwidth} {disabled} {required} @@ -204,52 +201,44 @@
- {#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]} - - {/await} +
- {#await pxxs_options then options} - - {/await} +
- {#await pxxs_whitelist then whitelist} - - {/await} +
- {#await dnfs_options then options} - - {/await} +