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

Data/Season: Split Teams/Drivers/Races/Substitutions into individual routes

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-27 21:52:03 +01:00
parent e733ed568a
commit a3805f76a1
12 changed files with 715 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/routes/data/season/+layout.server.ts Normal file
View File

@ -0,0 +1,77 @@
import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
import type { LayoutServerLoad } from "./$types";
// This "load" function runs serverside only, as it's located inside +layout.server.ts
export const load: LayoutServerLoad = async ({ fetch, locals }) => {
const fetch_graphics = async (): Promise<Graphic[]> => {
const graphics: Graphic[] = await locals.pb
.collection("graphics")
.getFullList({ fetch: fetch });
graphics.map((graphic: Graphic) => {
graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
});
return graphics;
};
const fetch_teams = async (): Promise<Team[]> => {
const teams: Team[] = await locals.pb.collection("teams").getFullList({
sort: "+name",
fetch: fetch,
});
teams.map((team: Team) => {
team.banner_url = locals.pb.files.getURL(team, team.banner);
team.logo_url = locals.pb.files.getURL(team, team.logo);
});
return teams;
};
const fetch_drivers = async (): Promise<Driver[]> => {
const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
sort: "+code",
fetch: fetch,
});
drivers.map((driver: Driver) => {
driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
});
return drivers;
};
const fetch_races = async (): Promise<Race[]> => {
const races: Race[] = await locals.pb.collection("races").getFullList({
sort: "+step",
fetch: fetch,
});
races.map((race: Race) => {
race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
});
return races;
};
const fetch_substitutions = async (): Promise<Substitution[]> => {
// TODO: Sort by race step (does the race need to be expanded for this?)
const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
fetch: fetch,
});
return substitutions;
};
return {
// Graphics and teams are awaited, since those are visible on page load.
graphics: await fetch_graphics(),
teams: await fetch_teams(),
// The rest is streamed gradually, since the user has to switch tabs to need them.
drivers: fetch_drivers(),
races: fetch_races(),
substitutions: fetch_substitutions(),
};
};

22
src/routes/data/season/+layout.svelte Normal file
View File

@ -0,0 +1,22 @@
<script lang="ts">
import { Button } from "$lib/components";
import type { Snippet } from "svelte";
let { children }: { children: Snippet } = $props();
</script>
<div class="fixed left-0 right-0 top-14 z-10 flex justify-center">
<div
class="mx-2 flex w-full justify-center gap-2 bg-primary-500 pb-2 pt-3 shadow rounded-bl-container-token rounded-br-container-token"
>
<Button href="teams" color="primary" activate_href>Teams</Button>
<Button href="drivers" color="primary" activate_href>Drivers</Button>
<Button href="races" color="primary" activate_href>Races</Button>
<Button href="substitutions" color="primary" activate_href>Substitutions</Button>
</div>
</div>
<!-- Each child's contents will be inserted here -->
<div style="margin-top: 56px;">
{@render children()}
</div>

317
src/routes/data/season/+page.server.ts
View File

