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

Lib: Simplify 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-05 21:56:41 +01:00
parent 6947eeae3f
commit 178adef327
2 changed files with 156 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,96 +7,69 @@
type ModalStore, type ModalStore,
} from "@skeletonlabs/skeleton"; } from "@skeletonlabs/skeleton";
import { Button, Card, Dropdown } from "$lib/components"; import { Button, Card, Dropdown } from "$lib/components";
import type { Driver, Race, RaceResult } from "$lib/schema"; import type { Driver, Race, RaceResult, SkeletonData } from "$lib/schema";
import { get_by_value } from "$lib/database"; import { get_by_value } from "$lib/database";
import { race_dropdown_options } from "$lib/dropdown"; import { race_dropdown_options } from "$lib/dropdown";
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
interface RaceResultCardProps { interface RaceResultCardProps {
/** Data passed from the page context */
data: SkeletonData & { results: RaceResult[] };
/** The [RaceResult] object used to prefill values. */ /** The [RaceResult] object used to prefill values. */
result?: RaceResult; result?: RaceResult;
/** The list of [Drivers] for the driver selection */
drivers: Driver[];
/** The list of [Races] for the race selection + PXX display */
races: Race[];
/** Disable all inputs if [true] */
disable_inputs?: boolean;
/** Require all inputs if [true] */
require_inputs?: boolean;
} }
let { let { data, result = undefined }: RaceResultCardProps = $props();
result = undefined,
drivers,
races,
disable_inputs = false,
require_inputs = false,
}: RaceResultCardProps = $props();
// TODO: This does not work at all. Why does it work for other cards???
// Everything exists here, but in the markup it is undefined???
const modalStore: ModalStore = getModalStore(); const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) { if ($modalStore[0].meta) {
const meta = $modalStore[0].meta; const meta = $modalStore[0].meta;
// Stuff thats required for the "update" card data = meta.data;
disable_inputs = meta.disable_inputs;
drivers = meta.drivers;
races = meta.races;
result = meta.result; result = meta.result;
// Stuff thats additionally required for the "create" card
require_inputs = meta.require_inputs;
} }
const currentrace: Race | undefined = get_by_value(races, "id", result?.race ?? "Invalid"); const required: boolean = $derived(!result);
const disabled: boolean = $derived(!data.admin);
const labelwidth: string = "70px";
const currentrace: Promise<Race | undefined> = $derived.by(async () =>
get_by_value(await data.races, "id", result?.race ?? "Invalid"),
);
// TODO: I have no fucking idea why this solves things... const pxxs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () =>
// Without this, the original values passed through the modalStore (await data.drivers).map((driver: Driver) => {
// are undefined within the markup, but not within the <script>... return {
const disable_inputs2 = disable_inputs; // NOTE: Because Skeleton displays the values inside the autocomplete input,
const drivers2 = drivers; // we have to supply the driver code twice and manage a list of ids manually (ugh)
const races2 = races; label: driver.code,
const result2 = result; value: driver.code,
const require_inputs2 = require_inputs; };
}),
);
let race_select_value: string = currentrace?.id ?? ""; const pxxs_whitelist: Promise<string[]> = $derived.by(async () =>
(await data.drivers).map((driver: Driver) => {
return driver.code;
}),
);
let race_select_value: string = $state(result?.race ?? "");
let pxxs_input: string = $state(""); let pxxs_input: string = $state("");
let pxxs_chips: string[] = $state( let pxxs_chips: string[] = $state([]);
result2?.pxxs.map(
(id: string, index: number) =>
`P${(currentrace?.pxx ?? -10) + index - 3}: ${get_by_value(drivers2, "id", id)?.code ?? "Invalid"}`,
) ?? [],
);
let dnfs_input: string = $state(""); let dnfs_input: string = $state("");
let dnfs_chips: string[] = $state( let dnfs_chips: string[] = $state([]);
result2?.dnfs.map((id: string) => get_by_value(drivers2, "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(result2?.pxxs ?? []); let pxxs_ids: string[] = $state(result?.pxxs ?? []);
let dnfs_ids: string[] = $state(result2?.dnfs ?? []); let dnfs_ids: string[] = $state(result?.dnfs ?? []);
const pxxs_options: AutocompleteOption<string>[] = drivers2.map((driver: Driver) => { const on_pxxs_chip_select = async (
return { event: CustomEvent<AutocompleteOption<string>>,
// NOTE: Because Skeleton displays the values inside the autocomplete input, ): Promise<void> => {
// we have to supply the driver code twice and manage a list of ids manually (ugh) if (disabled) return;
label: driver.code,
value: driver.code,
};
});
const pxxs_whitelist: string[] = drivers2.map((driver: Driver) => {
return driver.code;
});
const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
if (disable_inputs2) return;
// Can only select 7 drivers // Can only select 7 drivers
if (pxxs_chips.length >= 7) return; if (pxxs_chips.length >= 7) return;
@ -105,27 +78,34 @@
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(`P${(currentrace?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`); pxxs_chips.push(
`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 = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid"; const id: string =
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 = (event: CustomEvent): void => { const on_pxxs_chip_remove = async (event: CustomEvent): Promise<void> => {
pxxs_ids.splice(event.detail.chipIndex, 1); pxxs_ids.splice(event.detail.chipIndex, 1);
pxxs_chips = pxxs_chips.map( pxxs_chips = await Promise.all(
(label: string, index: number) => pxxs_chips.map(
`P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`, async (label: string, index: number) =>
`P${((await currentrace)?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
),
); );
}; };
const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => { const on_dnfs_chip_select = async (
if (disable_inputs2) return; event: CustomEvent<AutocompleteOption<string>>,
): Promise<void> => {
if (disabled) return;
// Can only select a driver once // Can only select a driver once
if (dnfs_chips.includes(event.detail.value)) return; if (dnfs_chips.includes(event.detail.value)) return;
@ -135,118 +115,135 @@
dnfs_input = ""; dnfs_input = "";
// Manage ids that are submitted via form // Manage ids that are submitted via form
const id: string = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid"; const id: string =
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 = (event: CustomEvent): void => { const on_dnfs_chip_remove = async (event: CustomEvent): Promise<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]">
<form method="POST" enctype="multipart/form-data" use:enhance> <form method="POST" enctype="multipart/form-data" use:enhance onsubmit={() => modalStore.close()}>
<!-- This is also disabled, because the ID should only be --> <!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs --> <!-- "leaked" to users that are allowed to use the inputs -->
{#if result2 && !disable_inputs2} {#if result && !disabled}
<input name="id" type="hidden" value={result2.id} /> <input name="id" type="hidden" value={result.id} />
{/if} {/if}
<!-- Send the input chips ids --> <!-- Send the input chips ids -->
{#each pxxs_ids as pxxs_id} {#each pxxs_ids as pxxs_id}
<input name="pxxs" type="hidden" disabled={disable_inputs2} value={pxxs_id} /> <input name="pxxs" type="hidden" {disabled} value={pxxs_id} />
{/each} {/each}
{#each dnfs_ids as dnfs_id} {#each dnfs_ids as dnfs_id}
<input name="dnfs" type="hidden" disabled={disable_inputs2} value={dnfs_id} /> <input name="dnfs" type="hidden" {disabled} value={dnfs_id} />
{/each} {/each}
<!-- Race select input --> <!-- Race select input -->
<Dropdown {#await data.races then races}
name="race" <Dropdown
input_variable={race_select_value} name="race"
options={race_dropdown_options(races2)} input_variable={race_select_value}
labelwidth="70px" options={race_dropdown_options(races)}
disabled={disable_inputs2} {labelwidth}
required={require_inputs2} {disabled}
> {required}
Race >
</Dropdown> Race
</Dropdown>
{/await}
<div class="mt-2 flex flex-col gap-2"> <div class="mt-2 flex flex-col gap-2">
<!-- PXXs autocomplete chips --> <!-- PXXs autocomplete chips -->
<InputChip {#await currentrace then current}
bind:input={pxxs_input} {#await pxxs_whitelist then whitelist}
bind:value={pxxs_chips} <InputChip
whitelist={pxxs_whitelist} bind:input={pxxs_input}
allowUpperCase bind:value={pxxs_chips}
placeholder="Select P{(currentrace?.pxx ?? -10) - 3} to P{(currentrace?.pxx ?? -10) + 3}..." {whitelist}
name="pxxs_codes" allowUpperCase
disabled={disable_inputs2} placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..."
required={require_inputs2} name="pxxs_codes"
on:remove={on_pxxs_chip_remove} {disabled}
/> {required}
on:remove={on_pxxs_chip_remove}
/>
{/await}
{/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">
<Autocomplete {#await pxxs_options then options}
bind:input={pxxs_input} <Autocomplete
options={pxxs_options} bind:input={pxxs_input}
denylist={pxxs_chips} {options}
on:selection={on_pxxs_chip_select} denylist={pxxs_chips}
/> on:selection={on_pxxs_chip_select}
/>
{/await}
</div> </div>
<!-- DNFs autocomplete chips --> <!-- DNFs autocomplete chips -->
<InputChip {#await pxxs_whitelist then whitelist}
bind:input={dnfs_input} <InputChip
bind:value={dnfs_chips}
whitelist={pxxs_whitelist}
allowUpperCase
placeholder="Select DNFs..."
name="dnfs_codes"
disabled={disable_inputs2}
on:remove={on_dnfs_chip_remove}
/>
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
<Autocomplete
bind:input={dnfs_input} bind:input={dnfs_input}
options={pxxs_options} bind:value={dnfs_chips}
denylist={dnfs_chips} {whitelist}
on:selection={on_dnfs_chip_select} allowUpperCase
placeholder="Select DNFs..."
name="dnfs_codes"
{disabled}
on:remove={on_dnfs_chip_remove}
/> />
{/await}
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
{#await pxxs_options then options}
<Autocomplete
bind:input={dnfs_input}
{options}
denylist={dnfs_chips}
on:selection={on_dnfs_chip_select}
/>
{/await}
</div> </div>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex items-center justify-end gap-2"> <div class="flex items-center justify-end gap-2">
{#if result2} {#if result}
<Button <Button
formaction="?/update_raceresult" formaction="?/update_raceresult"
color="secondary" color="secondary"
disabled={disable_inputs2} {disabled}
submit submit
width="w-1/2" width="w-1/2"
onclick={() => modalStore.close()}
> >
Save Save
</Button> </Button>
<Button <Button formaction="?/delete_raceresult" color="primary" {disabled} submit width="w-1/2">
color="primary"
submit
disabled={disable_inputs2}
formaction="?/delete_raceresult"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete Delete
</Button> </Button>
{:else} {:else}
<Button <Button
formaction="?/create_raceresult" formaction="?/create_raceresult"
color="tertiary" color="tertiary"
{disabled}
submit submit
width="w-full" width="w-full"
disabled={disable_inputs2}
onclick={() => modalStore.close()}
> >
Create Result Create Result
</Button> </Button>

60
src/routes/data/raceresults/+page.svelte
View File

@ -4,10 +4,30 @@
import { Button, Table, type TableColumn } from "$lib/components"; import { Button, Table, type TableColumn } from "$lib/components";
import { get_by_value } from "$lib/database"; import { get_by_value } from "$lib/database";
import { PXX_COLORS } from "$lib/config"; import { PXX_COLORS } from "$lib/config";
import type { RaceResult } from "$lib/schema";
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
const results_columns: TableColumn[] = [ const modalStore: ModalStore = getModalStore();
const result_handler = async (event: Event, id?: string) => {
const result: RaceResult | undefined = get_by_value(data.results, "id", id ?? "Invalid");
if (id && !result) return;
const modalSettings: ModalSettings = {
type: "component",
component: "raceResultCard",
meta: {
data,
result,
},
};
modalStore.trigger(modalSettings);
};
const results_columns: TableColumn[] = $derived([
{ {
data_value_name: "race", data_value_name: "race",
label: "Step", label: "Step",
@ -58,44 +78,12 @@
return dnfs_codes.join(""); return dnfs_codes.join("");
}, },
}, },
]; ]);
const modalStore: ModalStore = getModalStore();
const results_handler = async (event: Event, id: string) => {
const modalSettings: ModalSettings = {
type: "component",
component: "raceResultCard",
meta: {
disable_inputs: !data.admin,
drivers: await data.drivers,
races: await data.races,
result: get_by_value(data.results, "id", id),
},
};
modalStore.trigger(modalSettings);
};
const create_result_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "raceResultCard",
meta: {
disable_inputs: !data.admin,
drivers: await data.drivers,
races: await data.races,
require_inputs: true,
},
};
modalStore.trigger(modalSettings);
};
</script> </script>
<div class="pb-2"> <div class="pb-2">
<Button width="w-full" color="tertiary" onclick={create_result_handler} shadow> <Button width="w-full" color="tertiary" onclick={result_handler} shadow>
<span class="font-bold">Create Race Result</span> <span class="font-bold">Create Race Result</span>
</Button> </Button>
</div> </div>
<Table data={data.results} columns={results_columns} handler={results_handler} /> <Table data={data.results} columns={results_columns} handler={result_handler} />