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

Lib: Fix promise handling and reactive placeholder/chips in RaceResultCard
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 49s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-06 23:10:23 +01:00
parent bea45b8339
commit 705b66f638
1 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,29 +31,28 @@
} }
let races: Race[] | undefined = $state(undefined); let races: Race[] | undefined = $state(undefined);
data.races.then((r: Race[]) => { data.races.then((r: Race[]) => (races = r));
races = r;
});
const required: boolean = $derived(!result); let drivers: Driver[] | undefined = $state(undefined);
const disabled: boolean = $derived(!data.admin); data.drivers.then((d: Driver[]) => (drivers = d));
// Constants
const labelwidth: string = "70px"; 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 ?? ""); 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<Race | undefined> = $derived.by(async () =>
// get_by_value(await data.races, "id", race_select_value),
// );
let currentrace: Race | undefined = $derived( let currentrace: Race | undefined = $derived(
races ? (get_by_value(races, "id", race_select_value) ?? undefined) : undefined, get_by_value<Race>(races ?? [], "id", race_select_value) ?? undefined,
); );
$effect(() => { let pxxs_placeholder: string = $derived(
console.log("Updated currentrace", currentrace); currentrace
}); ? `Select P${(currentrace.pxx ?? -10) - 3} to P${(currentrace.pxx ?? -10) + 3}...`
: `Select race first...`,
);
let pxxs_input: string = $state(""); let pxxs_input: string = $state("");
let pxxs_chips: string[] = $state([]); let pxxs_chips: string[] = $state([]);
@ -61,12 +60,24 @@
let dnfs_input: string = $state(""); let dnfs_input: string = $state("");
let dnfs_chips: 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 // This is the actual data that gets sent through the form
let pxxs_ids: string[] = $state(result?.pxxs ?? []); let pxxs_ids: string[] = $state(result?.pxxs ?? []);
let dnfs_ids: string[] = $state(result?.dnfs ?? []); let dnfs_ids: string[] = $state(result?.dnfs ?? []);
const pxxs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () => let pxxs_options: AutocompleteOption<string>[] = $derived.by(() =>
(await data.drivers) (drivers ?? [])
.filter((driver: Driver) => { .filter((driver: Driver) => {
// Filter out all drivers that are already selected // Filter out all drivers that are already selected
return !pxxs_ids.includes(driver.id); return !pxxs_ids.includes(driver.id);
@ -81,8 +92,8 @@
}), }),
); );
const dnfs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () => let dnfs_options: AutocompleteOption<string>[] = $derived.by(() =>
(await data.drivers).map((driver: Driver) => { (drivers ?? []).map((driver: Driver) => {
return { return {
// NOTE: Because Skeleton displays the values inside the autocomplete input, // 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) // we have to supply the driver code twice and manage a list of ids manually (ugh)
@ -92,15 +103,21 @@
}), }),
); );
const pxxs_whitelist: Promise<string[]> = $derived.by(async () => let pxxs_whitelist: string[] = $derived.by(() =>
(await data.drivers).map((driver: Driver) => { (drivers ?? []).map((driver: Driver) => {
return driver.code; return driver.code;
}), }),
); );
const on_pxxs_chip_select = async ( // Event handlers
event: CustomEvent<AutocompleteOption<string>>, const on_race_select = (event: Event): void => {
): Promise<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<AutocompleteOption<string>>): void => {
if (disabled) return; if (disabled) return;
// Can only select 7 drivers // Can only select 7 drivers
@ -110,33 +127,26 @@
if (pxxs_chips.some((label: string) => label.endsWith(event.detail.value))) return; if (pxxs_chips.some((label: string) => label.endsWith(event.detail.value))) return;
// Manage labels that are displayed // Manage labels that are displayed
pxxs_chips.push( pxxs_chips.push(`P${(currentrace?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`);
`P${((await currentrace)?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`,
);
pxxs_input = ""; pxxs_input = "";
// Manage ids that are submitted via form // Manage ids that are submitted via form
const id: string = const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid";
get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
if (!pxxs_ids.includes(id)) { if (!pxxs_ids.includes(id)) {
pxxs_ids.push(id); pxxs_ids.push(id);
} }
}; };
const on_pxxs_chip_remove = async (event: CustomEvent): Promise<void> => { const on_pxxs_chip_remove = (event: CustomEvent): void => {
pxxs_ids.splice(event.detail.chipIndex, 1); pxxs_ids.splice(event.detail.chipIndex, 1);
pxxs_chips = await Promise.all( pxxs_chips = pxxs_chips.map(
pxxs_chips.map( (label: string, index: number) =>
async (label: string, index: number) => `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
`P${((await currentrace)?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
),
); );
}; };
const on_dnfs_chip_select = async ( const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
event: CustomEvent<AutocompleteOption<string>>,
): Promise<void> => {
if (disabled) return; if (disabled) return;
// Can only select a driver once // Can only select a driver once
@ -147,29 +157,15 @@
dnfs_input = ""; dnfs_input = "";
// Manage ids that are submitted via form // Manage ids that are submitted via form
const id: string = const id: string = get_by_value(drivers ?? [], "code", event.detail.value)?.id ?? "Invalid";
get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
if (!dnfs_ids.includes(id)) { if (!dnfs_ids.includes(id)) {
dnfs_ids.push(id); dnfs_ids.push(id);
} }
}; };
const on_dnfs_chip_remove = async (event: CustomEvent): Promise<void> => { const on_dnfs_chip_remove = (event: CustomEvent): void => {
dnfs_ids.splice(event.detail.chipIndex, 1); 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") ?? [];
});
</script> </script>
<Card width="w-full sm:w-[512px]"> <Card width="w-full sm:w-[512px]">
@ -194,6 +190,7 @@
name="race" name="race"
bind:value={race_select_value} bind:value={race_select_value}
options={race_dropdown_options(races)} options={race_dropdown_options(races)}
onchange={on_race_select}
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
@ -204,52 +201,44 @@
<div class="mt-2 flex flex-col gap-2"> <div class="mt-2 flex flex-col gap-2">
<!-- PXXs autocomplete chips --> <!-- PXXs autocomplete chips -->
{#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]} <InputChip
<InputChip bind:input={pxxs_input}
bind:input={pxxs_input} bind:value={pxxs_chips}
bind:value={pxxs_chips} whitelist={pxxs_whitelist}
{whitelist} allowUpperCase
allowUpperCase placeholder={pxxs_placeholder}
placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..." name="pxxs_codes"
name="pxxs_codes" {disabled}
{disabled} {required}
{required} on:remove={on_pxxs_chip_remove}
on:remove={on_pxxs_chip_remove} />
/>
{/await}
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1"> <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
{#await pxxs_options then options} <Autocomplete
<Autocomplete bind:input={pxxs_input}
bind:input={pxxs_input} options={pxxs_options}
{options} denylist={pxxs_chips}
denylist={pxxs_chips} on:selection={on_pxxs_chip_select}
on:selection={on_pxxs_chip_select} />
/>
{/await}
</div> </div>
<!-- DNFs autocomplete chips --> <!-- DNFs autocomplete chips -->
{#await pxxs_whitelist then whitelist} <InputChip
<InputChip bind:input={dnfs_input}
bind:input={dnfs_input} bind:value={dnfs_chips}
bind:value={dnfs_chips} whitelist={pxxs_whitelist}
{whitelist} allowUpperCase
allowUpperCase placeholder="Select DNFs..."
placeholder="Select DNFs..." name="dnfs_codes"
name="dnfs_codes" {disabled}
{disabled} on:remove={on_dnfs_chip_remove}
on:remove={on_dnfs_chip_remove} />
/>
{/await}
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1"> <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
{#await dnfs_options then options} <Autocomplete
<Autocomplete bind:input={dnfs_input}
bind:input={dnfs_input} options={dnfs_options}
{options} denylist={dnfs_chips}
denylist={dnfs_chips} on:selection={on_dnfs_chip_select}
on:selection={on_dnfs_chip_select} />
/>
{/await}
</div> </div>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->