From 887a9ea2ae0baa3df30296671c9611d38a286534 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 4 Feb 2025 23:01:35 +0100
Subject: [PATCH] Lib: Use progressive form enhancement for all cards

---
 src/lib/components/cards/DriverCard.svelte       |  6 +++++-
 src/lib/components/cards/RaceCard.svelte         |  6 +++++-
 src/lib/components/cards/RacePickCard.svelte     | 13 +++++++++++--
 src/lib/components/cards/RaceResultCard.svelte   |  6 +++++-
 src/lib/components/cards/SubstitutionCard.svelte |  6 +++++-
 src/lib/components/cards/TeamCard.svelte         |  6 +++++-
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/cards/DriverCard.svelte b/src/lib/components/cards/DriverCard.svelte
index 7fa54c4..e73b6d5 100644
--- a/src/lib/components/cards/DriverCard.svelte
+++ b/src/lib/components/cards/DriverCard.svelte
@@ -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>
diff --git a/src/lib/components/cards/RaceCard.svelte b/src/lib/components/cards/RaceCard.svelte
index 869bf65..c50790b 100644
--- a/src/lib/components/cards/RaceCard.svelte
+++ b/src/lib/components/cards/RaceCard.svelte
@@ -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>
diff --git a/src/lib/components/cards/RacePickCard.svelte b/src/lib/components/cards/RacePickCard.svelte
index 3d378d2..9f0d0fd 100644
--- a/src/lib/components/cards/RacePickCard.svelte
+++ b/src/lib/components/cards/RacePickCard.svelte
@@ -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}
diff --git a/src/lib/components/cards/RaceResultCard.svelte b/src/lib/components/cards/RaceResultCard.svelte
index c03e830..3b27e04 100644
--- a/src/lib/components/cards/RaceResultCard.svelte
+++ b/src/lib/components/cards/RaceResultCard.svelte
@@ -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>
diff --git a/src/lib/components/cards/SubstitutionCard.svelte b/src/lib/components/cards/SubstitutionCard.svelte
index 893dd32..0910542 100644
--- a/src/lib/components/cards/SubstitutionCard.svelte
+++ b/src/lib/components/cards/SubstitutionCard.svelte
@@ -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>
diff --git a/src/lib/components/cards/TeamCard.svelte b/src/lib/components/cards/TeamCard.svelte
index 9fe6dbb..3adcadf 100644
--- a/src/lib/components/cards/TeamCard.svelte
+++ b/src/lib/components/cards/TeamCard.svelte
@@ -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>