Migrate from DaisyUI to SkeletonUI

Env: Update tailwindcss safelist
Env: Replace daisyui with skeletonui
2024-12-12 23:29:24 +01:00 · 2024-12-12 23:29:13 +01:00 · 2024-12-12 18:21:06 +01:00 · 2024-12-12 18:20:45 +01:00 · 2024-12-12 12:49:49 +01:00 · 2024-12-12 12:10:56 +01:00
39 changed files with 1937 additions and 42 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1,6 +0,0 @@
 {
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/app.css",
  "tailwindConfig": "./tailwind.config.js",
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
 }
--- a/flake.nix
+++ b/flake.nix
@ -125,14 +125,19 @@
        # Use $1 for positional args
        commands = [
          {
-            name = "pycharm";
+            name = "db";
-            help = "Launch PyCharm Professional";
+            help = "Serve PocketBase";
-            command = "pycharm-professional . &>/dev/null &";
+            command = "pocketbase serve --http 192.168.86.50:8090";
          }
          {
-            name = "db";
+            name = "dev";
-            help = "Launch SQLiteBrowser";
+            help = "Serve Formula 11 (Dev)";
-            command = "sqlitebrowser ./instance/formula10.db &>/dev/null &";
+            command = "npm run dev -- --host --port 5173";
          }
          {
            name = "prod";
            help = "Serve Formula 11 (Prod)";
            command = "npm run build && npm run preview -- --host --port 5173";
          }
        ];
      };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -10,21 +10,26 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
 		"@skeletonlabs/skeleton": "^2.10.3",
 		"@skeletonlabs/tw-plugin": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"svelte": "^5.0.0",
+		"@tailwindcss/forms": "^0.5.9",
-		"svelte-check": "^4.1.1",
+		"@types/node": "^22.10.2",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
 		"autoprefixer": "^10.4.20",
 		"pocketbase": "^0.22.1",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"tailwindcss": "^3.4.16"
