Teams: Implement seasondata/teams page + creation/deletion/updating

src/hooks.server.ts

@@ -0,0 +1,43 @@
+import type { Handle } from "@sveltejs/kit";
+import PocketBase from "pocketbase";
+
+// This function will run serverside on each request.
+// The event.locals will be passed onto serverside load functions and handlers.
+// We create a new PocketBase client for each request, so it always carries the
+// most recent authentication data.
+// The authenticated PocketBase client will be available in all *.server.ts files.
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.pb = new PocketBase("http://192.168.86.50:8090");
+
+  // Load the most recent authentication data from a cookie (is updated below)
+  event.locals.pb.authStore.loadFromCookie(
+    event.request.headers.get("cookie") || "",
+  );
+
+  if (event.locals.pb.authStore.isValid) {
+    // If the authentication data is valid, we make a "user" object easily available.
+    event.locals.user = structuredClone(event.locals.pb.authStore.model);
+
+    // Fill in the avatar URL
+    event.locals.user.avatar_url = event.locals.pb.files.getURL(
+      event.locals.pb.authStore.model,
+      event.locals.pb.authStore.model.avatar,
+    );
+
+    // Set admin status for easier access
+    event.locals.admin = event.locals.user.admin;
+  } else {
+    event.locals.user = undefined;
+  }
+
+  // Resolve the request. This is what happens by default.
+  const response = await resolve(event);
+
+  // Store the current authentication data to a cookie, so it can be loaded above.
+  response.headers.set(
+    "set-cookie",
+    event.locals.pb.authStore.exportToCookie({ secure: false }),
+  );
+
+  return response;
+};

src/routes/+layout.server.ts

@@ -0,0 +1,19 @@
+import type { LayoutServerLoad } from "./$types";
+
+// On each page load (every route), this function runs serverside.
+// The "locals.user" object is only available on the server,
+// since it's populated inside hooks.server.ts.
+// It will populate the "user" attribute of each page's "data" object,
+// so each page has access to the current user (or knows if no one is signed in).
+export const load: LayoutServerLoad = ({ locals }) => {
+  if (locals.user) {
+    return {
+      user: locals.user,
+      admin: locals.user.admin,
+    };
+  }
+
+  return {
+    user: undefined,
+  };
+};

