christoph/svelte-formula11
1
Fork 0
Code Issues 21 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

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

@ -15,7 +15,7 @@ export const actions = {
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["name", "logo"]);
const record: Team = await locals.pb.collection("teams").create(data);
await locals.pb.collection("teams").create(data);
return { tab: 0 };
},
@ -26,7 +26,7 @@ export const actions = {
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
const record: Team = await locals.pb.collection("teams").update(id, data);
await locals.pb.collection("teams").update(id, data);
return { tab: 0 };
},
@ -48,7 +48,7 @@ export const actions = {
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot", "active"]);
const record: Driver = await locals.pb.collection("drivers").create(data);
await locals.pb.collection("drivers").create(data);
return { tab: 1 };
},
@ -59,7 +59,7 @@ export const actions = {
const data: FormData = form_data_clean(await request.formData());
const id: string = form_data_get_and_remove_id(data);
const record: Driver = await locals.pb.collection("drivers").update(id, data);
await locals.pb.collection("drivers").update(id, data);
return { tab: 1 };
},
@ -82,7 +82,7 @@ export const actions = {
form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
const record: Race = await locals.pb.collection("races").create(data);
await locals.pb.collection("races").create(data);
return { tab: 2 };
},
@ -98,7 +98,7 @@ export const actions = {
form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
const id: string = form_data_get_and_remove_id(data);
const record: Race = await locals.pb.collection("races").update(id, data);
await locals.pb.collection("races").update(id, data);
return { tab: 2 };
},
@ -117,19 +117,34 @@ export const actions = {
create_substitution: async ({ request, locals }) => {
if (!locals.admin) return { unauthorized: true };
return { tab: 2 };
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 };
return { tab: 2 };
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 };
return { tab: 2 };
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;

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>