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

Lib: Implement team and driver cards

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-14 17:13:45 +01:00
parent dcd1444ba7
commit 52a8d8f4ff
2 changed files with 196 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/lib/components/DriverCard.svelte Normal file
View File

@ -0,0 +1,116 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import Card from "./Card.svelte";
import Button from "./Button.svelte";
import type { Driver } from "$lib/schema";
import Input from "./Input.svelte";
import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
interface DriverCardProps {
/** The [Driver] object used to prefill values. */
driver?: Driver | undefined;
/** Disable all inputs if [true] */
disable_inputs?: boolean;
/** Require all inputs if [true] */
require_inputs?: boolean;
/** The [src] of the team logo template preview */
logo_template?: string;
team_select_values: { [key: string]: string };
team_select_options: DropdownOption[];
}
let {
driver = undefined,
disable_inputs = false,
require_inputs = false,
logo_template = "",
team_select_values,
team_select_options,
}: DriverCardProps = $props();
</script>
<Card
imgsrc={driver?.headshot_url ?? logo_template}
imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if driver && !disable_inputs}
<input name="id" type="hidden" value={driver.id} />
{/if}
<div class="flex flex-col gap-2">
<!-- Driver name input -->
<Input
id="driver_first_name_{driver?.id ?? 'create'}"
name="firstname"
value={driver?.firstname ?? ""}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>First Name</Input
>
<Input
id="driver_last_name_{driver?.id ?? 'create'}"
name="lastname"
value={driver?.lastname ?? ""}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Last Name</Input
>
<Input
id="driver_code_{driver?.id ?? 'create'}"
name="code"
value={driver?.code ?? ""}
minlength={3}
maxlength={3}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Driver Code</Input
>
<!-- Driver team input -->
<Dropdown
name="team"
input_variable={team_select_values[driver?.id ?? "create"]}
options={team_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Team</Dropdown
>
<!-- Headshot upload -->
<FileDropzone
name="headshot"
id="driver_headshot_{driver?.id ?? 'create'}"
onchange={get_image_preview_event_handler(
`update_driver_headshot_preview_${driver?.id ?? "create"}`,
)}
disabled={disable_inputs}
required={require_inputs}
>
<svelte:fragment slot="message"><b>Upload Headshot</b> or Drag and Drop</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex justify-end gap-2">
{#if driver}
<Button formaction="?/update_driver" color="secondary" disabled={disable_inputs} submit
>Save Changes</Button
>
<Button color="primary" submit disabled={disable_inputs} formaction="?/delete_driver"
>Delete</Button
>
{:else}
<Button formaction="?/create_driver" color="tertiary" submit>Create Driver</Button>
{/if}
</div>
</div>
</form>
</Card>

80
src/lib/components/TeamCard.svelte Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import Card from "./Card.svelte";
import Button from "./Button.svelte";
import type { Team } from "$lib/schema";
import Input from "./Input.svelte";
interface TeamCardProps {
/** The [Team] object used to prefill values. */
team?: Team | undefined;
/** Disable all inputs if [true] */
disable_inputs?: boolean;
/** Require all inputs if [true] */
require_inputs?: boolean;
/** The [src] of the team logo template preview */
logo_template?: string;
}
let {
team = undefined,
disable_inputs = false,
require_inputs = false,
logo_template = "",
}: TeamCardProps = $props();
</script>
<Card
imgsrc={team?.logo_url ?? logo_template}
imgid="update_team_logo_preview_{team?.id ?? 'create'}"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if team && !disable_inputs}
<input name="id" type="hidden" value={team.id} />
{/if}
<div class="flex flex-col gap-2">
<!-- Team name input -->
<Input
id="team_name_{team?.id ?? 'create'}"
name="name"
value={team?.name ?? ""}
disabled={disable_inputs}
required={require_inputs}>Name</Input
>
<!-- Logo upload -->
<FileDropzone
name="logo"
id="team_logo_{team?.id ?? 'create'}"
onchange={get_image_preview_event_handler(
`update_team_logo_preview_${team?.id ?? "create"}`,
)}
disabled={disable_inputs}
required={require_inputs}
>
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex justify-end gap-2">
{#if team}
<Button formaction="?/update_team" color="secondary" disabled={disable_inputs} submit
>Save Changes</Button
>
<Button color="primary" submit disabled={disable_inputs} formaction="?/delete_team"
>Delete</Button
>
{:else}
<Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
{/if}
</div>
</div>
</form>
</Card>