+		"svelte": "^5.0.0",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.16",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.6.12",
 		"pocketbase": "^0.22.1"
 	}
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +1,6 @@
 export default {
  plugins: {
-    tailwindcss: {},
+    tailwindcss: { config: "./tailwind.config.ts" },
    autoprefixer: {},
  },
-}
+};
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,32 @@
 /**
 * @see https://prettier.io/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
 const config = {
  // Plugin configs
  plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  tailwindStylesheet: "./src/app.css",
  tailwindConfig: "./tailwind.config.ts",
  // Global formatting options
  printWidth: 100,
  tabWidth: 2,
  tabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  trailingComma: "all",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "always",
  // File specific configuration options
  overrides: [
    {
      files: "*.svelte",
      options: { parser: "svelte" },
    },
  ],
 };
 export default config;
--- a/src/app.html
+++ b/src/app.html
@ -2,11 +2,22 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
    <!-- Scale the viewport for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Set the iOS Safari header/tab bar color -->
    <meta name="theme-color" content="#F8D7DA" />
    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
    <!-- SvelteKit inserts the header contents here -->
    %sveltekit.head%
  </head>
-  <body data-sveltekit-preload-data="hover">
+
  <!-- Prefetch data specified in "load" functions on link hover -->
  <body data-theme="formula11Theme" data-sveltekit-preload-data="hover">
    <!-- SvelteKit inserts the body contents here -->
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
--- a/src/hooks.server.ts
+++ b/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;
 };
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@ -0,0 +1,24 @@
 <script lang="ts">
  let {
    children,
    color,
    submit = false,
    href = undefined,
    fullwidth = false,
    ...restProps
  } = $props();
 </script>
 {#if href}
  <a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
    {@render children()}
  </a>
 {:else}
  <button
    type={submit ? "submit" : "button"}
    class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
    {...restProps}
  >
    {@render children()}
  </button>
 {/if}
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@ -0,0 +1,7 @@
 <script lang="ts">
  let { children, fullwidth = false, ...restProps } = $props();
 </script>
 <div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
  {@render children()}
 </div>
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@ -0,0 +1,10 @@
 <script lang="ts">
  let { children, type = "text", ...restProps } = $props();
 </script>
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
  <div class="input-group-shim select-none text-neutral-900">
    {@render children()}
  </div>
  <input {type} {...restProps} />
 </div>
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@ -0,0 +1,9 @@
 import Input from "./Input.svelte";
 import Button from "./Button.svelte";
 import Card from "./Card.svelte";
 import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
 import UserIcon from "./svg/UserIcon.svelte";
 import PasswordIcon from "./svg/PasswordIcon.svelte";
 export { Input, Button, Card, MenuDrawerIcon, UserIcon, PasswordIcon };
--- a/src/lib/components/svg/MenuDrawerIcon.svelte
+++ b/src/lib/components/svg/MenuDrawerIcon.svelte
@ -0,0 +1,14 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  class="mt-1 h-6 w-6"
  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>
--- a/src/lib/components/svg/PasswordIcon.svelte
+++ b/src/lib/components/svg/PasswordIcon.svelte
@ -0,0 +1,12 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 16 16"
  fill="currentColor"
  class="h-4 w-4 opacity-70"
 >
  <path
    fill-rule="evenodd"
    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
    clip-rule="evenodd"
  />
 </svg>
--- a/src/lib/components/svg/UserIcon.svelte
+++ b/src/lib/components/svg/UserIcon.svelte
@ -0,0 +1,10 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 16 16"
  fill="currentColor"
  class="h-4 w-4 opacity-70"
 >
  <path
    d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
  />
 </svg>
--- a/src/lib/form.ts
+++ b/src/lib/form.ts
@ -0,0 +1,48 @@
 import { error } from "@sveltejs/kit";
 /**
 * Obtain the value of the key "id" and remove it from the FormData.
 * Throws SvelteKit error(400) if "id" is not found.
 */
 export const form_data_get_and_remove_id = (data: FormData): string => {
  const id: string | undefined = data.get("id")?.toString();
  if (!id) error(400, "Missing ID");
  data.delete("id");
  return id;
 };
 /**
 * Remove empty fields and files from FormData objects.
 */
 export const form_data_clean = (data: FormData): FormData => {
  for (const [key, value] of data.entries()) {
    if (value === "") {
      // Remove empty keys
      data.delete(key);
    } else if (
      // Remove empty files
      typeof value === "object" &&
      value !== null &&
      "size" in value &&
      value.size === 0
    ) {
      data.delete(key);
    }
  }
  return data;
 };
 /**
 * Throws SvelteKit error(400) if form_data does not contain key.
 */
 export const form_data_ensure_key = (data: FormData, key: string) => {
  if (!data.get(key)) error(400, `Key "${key}" missing from form_data!`);
 };
 /**
 * Throws SvelteKit error(400) if form_data does not contain all keys.
 */
 export const form_data_ensure_keys = (data: FormData, keys: string[]) => {
  keys.map((key) => form_data_ensure_key(data, key));
 };
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@ -0,0 +1,43 @@
 /**
 * Use this on <Avatar> components.
 */
 export const get_avatar_preview_event_handler = (id: string) => {
  const handler = (event: Event) => {
    const target: HTMLInputElement = event.target as HTMLInputElement;
    const files: FileList | null = target.files;
    if (files && files.length > 0) {
      const src: string = URL.createObjectURL(files[0]);
      const preview: HTMLImageElement = document.querySelector(
        `#${id} > img:first-of-type`,
      ) as HTMLImageElement;
      if (preview) {
        preview.src = src;
        preview.hidden = false;
      }
    }
  };
  return handler;
 };
 /**
 * Use this on raw <img> elements.
 */
 export const get_image_preview_event_handler = (id: string) => {
  const handler = (event: Event) => {
    const target: HTMLInputElement = event.target as HTMLInputElement;
    const files: FileList | null = target.files;
    if (files && files.length > 0) {
      const src: string = URL.createObjectURL(files[0]);
      const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
      if (preview) {
        preview.src = src;
        preview.hidden = false;
      }
    }
  };
  return handler;
 };
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -1 +0,0 @@
 // place files you want to import through the `$lib` alias in this folder.
