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

Lib: Simplify DriverCard

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-05 01:49:30 +01:00
parent 603c7d0e40
commit 206d897fca
2 changed files with 136 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/routes/data/season/drivers/+page.svelte
View File

@ -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}