From 2dc170561d6bcf561f186e338efa3120feeb7487 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 30 Jan 2025 21:08:59 +0100
Subject: [PATCH] Users: Display driver headshot template if user doesn't have
 avatar

---
 src/routes/data/season/+layout.server.ts |  2 +-
 src/routes/data/users/+page.server.ts    | 16 +++++++++++++++-
 src/routes/data/users/+page.svelte       | 11 +++--------
 src/routes/racepicks/+page.server.ts     |  2 +-
 src/routes/racepicks/+page.svelte        |  2 +-
 5 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/routes/data/season/+layout.server.ts b/src/routes/data/season/+layout.server.ts
index 6732789..ec08b34 100644
--- a/src/routes/data/season/+layout.server.ts
+++ b/src/routes/data/season/+layout.server.ts
@@ -3,7 +3,7 @@ import type { LayoutServerLoad } from "./$types";
 
 // This "load" function runs serverside only, as it's located inside +layout.server.ts
 export const load: LayoutServerLoad = async ({ fetch, locals }) => {
-  // TODO: Duplicated code from racepicks/+page.server.ts
+  // 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")
diff --git a/src/routes/data/users/+page.server.ts b/src/routes/data/users/+page.server.ts
index 3a0ad14..6cfca19 100644
--- a/src/routes/data/users/+page.server.ts
+++ b/src/routes/data/users/+page.server.ts
@@ -1,4 +1,4 @@
-import type { User } from "$lib/schema";
+import type { Graphic, User } from "$lib/schema";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
@@ -14,7 +14,21 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return users;
   };
 
+  // TODO: Duplicated code from data/season/+layout.server.ts + racepicks/+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 {
     users: await fetch_users(),
+    graphics: await fetch_graphics(),
   };
 };
diff --git a/src/routes/data/users/+page.svelte b/src/routes/data/users/+page.svelte
index 96dc96c..5bfbe09 100644
--- a/src/routes/data/users/+page.svelte
+++ b/src/routes/data/users/+page.svelte
@@ -2,6 +2,7 @@
   import { Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
@@ -19,14 +20,8 @@
     {
       data_value_name: "avatar_url",
       label: "Avatar",
-      valuefun: async (value: string): Promise<string> => {
-        if (value) {
-          return `<img class='rounded-full w-10' src='${value}'/>`;
-        }
-
-        // The line height matches h-10 (40px)
-        return `<div class='rounded-full w-10 h-10 bg-surface-500 text-center align-middle' style='line-height: 40px;'>None</div>`;
-      },
+      valuefun: async (value: string): Promise<string> =>
+        `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
     },
     {
       data_value_name: "admin",
diff --git a/src/routes/racepicks/+page.server.ts b/src/routes/racepicks/+page.server.ts
index 9d4d590..eb149d5 100644
--- a/src/routes/racepicks/+page.server.ts
+++ b/src/routes/racepicks/+page.server.ts
@@ -80,7 +80,7 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return races;
   };
 
-  // TODO: Duplicated code from data/season/+layout.server.ts
+  // TODO: Duplicated code from data/season/+layout.server.ts + users/+page.server.ts
   const fetch_graphics = async (): Promise<Graphic[]> => {
     const graphics: Graphic[] = await locals.pb
       .collection("graphics")
diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index b487e66..205d8dd 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -101,7 +101,7 @@
                 Step {data.currentrace.step}: {data.currentrace.name}
               </span>
               <span class="">Race: {data.currentrace.racedate}</span>
-              <!-- TODO: Countdown -->
+              <!-- TODO: Countdown to next sq/sr/q/race -->
             </div>
             <div class="card w-full p-2 shadow">
               <span class="text-nowrap font-bold">Track Layout:</span>