Seasonpicks: Sort teamwinners and podiums

src/lib/fetch.ts

@@ -139,7 +139,6 @@ 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
  */
@@ -174,7 +173,6 @@ export const fetch_currentracepick = async (
   return racepick;
 };
 
-// TODO: This will make the hidden seasonpicks by other users visible inside the browser console...
 /**
  * Fetch all [SeasonPicks] from the database
  */

src/routes/racepicks/+page.svelte

@@ -69,6 +69,7 @@
 </svelte:head>
 
 {#if data.currentrace}
+  {#await data.drivers then drivers}
     <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
       <AccordionItem>
         <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
@@ -81,7 +82,7 @@
             <div class="mt-2 flex gap-2">
               <div class="card flex w-full min-w-40 flex-col p-2 shadow">
                 <span class="font-bold">
-                Step {data.currentrace.step}: {data.currentrace.name}
+                  {data.currentrace.name}
                 </span>
                 {#if data.currentrace.sprintdate}
                   <div class="flex gap-2">
@@ -122,7 +123,6 @@
 
             <!-- Only show the userguess if signed in -->
             {#if data.user}
-            {#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>
@@ -151,7 +151,6 @@
                   />
                 </div>
               </div>
-            {/await}
             {/if}
 
             <!-- Show users that have and have not picked yet -->
@@ -197,10 +196,10 @@
         </svelte:fragment>
       </AccordionItem>
     </Accordion>
+  {/await}
 {/if}
 
 <!-- The fookin table -->
-<!-- TODO: Hide this thing if no picks... -->
 <div class="flex">
   <div>
     <!-- Points color coding legend -->
@@ -301,7 +300,6 @@
     {/await}
   </div>
 
-  <!-- TODO: If no guess is made, the table will probably be too short? -->
   <!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
   <div class="flex w-full overflow-x-scroll pb-2">
     <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->

src/routes/seasonpicks/+page.svelte

@@ -7,7 +7,7 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Hottake, SeasonPick, SeasonPickedUser } from "$lib/schema";
+  import type { Driver, Hottake, SeasonPick, SeasonPickedUser } from "$lib/schema";
   import { ChequeredFlagIcon, LazyImage } from "$lib/components";
   import {
     get_by_value,
@@ -71,10 +71,14 @@
           <!-- Only show the stuff if signed in -->
           {#if data.user}
             {@const teamwinners = data.seasonpick
-              ? data.seasonpick.teamwinners.map((id: string) => get_by_value(drivers, "id", id))
+              ? data.seasonpick.teamwinners
+                  .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+                  .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
               : [undefined]}
             {@const podiums = data.seasonpick
-              ? data.seasonpick.podiums.map((id: string) => get_by_value(drivers, "id", id))
+              ? data.seasonpick.podiums
+                  .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+                  .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
               : [undefined]}
 
             <!-- Hottake + Doohanstarts -->
@@ -323,10 +327,14 @@
         {@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
         {@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))
+          ? pick.teamwinners
+              .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+              .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
           : [undefined]}
         {@const podiums = pick
-          ? pick.podiums.map((id: string) => get_by_value(drivers, "id", id))
+          ? pick.podiums
+              .map((id: string) => get_by_value(drivers, "id", id) as Driver)
+              .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
           : [undefined]}
 
         <div
@@ -422,7 +430,6 @@
             </div>
 
             <!-- Teamwinners -->
-            <!-- 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"
             >
@@ -444,7 +451,6 @@
 
             <!-- Podiums -->
             <!-- 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]"
             >