--- a/src/routes/+layout.server.ts
+++ b/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,
  };
 };
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,225 @@
 <script lang="ts">
  import "../app.css";
  import type { Snippet } from "svelte";
  import type { LayoutData } from "./$types";
  import { Button, MenuDrawerIcon, UserIcon, Input, PasswordIcon, Card } from "$lib/components";
  import { get_avatar_preview_event_handler, get_image_preview_event_handler } from "$lib/image";
  import {
    AppBar,
    popup,
    storePopup,
    type PopupSettings,
    initializeStores,
    Drawer,
    getDrawerStore,
    type DrawerSettings,
    Avatar,
    FileDropzone,
  } from "@skeletonlabs/skeleton";
  import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
  let { data, children }: { data: LayoutData; children: Snippet } = $props();
  // Drawer config
  initializeStores();
  const drawerStore = getDrawerStore();
  const menu_drawer = () => {
    const drawerSettings: DrawerSettings = {
      id: "menu_drawer",
      position: "top",
      height: "auto",
      padding: "lg:px-96",
    };
    drawerStore.open(drawerSettings);
  };
  const data_drawer = () => {
    const drawerSettings: DrawerSettings = {
      id: "data_drawer",
      position: "top",
      height: "auto",
      padding: "lg:px-96",
    };
    drawerStore.open(drawerSettings);
  };
  const login_drawer = () => {
    const drawerSettings: DrawerSettings = {
      id: "login_drawer",
      position: "top",
      height: "auto",
      padding: "lg:px-96",
    };
    drawerStore.open(drawerSettings);
  };
  const profile_drawer = () => {
    const drawerSettings: DrawerSettings = {
      id: "profile_drawer",
      position: "top",
      height: "auto",
      padding: "lg:px-96",
    };
    drawerStore.open(drawerSettings);
  };
  const close_drawer = () => drawerStore.close();
  // Popups config
  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
  // Example: https://www.skeleton.dev/utilities/popups
  // const data_popup_settings: PopupSettings = {
  //   event: "click",
  //   target: "data_popup",
  //   placement: "bottom",
  //   middleware: {
  //     offset: { mainAxis: 22, crossAxis: 0 },
  //     // shift: { mainAxis: true, crossAxis: false },
  //   },
  // };
 </script>
 <Drawer>
  {#if $drawerStore.id === "menu_drawer"}
    <!-- Menu Drawer -->
    <!-- Menu Drawer -->
    <!-- Menu Drawer -->
    <div class="p-2 pt-0 *:mt-2">
      <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
      <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
        >Season Picks
      </Button>
      <Button href="/leaderboard" onclick={close_drawer} color="surface" fullwidth
        >Leaderboard
      </Button>
      <Button href="/statistics" onclick={close_drawer} color="surface" fullwidth
        >Statistics
      </Button>
      <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
    </div>
  {:else if $drawerStore.id === "data_drawer"}
    <!-- Data Drawer -->
    <!-- Data Drawer -->
    <!-- Data Drawer -->
    <div class="p-2 pt-0 *:mt-2">
      <Button href="/data/seasondata/teams" onclick={close_drawer} color="surface" fullwidth
        >Season</Button
      >
      <Button href="/data/userdata" onclick={close_drawer} color="surface" fullwidth>Users</Button>
    </div>
  {:else if $drawerStore.id === "login_drawer"}
    <!-- Login Drawer -->
    <!-- Login Drawer -->
    <!-- Login Drawer -->
    <div class="p-2">
      <h4 class="h4 select-none">Enter Username and Password</h4>
      <form method="POST" class="*:mt-2">
        <Input name="username" placeholder="Username" required>
          <UserIcon />
        </Input>
        <Input name="password" type="password" placeholder="Password" required
          ><PasswordIcon />
        </Input>
        <div class="flex justify-end gap-2">
          <Button formaction="/user?/login" onclick={close_drawer} color="tertiary" submit
            >Login</Button
          >
          <Button formaction="/user?/create" onclick={close_drawer} color="tertiary" submit
            >Register</Button
          >
        </div>
      </form>
    </div>
  {:else if $drawerStore.id === "profile_drawer"}
    <!-- Profile Drawer -->
    <!-- Profile Drawer -->
    <!-- Profile Drawer -->
    <div class="p-2">
      <h4 class="h4 select-none">Edit Profile</h4>
      <form method="POST" enctype="multipart/form-data" class="*:mt-2">
        <input type="hidden" name="id" value={data.user.id} />
        <Input name="username" value={data.user.username} placeholder="Username"><UserIcon /></Input
        >
        <FileDropzone
          name="avatar"
          onchange={get_avatar_preview_event_handler("user_avatar_preview")}
        >
          <svelte:fragment slot="message"><b>Upload Avatar</b> or Drag and Drop</svelte:fragment>
        </FileDropzone>
        <div class="flex justify-end gap-2">
          <Button formaction="/user?/update" onclick={close_drawer} color="secondary" submit
            >Save Changes</Button
          >
          <Button formaction="/user?/logout" onclick={close_drawer} color="primary" submit
            >Logout</Button
          >
        </div>
      </form>
    </div>
  {/if}
 </Drawer>
 <nav>
  <!-- TODO: Make this stick to the top somehow. -->
  <!--       Fixed breaks flexbox and sticky doesn't work. -->
  <AppBar
    slotDefault="place-self-center"
    slotTrail="place-content-end"
    background="bg-primary-500"
    shadow="shadow"
    padding="p-2"
  >
    <svelte:fragment slot="lead">
      <!-- Navigation drawer -->
      <button
        class="variant-filled-primary btn p-2 lg:hidden"
        style="height: 44px;"
        onclick={menu_drawer}
      >
        <MenuDrawerIcon />
      </button>
      <!-- Site logo -->
      <a
        href="/"
        draggable="false"
        class="variant-filled-primary btn ml-2 select-none p-2 text-xl lg:ml-0">Formula 11</a
      >
    </svelte:fragment>
    <!-- Large navigation -->
    <div class="hidden lg:block">
      <a href="/racepicks" class="variant-filled-primary btn p-2">Race Picks</a>
      <a href="/seasonpicks" class="variant-filled-primary btn p-2">Season Picks</a>
      <a href="/leaderboard" class="variant-filled-primary btn p-2">Leaderboard</a>
      <a href="/statistics" class="variant-filled-primary btn p-2">Statistics</a>
      <a href="/rules" class="variant-filled-primary btn p-2">Rules</a>
    </div>
    <svelte:fragment slot="trail">
      <!-- Data drawer -->
      <Button color="primary" onclick={data_drawer}>Data</Button>
      <!-- Login/Profile drawer -->
      {#if !data.user}
        <Button color="primary" onclick={login_drawer}>Login</Button>
      {:else}
        <Avatar
          id="user_avatar_preview"
          src={data.user.avatar_url}
          rounded="rounded-full"
          width="w-10"
          onclick={profile_drawer}
          cursor="cursor-pointer"
        />
      {/if}
    </svelte:fragment>
  </AppBar>
 </nav>
 <!-- Each child's contents will be inserted here -->
 <div class="p-2">
  {@render children()}
 </div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
+<svelte:head>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+  <title>F11 - Formula 11</title>
 </svelte:head>
 <h1>Formula 11</h1>
--- a/src/routes/data/seasondata/+layout.svelte
+++ b/src/routes/data/seasondata/+layout.svelte
@ -0,0 +1,32 @@
 <script lang="ts">
  import { navigating, page } from "$app/stores";
  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
  import type { Snippet } from "svelte";
  let { children }: { children: Snippet } = $props();
  let current_tab: number = $state(0);
  const tabs: { [tab: string]: number } = {
    teams: 0,
    drivers: 1,
    races: 2,
  };
  navigating.subscribe((nav) => {
    if (!nav?.to?.url) return;
    current_tab = tabs[nav.to.url.toString().split("/").at(-1) || "teams"];
  });
 </script>
 <h1>Season Data</h1>
 <TabGroup justify="justify-center">
  <a href="teams"> <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab></a>
  <a href="drivers"><Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab></a>
  <a href="races"><Tab bind:group={current_tab} name="races" value={2}>Races</Tab></a>
 </TabGroup>
 <div>
  {@render children()}
 </div>
--- a/src/routes/data/seasondata/drivers/+page.svelte
+++ b/src/routes/data/seasondata/drivers/+page.svelte
@ -0,0 +1 @@
--- a/src/routes/data/seasondata/races/+page.svelte
+++ b/src/routes/data/seasondata/races/+page.svelte
--- a/src/routes/data/seasondata/teams/+page.server.ts
+++ b/src/routes/data/seasondata/teams/+page.server.ts
@ -0,0 +1,62 @@
 import type { Actions, PageServerLoad } from "./$types";
 import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
 // 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(),
  };
 };
