Data/Season: Implement seasondata/teams page + creation/deletion/updating

src/routes/admin/seasondata/teams/+page.server.ts

@@ -0,0 +1,66 @@
+import type { Actions, PageServerLoad } from "./$types";
+import {
+  form_data_clean,
+  form_data_ensure_keys,
+  form_data_get_and_remove_id,
+} from "$lib/forms";
+
+// These "actions" run serverside only, as they're located inside +page.server.ts
+export const actions = {
+  // We destructure the RequestEvent with ({cookies, request}).
+  // Alternatively use (event) and event.cookies or event.request to access.
+  create: async ({ cookies, request, locals }) => {
+    if (!locals.admin) return { success: false };
+
+    const data = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["name", "logo"]);
+
+    const record = await locals.pb.collection("teams").create(data);
+
+    return { success: true };
+  },
+
+  update: async ({ cookies, request, locals }) => {
+    if (!locals.admin) return { success: false };
+
+    const data = form_data_clean(await request.formData());
+    const id = form_data_get_and_remove_id(data);
+
+    // Destructure the FormData object
+    const record = await locals.pb.collection("teams").update(id, data);
+
+    return { success: true };
+  },
+
+  delete: async ({ cookies, request, locals }) => {
+    if (!locals.admin) return { success: false };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("teams").delete(id);
+
+    return { success: true };
+  },
+} satisfies Actions;
+
+// This "load" function runs serverside only, as it's located inside +page.server.ts
+export const load: PageServerLoad = async ({ fetch, locals }) => {
+  const fetch_teams = async () => {
+    const teams = await locals.pb.collection("teams").getFullList({
+      sort: "+name",
+      fetch: fetch,
+    });
+
+    // Fill in the file URLs
+    teams.map((team) => {
+      team.logo_url = locals.pb.files.getURL(team, team.logo);
+    });
+
+    return teams;
+  };
+
+  return {
+    teams: await fetch_teams(),
+  };
+};

src/routes/admin/seasondata/teams/+page.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+  import { Input, FileInput, Button } from "$lib/components";
+  import { get_image_preview_event_handler } from "$lib/image";
+
+  let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+  <title>F11 - Teams</title>
+</svelte:head>
+
+<!-- TODO: Move this + the tablist into the +layout.svelte and select the correct tab dynamically -->
+<!--       This would also allow it to be animated? Maybe? -->
+<h1>Season Data</h1>
+
+<div role="tablist" class="tabs-boxed tabs">
+  <a href="teams" role="tab" class="tab tab-active">Teams</a>
+  <a href="drivers" role="tab" class="tab">Drivers</a>
+  <a href="races" role="tab" class="tab">Races</a>
+</div>
+<!-- TODO: End -->
+
+<div
+  class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
+>
+  <!-- List all teams inside the database -->
+  {#each data.teams as team}
+    <div class="card card-bordered card-compact shadow">
+      <!-- Logo display -->
+      <figure>
+        <img
+          id="update_team_logo_preview_{team.id}"
+          src={team.logo_url}
+          alt="Logo of {team.name} F1 team."
+          draggable="false"
+          class="select-none"
+        />
+      </figure>
+
+      <form method="POST" enctype="multipart/form-data">
+        <input name="id" type="hidden" value={team.id} />
+
+        <div class="card-body gap-0 !p-2 !pt-0">
+          <Input
+            id="team_name_{team.id}"
+            name="name"
+            value={team.name}
+            label="Name:"
+            disabled={!data.admin}
+          />
+
+          <!-- Logo upload -->
+          <FileInput
+            id="team_logo_{team.id}"
+            name="logo"
+            label="Upload Logo"
+            onchange={get_image_preview_event_handler(
+              `update_team_logo_preview_${team.id}`,
+            )}
+            disabled={!data.admin}
+          />
+
+          <!-- Buttons -->
+          <div class="card-actions mt-2 justify-end">
+            <Button
+              formaction="?/update"
+              color="secondary"
+              label="Save Changes"
+              disabled={!data.admin}
+            />
+            <Button
+              formaction="?/delete"
+              color="primary"
+              label="Delete"
+              disabled={!data.admin}
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  {/each}
+
+  <!-- Add a new team -->
+  {#if data.admin}
+    <div class="card card-bordered card-compact shadow">
+      <!-- Logo preview -->
+      <figure>
+        <img
+          id="create_team_logo_preview"
+          src=""
+          alt="Logo preview"
+          class="select-none"
+          draggable="false"
+          hidden
+        />
+      </figure>
+      <form method="POST" enctype="multipart/form-data">
+        <div class="card-body">
+          <h2 class="card-title select-none">Add a New Team</h2>
+
+          <!-- Team name input -->
+          <Input id="team_name_create" name="name" label="Name:" required />
+
+          <!-- Logo upload -->
+          <FileInput
+            id="team_logo_create"
+            name="logo"
+            label="Upload Logo"
+            onchange={get_image_preview_event_handler(
+              "create_team_logo_preview",
+            )}
+            required
+          />
+
+          <!-- Buttons -->
+          <div class="card-actions justify-end">
+            <!-- By specifying the formaction on the button (instead of action on the form), -->
+            <!-- we can have multiple buttons with different actions in a single form. -->
+
+            <button formaction="?/create" class="btn btn-secondary"
+              >Create</button
+            >
+          </div>
+        </div>
+      </form>
+    </div>
+  {/if}
+</div>