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

Lib: Simplify RaceCard

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-05 02:11:02 +01:00
parent 2a51c76e2f
commit 042cb42e65
2 changed files with 189 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/lib/components/cards/RaceCard.svelte
View File

@ -6,214 +6,193 @@
import { format } from "date-fns"; import { format } from "date-fns";
import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config"; import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
import { get_race_pictogram_template } from "$lib/database";
interface RaceCardProps { interface RaceCardProps {
/** Data passed from the page context */
data: any;
/** The [Race] object used to prefill values. */ /** The [Race] object used to prefill values. */
race?: Race | undefined; race?: Race;
/** Disable all inputs if [true] */
disable_inputs?: boolean;
/** Require all inputs if [true] */
require_inputs?: boolean;
/** The [src] of the race pictogram template preview */
pictogram_template?: string;
} }
let { let { data, race = undefined }: RaceCardProps = $props();
race = undefined,
disable_inputs = false,
require_inputs = false,
pictogram_template = "",
}: RaceCardProps = $props();
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;
race = meta.race; race = meta.race;
disable_inputs = meta.disable_inputs;
// Stuff thats additionally required for the "create" card
require_inputs = meta.require_inputs;
pictogram_template = meta.pictogram_template;
} }
const clear_sprint = () => {
(document.getElementById("sqdate") as HTMLInputElement).value = "";
(document.getElementById("sdate") as HTMLInputElement).value = "";
};
const required: boolean = $derived(!race);
const disabled: boolean = $derived(!data.admin);
const labelwidth = "80px";
// Dates have to be formatted to datetime-local format // Dates have to be formatted to datetime-local format
const dateformat: string = "yyyy-MM-dd'T'HH:mm"; const dateformat: string = "yyyy-MM-dd'T'HH:mm";
const sprintqualidate: string | undefined = const sprintqualidate: string | undefined = $derived(
race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined; race?.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined,
const sprintdate: string | undefined = );
race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined; const sprintdate: string | undefined = $derived(
const qualidate: string | undefined = race race?.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined,
? format(new Date(race.qualidate), dateformat) );
: undefined; const qualidate: string | undefined = $derived(
const racedate: string | undefined = race race ? format(new Date(race.qualidate), dateformat) : undefined,
? format(new Date(race.racedate), dateformat) );
: undefined; const racedate: string | undefined = $derived(
race ? format(new Date(race.racedate), dateformat) : undefined,
const clear_sprint = () => { );
const sprintquali: HTMLInputElement = document.getElementById(
`race_sprintqualidate_${race?.id ?? "create"}`,
) as HTMLInputElement;
const sprint: HTMLInputElement = document.getElementById(
`race_sprintdate_${race?.id ?? "create"}`,
) as HTMLInputElement;
sprintquali.value = "";
sprint.value = "";
};
const labelwidth = "80px";
</script> </script>
<Card {#await data.graphics then graphics}
imgsrc={race?.pictogram_url ?? pictogram_template} <Card
imgid="update_race_pictogram_preview_{race?.id ?? 'create'}" imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)}
width="w-full sm:w-auto" imgid="pictogram_preview"
imgwidth={RACE_PICTOGRAM_WIDTH} width="w-full sm:w-auto"
imgheight={RACE_PICTOGRAM_HEIGHT} imgwidth={RACE_PICTOGRAM_WIDTH}
imgonclick={(event: Event) => modalStore.close()} imgheight={RACE_PICTOGRAM_HEIGHT}
> imgonclick={(event: Event) => modalStore.close()}
<form method="POST" enctype="multipart/form-data" use:enhance> >
<!-- This is also disabled, because the ID should only be --> <form
<!-- "leaked" to users that are allowed to use the inputs --> method="POST"
{#if race && !disable_inputs} enctype="multipart/form-data"
<input name="id" type="hidden" value={race.id} /> use:enhance
{/if} onsubmit={() => modalStore.close()}
>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if race && !disabled}
<input name="id" type="hidden" value={race.id} />
{/if}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<!-- Driver name input --> <!-- Driver name input -->
<Input <Input
id="race_name_{race?.id ?? 'create'}" name="name"
name="name" value={race?.name ?? ""}
value={race?.name ?? ""} autocomplete="off"
autocomplete="off" {labelwidth}
{labelwidth} {disabled}
disabled={disable_inputs} {required}
required={require_inputs}>Name</Input
>
<Input
id="race_step_{race?.id ?? 'create'}"
name="step"
value={race?.step ?? ""}
autocomplete="off"
{labelwidth}
type="number"
min={1}
max={24}
disabled={disable_inputs}
required={require_inputs}>Step</Input
>
<Input
id="race_pxx_{race?.id ?? 'create'}"
name="pxx"
value={race?.pxx ?? ""}
autocomplete="off"
{labelwidth}
type="number"
min={1}
max={20}
disabled={disable_inputs}
required={require_inputs}>PXX</Input
>
<!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
<Input
id="race_sprintqualidate_{race?.id ?? 'create'}"
name="sprintqualidate"
value={sprintqualidate ?? ""}
autocomplete="off"
{labelwidth}
type="datetime-local"
disabled={disable_inputs}>SQuali</Input
>
<Input
id="race_sprintdate_{race?.id ?? 'create'}"
name="sprintdate"
value={sprintdate ?? ""}
autocomplete="off"
{labelwidth}
type="datetime-local"
disabled={disable_inputs}>SRace</Input
>
<Input
id="race_qualidate_{race?.id ?? 'create'}"
name="qualidate"
value={qualidate ?? ""}
autocomplete="off"
{labelwidth}
type="datetime-local"
disabled={disable_inputs}
required={require_inputs}>Quali</Input
>
<Input
id="race_racedate_{race?.id ?? 'create'}"
name="racedate"
value={racedate ?? ""}
autocomplete="off"
{labelwidth}
type="datetime-local"
disabled={disable_inputs}
required={require_inputs}>Race</Input
>
<!-- Headshot upload -->
<FileDropzone
name="pictogram"
id="race_pictogram_{race?.id ?? 'create'}"
onchange={get_image_preview_event_handler(
`update_race_pictogram_preview_${race?.id ?? "create"}`,
)}
disabled={disable_inputs}
required={require_inputs}
>
<svelte:fragment slot="message"
><span class="font-bold">Upload Pictogram</span></svelte:fragment
> >
</FileDropzone> Name
</Input>
<Input
name="step"
value={race?.step ?? ""}
autocomplete="off"
type="number"
min={1}
max={24}
{labelwidth}
{disabled}
{required}
>
Step
</Input>
<Input
name="pxx"
value={race?.pxx ?? ""}
autocomplete="off"
type="number"
min={1}
max={20}
{labelwidth}
{disabled}
{required}
>
PXX
</Input>
<!-- Save/Delete buttons --> <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
<div class="flex justify-end gap-2"> <Input
<Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3"> id="sqdate"
Remove Sprint name="sprintqualidate"
</Button> value={sprintqualidate ?? ""}
{#if race} autocomplete="off"
type="datetime-local"
{labelwidth}
{disabled}
>
SQuali
</Input>
<Input
id="sdate"
name="sprintdate"
value={sprintdate ?? ""}
autocomplete="off"
type="datetime-local"
{labelwidth}
{disabled}
>
SRace
</Input>
<Input
name="qualidate"
value={qualidate ?? ""}
autocomplete="off"
type="datetime-local"
{labelwidth}
{disabled}
{required}
>
Quali
</Input>
<Input
name="racedate"
value={racedate ?? ""}
autocomplete="off"
type="datetime-local"
{labelwidth}
{disabled}
{required}
>
Race
</Input>
<!-- Headshot upload -->
<FileDropzone
name="pictogram"
onchange={get_image_preview_event_handler("pictogram_preview")}
{disabled}
{required}
>
<svelte:fragment slot="message">
<span class="font-bold">Upload Pictogram</span>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex justify-end gap-2">
<Button <Button
formaction="?/update_race" onclick={clear_sprint}
color="secondary" color="secondary"
disabled={disable_inputs} {disabled}
submit width={race ? "w-1/3" : "w-1/2"}
width="w-1/3"
onclick={() => modalStore.close()}
> >
Save Changes Remove Sprint
</Button> </Button>
<Button {#if race}
color="primary" <Button formaction="?/update_race" color="secondary" {disabled} submit width="w-1/3">
submit Save Changes
disabled={disable_inputs} </Button>
formaction="?/delete_race" <Button formaction="?/delete_race" color="primary" {disabled} submit width="w-1/3">
width="w-1/3" Delete
onclick={() => modalStore.close()} </Button>
> {:else}
Delete <Button formaction="?/create_race" color="tertiary" {disabled} submit width="w-1/2">
</Button> Create Race
{:else} </Button>
<Button {/if}
formaction="?/create_race" </div>
color="tertiary"
submit
width="w-1/2"
disabled={disable_inputs}
onclick={() => modalStore.close()}
>
Create Race
</Button>
{/if}
</div> </div>
</div> </form>
</form> </Card>
</Card> {/await}

61
src/routes/data/season/races/+page.svelte
View File

@ -2,12 +2,31 @@
import { Button, Table, type TableColumn } from "$lib/components"; import { Button, Table, type TableColumn } from "$lib/components";
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton"; import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import { get_by_value, get_race_pictogram_template } from "$lib/database"; import { get_by_value } from "$lib/database";
import type { Race } from "$lib/schema"; import type { Race } from "$lib/schema";
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
const races_columns: TableColumn[] = [ const modalStore: ModalStore = getModalStore();
const race_handler = async (event: Event, id?: string) => {
const race: Race | undefined = get_by_value(await data.races, "id", id ?? "Invalid");
if (id && !race) return;
const modalSettings: ModalSettings = {
type: "component",
component: "raceCard",
meta: {
data,
race,
},
};
modalStore.trigger(modalSettings);
};
const races_columns: TableColumn[] = $derived([
{ {
data_value_name: "name", data_value_name: "name",
label: "Name", label: "Name",
@ -35,46 +54,14 @@
label: "Race", label: "Race",
valuefun: async (value: string): Promise<string> => value.slice(0, -5), valuefun: async (value: string): Promise<string> => value.slice(0, -5),
}, },
]; ]);
const modalStore: ModalStore = getModalStore();
const races_handler = async (event: Event, id: string) => {
const race: Race | undefined = get_by_value(await data.races, "id", id);
if (!race) return;
const modalSettings: ModalSettings = {
type: "component",
component: "raceCard",
meta: {
race: race,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_race_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "raceCard",
meta: {
disable_inputs: !data.admin,
require_inputs: true,
pictogram_template: get_race_pictogram_template(await data.graphics),
},
};
modalStore.trigger(modalSettings);
};
</script> </script>
<div class="pb-2"> <div class="pb-2">
<Button width="w-full" color="tertiary" onclick={create_race_handler} shadow> <Button width="w-full" color="tertiary" onclick={race_handler} shadow>
<span class="font-bold">Create New Race</span> <span class="font-bold">Create New Race</span>
</Button> </Button>
</div> </div>
{#await data.races then races} {#await data.races then races}
<Table data={races} columns={races_columns} handler={races_handler} /> <Table data={races} columns={races_columns} handler={race_handler} />
{/await} {/await}