--- a/src/routes/data/seasondata/teams/+page.svelte
+++ b/src/routes/data/seasondata/teams/+page.svelte
@ -0,0 +1,100 @@
 <script lang="ts">
  import type { PageData } from "./$types";
  import { Input, Button, Card } from "$lib/components";
  import { get_image_preview_event_handler } from "$lib/image";
  import { FileDropzone } from "@skeletonlabs/skeleton";
  let { data }: { data: PageData } = $props();
 </script>
 <svelte:head>
  <title>F11 - Teams</title>
 </svelte:head>
 <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}
    <Card>
      <!-- Logo display -->
      <img
        id="update_team_logo_preview_{team.id}"
        src={team.logo_url}
        alt="Logo of {team.name} F1 team."
        draggable="false"
        class="select-none rounded-container-token"
      />
      <form method="POST" enctype="multipart/form-data">
        <input name="id" type="hidden" value={team.id} />
        <div class="*:mt-2">
          <Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
            >Name</Input
          >
          <!-- Logo upload -->
          <FileDropzone
            name="logo"
            id="team_logo_{team.id}"
            onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
            disabled={!data.admin}
          >
            <svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
          </FileDropzone>
          <!-- Buttons -->
          <div class="flex justify-end gap-2">
            <Button formaction="?/update" color="secondary" disabled={!data.admin} submit
              >Save Changes</Button
            >
            <Button formaction="?/delete" color="primary" disabled={!data.admin} submit
              >Delete</Button
            >
          </div>
        </div>
      </form>
    </Card>
  {/each}
  <!-- Add a new team -->
  {#if data.admin}
    <Card>
      <!-- Logo preview -->
      <img
        id="create_team_logo_preview"
        src=""
        alt="Logo preview"
        class="select-none"
        draggable="false"
        hidden
      />
      <form method="POST" enctype="multipart/form-data">
        <div class="*:mt-2">
          <h4 class="h4 select-none">Add a New Team</h4>
          <!-- Team name input -->
          <Input id="team_name_create" name="name" required>Name</Input>
          <!-- Logo upload -->
          <FileDropzone
            name="logo"
            id="team_logo_create"
            onchange={get_image_preview_event_handler("create_team_logo_preview")}
            disabled={!data.admin}
            required
          >
            <svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
          </FileDropzone>
          <!-- Buttons -->
          <div class="flex justify-end gap-2">
            <!-- 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" color="secondary" submit>Create</Button>
          </div>
        </div>
      </form>
    </Card>
  {/if}
 </div>
--- a/src/routes/data/userdata/+page.svelte
+++ b/src/routes/data/userdata/+page.svelte
@ -0,0 +1 @@
 <h1>User Data</h1>
--- a/src/routes/leaderboard/+page.svelte
+++ b/src/routes/leaderboard/+page.svelte
@ -0,0 +1 @@
 <h1>Leaderboard</h1>
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@ -0,0 +1 @@
 <h1>Race Picks</h1>
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@ -0,0 +1 @@
 <h1>Rules</h1>
--- a/src/routes/seasonpicks/+page.svelte
+++ b/src/routes/seasonpicks/+page.svelte
@ -0,0 +1 @@
 <h1>Season Picks</h1>
--- a/src/routes/statistics/+page.svelte
+++ b/src/routes/statistics/+page.svelte
@ -0,0 +1 @@
 <h1>Statistics</h1>
--- a/src/routes/user/+page.server.ts
+++ b/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/form";
 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;
--- a/static/f1_logo.svg
+++ b/static/f1_logo.svg
@ -0,0 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 30" version="1.1" class="injected-svg js-svg-inject">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Logos / F1-logo red</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
    </defs>
    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Page-1">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"/>
            </mask>
            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
        </g>
    </g>
 </svg>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/favicon.svg
+++ b/static/favicon.svg
@ -0,0 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 60" version="1.1" class="injected-svg js-svg-inject">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Logos / F1-logo red</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
    </defs>
    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Page-1">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"/>
            </mask>
            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
        </g>
    </g>
 </svg>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +0,0 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
 };
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,37 @@
 import type { Config } from "tailwindcss";
 import { skeleton } from "@skeletonlabs/tw-plugin";
 import { join } from "path";
 import { formula11Theme } from "./tailwind.formula11";
 import forms from "@tailwindcss/forms";
 const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    join(require.resolve("@skeletonlabs/skeleton"), "../**/*.{html,js,svelte,ts}"),
  ],
  theme: {
    extend: {},
  },
  plugins: [
    forms,
    skeleton({
      themes: {
        custom: [formula11Theme],
      },
    }),
  ],
  safelist: [
    // List all patterns that are used dynamically, e.g. class="variant-filled-{color}"
    {
      pattern: /variant-filled-+/,
    },
    {
      pattern: /w-full/,
    },
    {
      pattern: /w-auto/,
    },
  ],
 } satisfies Config;
 export default config;
