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

Lib: Make driver-/race-/team- and substitution-card non-lazy

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-23 01:19:31 +01:00
parent 04650f624e
commit 392e61ca49
4 changed files with 93 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/lib/components/cards/DriverCard.svelte
View File

@ -1,14 +1,13 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
import { Button, Input, LazyCard, LazyDropdown, type LazyDropdownOption } from "$lib/components";
import type { Driver } from "$lib/schema";
import {
DRIVER_CARD_ASPECT_HEIGHT,
DRIVER_CARD_ASPECT_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
} from "$lib/config";
FileDropzone,
getModalStore,
SlideToggle,
type ModalStore,
} from "@skeletonlabs/skeleton";
import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
import type { Driver } from "$lib/schema";
interface DriverCardProps {
/** The [Driver] object used to prefill values. */
@ -27,7 +26,7 @@
team_select_value: string;
/** The options this component's team select dropdown will display */
team_select_options: LazyDropdownOption[];
team_select_options: DropdownOption[];
/** The value this component's active switch will bind to */
active_value: boolean;
@ -42,15 +41,22 @@
team_select_options,
active_value,
}: DriverCardProps = $props();
const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) {
const meta = $modalStore[0].meta;
driver = meta.driver;
team_select_value = meta.team_select_value;
team_select_options = meta.team_select_options;
active_value = meta.active_value;
}
</script>
<LazyCard
cardwidth={DRIVER_CARD_ASPECT_WIDTH}
cardheight={DRIVER_CARD_ASPECT_HEIGHT}
<Card
imgsrc={driver?.headshot_url ?? headshot_template}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
width="w-full sm:w-auto"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
@ -95,15 +101,16 @@
</Input>
<!-- Driver team input -->
<LazyDropdown
<Dropdown
name="team"
input_variable={team_select_value}
options={team_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}
>Team
</LazyDropdown>
>
Team
</Dropdown>
<!-- Headshot upload -->
<FileDropzone
@ -149,11 +156,11 @@
Delete
</Button>
{:else}
<Button formaction="?/create_driver" color="tertiary" submit width="w-full"
>Create Driver</Button
>
<Button formaction="?/create_driver" color="tertiary" submit width="w-full">
Create Driver
</Button>
{/if}
</div>
</div>
</form>
</LazyCard>
</Card>

26
src/lib/components/cards/RaceCard.svelte
View File

@ -1,15 +1,9 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import { Button, LazyCard, Input } from "$lib/components";
import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { Button, Card, Input } from "$lib/components";
import type { Race } from "$lib/schema";
import { format } from "date-fns";
import {
RACE_CARD_ASPECT_HEIGHT,
RACE_CARD_ASPECT_WIDTH,
RACE_PICTOGRAM_HEIGHT,
RACE_PICTOGRAM_WIDTH,
} from "$lib/config";
interface RaceCardProps {
/** The [Race] object used to prefill values. */
@ -32,6 +26,13 @@
pictogram_template = "",
}: RaceCardProps = $props();
const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) {
const meta = $modalStore[0].meta;
race = meta.race;
}
// Dates have to be formatted to datetime-local format
const dateformat: string = "yyyy-MM-dd'T'HH:mm";
const sprintqualidate: string | undefined =
@ -60,13 +61,10 @@
const labelwidth = "80px";
</script>
<LazyCard
cardwidth={RACE_CARD_ASPECT_WIDTH}
cardheight={RACE_CARD_ASPECT_HEIGHT}
<Card
imgsrc={race?.pictogram_url ?? pictogram_template}
imgwidth={RACE_PICTOGRAM_WIDTH}
imgheight={RACE_PICTOGRAM_HEIGHT}
imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
width="w-full sm:w-auto"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
@ -182,4 +180,4 @@
</div>
</div>
</form>
</LazyCard>
</Card>

68
src/lib/components/cards/SubstitutionCard.svelte
View File

