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

Lib: Use progressive form enhancement for all cards

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-04 23:01:35 +01:00
parent 09519c18fa
commit 887a9ea2ae
6 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
import type { Driver, Team } from "$lib/schema";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { team_dropdown_options } from "$lib/dropdown";
import { enhance } from "$app/forms";
interface DriverCardProps {
/** The [Driver] object used to prefill values. */
@ -71,7 +72,7 @@
imgheight={DRIVER_HEADSHOT_HEIGHT}
imgonclick={(event: Event) => modalStore.close()}
>
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if driver && !disable_inputs}
@ -158,6 +159,7 @@
disabled={disable_inputs}
submit
width="w-1/2"
onclick={() => modalStore.close()}
>
Save
</Button>
@ -167,6 +169,7 @@
disabled={disable_inputs}
formaction="?/delete_driver"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete
</Button>
@ -177,6 +180,7 @@
submit
width="w-full"
disabled={disable_inputs}
onclick={() => modalStore.close()}
>
Create Driver
</Button>

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

@ -5,6 +5,7 @@
import type { Race } from "$lib/schema";
import { format } from "date-fns";
import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
import { enhance } from "$app/forms";
interface RaceCardProps {
/** The [Race] object used to prefill values. */
@ -76,7 +77,7 @@
imgheight={RACE_PICTOGRAM_HEIGHT}
imgonclick={(event: Event) => modalStore.close()}
>
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if race && !disable_inputs}
@ -186,6 +187,7 @@
disabled={disable_inputs}
submit
width="w-1/3"
onclick={() => modalStore.close()}
>
Save Changes
</Button>
@ -195,6 +197,7 @@
disabled={disable_inputs}
formaction="?/delete_race"
width="w-1/3"
onclick={() => modalStore.close()}
>
Delete
</Button>
@ -205,6 +208,7 @@
submit
width="w-1/2"
disabled={disable_inputs}
onclick={() => modalStore.close()}
>
Create Race
</Button>

13
src/lib/components/cards/RacePickCard.svelte
View File

@ -6,6 +6,7 @@
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { driver_dropdown_options } from "$lib/dropdown";
import { enhance } from "$app/forms";
interface RacePickCardProps {
/** The [RacePick] object used to prefill values. */
@ -91,7 +92,7 @@
imgheight={DRIVER_HEADSHOT_HEIGHT}
imgonclick={(event: Event) => modalStore.close()}
>
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if racepick && !disable_inputs}
@ -134,6 +135,7 @@
disabled={disable_inputs}
submit
width="w-1/2"
onclick={() => modalStore.close()}
>
Save Changes
</Button>
@ -143,11 +145,18 @@
disabled={disable_inputs}
formaction="?/delete_racepick"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete
</Button>
{:else}
<Button formaction="?/create_racepick" color="tertiary" submit width="w-full">
<Button
formaction="?/create_racepick"
color="tertiary"
submit
width="w-full"
onclick={() => modalStore.close()}
>
Make Pick
</Button>
{/if}

6
src/lib/components/cards/RaceResultCard.svelte
View File

@ -10,6 +10,7 @@
import type { Driver, Race, RaceResult } from "$lib/schema";
import { get_by_value } from "$lib/database";
import { race_dropdown_options } from "$lib/dropdown";
import { enhance } from "$app/forms";
interface RaceResultCardProps {
/** The [RaceResult] object used to prefill values. */
@ -146,7 +147,7 @@
</script>
<Card width="w-full sm:w-[512px]">
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if result2 && !disable_inputs2}
@ -224,6 +225,7 @@
disabled={disable_inputs2}
submit
width="w-1/2"
onclick={() => modalStore.close()}
>
Save
</Button>
@ -233,6 +235,7 @@
disabled={disable_inputs2}
formaction="?/delete_raceresult"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete
</Button>
@ -243,6 +246,7 @@
submit
width="w-full"
disabled={disable_inputs2}
onclick={() => modalStore.close()}
>
Create Result
</Button>

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

@ -6,6 +6,7 @@
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { driver_dropdown_options, race_dropdown_options } from "$lib/dropdown";
import { enhance } from "$app/forms";
interface SubstitutionCardProps {
/** The [Substitution] object used to prefill values. */
@ -104,7 +105,7 @@
imgheight={DRIVER_HEADSHOT_HEIGHT}
imgonclick={(event: Event) => modalStore.close()}
>
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if substitution && !disable_inputs}
@ -158,6 +159,7 @@
disabled={disable_inputs}
submit
width="w-1/2"
onclick={() => modalStore.close()}
>
Save Changes
</Button>
@ -167,6 +169,7 @@
disabled={disable_inputs}
formaction="?/delete_substitution"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete
</Button>
@ -177,6 +180,7 @@
submit
width="w-full"
disabled={disable_inputs}
onclick={() => modalStore.close()}
>
Create Substitution
</Button>

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

@ -4,6 +4,7 @@
import { Card, Button, Input, LazyImage } from "$lib/components";
import type { Team } from "$lib/schema";
import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
import { enhance } from "$app/forms";
interface TeamCardProps {
/** The [Team] object used to prefill values. */
@ -57,7 +58,7 @@
imgheight={TEAM_BANNER_HEIGHT}
imgonclick={(event: Event) => modalStore.close()}
>
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" use:enhance>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if team && !disable_inputs}
@ -147,6 +148,7 @@
disabled={disable_inputs}
submit
width="w-1/2"
onclick={() => modalStore.close()}
>
Save
</Button>
@ -156,6 +158,7 @@
disabled={disable_inputs}
formaction="?/delete_team"
width="w-1/2"
onclick={() => modalStore.close()}
>
Delete
</Button>
@ -166,6 +169,7 @@
submit
width="w-full"
disabled={disable_inputs}
onclick={() => modalStore.close()}
>
Create Team
</Button>