@ -1,317 +0,0 @@
import type { ActionData, Actions, PageServerLoad } from "./$types";
import {
form_data_clean,
form_data_ensure_keys,
form_data_fix_dates,
form_data_get_and_remove_id,
} from "$lib/form";
import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
import { image_to_avif } from "$lib/server/image";
import {
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
TEAM_BANNER_HEIGHT,
TEAM_BANNER_WIDTH,
TEAM_LOGO_HEIGHT,
TEAM_LOGO_WIDTH,
} from "$lib/config";
// These "actions" run serverside only, as they're located inside +page.server.ts
export const actions = {
create_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
// Compress banner
const banner_avif: Blob = await image_to_avif(
await (data.get("banner") as File).arrayBuffer(),
TEAM_BANNER_WIDTH,
TEAM_BANNER_HEIGHT,
);
data.set("banner", banner_avif);
// Compress logo
const logo_avif: Blob = await image_to_avif(
await (data.get("logo") as File).arrayBuffer(),
TEAM_LOGO_WIDTH,
TEAM_LOGO_HEIGHT,
);
data.set("logo", logo_avif);
await locals.pb.collection("teams").create(data);
return { tab: 0 };
},
update_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
if (data.has("banner")) {
// Compress banner
const banner_avif: Blob = await image_to_avif(
await (data.get("banner") as File).arrayBuffer(),
TEAM_BANNER_WIDTH,
TEAM_BANNER_HEIGHT,
);
data.set("banner", banner_avif);
}
if (data.has("logo")) {
// Compress logo
const logo_avif: Blob = await image_to_avif(
await (data.get("logo") as File).arrayBuffer(),
TEAM_LOGO_WIDTH,
TEAM_LOGO_HEIGHT,
);
data.set("logo", logo_avif);
}
await locals.pb.collection("teams").update(id, data);
return { tab: 0 };
},
delete_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("teams").delete(id);
return { tab: 0 };
},
create_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
// The toggle switch will report "on" or nothing
data.set("active", data.has("active") ? "true" : "false");
// Compress headshot
const headshot_avif: Blob = await image_to_avif(
await (data.get("headshot") as File).arrayBuffer(),
DRIVER_HEADSHOT_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
);
data.set("headshot", headshot_avif);
await locals.pb.collection("drivers").create(data);
return { tab: 1 };
},
update_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
// The toggle switch will report "on" or nothing
data.set("active", data.has("active") ? "true" : "false");
if (data.has("headshot")) {
// Compress headshot
const headshot_avif: Blob = await image_to_avif(
await (data.get("headshot") as File).arrayBuffer(),
DRIVER_HEADSHOT_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
);
data.set("headshot", headshot_avif);
}
await locals.pb.collection("drivers").update(id, data);
return { tab: 1 };
},
delete_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("drivers").delete(id);
return { tab: 1 };
},
create_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
// Compress pictogram
const pictogram_avif: Blob = await image_to_avif(
await (data.get("pictogram") as File).arrayBuffer(),
RACE_PICTOGRAM_WIDTH,
RACE_PICTOGRAM_HEIGHT,
);
data.set("pictogram", pictogram_avif);
await locals.pb.collection("races").create(data);
return { tab: 2 };
},
update_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
// Do not remove empty sprint dates so they can be cleared by updating the record
const data: FormData = form_data_clean(await request.formData(), [
"sprintqualidate",
"sprintdate",
]);
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
const id: string = form_data_get_and_remove_id(data);
if (data.has("pictogram")) {
// Compress pictogram
const pictogram_avif: Blob = await image_to_avif(
await (data.get("pictogram") as File).arrayBuffer(),
RACE_PICTOGRAM_WIDTH,
RACE_PICTOGRAM_HEIGHT,
);
data.set("pictogram", pictogram_avif);
}
await locals.pb.collection("races").update(id, data);
return { tab: 2 };
},
delete_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("races").delete(id);
return { tab: 2 };
},
create_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["substitute", "for", "race"]);
await locals.pb.collection("substitutions").create(data);
return { tab: 3 };
},
update_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("substitutions").update(id, data);
return { tab: 3 };
},
delete_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("substitutions").delete(id);
return { tab: 3 };
},
} satisfies Actions;
// This "load" function runs serverside only, as it's located inside +page.server.ts
export const load: PageServerLoad = async ({ fetch, locals }) => {
const fetch_graphics = async (): Promise<Graphic[]> => {
const graphics: Graphic[] = await locals.pb
.collection("graphics")
.getFullList({ fetch: fetch });
graphics.map((graphic: Graphic) => {
graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
});
return graphics;
};
const fetch_teams = async (): Promise<Team[]> => {
const teams: Team[] = await locals.pb.collection("teams").getFullList({
sort: "+name",
fetch: fetch,
});
teams.map((team: Team) => {
team.banner_url = locals.pb.files.getURL(team, team.banner);
team.logo_url = locals.pb.files.getURL(team, team.logo);
});
return teams;
};
const fetch_drivers = async (): Promise<Driver[]> => {
const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
sort: "+code",
fetch: fetch,
});
drivers.map((driver: Driver) => {
driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
});
return drivers;
};
const fetch_races = async (): Promise<Race[]> => {
const races: Race[] = await locals.pb.collection("races").getFullList({
sort: "+step",
fetch: fetch,
});
races.map((race: Race) => {
race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
});
return races;
};
const fetch_substitutions = async (): Promise<Substitution[]> => {
// TODO: Sort by race step (does the race need to be expanded for this?)
const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
fetch: fetch,
});
return substitutions;
};
return {
// Graphics and teams are awaited, since those are visible on page load.
graphics: await fetch_graphics(),
teams: await fetch_teams(),
// The rest is streamed gradually, since the user has to switch tabs to need them.
drivers: fetch_drivers(),
races: fetch_races(),
substitutions: fetch_substitutions(),
};
};

