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

Data/Season: Implement substitutions page

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-15 20:58:00 +01:00
parent dbd423dfd3
commit 655a9377fe
2 changed files with 83 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,7 @@
<script lang="ts">
import { Input, Button, Card, Search, Dropdown } from "$lib/components";
import { get_image_preview_event_handler } from "$lib/image";
import type { Driver, Team } from "$lib/schema";
import type { Driver, Race, Substitution, Team } from "$lib/schema";
import { type PageData, type ActionData } from "./$types";
import { FileDropzone, Tab, TabGroup, type AutocompleteOption } from "@skeletonlabs/skeleton";
import { Tab, TabGroup } from "@skeletonlabs/skeleton";
// TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
import type { DropdownOption } from "$lib/components/Dropdown.svelte";
@ -11,6 +9,7 @@
import TeamCard from "$lib/components/TeamCard.svelte";
import DriverCard from "$lib/components/DriverCard.svelte";
import RaceCard from "$lib/components/RaceCard.svelte";
import SubstitutionCard from "$lib/components/SubstitutionCard.svelte";
let { data, form }: { data: PageData; form: ActionData } = $props();
@ -27,9 +26,32 @@
});
update_driver_team_select_values["create"] = "";
const driver_team_select_options: DropdownOption[] = data.teams.map((team: Team) => {
let update_substitution_substitute_select_values: { [key: string]: string } = $state({});
let update_substitution_for_select_values: { [key: string]: string } = $state({});
let update_substitution_race_select_values: { [key: string]: string } = $state({});
data.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: DropdownOption[] = data.teams.map((team: Team) => {
return { label: team.name, value: team.id } as DropdownOption;
});
// All options to create a <Dropdown> component for the drivers
const driver_dropdown_options: DropdownOption[] = data.drivers.map((driver: Driver) => {
return { label: driver.code, value: driver.id } as DropdownOption;
});
// All options to create a <Dropdown> component for the races
const race_dropdown_options: DropdownOption[] = data.races.map((race: Race) => {
return { label: race.name, value: race.id } as DropdownOption;
});
</script>
<svelte:head>
@ -81,17 +103,17 @@
<DriverCard
{driver}
disable_inputs={!data.admin}
team_select_values={update_driver_team_select_values}
team_select_options={driver_team_select_options}
team_select_value={update_driver_team_select_values[driver.id]}
team_select_options={team_dropdown_options}
/>
{/each}
<!-- Add a new driver -->
{#if data.admin}
<DriverCard
logo_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
team_select_values={update_driver_team_select_values}
team_select_options={driver_team_select_options}
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}
require_inputs
/>
{/if}
@ -116,7 +138,33 @@
<!-- Substitutions Tab -->
<!-- Substitutions Tab -->
<!-- Substitutions Tab -->
<span>Substitutions</span>
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{#each data.substitutions as substitution}
<SubstitutionCard
{substitution}
drivers={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}
/>
{/each}
{#if data.admin}
<SubstitutionCard
drivers={data.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}
</div>
{/if}
</svelte:fragment>
</TabGroup>