--- a/tailwind.formula11.ts
+++ b/tailwind.formula11.ts
@ -0,0 +1,101 @@
 import type { CustomThemeConfig } from "@skeletonlabs/tw-plugin";
 export const formula11Theme: CustomThemeConfig = {
  name: "formula11Theme",
  properties: {
    // =~= Theme Properties =~=
    "--theme-font-family-base": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
    "--theme-font-family-heading": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
    "--theme-font-color-base": "0 0 0",
    "--theme-font-color-dark": "255 255 255",
    "--theme-rounded-base": "8px",
    "--theme-rounded-container": "8px",
    "--theme-border-base": "1px",
    // =~= Theme On-X Colors =~=
    "--on-primary": "0 0 0",
    "--on-secondary": "0 0 0",
    "--on-tertiary": "0 0 0",
    "--on-success": "var(--color-primary-50)",
    "--on-warning": "0 0 0",
    "--on-error": "255 255 255",
    "--on-surface": "0 0 0",
    // =~= Theme Colors  =~=
    // primary | #F8D7DA
    "--color-primary-50": "254 249 249", // #fef9f9
    "--color-primary-100": "254 247 248", // #fef7f8
    "--color-primary-200": "253 245 246", // #fdf5f6
    "--color-primary-300": "252 239 240", // #fceff0
    "--color-primary-400": "250 227 229", // #fae3e5
    "--color-primary-500": "248 215 218", // #F8D7DA
    "--color-primary-600": "223 194 196", // #dfc2c4
    "--color-primary-700": "186 161 164", // #baa1a4
    "--color-primary-800": "149 129 131", // #958183
    "--color-primary-900": "122 105 107", // #7a696b
    // secondary | #FFF3CD
    "--color-secondary-50": "255 253 248", // #fffdf8
    "--color-secondary-100": "255 253 245", // #fffdf5
    "--color-secondary-200": "255 252 243", // #fffcf3
    "--color-secondary-300": "255 250 235", // #fffaeb
    "--color-secondary-400": "255 247 220", // #fff7dc
    "--color-secondary-500": "255 243 205", // #FFF3CD
    "--color-secondary-600": "230 219 185", // #e6dbb9
    "--color-secondary-700": "191 182 154", // #bfb69a
    "--color-secondary-800": "153 146 123", // #99927b
    "--color-secondary-900": "125 119 100", // #7d7764
    // tertiary | #D1E7DD
    "--color-tertiary-50": "248 251 250", // #f8fbfa
    "--color-tertiary-100": "246 250 248", // #f6faf8
    "--color-tertiary-200": "244 249 247", // #f4f9f7
    "--color-tertiary-300": "237 245 241", // #edf5f1
    "--color-tertiary-400": "223 238 231", // #dfeee7
    "--color-tertiary-500": "209 231 221", // #D1E7DD
    "--color-tertiary-600": "188 208 199", // #bcd0c7
    "--color-tertiary-700": "157 173 166", // #9dada6
    "--color-tertiary-800": "125 139 133", // #7d8b85
    "--color-tertiary-900": "102 113 108", // #66716c
    // success | #198754
    "--color-success-50": "221 237 229", // #ddede5
    "--color-success-100": "209 231 221", // #d1e7dd
    "--color-success-200": "198 225 212", // #c6e1d4
    "--color-success-300": "163 207 187", // #a3cfbb
    "--color-success-400": "94 171 135", // #5eab87
    "--color-success-500": "25 135 84", // #198754
    "--color-success-600": "23 122 76", // #177a4c
    "--color-success-700": "19 101 63", // #13653f
    "--color-success-800": "15 81 50", // #0f5132
    "--color-success-900": "12 66 41", // #0c4229
    // warning | #FFC107
    "--color-warning-50": "255 246 218", // #fff6da
    "--color-warning-100": "255 243 205", // #fff3cd
    "--color-warning-200": "255 240 193", // #fff0c1
    "--color-warning-300": "255 230 156", // #ffe69c
    "--color-warning-400": "255 212 81", // #ffd451
    "--color-warning-500": "255 193 7", // #FFC107
    "--color-warning-600": "230 174 6", // #e6ae06
    "--color-warning-700": "191 145 5", // #bf9105
    "--color-warning-800": "153 116 4", // #997404
    "--color-warning-900": "125 95 3", // #7d5f03
    // error | #DC3545
    "--color-error-50": "250 225 227", // #fae1e3
    "--color-error-100": "248 215 218", // #f8d7da
    "--color-error-200": "246 205 209", // #f6cdd1
    "--color-error-300": "241 174 181", // #f1aeb5
    "--color-error-400": "231 114 125", // #e7727d
    "--color-error-500": "220 53 69", // #DC3545
    "--color-error-600": "198 48 62", // #c6303e
    "--color-error-700": "165 40 52", // #a52834
    "--color-error-800": "132 32 41", // #842029
    "--color-error-900": "108 26 34", // #6c1a22
    // surface | #DDDDDD
    "--color-surface-50": "250 250 250", // #fafafa
    "--color-surface-100": "248 248 248", // #f8f8f8
    "--color-surface-200": "247 247 247", // #f7f7f7
    "--color-surface-300": "241 241 241", // #f1f1f1
    "--color-surface-400": "231 231 231", // #e7e7e7
    "--color-surface-500": "221 221 221", // #DDDDDD
    "--color-surface-600": "199 199 199", // #c7c7c7
    "--color-surface-700": "166 166 166", // #a6a6a6
    "--color-surface-800": "133 133 133", // #858585
    "--color-surface-900": "108 108 108", // #6c6c6c
  },
 };
