Data/Season: Add "active" switches on drivers page

src/lib/components/DriverCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
-  import { FileDropzone } from "@skeletonlabs/skeleton";
+  import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
   import Card from "./Card.svelte";
   import Button from "./Button.svelte";
   import type { Driver } from "$lib/schema";
@@ -20,13 +20,14 @@
     /** The [src] of the driver headshot template preview */
     headshot_template?: string;
 
-    // TODO: Move into this component?
-
     /** The value this component's team select dropdown will bind to */
     team_select_value: string;
 
     /** The options this component's team select dropdown will display */
     team_select_options: DropdownOption[];
+
+    /** The value this component's active switch will bind to */
+    active_value: boolean;
   }
 
   let {
@@ -36,6 +37,7 @@
     headshot_template = "",
     team_select_value,
     team_select_options,
+    active_value,
   }: DriverCardProps = $props();
 </script>
 
@@ -103,7 +105,15 @@
       </FileDropzone>
 
       <!-- Save/Delete buttons -->
-      <div class="flex justify-end gap-2">
+      <div class="flex items-center justify-end gap-2">
+        <div class="mr-auto">
+          <SlideToggle
+            name="active"
+            background="bg-primary-500"
+            active="bg-tertiary-500"
+            bind:checked={active_value}
+          />
+        </div>
         {#if driver}
           <Button formaction="?/update_driver" color="secondary" disabled={disable_inputs} submit
             >Save Changes</Button

src/routes/data/season/+page.server.ts

@@ -59,6 +59,9 @@ export const actions = {
     const data: FormData = form_data_clean(await request.formData());
     const id: string = form_data_get_and_remove_id(data);
 
+    // The toggle switch will report "on" or nothing
+    data.set("active", data.has("active") ? "true" : "false");
+
     await locals.pb.collection("drivers").update(id, data);
 
     return { tab: 1 };

src/routes/data/season/+page.svelte

@@ -19,13 +19,18 @@
     current_tab = form.tab;
   }
 
+  // Values for driver cards
   // Maps driver to team: <driver.id, team.id>
   let update_driver_team_select_values: { [key: string]: string } = $state({});
+  let update_driver_active_values: { [key: string]: boolean } = $state({});
   data.drivers.forEach((driver: Driver) => {
     update_driver_team_select_values[driver.id] = driver.team;
+    update_driver_active_values[driver.id] = driver.active;
   });
   update_driver_team_select_values["create"] = "";
+  update_driver_active_values["create"] = true;
 
+  // Values for substitution cards
   let update_substitution_substitute_select_values: { [key: string]: string } = $state({});
   let update_substitution_for_select_values: { [key: string]: string } = $state({});
   let update_substitution_race_select_values: { [key: string]: string } = $state({});
@@ -105,6 +110,7 @@
             disable_inputs={!data.admin}
             team_select_value={update_driver_team_select_values[driver.id]}
             team_select_options={team_dropdown_options}
+            active_value={update_driver_active_values[driver.id]}
           />
         {/each}
 
@@ -114,6 +120,7 @@
             headshot_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
             team_select_value={update_driver_team_select_values["create"]}
             team_select_options={team_dropdown_options}
+            active_value={update_driver_active_values["create"]}
             require_inputs
           />
         {/if}