src/routes/+layout.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import "../app.css";
+  import type { Snippet } from "svelte";
+  import type { LayoutData } from "./$types";
+  import { FileInput, Password, Username } from "$lib/components";
+  import { get_image_preview_event_handler } from "$lib/image";
+
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();
+</script>
+
+<nav>
+  <!-- TODO: Make this stick to the topsomehow. -->
+  <!--       Fixed breaks the flexbox and sticky doesn't work. -->
+  <div class="navbar h-16 bg-primary shadow">
+    <div class="navbar-start">
+      <!-- Side menu be visible on low width devices -->
+      <div class="dropdown">
+        <!-- Side menu open/close icon -->
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h8m-8 6h16"
+            />
+          </svg>
+        </div>
+
+        <!-- Side menu navigation items -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+        <ul
+          tabindex="0"
+          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
+        >
+          <li><a href="/racepicks">Race Picks</a></li>
+          <li><a href="/seasonpicks">Season Picks</a></li>
+          <li><a href="/leaderboard">Leaderboard</a></li>
+          <li><a href="/statistics">Statistics</a></li>
+          <li><a href="/rules">Rules</a></li>
+        </ul>
+      </div>
+
+      <!-- Site logo -->
+      <a href="/" class="btn btn-ghost text-xl">Formula 11</a>
+    </div>
+
+    <!-- Centered navigation -->
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li>
+          <a class="btn btn-ghost btn-sm" href="/racepicks">Race Picks</a>
+        </li>
+        <li>
+          <a class="btn btn-ghost btn-sm" href="/seasonpicks">Season Picks</a>
+        </li>
+        <li>
+          <a class="btn btn-ghost btn-sm" href="/leaderboard">Leaderboard</a>
+        </li>
+        <li>
+          <a class="btn btn-ghost btn-sm" href="/statistics">Statistics</a>
+        </li>
+        <li><a class="btn btn-ghost btn-sm" href="/rules">Rules</a></li>
+      </ul>
+    </div>
+
+    <div class="navbar-end">
+      <!-- Admin button -->
+      <div class="dropdown dropdown-end mr-2">
+        <div tabindex="0" role="button" class="btn btn-ghost">Admin</div>
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+        <ul
+          tabindex="0"
+          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
+        >
+          <li><a href="/admin/users">Users</a></li>
+          <li><a href="/admin/seasondata/teams">Season Data</a></li>
+          <li><a href="/admin/userdata">User Data</a></li>
+        </ul>
+      </div>
+
+      <!-- Login/profile stuff -->
+      {#if !data.user}
+        <!-- No user is logged in  -->
+        <div class="dropdown dropdown-end">
+          <div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+          <div
+            tabindex="0"
+            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
+          >
+            <h1 class="text-lg">Enter Username and Password</h1>
+            <form method="POST">
+              <Username id="signin_username" name="username" />
+              <Password id="signin_password" name="password" />
+              <div class="card-actions mt-2 justify-end">
+                <button formaction="/user?/create" class="btn btn-accent"
+                  >Register</button
+                >
+                <button formaction="/user?/login" class="btn btn-accent"
+                  >Login</button
+                >
+              </div>
+            </form>
+          </div>
+        </div>
+      {:else}
+        <!-- The user is logged in -->
+        <div class="dropdown dropdown-end">
+          <div tabindex="0" role="button" class="avatar ml-2 mr-2">
+            <div class="mask mask-squircle w-10">
+              <img
+                id="user_avatar_preview"
+                src={data.user.avatar_url}
+                alt="User avatar"
+              />
+            </div>
+          </div>
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+          <div
+            tabindex="0"
+            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
+          >
+            <h1 class="text-lg">Edit Profile</h1>
+            <form method="POST" enctype="multipart/form-data">
+              <input type="hidden" name="id" value={data.user.id} />
+              <Username
+                id="update_username"
+                name="username"
+                value={data.user.username}
+              />
+              <FileInput
+                id="update_avatar"
+                name="avatar"
+                label="Upload Avatar"
+                onchange={get_image_preview_event_handler(
+                  "user_avatar_preview",
+                )}
+              />
+              <div class="card-actions mt-2 justify-end">
+                <button formaction="/user?/update" class="btn btn-secondary"
+                  >Save Changes</button
+                >
+                <button formaction="/user?/logout" class="btn btn-primary"
+                  >Logout</button
+                >
+              </div>
+            </form>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</nav>
+
+<!-- Each child's contents will be inserted here -->
+<div class="p-2">
+  {@render children()}
+</div>

src/routes/+page.svelte

@@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<svelte:head>
+  <title>F11 - Formula 11</title>
+</svelte:head>
+
+<h1>Formula 11</h1>

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>

src/routes/user/+page.server.ts

@@ -0,0 +1,75 @@
+import {
+  form_data_clean,
+  form_data_ensure_keys,
+  form_data_get_and_remove_id,
+} from "$lib/forms";
+import { error, redirect } from "@sveltejs/kit";
+import type { Actions } from "./$types";
+
+export const actions = {
+  create: async ({ cookies, request, locals }) => {
+    const data = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["username", "password"]);
+
+    // TODO: Errrr passwordConfirm... How to integrate it into the unified login-/register-UI?
+    const record = await locals.pb.collection("users").create({
+      username: data.get("username")?.toString(),
+      password: data.get("password")?.toString(),
+      passwordConfirm: data.get("password")?.toString(),
+      admin: false,
+    });
+
+    // Directly login after registering
+    await locals.pb
+      .collection("users")
+      .authWithPassword(
+        data.get("username")?.toString(),
+        data.get("password")?.toString(),
+      );
+
+    redirect(303, "/");
+  },
+
+  // TODO: PocketBase API rule: Only the active user should be able to modify itself
+  update: async ({ cookies, request, locals }) => {
+    const data = form_data_clean(await request.formData());
+    const id = form_data_get_and_remove_id(data);
+
+    const record = await locals.pb.collection("users").update(id, data);
+
+    redirect(303, "/");
+  },
+
+  login: async ({ cookies, request, locals }) => {
+    if (locals.user) {
+      console.log("Already logged in!");
+      return;
+    }
+
+    const data = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["username", "password"]);
+
+    try {
+      await locals.pb
+        .collection("users")
+        .authWithPassword(
+          data.get("username")?.toString(),
+          data.get("password")?.toString(),
+        );
+    } catch (err) {
+      console.log(`Failed to login: ${err}`);
+      error(400, "Failed to login!");
+    }
+
+    // TODO: Would be better to redirect to previous page somehow...
+    redirect(303, "/");
+  },
+
+  logout: async ({ cookies, request, locals }) => {
+    locals.pb.authStore.clear();
+    locals.user = undefined;
+
+    // TODO: Would be better to redirect to previous page somehow...
+    redirect(303, "/");
+  },
+} satisfies Actions;