Racepicks: Implement "Make Pick" button

src/lib/components/LazyImage.svelte

@@ -18,6 +18,9 @@
 
     /** Optional extra style for the lazy <div> container */
     containerstyle?: string;
+
+    /** Additional classes to insert */
+    imgclass?: string;
   }
 
   let {
@@ -26,6 +29,7 @@
     imgheight,
     imgstyle = undefined,
     containerstyle = undefined,
+    imgclass = "",
     ...restProps
   }: LazyImageProps = $props();
 
@@ -55,7 +59,7 @@
       <img
         src={data}
         use:img_opacity_handler
-        class="bg-surface-100 transition-opacity"
+        class="bg-surface-100 transition-opacity {imgclass}"
         style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
         draggable="false"
         {...restProps}

src/lib/components/cards/RacePickCard.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
+  import type { Driver, Race, RacePick, User } from "$lib/schema";
+  import { get_by_value } from "$lib/database";
+  import type { Action } from "svelte/action";
+  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
+
+  interface RacePickCardProps {
+    /** The [RacePick] object used to prefill values. */
+    racepick?: RacePick | undefined;
+
+    /** The [Race] object containing the place to guess */
+    currentrace: Race | null;
+
+    /** The [User] currently logged in */
+    user?: User;
+
+    /** The drivers (to display the headshot) */
+    drivers: Driver[];
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** The [src] of the driver headshot template preview */
+    headshot_template?: string;
+
+    /** The value this component's pxx select dropdown will bind to */
+    pxx_select_value: string;
+
+    /** The value this component's dnf select dropdown will bind to */
+    dnf_select_value: string;
+
+    /** The options this component's driver select dropdowns will display */
+    driver_select_options: DropdownOption[];
+  }
+
+  let {
+    racepick = undefined,
+    currentrace = null,
+    user = undefined,
+    drivers,
+    disable_inputs = false,
+    headshot_template = "",
+    pxx_select_value,
+    dnf_select_value,
+    driver_select_options,
+  }: RacePickCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    // Stuff thats required for the "update" card
+    racepick = meta.racepick;
+    currentrace = meta.currentrace;
+    user = meta.user;
+    drivers = meta.drivers;
+    disable_inputs = meta.disable_inputs;
+    headshot_template = meta.headshot_template;
+    pxx_select_value = meta.pxx_select_value;
+    dnf_select_value = meta.dnf_select_value;
+    driver_select_options = meta.driver_select_options;
+  }
+
+  // This action is used on the <Dropdown> element.
+  // It will trigger once the Dropdown's <input> elements is mounted.
+  // This way we'll receive a reference to the object so we can register our event handler.
+  const register_pxx_preview_handler: Action = (node: HTMLElement) => {
+    node.addEventListener("DropdownChange", update_pxx_preview);
+  };
+
+  // This event handler is registered to the Dropdown's <input> element through the action above.
+  const update_pxx_preview = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+
+    // The option "label" gets put into the Dropdown's input value,
+    // so we need to lookup the driver by "code".
+    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+    if (src) {
+      const preview: HTMLImageElement = document.getElementById(
+        `update_substitution_headshot_preview_${racepick?.id ?? "create"}`,
+      ) as HTMLImageElement;
+
+      if (preview) preview.src = src;
+    }
+  };
+</script>
+
+<Card
+  imgsrc={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ?? headshot_template}
+  imgid="update_substitution_headshot_preview_{racepick?.id ?? 'create'}"
+  width="w-full sm:w-auto"
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
+  imgonclick={(event: Event) => modalStore.close()}
+>
+  <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 racepick && !disable_inputs}
+      <input name="id" type="hidden" value={racepick.id} />
+    {/if}
+
+    <input name="user" type="hidden" value={user?.id} />
+    <input name="race" type="hidden" value={currentrace?.id} />
+
+    <div class="flex flex-col gap-2">
+      <!-- PXX select -->
+      <Dropdown
+        name="pxx"
+        input_variable={pxx_select_value}
+        action={register_pxx_preview_handler}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+      >
+        P{currentrace?.pxx ?? "XX"}
+      </Dropdown>
+
+      <!-- DNF select -->
+      <Dropdown
+        name="dnf"
+        input_variable={dnf_select_value}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+      >
+        DNF
+      </Dropdown>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if racepick}
+          <Button
+            formaction="?/update_racepick"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/2"
+          >
+            Save Changes
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_racepick"
+            width="w-1/2"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button formaction="?/create_racepick" color="tertiary" submit width="w-full">
+            Make Pick
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/index.ts

