Data/Raceresults: Implement entering race results

package-lock.json

@@ -1450,9 +1450,9 @@
 			]
 		},
 		"node_modules/@skeletonlabs/skeleton": {
-			"version": "2.10.4",
-			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.10.4.tgz",
-			"integrity": "sha512-jlelxAK9vycpM9E9Y31N/lX7hLDMOEQqKoo75MmFQJbc0gxpYRv5hGO0MCxaoLco+TpH/xi/yCSNlflts24e6A==",
+			"version": "2.11.0",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.11.0.tgz",
+			"integrity": "sha512-ORMZYACsIlfKyBx2ZIHBy7zE877t99fxU7LzcY1dveVmn2//+OeqnbQb5RryNILsMR62Tuu1VLnCu01/ByHlbQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1463,9 +1463,9 @@
 			}
 		},
 		"node_modules/@skeletonlabs/tw-plugin": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.4.0.tgz",
-			"integrity": "sha512-v6Y4deBq9ByRx3kTRGgekhhYkWEYgNNNu8UXOwJngCStB7w8SwmbNFSeHkluxMbgCgMnJyp220EMpw9nj/rEsQ==",
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.4.1.tgz",
+			"integrity": "sha512-crrC8BGKis0GNTp7V2HF6mk1ECLUvAxgTTV26LMgt/rV3U6Xd7N7dL5qIL8fE4MTHvpKa1SBsdqsnMbEvATeEg==",
 			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
@@ -1607,9 +1607,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "22.10.10",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
-			"integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
+			"version": "22.13.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.0.tgz",
+			"integrity": "sha512-ClIbNe36lawluuvq3+YYhnIN2CELi+6q8NpnM7PYp4hBn/TatfboPgVSm2rwKRfnV2M+Ty9GWDFI64KEe+kysA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3579,9 +3579,9 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.19.3",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.19.3.tgz",
-			"integrity": "sha512-rb/bkYG9jq67OCWikMvaPnfOobyGn0JizVDwHpdeBtLiNXPMcoA9GTFC3BhptP7xGNquUU8J5GiS7PlGlfDAFA==",
+			"version": "5.19.6",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.19.6.tgz",
+			"integrity": "sha512-6ydekB3qyqUal+UhfMjmVOjRGtxysR8vuiMhi2nwuBtPJWnctVlsGspjVFB05qmR+TXI1emuqtZt81c0XiFleA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

src/lib/components/cards/DriverCard.svelte

@@ -24,6 +24,8 @@
     headshot_template?: string;
 
     /** The value this component's team select dropdown will bind to */
+    // TODO: Move this into this component? Why am I passing it from the outside?
+    //       This also applies to the other card components...
     team_select_value: string;
 
     /** The options this component's team select dropdown will display */

