Seasonpicks: Refactor current seasonpick acquisition + user new fetchers

src/lib/fetch.ts

@@ -1,8 +1,9 @@
-import { pb } from "./pocketbase";
+import { pb, pbUser } from "./pocketbase";
 import type {
   CurrentPickedUser,
   Driver,
   Graphic,
+  Hottake,
   Race,
   RacePick,
   RaceResult,
@@ -138,19 +139,42 @@ export const fetch_currentrace = async (
   return currentrace[0];
 };
 
+// TODO: This will make the hidden racepicks by other users visible inside the browser console...
 /**
  * Fetch all [RacePicks] from the database
  */
-export const fetch_racepicks = async (
+export const fetch_visibleracepicks = async (
   fetch: (_: any) => Promise<Response>,
 ): Promise<RacePick[]> => {
   const racepicks: RacePick[] = await pb
-    .collection("racepicks")
+    .collection("visibleracepicks")
     .getFullList({ fetch: fetch, expand: "user" });
 
   return racepicks;
 };
 
+/**
+ * Fetch the [RacePick] for the current race by the current user from the database
+ */
+export const fetch_currentracepick = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePick | undefined> => {
+  if (!pbUser) return undefined;
+
+  const currentpickeduser: CurrentPickedUser = await pb
+    .collection("currentpickedusers")
+    .getOne(pbUser.id, { fetch: fetch });
+
+  if (!currentpickeduser.picked) return undefined;
+
+  const racepick: RacePick = await pb
+    .collection("racepicks")
+    .getOne(currentpickeduser.picked, { fetch: fetch });
+
+  return racepick;
+};
+
+// TODO: This will make the hidden seasonpicks by other users visible inside the browser console...
 /**
  * Fetch all [SeasonPicks] from the database
  */
@@ -158,12 +182,44 @@ export const fetch_seasonpicks = async (
   fetch: (_: any) => Promise<Response>,
 ): Promise<SeasonPick[]> => {
   const seasonpicks: SeasonPick[] = await pb
-    .collection("seasonpicks")
+    .collection("visibleseasonpicks")
     .getFullList({ fetch: fetch, expand: "user" });
 
   return seasonpicks;
 };
 
+/**
+ * Fetch all [Hottakes] from the databse
+ */
+export const fetch_hottakes = async (fetch: (_: any) => Promise<Response>): Promise<Hottake[]> => {
+  const hottakes: Hottake[] = await pb
+    .collection("hottakes")
+    .getFullList({ fetch: fetch, expand: "user" });
+
+  return hottakes;
+};
+
+/**
+ * Fetch the [SeasonPick] by the current user from the database
+ */
+export const fetch_currentseasonpick = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPick | undefined> => {
+  if (!pbUser) return undefined;
+
+  const seasonpickeduser: CurrentPickedUser = await pb
+    .collection("seasonpickedusers")
+    .getOne(pbUser.id, { fetch: fetch });
+
+  if (!seasonpickeduser.picked) return undefined;
+
+  const seasonpick: SeasonPick = await pb
+    .collection("seasonpicks")
+    .getOne(seasonpickeduser.picked, { fetch: fetch });
+
+  return seasonpick;
+};
+
 /**
  * Fetch all [Users] (with the extra field "picked" that is truthy
  * if the user already picked for the current race)

src/lib/schema.ts

@@ -93,6 +93,12 @@ export interface SeasonPick {
   };
 }
 
+export interface Hottake {
+  id: string;
+  user: string;
+  hottake: string;
+}
+
 export interface RaceResult {
   id: string;
   race: string;
@@ -107,7 +113,7 @@ export interface CurrentPickedUser {
   avatar: string;
   avatar_url?: string;
   admin: boolean;
-  picked: boolean;
+  picked: string | null;
 }
 
 export interface SeasonPickedUser {
@@ -117,5 +123,5 @@ export interface SeasonPickedUser {
   avatar: string;
   avatar_url?: string;
   admin: boolean;
-  picked: boolean;
+  picked: string | null;
 }

src/routes/racepicks/+page.svelte

@@ -25,15 +25,6 @@
 
   let { data }: { data: PageData } = $props();
 
-  const racepick: Promise<RacePick | undefined> = $derived.by(
-    async () =>
-      (await data.racepicks).filter(
-        (racepick: RacePick) =>
-          racepick.expand.user.username === data.user?.username &&
-          racepick.race === data.currentrace?.id,
-      )[0] ?? undefined,
-  );
-
   const modalStore: ModalStore = getModalStore();
   const racepick_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
@@ -41,7 +32,7 @@
       component: "racePickCard",
       meta: {
         data,
-        racepick: await racepick,
+        racepick: data.racepick,
       },
     };
 
@@ -131,12 +122,12 @@
 
           <!-- Only show the userguess if signed in -->
           {#if data.user}
-            {#await Promise.all([data.drivers, racepick]) then [drivers, pick]}
+            {#await data.drivers then drivers}
               <div class="mt-2 flex gap-2">
                 <div class="card w-full min-w-40 p-2 pb-0 shadow">
                   <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
                   <LazyImage
-                    src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ??
+                    src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
                       get_driver_headshot_template(data.graphics)}
                     imgwidth={DRIVER_HEADSHOT_WIDTH}
                     imgheight={DRIVER_HEADSHOT_HEIGHT}
@@ -149,7 +140,7 @@
                 <div class="card w-full min-w-40 p-2 pb-0 shadow">
                   <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
                   <LazyImage
-                    src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
+                    src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
                       get_driver_headshot_template(data.graphics)}
                     imgwidth={DRIVER_HEADSHOT_WIDTH}
                     imgheight={DRIVER_HEADSHOT_HEIGHT}
@@ -207,6 +198,7 @@
 {/if}
 
 <!-- The fookin table -->
+<!-- TODO: Hide this thing if no picks... -->
 <div class="flex">
   <div>
     <!-- Points color coding legend -->

src/routes/racepicks/+page.ts

@@ -2,10 +2,11 @@ import {
   fetch_currentpickedusers,
   fetch_currentrace,
   fetch_drivers,
-  fetch_racepicks,
+  fetch_visibleracepicks,
   fetch_raceresults,
   fetch_races,
   fetch_substitutions,
+  fetch_currentracepick,
 } from "$lib/fetch";
 import type { PageLoad } from "../$types";
 
@@ -13,7 +14,7 @@ export const load: PageLoad = async ({ fetch, depends }) => {
   depends("data:racepicks", "data:users", "data:raceresults", "data:drivers", "data:races");
 
   return {
-    racepicks: fetch_racepicks(fetch),
+    racepicks: fetch_visibleracepicks(fetch),
     currentpickedusers: fetch_currentpickedusers(fetch),
     raceresults: fetch_raceresults(fetch),
     drivers: fetch_drivers(fetch),
@@ -21,5 +22,6 @@ export const load: PageLoad = async ({ fetch, depends }) => {
     substitutions: fetch_substitutions(fetch),
 
     currentrace: await fetch_currentrace(fetch),
+    racepick: await fetch_currentracepick(fetch),
   };
 };

src/routes/seasonpicks/+page.svelte

@@ -7,7 +7,7 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { SeasonPick, SeasonPickedUser } from "$lib/schema";
+  import type { Hottake, SeasonPick } from "$lib/schema";
   import { ChequeredFlagIcon, LazyImage } from "$lib/components";
   import {
     get_by_value,
@@ -25,13 +25,6 @@
 
   let { data }: { data: PageData } = $props();
 
-  const seasonpick: Promise<SeasonPick | undefined> = $derived.by(
-    async () =>
-      (await data.seasonpicks).filter(
-        (seasonpick: SeasonPick) => seasonpick.expand.user.username === data.user?.username,
-      )[0] ?? undefined,
-  );
-
   const modalStore: ModalStore = getModalStore();
   const seasonpick_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
@@ -39,7 +32,7 @@
       component: "seasonPickcard",
       meta: {
         data,
-        seasonpick: await seasonpick,
+        seasonpick: data.seasonpick,
       },
     };
 
@@ -51,21 +44,20 @@
   <title>Formula 11 - Season Picks</title>
 </svelte:head>
 
-{#await seasonpick then pick}
+<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
-  <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
+  <AccordionItem>
-    <AccordionItem>
+    <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
-      <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
+    <svelte:fragment slot="summary">
-      <svelte:fragment slot="summary">
+      <span class="font-bold">Your Season Pick</span>
-        <span class="font-bold">Your Season Pick</span>
+    </svelte:fragment>
-      </svelte:fragment>
+    <svelte:fragment slot="content">
-      <svelte:fragment slot="content">
+      {data.seasonpick?.hottake ?? "Invalid"}
-        {pick?.hottake ?? "Invalid"}
+    </svelte:fragment>
-      </svelte:fragment>
+  </AccordionItem>
-    </AccordionItem>
+</Accordion>
-  </Accordion>
-{/await}
 
 <!-- The fookin table -->
+<!-- TODO: Hide this thing if no picks... -->
 <div class="flex">
   <div>
     <!-- TODO: Points popup? -->
@@ -126,16 +118,23 @@
   </div>
 
   <!-- TODO: Datelock the guess display (except hottake for review) -->
+  <!-- TODO: Add user option to display driver codes instead of headshots (or both) -->
   <div class="flex w-full overflow-x-scroll pb-2">
-    {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, drivers, teams]}
+    {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
-      {#each seasonpicked.filter((user: SeasonPickedUser) => user.picked) as user}
+      {#each seasonpicked as user}
-        {@const pick = seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0]}
+        {@const hottake = hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
-        {@const wdcwinner = get_by_value(drivers, "id", pick.wdcwinner)}
+        {@const pick =
-        {@const wccwinner = get_by_value(teams, "id", pick.wccwinner)}
+          seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
-        {@const mostovertakes = get_by_value(drivers, "id", pick.mostovertakes)}
+        {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
-        {@const mostdnfs = get_by_value(drivers, "id", pick.mostdnfs)}
+        {@const wccwinner = pick ? get_by_value(teams, "id", pick.wccwinner) : undefined}
-        {@const teamwinners = pick.teamwinners.map((id: string) => get_by_value(drivers, "id", id))}
+        {@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
-        {@const podiums = pick.podiums.map((id: string) => get_by_value(drivers, "id", id))}
+        {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
+        {@const teamwinners = pick
+          ? pick.teamwinners.map((id: string) => get_by_value(drivers, "id", id))
+          : [undefined]}
+        {@const podiums = pick
+          ? pick.podiums.map((id: string) => get_by_value(drivers, "id", id))
+          : [undefined]}
 
         <div
           class="card ml-1 mt-2 w-full min-w-36 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
@@ -165,7 +164,7 @@
           <div
             class="mt-2 h-20 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
           >
-            <div class="mx-auto w-fit text-xs lg:text-sm">{pick.hottake}</div>
+            <div class="mx-auto w-fit text-xs font-bold lg:text-sm">{hottake?.hottake ?? "?"}</div>
           </div>
 
           <!-- Drivers Champion -->
@@ -224,12 +223,12 @@
           <!-- Doohan Starts -->
           <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
             <div class="mx-auto w-fit text-xs lg:text-sm">
-              Jack Doohan startet <span class="font-bold">{pick.doohanstarts}</span> mal.
+              Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
             </div>
           </div>
 
           <!-- Teamwinners -->
-          <!-- TODO: The grid spacing is not correct (too much space in the middle). Also for the grid below... -->
+          <!-- TODO: Sort teamwinners by team (and by code inside teams), so they are sorted equally for each column -->
           <div
             class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 sm:h-[220px] md:h-[150px] lg:px-2"
           >
@@ -250,7 +249,8 @@
           </div>
 
           <!-- Podiums -->
-          <!-- TODO: Replace all style tags with custom classes like height here -->
+          <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
+          <!-- TODO: Sort podiums by driver code, so they are sorted equally for each column -->
           <div
             class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 md:h-[220px] lg:px-2 xl:h-[150px]"
           >

src/routes/seasonpicks/+page.ts

@@ -1,4 +1,11 @@
-import { fetch_drivers, fetch_seasonpickedusers, fetch_seasonpicks, fetch_teams } from "$lib/fetch";
+import {
+  fetch_currentseasonpick,
+  fetch_drivers,
+  fetch_hottakes,
+  fetch_seasonpickedusers,
+  fetch_seasonpicks,
+  fetch_teams,
+} from "$lib/fetch";
 import type { PageLoad } from "../$types";
 
 export const load: PageLoad = async ({ fetch, depends }) => {
@@ -8,6 +15,9 @@ export const load: PageLoad = async ({ fetch, depends }) => {
     teams: fetch_teams(fetch),
     drivers: fetch_drivers(fetch),
     seasonpicks: fetch_seasonpicks(fetch),
+    hottakes: fetch_hottakes(fetch),
     seasonpickedusers: fetch_seasonpickedusers(fetch),
+
+    seasonpick: await fetch_currentseasonpick(fetch),
   };
 };