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

Data/Season: Stream drivers, races and substitutes as promises for data/season page

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-16 04:03:37 +01:00
parent cb51e01e98
commit 57b4253d99
2 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import type { Actions, PageServerLoad } from "./$types";
import type { ActionData, Actions, PageServerLoad } from "./$types";
import {
form_data_clean,
form_data_ensure_keys,
@ -286,10 +286,13 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
};
return {
// Graphics and teams are awaited, since those are visible on page load.
graphics: await fetch_graphics(),
teams: await fetch_teams(),
drivers: await fetch_drivers(),
races: await fetch_races(),
substitutions: await fetch_substitutions(),
// The rest is streamed gradually, since the user has to switch tabs to need them.
drivers: fetch_drivers(),
races: fetch_races(),
substitutions: fetch_substitutions(),
};
};

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

@ -17,47 +17,57 @@
}
// Values for driver cards
// Maps driver to team: <driver.id, team.id>
let update_driver_team_select_values: { [key: string]: string } = $state({});
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.forEach((driver: Driver) => {
update_driver_team_select_values[driver.id] = driver.team;
update_driver_active_values[driver.id] = driver.active;
});
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
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;
});
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: DropdownOption[] = data.teams.map((team: Team) => {
return { label: team.name, value: team.id, icon_url: team.logo_url } as DropdownOption;
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 });
});
// 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,
icon_url: driver.headshot_url,
} as DropdownOption;
});
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,
});
}),
);
// 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;
});
const race_dropdown_options: DropdownOption[] = [];
data.races.then((races: Race[]) =>
races.forEach((race: Race) => {
race_dropdown_options.push({ label: race.name, value: race.id });
}),
);
</script>
<svelte:head>
@ -116,15 +126,17 @@
{/if}
<!-- List all drivers inside the database -->
{#each data.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 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 -->
@ -138,40 +150,48 @@
/>
{/if}
{#each data.races as race}
<RaceCard {race} disable_inputs={!data.admin} />
{/each}
{#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">
{#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}
{#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}
{#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}
{#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>