src/lib/components/cards/RaceResultCard.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+  import {
+    Autocomplete,
+    getModalStore,
+    InputChip,
+    type AutocompleteOption,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
+  import { Button, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import type { Driver, Race, RaceResult } from "$lib/schema";
+  import { get_by_value } from "$lib/database";
+  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+
+  interface RaceResultCardProps {
+    /** The [RaceResult] object used to prefill values. */
+    result?: RaceResult;
+
+    /** The list of [Drivers] for the driver selection */
+    drivers: Driver[];
+
+    /** The list of [Races] for the race selection + PXX display */
+    races: Race[];
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+  }
+
+  let {
+    result = undefined,
+    drivers,
+    races,
+    disable_inputs = false,
+    require_inputs = false,
+  }: RaceResultCardProps = $props();
+
+  // TODO: This does not work at all. Why does it work for other cards???
+  //       Everything exists here, but in the markup it is undefined???
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    // Stuff thats required for the "update" card
+    disable_inputs = meta.disable_inputs;
+    drivers = meta.drivers;
+    races = meta.races;
+    result = meta.result;
+
+    // Stuff thats additionally required for the "create" card
+    require_inputs = meta.require_inputs;
+  }
+
+  const currentrace: Race | undefined = get_by_value(races, "id", result?.race ?? "Invalid");
+
+  // TODO: I have no fucking idea why this solves things...
+  //       Without this, the original values passed through the modalStore
+  //       are undefined within the markup, but not within the <script>...
+  const disable_inputs2 = disable_inputs;
+  const drivers2 = drivers;
+  const races2 = races;
+  const result2 = result;
+  const require_inputs2 = require_inputs;
+
+  let race_select_value: string = currentrace?.id ?? "";
+  const race_select_options: DropdownOption[] = races2.map((race: Race) => {
+    return {
+      label: race.name,
+      value: race.id,
+      icon_url: race.pictogram_url,
+      icon_width: RACE_PICTOGRAM_WIDTH,
+      icon_height: RACE_PICTOGRAM_HEIGHT,
+    };
+  });
+
+  let pxxs_input: string = $state("");
+  let pxxs_chips: string[] = $state(
+    result2?.pxxs.map((id: string) => get_by_value(drivers2, "id", id)?.code ?? "Invalid") ?? [],
+  );
+  let dnfs_input: string = $state("");
+  let dnfs_chips: string[] = $state(
+    result2?.dnfs.map((id: string) => get_by_value(drivers2, "id", id)?.code ?? "Invalid") ?? [],
+  );
+
+  // This is the actual data that gets sent through the form
+  let pxxs_ids: string[] = $state(result2?.pxxs ?? []);
+  let dnfs_ids: string[] = $state(result2?.dnfs ?? []);
+
+  const pxxs_options: AutocompleteOption<string>[] = drivers2.map((driver: Driver) => {
+    return {
+      // NOTE: Because Skeleton displays the values inside the autocomplete input,
+      //       we have to supply the driver code twice and manage a list of ids manually (ugh)
+      label: driver.code,
+      value: driver.code,
+    };
+  });
+
+  const pxxs_whitelist: string[] = drivers2.map((driver: Driver) => {
+    return driver.code;
+  });
+
+  const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disable_inputs2) return;
+
+    // Can only select 7 drivers
+    if (pxxs_chips.length >= 7) return;
+
+    if (!pxxs_chips.includes(event.detail.value)) {
+      pxxs_chips.push(event.detail.value);
+      pxxs_input = "";
+    }
+
+    const id: string = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid";
+    if (!pxxs_ids.includes(id)) {
+      pxxs_ids.push(id);
+    }
+  };
+
+  const on_pxxs_chip_remove = (event: CustomEvent): void => {
+    pxxs_ids.splice(event.detail.chipIndex, 1);
+  };
+
+  const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
+    if (disable_inputs2) return;
+
+    if (!dnfs_chips.includes(event.detail.value)) {
+      dnfs_chips.push(event.detail.value);
+      dnfs_input = "";
+    }
+
+    const id: string = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid";
+    if (!dnfs_ids.includes(id)) {
+      dnfs_ids.push(id);
+    }
+  };
+
+  const on_dnfs_chip_remove = (event: CustomEvent): void => {
+    dnfs_ids.splice(event.detail.chipIndex, 1);
+  };
+</script>
+
+<Card width="w-full sm:w-[512px]">
+  <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 result2 && !disable_inputs2}
+      <input name="id" type="hidden" value={result2.id} />
+    {/if}
+
+    <!-- Send the input chips ids -->
+    {#each pxxs_ids as pxxs_id}
+      <input name="pxxs" type="hidden" disabled={disable_inputs2} value={pxxs_id} />
+    {/each}
+    {#each dnfs_ids as dnfs_id}
+      <input name="dnfs" type="hidden" disabled={disable_inputs2} value={dnfs_id} />
+    {/each}
+
+    <!-- Race select input -->
+    <Dropdown
+      name="race"
+      input_variable={race_select_value}
+      options={race_select_options}
+      labelwidth="70px"
+      disabled={disable_inputs2}
+      required={require_inputs2}
+    >
+      Race
+    </Dropdown>
+
+    <div class="mt-2 flex flex-col gap-2">
+      <!-- PXXs autocomplete chips -->
+      <InputChip
+        bind:input={pxxs_input}
+        bind:value={pxxs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder="Select P{(currentrace?.pxx ?? -10) - 3} to P{(currentrace?.pxx ?? -10) + 3}..."
+        name="pxxs_codes"
+        disabled={disable_inputs2}
+        required={require_inputs2}
+        on:remove={on_pxxs_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={pxxs_input}
+          options={pxxs_options}
+          denylist={pxxs_chips}
+          on:selection={on_pxxs_chip_select}
+        />
+      </div>
+
+      <!-- DNFs autocomplete chips -->
+      <InputChip
+        bind:input={dnfs_input}
+        bind:value={dnfs_chips}
+        whitelist={pxxs_whitelist}
+        allowUpperCase
+        placeholder="Select DNFs..."
+        name="dnfs_codes"
+        disabled={disable_inputs2}
+        on:remove={on_dnfs_chip_remove}
+      />
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        <Autocomplete
+          bind:input={dnfs_input}
+          options={pxxs_options}
+          denylist={dnfs_chips}
+          on:selection={on_dnfs_chip_select}
+        />
+      </div>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex items-center justify-end gap-2">
+        {#if result2}
+          <Button
+            formaction="?/update_raceresult"
+            color="secondary"
+            disabled={disable_inputs2}
+            submit
+            width="w-1/2"
+          >
+            Save
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs2}
+            formaction="?/delete_raceresult"
+            width="w-1/2"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button
+            formaction="?/create_raceresult"
+            color="tertiary"
+            submit
+            width="w-full"
+            disabled={disable_inputs2}
+          >
+            Create Result
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/index.ts

@@ -12,6 +12,7 @@ import Card from "./cards/Card.svelte";
 import DriverCard from "./cards/DriverCard.svelte";
 import RaceCard from "./cards/RaceCard.svelte";
 import RacePickCard from "./cards/RacePickCard.svelte";
+import RaceResultCard from "./cards/RaceResultCard.svelte";
 import SubstitutionCard from "./cards/SubstitutionCard.svelte";
 import TeamCard from "./cards/TeamCard.svelte";
 
@@ -43,6 +44,7 @@ export {
   DriverCard,
   RaceCard,
   RacePickCard,
+  RaceResultCard,
   SubstitutionCard,
   TeamCard,
 

src/lib/form.ts

@@ -37,6 +37,23 @@ export const form_data_clean = (data: FormData, except: string[] = []): FormData
   return data;
 };
 
+/**
+ * Remove the specified [keys] from the [data] object.
+ */
+export const form_data_remove = (data: FormData, keys: string[]): void => {
+  let delete_keys: string[] = [];
+
+  for (const [key, value] of data.entries()) {
+    if (keys.includes(key)) {
+      delete_keys.push(key);
+    }
+  }
+
+  delete_keys.forEach((key) => {
+    data.delete(key);
+  });
+};
+
 /**
  * Throws SvelteKit error(400) if form_data does not contain key.
  */

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
     SubstitutionCard,
     NameIcon,
     RacePickCard,
+    RaceResultCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
 
@@ -51,6 +52,7 @@
     driverCard: { ref: DriverCard },
     raceCard: { ref: RaceCard },
     racePickCard: { ref: RacePickCard },
+    raceResultCard: { ref: RaceResultCard },
     substitutionCard: { ref: SubstitutionCard },
   };
 

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

@@ -1,7 +1,45 @@
-import type { Driver, Race, RaceResult } from "$lib/schema";
+import {
+  form_data_clean,
+  form_data_ensure_keys,
+  form_data_get_and_remove_id,
+  form_data_remove,
+} from "$lib/form";
+import type { Driver, Graphic, Race, RaceResult } from "$lib/schema";
 import type { Actions, PageServerLoad } from "./$types";
 
-export const actions = {} as Actions;
+export const actions = {
+  create_raceresult: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["race", "pxxs"]);
+    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
+
+    await locals.pb.collection("raceresults").create(data);
+  },
+
+  update_raceresult: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    console.dir(data, { depth: null });
+
+    await locals.pb.collection("raceresults").update(id, data);
+  },
+
+  delete_raceresult: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("raceresults").delete(id);
+  },
+} as Actions;
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
   // TODO: Duplicated code from racepicks/+page.server.ts