@@ -10,6 +10,7 @@ import Search from "./form/Search.svelte";
 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 SubstitutionCard from "./cards/SubstitutionCard.svelte";
 import TeamCard from "./cards/TeamCard.svelte";
 
@@ -38,6 +39,7 @@ export {
   Card,
   DriverCard,
   RaceCard,
+  RacePickCard,
   SubstitutionCard,
   TeamCard,
 

src/lib/schema.ts

@@ -94,3 +94,13 @@ export interface RaceResult {
     race: Race;
   };
 }
+
+export interface CurrentPickedUser {
+  id: string;
+  username: string;
+  firstname: string;
+  avatar: string;
+  avatar_url?: string;
+  admin: boolean;
+  picked: boolean;
+}

src/routes/+layout.svelte

@@ -17,6 +17,7 @@
     RaceCard,
     SubstitutionCard,
     NameIcon,
+    RacePickCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
 
@@ -49,6 +50,7 @@
     teamCard: { ref: TeamCard },
     driverCard: { ref: DriverCard },
     raceCard: { ref: RaceCard },
+    racePickCard: { ref: RacePickCard },
     substitutionCard: { ref: SubstitutionCard },
   };
 

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

@@ -1,5 +1,6 @@
-import type { Driver, Graphic, Race, RacePick, RaceResult } from "$lib/schema";
-import type { PageServerLoad } from "./$types";
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import type { CurrentPickedUser, Driver, Graphic, Race, RacePick, RaceResult } from "$lib/schema";
+import type { Actions, PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
   const fetch_racepicks = async (): Promise<RacePick[]> => {
@@ -27,6 +28,23 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return currentrace[0];
   };
 
+  // const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
+  //   const currentpickedusers: CurrentPickedUser[] = await locals.pb
+  //     .collection("currentpickedusers")
+  //     .getFullList();
+  //
+  //   currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
+  //     if (currentpickeduser.avatar) {
+  //       currentpickeduser.avatar_url = locals.pb.files.getURL(
+  //         currentpickeduser,
+  //         currentpickeduser.avatar,
+  //       );
+  //     }
+  //   });
+  //
+  //   return currentpickedusers;
+  // };
+
   const fetch_raceresults = async (): Promise<RaceResult[]> => {
     // Don't expand races/pxxs/dnfs since we already fetched those
     const raceresults: RaceResult[] = await locals.pb.collection("raceresults").getFullList();
@@ -78,9 +96,41 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
   return {
     racepicks: await fetch_racepicks(),
     currentrace: await fetch_currentrace(),
+    // currentpickedusers: await fetch_currentpickedusers(),
     raceresults: await fetch_raceresults(),
     drivers: await fetch_drivers(),
     races: await fetch_races(),
     graphics: await fetch_graphics(),
   };
 };
+
+export const actions = {
+  create_racepick: async ({ request, locals }) => {
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["user", "race", "pxx", "dnf"]);
+
+    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
+
+    await locals.pb.collection("racepicks").create(data);
+  },
+
+  update_racepick: async ({ request, locals }) => {
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["user", "race"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
+
+    await locals.pb.collection("racepicks").update(id, data);
+  },
+
+  delete_racepick: async ({ request, locals }) => {
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["user", "race"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
+
+    await locals.pb.collection("racepicks").delete(id);
+  },
+} satisfies Actions;

src/routes/racepicks/+page.svelte

@@ -1,79 +1,203 @@
 <script lang="ts">
-  import { Button, LazyImage } from "$lib/components";
-  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import { Button, ChequeredFlagIcon, LazyImage, type DropdownOption } from "$lib/components";
+  import {
+    Accordion,
+    AccordionItem,
+    getModalStore,
+    type ModalSettings,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
-  import type { RacePick } from "$lib/schema";
+  import {
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    RACE_PICTOGRAM_HEIGHT,
+    RACE_PICTOGRAM_WIDTH,
+  } from "$lib/config";
+  import type { Driver, Race, RacePick } from "$lib/schema";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
-  const modalStore: ModalStore = getModalStore();
-  const create_guess_handler = async (event: Event) => {};
-
-  const currentpick: RacePick | null =
+  const currentpick: RacePick | undefined =
     data.racepicks.filter(
       (racepick: RacePick) =>
         racepick.expand.user.username === data.user?.username &&
         racepick.race === data.currentrace?.id,
-    )[0] ?? null;
+    )[0] ?? undefined;
+
+  let pxx_select_value: string = $state(currentpick?.pxx ?? "");
+  let dnf_select_value: string = $state(currentpick?.dnf ?? "");
+
+  // TODO: Duplicated code in cards/substitutioncard.svelte
+  const driver_dropdown_options: DropdownOption[] = [];
+  data.drivers.forEach((driver: Driver) => {
+    driver_dropdown_options.push({
+      label: driver.code,
+      value: driver.id,
+      icon_url: driver.headshot_url,
+      icon_width: DRIVER_HEADSHOT_WIDTH,
+      icon_height: DRIVER_HEADSHOT_HEIGHT,
+    });
+  });
+
+  const modalStore: ModalStore = getModalStore();
+  const create_guess_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "racePickCard",
+      meta: {
+        racepick: currentpick,
+        currentrace: data.currentrace,
+        user: data.user,
+        drivers: data.drivers,
+        disable_inputs: false, // TODO: Datelock
+        headshot_template:
+          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
+        pxx_select_value: pxx_select_value,
+        dnf_select_value: dnf_select_value,
+        driver_select_options: driver_dropdown_options,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const race = (id: string): Race | undefined => get_by_value(data.races, "id", id);
+  const driver = (id: string): Driver | undefined => get_by_value(data.drivers, "id", id);
+
+  // const pickedusers = data.currentpickedusers.filter(
+  //   (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
+  // );
+  // const outstandingusers = data.currentpickedusers.filter(
+  //   (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
+  // );
 </script>
 
 <!-- TODO: This thing must display the boxes as a column on mobile -->
 {#if data.currentrace}
-  <div class="flex w-full gap-2">
-    <!-- Next Guess Box -->
-    <!-- TODO: Countdown -->
-    <div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
-      <h1 class="text-lg font-bold">Next Race</h1>
-      <div class="mt-2 flex w-full gap-2">
-        <div class="border border-black p-2 rounded-container-token">
+  <Accordion class="card bg-tertiary-500 shadow" regionPanel="pt-0" width="w-auto">
+    <AccordionItem>
+      <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
+      <svelte:fragment slot="summary">
+        <span class="font-bold">Next Race Guess</span>
+      </svelte:fragment>
+      <svelte:fragment slot="content">
+        <div class="gap-2 lg:flex">
+          <!-- TODO: Make the contents into 2 columns -->
+          <div class="card mt-2 flex flex-col bg-tertiary-400 p-2 shadow">
+            <span class="text-nowrap font-bold">
+              Step {data.currentrace.step}: {data.currentrace.name}
+            </span>
+            {#if data.currentrace.sprintqualidate}
+              <span class="text-nowrap">Sprint Quali: {data.currentrace.sprintqualidate}</span>
+              <span class="text-nowrap">Sprint Race: {data.currentrace.sprintdate}</span>
+            {:else}
+              <span class="text-nowrap">Sprint: No Sprint :)</span>
+            {/if}
+            <span class="text-nowrap">Quali: {data.currentrace.qualidate}</span>
+            <span class="text-nowrap">Race: {data.currentrace.racedate}</span>
+          </div>
+          <div class="card mt-2 bg-tertiary-400 p-2 shadow">
+            <span class="text-nowrap font-bold">Track Layout:</span>
             <LazyImage
               src={data.currentrace.pictogram_url ?? "Invalid"}
               imgwidth={RACE_PICTOGRAM_WIDTH}
               imgheight={RACE_PICTOGRAM_HEIGHT}
-            containerstyle="width: 175px;"
+              containerstyle="height: 150px; margin: auto;"
               imgstyle="background: transparent;"
             />
           </div>
-        <div class="flex flex-col border border-black p-2 rounded-container-token">
-          <!-- TODO: Replace the <b></b> usages with class="font-bold" elsewhere -->
-          <span class="font-bold">Step {data.currentrace.step}: {data.currentrace.name}</span>
-          {#if data.currentrace.sprintqualidate}
-            <span>Sprint Quali: {data.currentrace.sprintqualidate}</span>
-            <span>Sprint Race: {data.currentrace.sprintdate}</span>
-          {:else}
-            <span>Sprint: No Sprint :)</span>
-          {/if}
-          <span>Quali: {data.currentrace.qualidate}</span>
-          <span>Race: {data.currentrace.racedate}</span>
-        </div>
-      </div>
-    </div>
 
-    <!-- Your Pick Box -->
           {#if currentpick}
-      <div class="flex flex-col gap-2">
-        <div class="w-full bg-tertiary-500 p-2 shadow rounded-container-token">
-          <h1 class="text-lg font-bold">Your Pick:</h1>
-          <div class="mt-2 flex flex-col border border-black p-2 rounded-container-token">
-            <span class="text-nowrap">P{data.currentrace.pxx}: {currentpick.pxx}</span>
-            <span class="text-nowrap">DNF: {currentpick.dnf}</span>
+            <div class="mt-2 flex flex-col gap-2">
+              <div class="flex gap-2">
+                <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
+                  <h1 class="text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
+                  <LazyImage
+                    src={driver(currentpick.pxx ?? "Invalid")?.headshot_url ??
+                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                      "Invalid"}
+                    imgwidth={DRIVER_HEADSHOT_WIDTH}
+                    imgheight={DRIVER_HEADSHOT_HEIGHT}
+                    containerstyle="height: 150px; margin: auto;"
+                    imgstyle="background: transparent;"
+                  />
+                </div>
+                <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
+                  <h1 class="text-nowrap font-bold">Your DNF Pick:</h1>
+                  <LazyImage
+                    src={driver(currentpick.dnf ?? "Invalid")?.headshot_url ??
+                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                      "Invalid"}
+                    imgwidth={DRIVER_HEADSHOT_WIDTH}
+                    imgheight={DRIVER_HEADSHOT_HEIGHT}
+                    containerstyle="height: 150px; margin: auto;"
+                    imgstyle="background: transparent;"
+                  />
                 </div>
               </div>
-
-        <!-- TODO: Add other button shadows -->
+            </div>
+          {/if}
           <Button
             width="w-full"
             color="tertiary"
+            extraclass="bg-tertiary-400"
             onclick={create_guess_handler}
             style="height: 100%;"
             shadow
           >
-          <b>{currentpick ? "Edit Pick" : "Make Pick"}</b>
+            <span class="font-bold">{currentpick ? "Edit Picks" : "Make Picks"}</span>
           </Button>
+
+          <!-- <div class="mt-2 flex gap-2"> -->
+          <!--   <div class="card w-full bg-tertiary-400 p-2 shadow"> -->
+          <!--     <h1 class="text-nowrap font-bold"> -->
+          <!--       Picked ({pickedusers.length}/{data.currentpickedusers.length}): -->
+          <!--     </h1> -->
+          <!-- Width: 50px * 4 + 8px * 3 -->
+          <!--     <div class="grid grid-cols-2 gap-2 lg:grid-cols-4"> -->
+          <!--       {#each pickedusers as user} -->
+          <!--         <LazyImage -->
+          <!--           src={user.avatar_url ?? -->
+          <!--             get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? -->
+          <!--             "Invalid"} -->
+          <!--           imgwidth={AVATAR_WIDTH} -->
+          <!--           imgheight={AVATAR_HEIGHT} -->
+          <!--           containerstyle="height: 50px; width: 50px;" -->
+          <!--           imgclass="shadow bg-transparent rounded-full" -->
+          <!--         /> -->
+          <!--       {/each} -->
+          <!--     </div> -->
+          <!--   </div> -->
+          <!--   <div class="card w-full bg-tertiary-400 p-2 shadow"> -->
+          <!--     <h1 class="text-nowrap font-bold"> -->
+          <!--       Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}): -->
+          <!--     </h1> -->
+          <!--     <div class="grid grid-cols-2 gap-2 lg:grid-cols-4"> -->
+          <!--       {#each outstandingusers as user} -->
+          <!--         <LazyImage -->
+          <!--           src={user.avatar_url ?? -->
+          <!--             get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? -->
+          <!--             "Invalid"} -->
+          <!--           imgwidth={AVATAR_WIDTH} -->
+          <!--           imgheight={AVATAR_HEIGHT} -->
+          <!--           containerstyle="height: 50px; width: 50px;" -->
+          <!--           imgclass="shadow bg-transparent rounded-full" -->
+          <!--         /> -->
+          <!--       {/each} -->
+          <!--     </div> -->
+          <!--   </div> -->
+          <!-- </div> -->
+
+          <!-- Spacer -->
+          <!-- <div class="w-full"></div> -->
+          <!-- TODO: Track weather report? -->
+          <!-- <div class="mt-2">{data.currentracepicks.length}</div> -->
         </div>
-    {/if}
-  </div>
+      </svelte:fragment>
+    </AccordionItem>
+  </Accordion>
 {/if}
 
 <!-- "Make Guess"/"Update Guess" button at the top -->