Lib: Simplify DriverCard
This commit is contained in:
@ -7,185 +7,138 @@
|
||||
type ModalStore,
|
||||
} from "@skeletonlabs/skeleton";
|
||||
import { Button, Input, Card, Dropdown } from "$lib/components";
|
||||
import type { Driver, Team } from "$lib/schema";
|
||||
import type { Driver } from "$lib/schema";
|
||||
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
|
||||
import { team_dropdown_options } from "$lib/dropdown";
|
||||
import { enhance } from "$app/forms";
|
||||
import { get_driver_headshot_template } from "$lib/database";
|
||||
|
||||
interface DriverCardProps {
|
||||
/** Data passed from the page context */
|
||||
data: any;
|
||||
|
||||
/** The [Driver] object used to prefill values. */
|
||||
driver?: Driver | undefined;
|
||||
|
||||
/** The teams (for the dropdown options) */
|
||||
teams: Team[];
|
||||
|
||||
/** Disable all inputs if [true] */
|
||||
disable_inputs?: boolean;
|
||||
|
||||
/** Require all inputs if [true] */
|
||||
require_inputs?: boolean;
|
||||
|
||||
/** The [src] of the driver headshot template preview */
|
||||
headshot_template?: string;
|
||||
|
||||
/** The value this component's team select dropdown will bind to */
|
||||
// TODO: Move this into this component? Why am I passing it from the outside?
|
||||
// This also applies to the other card components...
|
||||
team_select_value: string;
|
||||
|
||||
/** The value this component's active switch will bind to */
|
||||
active_value: boolean;
|
||||
driver?: Driver;
|
||||
}
|
||||
|
||||
let {
|
||||
driver = undefined,
|
||||
teams,
|
||||
disable_inputs = false,
|
||||
require_inputs = false,
|
||||
headshot_template = undefined,
|
||||
team_select_value,
|
||||
active_value,
|
||||
}: DriverCardProps = $props();
|
||||
let { data, driver = undefined }: DriverCardProps = $props();
|
||||
|
||||
const modalStore: ModalStore = getModalStore();
|
||||
if ($modalStore[0].meta) {
|
||||
const meta = $modalStore[0].meta;
|
||||
|
||||
// Stuff thats required for the "update" card
|
||||
data = meta.data;
|
||||
driver = meta.driver;
|
||||
teams = meta.teams;
|
||||
team_select_value = meta.team_select_value;
|
||||
active_value = meta.active_value;
|
||||
disable_inputs = meta.disable_inputs;
|
||||
|
||||
// Stuff thats additionally required for the "create" card
|
||||
require_inputs = meta.require_inputs;
|
||||
headshot_template = meta.headshot_template;
|
||||
}
|
||||
|
||||
const required: boolean = $derived(!driver);
|
||||
const disabled: boolean = $derived(!data.admin);
|
||||
const labelwidth: string = "120px";
|
||||
|
||||
let team_select_value: string = $state(driver?.team ?? "");
|
||||
let active_value: boolean = $state(driver?.active ?? true);
|
||||
</script>
|
||||
|
||||
<Card
|
||||
imgsrc={driver?.headshot_url ?? headshot_template}
|
||||
imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
|
||||
width="w-full sm:w-auto"
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_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 -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if driver && !disable_inputs}
|
||||
<input name="id" type="hidden" value={driver.id} />
|
||||
{/if}
|
||||
{#await data.graphics then graphics}
|
||||
<Card
|
||||
imgsrc={driver?.headshot_url ?? get_driver_headshot_template(graphics)}
|
||||
imgid="headshot_preview"
|
||||
width="w-full sm:w-auto"
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||
imgonclick={(event: Event) => modalStore.close()}
|
||||
>
|
||||
<form
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance
|
||||
onsubmit={() => modalStore.close()}
|
||||
>
|
||||
<!-- This is also disabled, because the ID should only be -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if driver && !disabled}
|
||||
<input name="id" type="hidden" value={driver.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Driver name input -->
|
||||
<Input
|
||||
id="driver_first_name_{driver?.id ?? 'create'}"
|
||||
name="firstname"
|
||||
value={driver?.firstname ?? ""}
|
||||
autocomplete="off"
|
||||
labelwidth="120px"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>First Name
|
||||
</Input>
|
||||
<Input
|
||||
id="driver_last_name_{driver?.id ?? 'create'}"
|
||||
name="lastname"
|
||||
value={driver?.lastname ?? ""}
|
||||
autocomplete="off"
|
||||
labelwidth="120px"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>Last Name
|
||||
</Input>
|
||||
<Input
|
||||
id="driver_code_{driver?.id ?? 'create'}"
|
||||
name="code"
|
||||
value={driver?.code ?? ""}
|
||||
autocomplete="off"
|
||||
minlength={3}
|
||||
maxlength={3}
|
||||
labelwidth="120px"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>Driver Code
|
||||
</Input>
|
||||
|
||||
<!-- Driver team input -->
|
||||
<Dropdown
|
||||
name="team"
|
||||
input_variable={team_select_value}
|
||||
options={team_dropdown_options(teams)}
|
||||
labelwidth="120px"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
Team
|
||||
</Dropdown>
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
id="driver_headshot_{driver?.id ?? 'create'}"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_driver_headshot_preview_${driver?.id ?? "create"}`,
|
||||
)}
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><span class="font-bold">Upload Headshot</span></svelte:fragment
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Driver name input -->
|
||||
<Input name="firstname" value={driver?.firstname ?? ""} {labelwidth} {disabled} {required}>
|
||||
First Name
|
||||
</Input>
|
||||
<Input
|
||||
name="lastname"
|
||||
value={driver?.lastname ?? ""}
|
||||
autocomplete="off"
|
||||
{labelwidth}
|
||||
{disabled}
|
||||
{required}
|
||||
>
|
||||
</FileDropzone>
|
||||
Last Name
|
||||
</Input>
|
||||
<Input
|
||||
name="code"
|
||||
value={driver?.code ?? ""}
|
||||
autocomplete="off"
|
||||
minlength={3}
|
||||
maxlength={3}
|
||||
{labelwidth}
|
||||
{disabled}
|
||||
{required}
|
||||
>
|
||||
Driver Code
|
||||
</Input>
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<div class="mr-auto">
|
||||
<SlideToggle
|
||||
name="active"
|
||||
background="bg-primary-500"
|
||||
active="bg-tertiary-500"
|
||||
bind:checked={active_value}
|
||||
disabled={disable_inputs}
|
||||
/>
|
||||
<!-- Driver team input -->
|
||||
{#await data.teams then teams}
|
||||
<Dropdown
|
||||
name="team"
|
||||
input_variable={team_select_value}
|
||||
options={team_dropdown_options(teams)}
|
||||
{labelwidth}
|
||||
{disabled}
|
||||
{required}
|
||||
>
|
||||
Team
|
||||
</Dropdown>
|
||||
{/await}
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
onchange={get_image_preview_event_handler("headshot_preview")}
|
||||
{disabled}
|
||||
{required}
|
||||
>
|
||||
<svelte:fragment slot="message">
|
||||
<span class="font-bold">Upload Headshot</span>
|
||||
</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<div class="mr-auto">
|
||||
<SlideToggle
|
||||
name="active"
|
||||
background="bg-primary-500"
|
||||
active="bg-tertiary-500"
|
||||
bind:checked={active_value}
|
||||
{disabled}
|
||||
/>
|
||||
</div>
|
||||
{#if driver}
|
||||
<Button formaction="?/update_driver" color="secondary" {disabled} submit width="w-1/2">
|
||||
Save
|
||||
</Button>
|
||||
<Button formaction="?/delete_driver" color="primary" {disabled} submit width="w-1/2">
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button formaction="?/create_driver" color="tertiary" {disabled} submit width="w-full">
|
||||
Create Driver
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if driver}
|
||||
<Button
|
||||
formaction="?/update_driver"
|
||||
color="secondary"
|
||||
disabled={disable_inputs}
|
||||
submit
|
||||
width="w-1/2"
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
submit
|
||||
disabled={disable_inputs}
|
||||
formaction="?/delete_driver"
|
||||
width="w-1/2"
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
formaction="?/create_driver"
|
||||
color="tertiary"
|
||||
submit
|
||||
width="w-full"
|
||||
disabled={disable_inputs}
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Create Driver
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</form>
|
||||
</Card>
|
||||
{/await}
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { Button, type TableColumn, Table } from "$lib/components";
|
||||
import { get_by_value, get_driver_headshot_template } from "$lib/database";
|
||||
import { get_by_value } from "$lib/database";
|
||||
import type { Driver, Team } from "$lib/schema";
|
||||
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
const update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
|
||||
const update_driver_active_values: { [key: string]: boolean } = $state({});
|
||||
data.drivers.then((drivers: Driver[]) =>
|
||||
drivers.forEach((driver: Driver) => {
|
||||
update_driver_team_select_values[driver.id] = driver.team;
|
||||
update_driver_active_values[driver.id] = driver.active;
|
||||
}),
|
||||
);
|
||||
update_driver_team_select_values["create"] = "";
|
||||
update_driver_active_values["create"] = true;
|
||||
const modalStore: ModalStore = getModalStore();
|
||||
const driver_handler = async (event: Event, id?: string) => {
|
||||
const driver: Driver | undefined = get_by_value(await data.drivers, "id", id ?? "Invalid");
|
||||
|
||||
const drivers_columns: TableColumn[] = [
|
||||
if (id && !driver) return;
|
||||
|
||||
const modalSettings: ModalSettings = {
|
||||
type: "component",
|
||||
component: "driverCard",
|
||||
meta: {
|
||||
data,
|
||||
driver,
|
||||
},
|
||||
};
|
||||
|
||||
modalStore.trigger(modalSettings);
|
||||
};
|
||||
|
||||
const drivers_columns: TableColumn[] = $derived([
|
||||
{
|
||||
data_value_name: "code",
|
||||
label: "Driver Code",
|
||||
@ -32,9 +39,7 @@
|
||||
label: "Team",
|
||||
valuefun: async (value: string): Promise<string> => {
|
||||
const team: Team | undefined = get_by_value(await data.teams, "id", value);
|
||||
return team
|
||||
? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
|
||||
: "<span class='badge variant-filled-primary'>Invalid</span>";
|
||||
return `<span class='badge border mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -43,53 +48,14 @@
|
||||
valuefun: async (value: boolean): Promise<string> =>
|
||||
`<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
|
||||
},
|
||||
];
|
||||
|
||||
const modalStore: ModalStore = getModalStore();
|
||||
|
||||
/** Shows the DriverCard modal to edit the clicked driver */
|
||||
const drivers_handler = async (event: Event, id: string) => {
|
||||
const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
|
||||
if (!driver) return;
|
||||
|
||||
const modalSettings: ModalSettings = {
|
||||
type: "component",
|
||||
component: "driverCard",
|
||||
meta: {
|
||||
driver: driver,
|
||||
teams: await data.teams,
|
||||
team_select_value: update_driver_team_select_values[driver.id],
|
||||
active_value: update_driver_active_values[driver.id],
|
||||
disable_inputs: !data.admin,
|
||||
},
|
||||
};
|
||||
|
||||
modalStore.trigger(modalSettings);
|
||||
};
|
||||
|
||||
const create_driver_handler = async (event: Event) => {
|
||||
const modalSettings: ModalSettings = {
|
||||
type: "component",
|
||||
component: "driverCard",
|
||||
meta: {
|
||||
teams: await data.teams,
|
||||
team_select_value: update_driver_team_select_values["create"],
|
||||
active_value: update_driver_active_values["create"],
|
||||
disable_inputs: !data.admin,
|
||||
require_inputs: true,
|
||||
headshot_template: get_driver_headshot_template(await data.graphics),
|
||||
},
|
||||
};
|
||||
|
||||
modalStore.trigger(modalSettings);
|
||||
};
|
||||
]);
|
||||
</script>
|
||||
|
||||
<div class="pb-2">
|
||||
<Button width="w-full" color="tertiary" onclick={create_driver_handler} shadow>
|
||||
<Button width="w-full" color="tertiary" onclick={driver_handler} shadow>
|
||||
<span class="font-bold">Create New Driver</span>
|
||||
</Button>
|
||||
</div>
|
||||
{#await data.drivers then drivers}
|
||||
<Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
|
||||
<Table data={drivers} columns={drivers_columns} handler={driver_handler} />
|
||||
{/await}
|
||||
|
||||
Reference in New Issue
Block a user