Data/Season: Use team/driver card components
This commit is contained in:
@ -8,6 +8,8 @@
|
||||
// TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
|
||||
import type { DropdownOption } from "$lib/components/Dropdown.svelte";
|
||||
import { get_by_value } from "$lib/database";
|
||||
import TeamCard from "$lib/components/TeamCard.svelte";
|
||||
import DriverCard from "$lib/components/DriverCard.svelte";
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
|
||||
@ -18,11 +20,11 @@
|
||||
}
|
||||
|
||||
// Maps driver to team: <driver.id, team.id>
|
||||
let create_driver_team_select_value: string = $state("");
|
||||
let update_driver_team_select_values: { [key: string]: string } = $state({});
|
||||
data.drivers.forEach((driver: Driver) => {
|
||||
update_driver_team_select_values[driver.id] = driver.team;
|
||||
});
|
||||
update_driver_team_select_values["create"] = "";
|
||||
|
||||
const driver_team_select_options: DropdownOption[] = data.teams.map((team: Team) => {
|
||||
return { label: team.name, value: team.id } as DropdownOption;
|
||||
@ -57,77 +59,15 @@
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all teams inside the database -->
|
||||
{#each data.teams as team}
|
||||
<Card imgsrc={team.logo_url} imgid="update_team_logo_preview_{team.id}">
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{#if data.admin}
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
|
||||
>Name</Input
|
||||
>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team.id}"
|
||||
onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
|
||||
disabled={!data.admin}
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Logo</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/update_team" color="secondary" disabled={!data.admin} submit
|
||||
>Save Changes</Button
|
||||
>
|
||||
<Button color="primary" submit disabled={!data.admin} formaction="?/delete_team"
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<TeamCard {team} disable_inputs={!data.admin} />
|
||||
{/each}
|
||||
|
||||
<!-- Add a new team -->
|
||||
{#if data.admin}
|
||||
<Card
|
||||
imgsrc={get_by_value(data.graphics, "name", "team_template")?.file_url}
|
||||
imgid="create_team_logo_preview"
|
||||
>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Team name input -->
|
||||
<Input id="team_name_create" name="name" required>Name</Input>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_create"
|
||||
onchange={get_image_preview_event_handler("create_team_logo_preview")}
|
||||
disabled={!data.admin}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Logo</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<!-- By specifying the formaction on the button (instead of action on the form), -->
|
||||
<!-- we can have multiple buttons with different actions in a single form. -->
|
||||
|
||||
<Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<TeamCard
|
||||
logo_template={get_by_value(data.graphics, "name", "team_template")?.file_url}
|
||||
require_inputs
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_tab === 1}
|
||||
@ -138,130 +78,22 @@
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all drivers inside the database -->
|
||||
{#each data.drivers as driver}
|
||||
<Card imgsrc={driver.headshot_url} imgid="update_driver_headshot_preview_{driver.id}">
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{#if data.admin}
|
||||
<input name="id" type="hidden" value={driver.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Driver data input -->
|
||||
<Input
|
||||
id="driver_first_name_{driver.id}"
|
||||
name="firstname"
|
||||
value={driver.firstname}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>First Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_last_name_{driver.id}"
|
||||
name="lastname"
|
||||
value={driver.lastname}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>Last Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_code_{driver.id}"
|
||||
name="code"
|
||||
value={driver.code}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>Driver Code</Input
|
||||
>
|
||||
|
||||
<!-- Driver team input -->
|
||||
<Dropdown
|
||||
name="team"
|
||||
input_variable={update_driver_team_select_values[driver.id]}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}
|
||||
options={driver_team_select_options}>Team</Dropdown
|
||||
>
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
id="driver_headshot_{driver.id}"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_driver_headshot_preview_${driver.id}`,
|
||||
)}
|
||||
disabled={!data.admin}
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
formaction="?/update_driver"
|
||||
color="secondary"
|
||||
disabled={!data.admin}
|
||||
submit>Save Changes</Button
|
||||
>
|
||||
<Button formaction="?/delete_driver" color="primary" disabled={!data.admin} submit
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<DriverCard
|
||||
{driver}
|
||||
disable_inputs={!data.admin}
|
||||
team_select_values={update_driver_team_select_values}
|
||||
team_select_options={driver_team_select_options}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new driver -->
|
||||
{#if data.admin}
|
||||
<Card
|
||||
imgsrc={get_by_value(data.graphics, "name", "driver_template")?.file_url}
|
||||
imgid="create_driver_headshot_preview"
|
||||
>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Driver data input -->
|
||||
<Input id="driver_first_name_create" name="firstname" labelwidth="120px" required
|
||||
>First Name</Input
|
||||
>
|
||||
<Input id="driver_last_name_create" name="lastname" labelwidth="120px" required
|
||||
>Last Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_code_create"
|
||||
name="code"
|
||||
labelwidth="120px"
|
||||
maxlength={3}
|
||||
minlength={3}
|
||||
required>Driver Code</Input
|
||||
>
|
||||
|
||||
<!-- Driver team input -->
|
||||
<Dropdown
|
||||
input_variable={create_driver_team_select_value}
|
||||
name="team"
|
||||
labelwidth="120px"
|
||||
options={driver_team_select_options}
|
||||
required>Team</Dropdown
|
||||
>
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
id="driver_headshot_create"
|
||||
onchange={get_image_preview_event_handler("create_driver_headshot_preview")}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/create_driver" color="secondary" submit
|
||||
>Create Driver</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<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}
|
||||
require_inputs
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_tab === 2}
|
||||
|
||||
Reference in New Issue
Block a user