@ -1,15 +1,9 @@
<script lang="ts">
import LazyCard from "./LazyCard.svelte";
import { Button, LazyDropdown, type LazyDropdownOption } from "$lib/components";
import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
import type { Driver, Substitution } from "$lib/schema";
import { get_by_value } from "$lib/database";
import type { Action } from "svelte/action";
import {
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
SUBSTITUTION_CARD_ASPECT_HEIGHT,
SUBSTITUTION_CARD_ASPECT_WIDTH,
} from "$lib/config";
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
interface SubstitutionCardProps {
/** The [Substitution] object used to prefill values. */
@ -37,10 +31,10 @@
race_select_value: string;
/** The options this component's substitute/driver select dropdowns will display */
driver_select_options: LazyDropdownOption[];
driver_select_options: DropdownOption[];
/** The options this component's race select dropdown will display */
race_select_options: LazyDropdownOption[];
race_select_options: DropdownOption[];
}
let {
@ -56,6 +50,19 @@
race_select_options,
}: SubstitutionCardProps = $props();
const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) {
const meta = $modalStore[0].meta;
substitution = meta.substitution;
drivers = meta.drivers;
substitute_select_value = meta.substitute_select_value;
driver_select_value = meta.driver_select_value;
race_select_value = meta.race_select_value;
driver_select_options = meta.driver_select_options;
race_select_options = meta.race_select_options;
}
// This action is used on the <Dropdown> element.
// It will trigger once the Dropdown's <input> elements is mounted.
// This way we'll receive a reference to the object so we can register our event handler.
@ -80,14 +87,11 @@
};
</script>
<LazyCard
cardwidth={SUBSTITUTION_CARD_ASPECT_WIDTH}
cardheight={SUBSTITUTION_CARD_ASPECT_HEIGHT}
<Card
imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
headshot_template}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
width="w-full sm:w-auto"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
@ -98,7 +102,7 @@
<div class="flex flex-col gap-2">
<!-- Substitute select -->
<LazyDropdown
<Dropdown
name="substitute"
input_variable={substitute_select_value}
action={register_substitute_preview_handler}
@ -108,29 +112,31 @@
required={require_inputs}
>
Substitute
</LazyDropdown>
</Dropdown>
<!-- Driver select -->
<LazyDropdown
<Dropdown
name="for"
input_variable={driver_select_value}
options={driver_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}
>For
</LazyDropdown>
>
For
</Dropdown>
<!-- Race select -->
<LazyDropdown
<Dropdown
name="race"
input_variable={race_select_value}
options={race_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}
>Race
</LazyDropdown>
>
Race
</Dropdown>
<!-- Save/Delete buttons -->
<div class="flex justify-end gap-2">
@ -139,20 +145,24 @@
formaction="?/update_substitution"
color="secondary"
disabled={disable_inputs}
submit>Save Changes</Button
submit
>
Save Changes
</Button>
<Button
color="primary"
submit
disabled={disable_inputs}
formaction="?/delete_substitution">Delete</Button
formaction="?/delete_substitution"
>
Delete
</Button>
{:else}
<Button formaction="?/create_substitution" color="tertiary" submit
>Create Substitution</Button
>
<Button formaction="?/create_substitution" color="tertiary" submit>
Create Substitution
</Button>
{/if}
</div>
</div>
</form>
</LazyCard>
</Card>

35
src/lib/components/cards/TeamCard.svelte
View File

@ -1,17 +1,8 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import { Button, Input, LazyImage } from "$lib/components";
import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { Card, Button, Input, Image } from "$lib/components";
import type { Team } from "$lib/schema";
import {
TEAM_CARD_ASPECT_HEIGHT,
TEAM_CARD_ASPECT_WIDTH,
TEAM_BANNER_HEIGHT,
TEAM_BANNER_WIDTH,
TEAM_LOGO_WIDTH,
TEAM_LOGO_HEIGHT,
} from "$lib/config";
import LazyCard from "./LazyCard.svelte";
interface TeamCardProps {
/** The [Team] object used to prefill values. */
@ -41,15 +32,19 @@
const labelwidth: string = "110px";
let colorpreview: string = $state(team?.color ?? "white");
const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) {
const meta = $modalStore[0].meta;
team = meta.team;
}
</script>
<LazyCard
cardwidth={TEAM_CARD_ASPECT_WIDTH}
cardheight={TEAM_CARD_ASPECT_HEIGHT}
<Card
imgsrc={team?.banner_url ?? banner_template}
imgwidth={TEAM_BANNER_WIDTH}
imgheight={TEAM_BANNER_HEIGHT}
imgid="update_team_banner_preview_{team?.id ?? 'create'}"
width="w-full sm:w-auto"
>
<form method="POST" enctype="multipart/form-data">
<!-- This is also disabled, because the ID should only be -->
@ -117,12 +112,10 @@
<svelte:fragment slot="message">
<div class="inline-flex flex-nowrap items-center gap-2">
<b>Upload Logo</b>
<LazyImage
<Image
src={team?.logo_url ?? logo_template}
imgwidth={TEAM_LOGO_WIDTH}
imgheight={TEAM_LOGO_HEIGHT}
imgstyle="width: 32px; height: 32px;"
id="update_team_logo_preview_{team?.id ?? 'create'}"
style="width: 32px; height: 32px;"
/>
</div>
</svelte:fragment>
@ -157,4 +150,4 @@
</div>
</div>
</form>
</LazyCard>
</Card>