Author	SHA1	Message	Date
Christoph Urlacher	70edd0182d	Migrate from DaisyUI to SkeletonUI	2024-12-12 23:29:24 +01:00
Christoph Urlacher	4f342e198a	Env: Update tailwindcss safelist	2024-12-12 23:29:13 +01:00
Christoph Urlacher	4d928dc1c0	Env: Replace daisyui with skeletonui	2024-12-12 18:21:06 +01:00
Christoph Urlacher	377839ba7a	Env: Update prettier config	2024-12-12 18:20:45 +01:00
Christoph Urlacher	ceb9cded9a	Disable "draggable" on links and images	2024-12-12 12:49:49 +01:00
Christoph Urlacher	9ccf0422ec	Move seasondata tabs into +layout.svelte	2024-12-12 12:10:56 +01:00
Christoph Urlacher	d9c8098fe2	Add stub page for drivers/races routes	2024-12-12 12:10:42 +01:00
Christoph Urlacher	e28ba36ab9	Lib: Rename forms.ts to form.ts	2024-12-12 12:09:53 +01:00
Christoph Urlacher	8d51f07699	Make "Login" button the default on enter (instead of "Register")	2024-12-12 11:43:36 +01:00
Christoph Urlacher	45b740c628	Teams: Implement seasondata/teams page + creation/deletion/updating	2024-12-12 11:43:03 +01:00
Christoph Urlacher	77ec3dee21	User: Add login/register/profile form handling	2024-12-12 11:43:03 +01:00
Christoph Urlacher	9df154b039	Add stub page for / route	2024-12-12 11:43:03 +01:00
Christoph Urlacher	2acc1ec585	Add main page skeleton (navbar)	2024-12-12 11:43:03 +01:00
Christoph Urlacher	4d7498cb85	Add request event handler for authentication	2024-12-12 11:43:03 +01:00
Christoph Urlacher	4cbba4b1ef	Static: Add favicon + logo	2024-12-12 04:39:27 +01:00
Christoph Urlacher	615e79255c	Env: Update devshell commands	2024-12-12 04:39:01 +01:00
Christoph Urlacher	036e17b7d5	Env: Update tailwind config + some other plugins	2024-12-12 04:38:52 +01:00
Christoph Urlacher	fabdb6a8e8	Add stub pages for some routes	2024-12-12 04:38:32 +01:00
Christoph Urlacher	00bbf83cb5	Lib: Add image preview helper	2024-12-12 04:38:00 +01:00
Christoph Urlacher	f715959af9	Lib: Add form helpers	2024-12-12 04:37:54 +01:00
Christoph Urlacher	c0c3e3d792	Components: Add index.ts for easier importing	2024-12-12 04:37:34 +01:00
Christoph Urlacher	6d812805ed	Components: Add username input	2024-12-12 04:37:22 +01:00
Christoph Urlacher	5d375554af	Components: Add password input	2024-12-12 04:37:17 +01:00
Christoph Urlacher	32667d1baf	Components: Add text input	2024-12-12 04:37:11 +01:00
Christoph Urlacher	20d66cab5f	Components: Add file input	2024-12-12 04:37:02 +01:00
Christoph Urlacher	4ab7bde49e	Components: Add button	2024-12-12 04:36:54 +01:00
		`@ -1 +0,0 @@`
			// place files you want to import through the `$lib` alias in this folder.