@@ -39,9 +77,23 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return drivers;
   };
 
+  // TODO: Duplicated code from racepicks/+page.server.ts + users/+page.server.ts
+  const fetch_graphics = async (): Promise<Graphic[]> => {
+    const graphics: Graphic[] = await locals.pb
+      .collection("graphics")
+      .getFullList({ fetch: fetch });
+
+    graphics.map((graphic: Graphic) => {
+      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
+    });
+
+    return graphics;
+  };
+
   return {
     results: await fetch_raceresults(),
     races: await fetch_races(),
     drivers: await fetch_drivers(),
+    graphics: await fetch_graphics(),
   };
 };

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

@@ -3,7 +3,6 @@
   import type { PageData } from "./$types";
   import { Button, Table, type TableColumn } from "$lib/components";
   import { get_by_value } from "$lib/database";
-  import type { Driver } from "$lib/schema";
   import { PXX_COLORS } from "$lib/config";
 
   let { data }: { data: PageData } = $props();
@@ -65,6 +64,9 @@
       component: "raceResultCard",
       meta: {
         disable_inputs: !data.admin,
+        drivers: data.drivers,
+        races: data.races,
+        result: get_by_value(data.results, "id", id),
       },
     };
 
@@ -74,10 +76,12 @@
   const create_result_handler = (event: Event) => {
     const modalSettings: ModalSettings = {
       type: "component",
-      component: "raceResultsCard",
+      component: "raceResultCard",
       meta: {
-        require_inputs: true,
         disable_inputs: !data.admin,
+        drivers: data.drivers,
+        races: data.races,
+        require_inputs: true,
       },
     };
 

src/routes/racepicks/+page.svelte

@@ -330,9 +330,9 @@
       {@const picks = data.racepicks.filter((pick: RacePick) => pick.user === user.id)}
 
       <div
-        class="card ml-1 mt-2 w-full overflow-hidden py-2 lg:ml-2 {data.user &&
+        class="card ml-1 mt-2 w-full overflow-hidden py-2 shadow lg:ml-2 {data.user &&
         data.user.username === user.username
-          ? 'bg-primary-500'
+          ? 'bg-primary-300'
           : ''}"
       >
         <!-- Avatar + name display at the top -->
@@ -360,7 +360,7 @@
             result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
 
           {#if pick}
-            <div class="mt-2 h-20 w-full border-b border-t bg-surface-300 p-1 shadow lg:p-2">
+            <div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
               <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
                 <span
                   class="p-1 text-center text-sm rounded-container-token"