429
src/routes/data/season/+page.svelte
View File

@ -1,429 +0,0 @@
<script lang="ts">
import type { Driver, Race, Substitution, Team } from "$lib/schema";
import { type PageData, type ActionData } from "./$types";
import {
getModalStore,
Tab,
TabGroup,
type ModalSettings,
type ModalStore,
} from "@skeletonlabs/skeleton";
import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
import { get_by_value } from "$lib/database";
import {
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
TEAM_LOGO_HEIGHT,
TEAM_LOGO_WIDTH,
} from "$lib/config";
let { data, form }: { data: PageData; form: ActionData } = $props();
// When being redirected from a form, the user should land on the same tab
let current_tab: number = $state(0);
if (form?.tab) {
current_tab = form.tab;
}
//
// Dropdown/Select value storages ===============================================================
//
// Values for driver cards
let update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
let 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;
// Values for substitution cards
const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
const update_substitution_for_select_values: { [key: string]: string } = $state({});
const update_substitution_race_select_values: { [key: string]: string } = $state({});
data.substitutions.then((substitutions: Substitution[]) =>
substitutions.forEach((substitution: Substitution) => {
update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
update_substitution_for_select_values[substitution.id] = substitution.for;
update_substitution_race_select_values[substitution.id] = substitution.race;
}),
);
update_substitution_substitute_select_values["create"] = "";
update_substitution_for_select_values["create"] = "";
update_substitution_race_select_values["create"] = "";
//
// Dropdown option lists ========================================================================
//
// All options to create a <Dropdown> component for the teams
const team_dropdown_options: DropdownOption[] = [];
data.teams.forEach((team: Team) => {
team_dropdown_options.push({
label: team.name,
value: team.id,
icon_url: team.logo_url,
icon_width: TEAM_LOGO_WIDTH,
icon_height: TEAM_LOGO_HEIGHT,
});
});
// All options to create a <Dropdown> component for the drivers
const driver_dropdown_options: DropdownOption[] = [];
data.drivers.then((drivers: Driver[]) =>
drivers.forEach((driver: Driver) => {
driver_dropdown_options.push({
label: driver.code,
value: driver.id,
icon_url: driver.headshot_url,
icon_width: DRIVER_HEADSHOT_WIDTH,
icon_height: DRIVER_HEADSHOT_HEIGHT,
});
}),
);
// All options to create a <Dropdown> component for the races
const race_dropdown_options: DropdownOption[] = [];
data.races.then((races: Race[]) =>
races.forEach((race: Race) => {
race_dropdown_options.push({
label: race.name,
value: race.id,
icon_url: race.pictogram_url,
icon_width: RACE_PICTOGRAM_WIDTH,
icon_height: RACE_PICTOGRAM_HEIGHT,
});
}),
);
//
// Data table row data ==========================================================================
//
const teams_columns: TableColumn[] = [
{
data_value_name: "name",
label: "Name",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{
data_value_name: "color",
label: "Color",
valuefun: async (value: string): Promise<string> =>
`<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
},
];
const drivers_columns: TableColumn[] = [
{
data_value_name: "code",
label: "Driver Code",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{ data_value_name: "firstname", label: "First Name" },
{ data_value_name: "lastname", label: "Last Name" },
{
data_value_name: "team",
label: "Team",
valuefun: async (value: string): Promise<string> => {
const team: Team | undefined = get_by_value(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>";
},
},
{
data_value_name: "active",
label: "Active",
valuefun: async (value: boolean): Promise<string> =>
`<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
},
];
const races_columns: TableColumn[] = [
{
data_value_name: "name",
label: "Name",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{ data_value_name: "step", label: "Step" },
{
data_value_name: "sprintqualidate",
label: "Sprint Quali",
valuefun: async (value: string): Promise<string> => value.slice(0, -5), // Cutoff the "Z" from the ISO datetime
},
{
data_value_name: "sprintdate",
label: "Sprint Race",
valuefun: async (value: string): Promise<string> => value.slice(0, -5),
},
{
data_value_name: "qualidate",
label: "Quali",
valuefun: async (value: string): Promise<string> => value.slice(0, -5),
},
{
data_value_name: "racedate",
label: "Race",
valuefun: async (value: string): Promise<string> => value.slice(0, -5),
},
];
const substitutions_columns: TableColumn[] = [
{
data_value_name: "substitute",
label: "Substitute",
valuefun: async (value: string): Promise<string> => {
const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
return `<span class='badge variant-filled-surface'>${substitute}</span>`;
},
},
{
data_value_name: "for",
label: "For",
valuefun: async (value: string): Promise<string> =>
get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
},
{
data_value_name: "race",
label: "Race",
valuefun: async (value: string): Promise<string> =>
get_by_value(await data.races, "id", value)?.name ?? "Invalid",
},
];
//
// Card modal handlers ==========================================================================
//
const modalStore: ModalStore = getModalStore();
const teams_handler = async (event: Event, id: string) => {
const team: Team | undefined = get_by_value(data.teams, "id", id);
if (!team) return;
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
team: team,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_team_handler = (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
banner_template:
get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
logo_template:
get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
require_inputs: true,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
/** 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,
team_select_value: update_driver_team_select_values[driver.id],
team_select_options: team_dropdown_options,
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: {
team_select_value: update_driver_team_select_values["create"],
team_select_options: team_dropdown_options,
active_value: update_driver_active_values["create"],
disable_inputs: !data.admin,
require_inputs: true,
headshot_template:
get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
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_by_value(data.graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
const substitutions_handler = async (event: Event, id: string) => {
const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
if (!substitution) return;
const modalSettings: ModalSettings = {
type: "component",
component: "substitutionCard",
meta: {
substitution: substitution,
drivers: await data.drivers,
substitute_select_value: update_substitution_substitute_select_values[substitution.id],
driver_select_value: update_substitution_for_select_values[substitution.id],
race_select_value: update_substitution_race_select_values[substitution.id],
driver_select_options: driver_dropdown_options,
race_select_options: race_dropdown_options,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_substitution_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "substitutionCard",
meta: {
drivers: await data.drivers,
substitute_select_value: update_substitution_substitute_select_values["create"],
driver_select_value: update_substitution_for_select_values["create"],
disable_inputs: !data.admin,
race_select_value: update_substitution_race_select_values["create"],
driver_select_options: driver_dropdown_options,
race_select_options: race_dropdown_options,
require_inputs: true,
headshot_template:
get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
</script>
<svelte:head>
<title>F11 - Season Data</title>
</svelte:head>
<TabGroup
justify="justify-center"
active="variant-filled-primary"
hover="hover:variant-filled-primary"
regionList="gap-2 shadow rounded-bl-container-token rounded-br-container-token p-2 pt-3 bg-white fixed left-2 right-2 top-14 z-10"
regionPanel="!mt-14"
rounded="rounded-container-token"
border="border-none"
padding="p-2"
>
<Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab>
<Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab>
<Tab bind:group={current_tab} name="races" value={2}>Races</Tab>
<Tab bind:group={current_tab} name="substitutions" value={3}>Substitutions</Tab>
<svelte:fragment slot="panel">
{#if current_tab === 0}
<!-- Teams Tab -->
<!-- Teams Tab -->
<!-- Teams Tab -->
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_team_handler}>
<b>Create New Team</b>
</Button>
</div>
<Table data={data.teams} columns={teams_columns} handler={teams_handler} />
{:else if current_tab === 1}
<!-- Drivers Tab -->
<!-- Drivers Tab -->
<!-- Drivers Tab -->
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_driver_handler}>
<b>Create New Driver</b>
</Button>
</div>
{#await data.drivers then drivers}
<Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
{/await}
{:else if current_tab === 2}
<!-- Races Tab -->
<!-- Races Tab -->
<!-- Races Tab -->
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_race_handler}>
<b>Create New Race</b>
</Button>
</div>
{#await data.races then races}
<Table data={races} columns={races_columns} handler={races_handler} />
{/await}
{:else if current_tab === 3}
<!-- Substitutions Tab -->
<!-- Substitutions Tab -->
<!-- Substitutions Tab -->
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_substitution_handler}>
<b>Create New Substitution</b>
</Button>
</div>
{#await data.substitutions then substitutions}
<Table
data={substitutions}
columns={substitutions_columns}
handler={substitutions_handler}
/>
{/await}
{/if}
</svelte:fragment>
</TabGroup>

59
src/routes/data/season/drivers/+page.server.ts Normal file
View File

@ -0,0 +1,59 @@
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
import { image_to_avif } from "$lib/server/image";
import type { Actions } from "@sveltejs/kit";
export const actions = {
create_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
// The toggle switch will report "on" or nothing
data.set("active", data.has("active") ? "true" : "false");
// Compress headshot
const headshot_avif: Blob = await image_to_avif(
await (data.get("headshot") as File).arrayBuffer(),
DRIVER_HEADSHOT_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
);
data.set("headshot", headshot_avif);
await locals.pb.collection("drivers").create(data);
},
update_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
// The toggle switch will report "on" or nothing
data.set("active", data.has("active") ? "true" : "false");
if (data.has("headshot")) {
// Compress headshot
const headshot_avif: Blob = await image_to_avif(
await (data.get("headshot") as File).arrayBuffer(),
DRIVER_HEADSHOT_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
);
data.set("headshot", headshot_avif);
}
await locals.pb.collection("drivers").update(id, data);
},
delete_driver: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("drivers").delete(id);
},
} satisfies Actions;

109
src/routes/data/season/drivers/+page.svelte Normal file
View File

@ -0,0 +1,109 @@
<script lang="ts">
import { Button, type DropdownOption, type TableColumn, Table } from "$lib/components";
import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
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;
// All options to create a <Dropdown> component for the teams
const team_dropdown_options: DropdownOption[] = [];
data.teams.forEach((team: Team) => {
team_dropdown_options.push({
label: team.name,
value: team.id,
icon_url: team.logo_url,
icon_width: TEAM_LOGO_WIDTH,
icon_height: TEAM_LOGO_HEIGHT,
});
});
const drivers_columns: TableColumn[] = [
{
data_value_name: "code",
label: "Driver Code",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{ data_value_name: "firstname", label: "First Name" },
{ data_value_name: "lastname", label: "Last Name" },
{
data_value_name: "team",
label: "Team",
valuefun: async (value: string): Promise<string> => {
const team: Team | undefined = get_by_value(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>";
},
},
{
data_value_name: "active",
label: "Active",
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,
team_select_value: update_driver_team_select_values[driver.id],
team_select_options: team_dropdown_options,
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: {
team_select_value: update_driver_team_select_values["create"],
team_select_options: team_dropdown_options,
active_value: update_driver_active_values["create"],
disable_inputs: !data.admin,
require_inputs: true,
headshot_template:
get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
</script>
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_driver_handler}>
<b>Create New Driver</b>
</Button>
</div>
{#await data.drivers then drivers}
<Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
{/await}

64
src/routes/data/season/races/+page.server.ts Normal file
View File

@ -0,0 +1,64 @@
import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
import {
form_data_clean,
form_data_ensure_keys,
form_data_fix_dates,
form_data_get_and_remove_id,
} from "$lib/form";
import { image_to_avif } from "$lib/server/image";
import type { Actions } from "@sveltejs/kit";
export const actions = {
create_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
// Compress pictogram
const pictogram_avif: Blob = await image_to_avif(
await (data.get("pictogram") as File).arrayBuffer(),
RACE_PICTOGRAM_WIDTH,
RACE_PICTOGRAM_HEIGHT,
);
data.set("pictogram", pictogram_avif);
await locals.pb.collection("races").create(data);
},
update_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
// Do not remove empty sprint dates so they can be cleared by updating the record
const data: FormData = form_data_clean(await request.formData(), [
"sprintqualidate",
"sprintdate",
]);
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
const id: string = form_data_get_and_remove_id(data);
if (data.has("pictogram")) {
// Compress pictogram
const pictogram_avif: Blob = await image_to_avif(
await (data.get("pictogram") as File).arrayBuffer(),
RACE_PICTOGRAM_WIDTH,
RACE_PICTOGRAM_HEIGHT,
);
data.set("pictogram", pictogram_avif);
}
await locals.pb.collection("races").update(id, data);
},
delete_race: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("races").delete(id);
},
} satisfies Actions;

81
src/routes/data/season/races/+page.svelte Normal file
View File

@ -0,0 +1,81 @@
<script lang="ts">
import { Button, Table, type TableColumn } from "$lib/components";
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types";
import { get_by_value } from "$lib/database";
import type { Race } from "$lib/schema";
let { data }: { data: PageData } = $props();
const races_columns: TableColumn[] = [
{
data_value_name: "name",
label: "Name",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{ data_value_name: "step", label: "Step" },
{
data_value_name: "sprintqualidate",
label: "Sprint Quali",
valuefun: async (value: string): Promise<string> => value.slice(0, -5), // Cutoff the "Z" from the ISO datetime
},
{
data_value_name: "sprintdate",
label: "Sprint Race",
valuefun: async (value: string): Promise<string> => value.slice(0, -5),
},
{
data_value_name: "qualidate",
label: "Quali",
valuefun: async (value: string): Promise<string> => value.slice(0, -5),
},
{
data_value_name: "racedate",
label: "Race",
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_by_value(data.graphics, "name", "race_pictogram_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
</script>
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_race_handler}>
<b>Create New Race</b>
</Button>
</div>
{#await data.races then races}
<Table data={races} columns={races_columns} handler={races_handler} />
{/await}

31
src/routes/data/season/substitutions/+page.server.ts Normal file
View File

@ -0,0 +1,31 @@
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
import type { Actions } from "@sveltejs/kit";
export const actions = {
create_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["substitute", "for", "race"]);
await locals.pb.collection("substitutions").create(data);
},
update_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("substitutions").update(id, data);
},
delete_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("substitutions").delete(id);
},
} satisfies Actions;

132
src/routes/data/season/substitutions/+page.svelte Normal file
View File

@ -0,0 +1,132 @@
<script lang="ts">
import { get_by_value } from "$lib/database";
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types";
import type { Driver, Race, Substitution } from "$lib/schema";
import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
import {
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
} from "$lib/config";
let { data }: { data: PageData } = $props();
const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
const update_substitution_for_select_values: { [key: string]: string } = $state({});
const update_substitution_race_select_values: { [key: string]: string } = $state({});
data.substitutions.then((substitutions: Substitution[]) =>
substitutions.forEach((substitution: Substitution) => {
update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
update_substitution_for_select_values[substitution.id] = substitution.for;
update_substitution_race_select_values[substitution.id] = substitution.race;
}),
);
update_substitution_substitute_select_values["create"] = "";
update_substitution_for_select_values["create"] = "";
update_substitution_race_select_values["create"] = "";
const driver_dropdown_options: DropdownOption[] = [];
data.drivers.then((drivers: Driver[]) =>
drivers.forEach((driver: Driver) => {
driver_dropdown_options.push({
label: driver.code,
value: driver.id,
icon_url: driver.headshot_url,
icon_width: DRIVER_HEADSHOT_WIDTH,
icon_height: DRIVER_HEADSHOT_HEIGHT,
});
}),
);
const race_dropdown_options: DropdownOption[] = [];
data.races.then((races: Race[]) =>
races.forEach((race: Race) => {
race_dropdown_options.push({
label: race.name,
value: race.id,
icon_url: race.pictogram_url,
icon_width: RACE_PICTOGRAM_WIDTH,
icon_height: RACE_PICTOGRAM_HEIGHT,
});
}),
);
const substitutions_columns: TableColumn[] = [
{
data_value_name: "substitute",
label: "Substitute",
valuefun: async (value: string): Promise<string> => {
const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
return `<span class='badge variant-filled-surface'>${substitute}</span>`;
},
},
{
data_value_name: "for",
label: "For",
valuefun: async (value: string): Promise<string> =>
get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
},
{
data_value_name: "race",
label: "Race",
valuefun: async (value: string): Promise<string> =>
get_by_value(await data.races, "id", value)?.name ?? "Invalid",
},
];
const modalStore: ModalStore = getModalStore();
const substitutions_handler = async (event: Event, id: string) => {
const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
if (!substitution) return;
const modalSettings: ModalSettings = {
type: "component",
component: "substitutionCard",
meta: {
substitution: substitution,
drivers: await data.drivers,
substitute_select_value: update_substitution_substitute_select_values[substitution.id],
driver_select_value: update_substitution_for_select_values[substitution.id],
race_select_value: update_substitution_race_select_values[substitution.id],
driver_select_options: driver_dropdown_options,
race_select_options: race_dropdown_options,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_substitution_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "substitutionCard",
meta: {
drivers: await data.drivers,
substitute_select_value: update_substitution_substitute_select_values["create"],
driver_select_value: update_substitution_for_select_values["create"],
disable_inputs: !data.admin,
race_select_value: update_substitution_race_select_values["create"],
driver_select_options: driver_dropdown_options,
race_select_options: race_dropdown_options,
require_inputs: true,
headshot_template:
get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
},
};
modalStore.trigger(modalSettings);
};
</script>
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_substitution_handler}>
<b>Create New Substitution</b>
</Button>
</div>
{#await data.substitutions then substitutions}
<Table data={substitutions} columns={substitutions_columns} handler={substitutions_handler} />
{/await}

74
src/routes/data/season/teams/+page.server.ts Normal file
View File

@ -0,0 +1,74 @@
import type { Actions } from "./$types";
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
import { image_to_avif } from "$lib/server/image";
import {
TEAM_BANNER_HEIGHT,
TEAM_BANNER_WIDTH,
TEAM_LOGO_HEIGHT,
TEAM_LOGO_WIDTH,
} from "$lib/config";
export const actions = {
create_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
// Compress banner
const banner_avif: Blob = await image_to_avif(
await (data.get("banner") as File).arrayBuffer(),
TEAM_BANNER_WIDTH,
TEAM_BANNER_HEIGHT,
);
data.set("banner", banner_avif);
// Compress logo
const logo_avif: Blob = await image_to_avif(
await (data.get("logo") as File).arrayBuffer(),
TEAM_LOGO_WIDTH,
TEAM_LOGO_HEIGHT,
);
data.set("logo", logo_avif);
await locals.pb.collection("teams").create(data);
},
update_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
if (data.has("banner")) {
// Compress banner
const banner_avif: Blob = await image_to_avif(
await (data.get("banner") as File).arrayBuffer(),
TEAM_BANNER_WIDTH,
TEAM_BANNER_HEIGHT,
);
data.set("banner", banner_avif);
}
if (data.has("logo")) {
// Compress logo
const logo_avif: Blob = await image_to_avif(
await (data.get("logo") as File).arrayBuffer(),
TEAM_LOGO_WIDTH,
TEAM_LOGO_HEIGHT,
);
data.set("logo", logo_avif);
}
await locals.pb.collection("teams").update(id, data);
},
delete_team: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
await locals.pb.collection("teams").delete(id);
},
} satisfies Actions;

66
src/routes/data/season/teams/+page.svelte Normal file
View File

@ -0,0 +1,66 @@
<script lang="ts">
import { Button, Table, type TableColumn } from "$lib/components";
import type { Team } from "$lib/schema";
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types";
import { get_by_value } from "$lib/database";
let { data }: { data: PageData } = $props();
const teams_columns: TableColumn[] = [
{
data_value_name: "name",
label: "Name",
valuefun: async (value: string): Promise<string> =>
`<span class='badge variant-filled-surface'>${value}</span>`,
},
{
data_value_name: "color",
label: "Color",
valuefun: async (value: string): Promise<string> =>
`<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
},
];
const modalStore: ModalStore = getModalStore();
const teams_handler = async (event: Event, id: string) => {
const team: Team | undefined = get_by_value(data.teams, "id", id);
if (!team) return;
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
team: team,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_team_handler = (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
banner_template:
get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
logo_template:
get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
require_inputs: true,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
</script>
<div class="pb-2">
<Button width="w-full" color="surface" onclick={create_team_handler}>
<b>Create New Team</b>
</Button>
</div>
<Table data={data.teams} columns={teams_columns} handler={teams_handler} />