christoph/svelte-formula11
1
Fork 0
Code Issues 23 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 { import {
form_data_clean, form_data_clean,
form_data_ensure_keys, form_data_ensure_keys,
@ -286,10 +286,13 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
}; };
return { return {
// Graphics and teams are awaited, since those are visible on page load.
graphics: await fetch_graphics(), graphics: await fetch_graphics(),
teams: await fetch_teams(), teams: await fetch_teams(),
drivers: await fetch_drivers(),
races: await fetch_races(), // The rest is streamed gradually, since the user has to switch tabs to need them.
substitutions: await fetch_substitutions(), 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 // Values for driver cards
// Maps driver to team: <driver.id, team.id> let update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
let update_driver_team_select_values: { [key: string]: string } = $state({});
let update_driver_active_values: { [key: string]: boolean } = $state({}); let update_driver_active_values: { [key: string]: boolean } = $state({});
data.drivers.forEach((driver: Driver) => { data.drivers.then((drivers: Driver[]) =>
update_driver_team_select_values[driver.id] = driver.team; drivers.forEach((driver: Driver) => {
update_driver_active_values[driver.id] = driver.active; 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_team_select_values["create"] = "";
update_driver_active_values["create"] = true; update_driver_active_values["create"] = true;
// Values for substitution cards // Values for substitution cards
let update_substitution_substitute_select_values: { [key: string]: string } = $state({}); const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
let update_substitution_for_select_values: { [key: string]: string } = $state({}); const update_substitution_for_select_values: { [key: string]: string } = $state({});
let update_substitution_race_select_values: { [key: string]: string } = $state({}); const update_substitution_race_select_values: { [key: string]: string } = $state({});
data.substitutions.forEach((substitution: Substitution) => { data.substitutions.then((substitutions: Substitution[]) =>
update_substitution_substitute_select_values[substitution.id] = substitution.substitute; substitutions.forEach((substitution: Substitution) => {
update_substitution_for_select_values[substitution.id] = substitution.for; update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
update_substitution_race_select_values[substitution.id] = substitution.race; 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_substitute_select_values["create"] = "";
update_substitution_for_select_values["create"] = ""; update_substitution_for_select_values["create"] = "";
update_substitution_race_select_values["create"] = ""; update_substitution_race_select_values["create"] = "";
// All options to create a <Dropdown> component for the teams // All options to create a <Dropdown> component for the teams
const team_dropdown_options: DropdownOption[] = data.teams.map((team: Team) => { const team_dropdown_options: DropdownOption[] = [];
return { label: team.name, value: team.id, icon_url: team.logo_url } as 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 // All options to create a <Dropdown> component for the drivers
const driver_dropdown_options: DropdownOption[] = data.drivers.map((driver: Driver) => { const driver_dropdown_options: DropdownOption[] = [];
return { data.drivers.then((drivers: Driver[]) =>
label: driver.code, drivers.forEach((driver: Driver) => {
value: driver.id, driver_dropdown_options.push({
icon_url: driver.headshot_url, label: driver.code,
} as DropdownOption; value: driver.id,
}); icon_url: driver.headshot_url,
});
}),
);
// All options to create a <Dropdown> component for the races // All options to create a <Dropdown> component for the races
const race_dropdown_options: DropdownOption[] = data.races.map((race: Race) => { const race_dropdown_options: DropdownOption[] = [];
return { label: race.name, value: race.id } as DropdownOption; data.races.then((races: Race[]) =>
}); races.forEach((race: Race) => {
race_dropdown_options.push({ label: race.name, value: race.id });
}),
);
</script> </script>
<svelte:head> <svelte:head>
@ -116,15 +126,17 @@
{/if} {/if}
<!-- List all drivers inside the database --> <!-- List all drivers inside the database -->
{#each data.drivers as driver} {#await data.drivers then drivers}
<DriverCard {#each drivers as driver}
{driver} <DriverCard
disable_inputs={!data.admin} {driver}
team_select_value={update_driver_team_select_values[driver.id]} disable_inputs={!data.admin}
team_select_options={team_dropdown_options} team_select_value={update_driver_team_select_values[driver.id]}
active_value={update_driver_active_values[driver.id]} team_select_options={team_dropdown_options}
/> active_value={update_driver_active_values[driver.id]}
{/each} />
{/each}
{/await}
</div> </div>
{:else if current_tab === 2} {:else if current_tab === 2}
<!-- Races Tab --> <!-- Races Tab -->
@ -138,40 +150,48 @@
/> />
{/if} {/if}
{#each data.races as race} {#await data.races then races}
<RaceCard {race} disable_inputs={!data.admin} /> {#each races as race}
{/each} <RaceCard {race} disable_inputs={!data.admin} />
{/each}
{/await}
</div> </div>
{:else if current_tab === 3} {:else if current_tab === 3}
<!-- Substitutions Tab --> <!-- Substitutions Tab -->
<!-- Substitutions Tab --> <!-- 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"> <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} {#await data.drivers then drivers}
<SubstitutionCard {#if data.admin}
drivers={data.drivers} <SubstitutionCard
substitute_select_value={update_substitution_substitute_select_values["create"]} {drivers}
driver_select_value={update_substitution_for_select_values["create"]} substitute_select_value={update_substitution_substitute_select_values["create"]}
race_select_value={update_substitution_race_select_values["create"]} driver_select_value={update_substitution_for_select_values["create"]}
driver_select_options={driver_dropdown_options} race_select_value={update_substitution_race_select_values["create"]}
race_select_options={race_dropdown_options} driver_select_options={driver_dropdown_options}
headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url} race_select_options={race_dropdown_options}
require_inputs headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
/> require_inputs
{/if} />
{/if}
{#each data.substitutions as substitution} {#await data.substitutions then substitutions}
<SubstitutionCard {#each substitutions as substitution}
{substitution} <SubstitutionCard
drivers={data.drivers} {substitution}
substitute_select_value={update_substitution_substitute_select_values[substitution.id]} {drivers}
driver_select_value={update_substitution_for_select_values[substitution.id]} substitute_select_value={update_substitution_substitute_select_values[
race_select_value={update_substitution_race_select_values[substitution.id]} substitution.id
driver_select_options={driver_dropdown_options} ]}
race_select_options={race_dropdown_options} driver_select_value={update_substitution_for_select_values[substitution.id]}
disable_inputs={!data.admin} race_select_value={update_substitution_race_select_values[substitution.id]}
/> driver_select_options={driver_dropdown_options}
{/each} race_select_options={race_dropdown_options}
disable_inputs={!data.admin}
/>
{/each}
{/await}
{/await}
</div> </div>
{/if} {/if}
</svelte:fragment> </svelte:fragment>