220 lines
8.1 KiB
Svelte
220 lines
8.1 KiB
Svelte
<script lang="ts">
|
|
import type { Driver, Race, Substitution, Team } from "$lib/schema";
|
|
import { type PageData, type ActionData } from "./$types";
|
|
import { Tab, TabGroup } from "@skeletonlabs/skeleton";
|
|
|
|
// TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
|
|
import type { LazyDropdownOption } from "$lib/components/LazyDropdown.svelte";
|
|
import { TeamCard, DriverCard, RaceCard, SubstitutionCard } 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();
|
|
|
|
let current_tab: number = $state(0);
|
|
if (form?.tab) {
|
|
// console.log(`Form returned current_tab=${form.current_tab}`);
|
|
current_tab = form.tab;
|
|
}
|
|
|
|
// 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"] = "";
|
|
|
|
// All options to create a <Dropdown> component for the teams
|
|
const team_dropdown_options: LazyDropdownOption[] = [];
|
|
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: LazyDropdownOption[] = [];
|
|
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: LazyDropdownOption[] = [];
|
|
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,
|
|
});
|
|
}),
|
|
);
|
|
</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="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
|
<!-- Add a new team -->
|
|
{#if data.admin}
|
|
<TeamCard
|
|
logo_template={get_by_value(data.graphics, "name", "team_template")?.file_url}
|
|
require_inputs
|
|
/>
|
|
{/if}
|
|
|
|
<!-- List all teams inside the database -->
|
|
{#each data.teams as team}
|
|
<TeamCard {team} disable_inputs={!data.admin} />
|
|
{/each}
|
|
</div>
|
|
{:else if current_tab === 1}
|
|
<!-- Drivers Tab -->
|
|
<!-- Drivers Tab -->
|
|
<!-- Drivers Tab -->
|
|
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
|
<!-- Add a new driver -->
|
|
{#if data.admin}
|
|
<DriverCard
|
|
headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
|
|
team_select_value={update_driver_team_select_values["create"]}
|
|
team_select_options={team_dropdown_options}
|
|
active_value={update_driver_active_values["create"]}
|
|
require_inputs
|
|
/>
|
|
{/if}
|
|
|
|
<!-- List all drivers inside the database -->
|
|
{#await data.drivers then drivers}
|
|
{#each drivers as driver}
|
|
<DriverCard
|
|
{driver}
|
|
disable_inputs={!data.admin}
|
|
team_select_value={update_driver_team_select_values[driver.id]}
|
|
team_select_options={team_dropdown_options}
|
|
active_value={update_driver_active_values[driver.id]}
|
|
/>
|
|
{/each}
|
|
{/await}
|
|
</div>
|
|
{:else if current_tab === 2}
|
|
<!-- Races Tab -->
|
|
<!-- Races Tab -->
|
|
<!-- Races Tab -->
|
|
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-3 2xl:grid-cols-5">
|
|
{#if data.admin}
|
|
<RaceCard
|
|
pictogram_template={get_by_value(data.graphics, "name", "race_template")?.file_url}
|
|
require_inputs
|
|
/>
|
|
{/if}
|
|
|
|
{#await data.races then races}
|
|
{#each races as race}
|
|
<RaceCard {race} disable_inputs={!data.admin} />
|
|
{/each}
|
|
{/await}
|
|
</div>
|
|
{:else if current_tab === 3}
|
|
<!-- Substitutions Tab -->
|
|
<!-- Substitutions Tab -->
|
|
<!-- Substitutions Tab -->
|
|
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
|
{#await data.drivers then drivers}
|
|
{#if data.admin}
|
|
<SubstitutionCard
|
|
{drivers}
|
|
substitute_select_value={update_substitution_substitute_select_values["create"]}
|
|
driver_select_value={update_substitution_for_select_values["create"]}
|
|
race_select_value={update_substitution_race_select_values["create"]}
|
|
driver_select_options={driver_dropdown_options}
|
|
race_select_options={race_dropdown_options}
|
|
headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
|
|
require_inputs
|
|
/>
|
|
{/if}
|
|
|
|
{#await data.substitutions then substitutions}
|
|
{#each substitutions as substitution}
|
|
<SubstitutionCard
|
|
{substitution}
|
|
{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}
|
|
/>
|
|
{/each}
|
|
{/await}
|
|
{/await}
|
|
</div>
|
|
{/if}
|
|
</svelte:fragment>
|
|
</TabGroup>
|