Data/Season: Split Teams/Drivers/Races/Substitutions into individual routes
This commit is contained in:
77
src/routes/data/season/+layout.server.ts
Normal file
77
src/routes/data/season/+layout.server.ts
Normal 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
22
src/routes/data/season/+layout.svelte
Normal 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>
|
||||||
@ -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(),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -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
59
src/routes/data/season/drivers/+page.server.ts
Normal 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
109
src/routes/data/season/drivers/+page.svelte
Normal 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
64
src/routes/data/season/races/+page.server.ts
Normal 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
81
src/routes/data/season/races/+page.svelte
Normal 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
31
src/routes/data/season/substitutions/+page.server.ts
Normal 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
132
src/routes/data/season/substitutions/+page.svelte
Normal 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
74
src/routes/data/season/teams/+page.server.ts
Normal 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
66
src/routes/data/season/teams/+page.svelte
Normal 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} />
|
||||||
Reference in New Issue
Block a user