From b1f6865ad0d2479b80cb1e1f14e2f0ab9209b3e0 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Sat, 14 Dec 2024 17:13:45 +0100
Subject: [PATCH] Lib: Implement team and driver cards

---
 src/lib/components/DriverCard.svelte | 116 +++++++++++++++++++++++++++
 src/lib/components/TeamCard.svelte   |  80 ++++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 src/lib/components/DriverCard.svelte
 create mode 100644 src/lib/components/TeamCard.svelte

diff --git a/src/lib/components/DriverCard.svelte b/src/lib/components/DriverCard.svelte
new file mode 100644
index 0000000..48b7b7b
--- /dev/null
+++ b/src/lib/components/DriverCard.svelte
@@ -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>
diff --git a/src/lib/components/TeamCard.svelte b/src/lib/components/TeamCard.svelte
new file mode 100644
index 0000000..ce9b0db
--- /dev/null
+++ b/src/lib/components/TeamCard.svelte
@@ -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>