From 3b710bd8466ffb2d672e640edb6e25784b7f037c Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 25 Mar 2025 19:45:30 +0100
Subject: [PATCH] Data/Official: Implement raceresults page

---
 .../data/official/raceresults/+page.svelte    | 55 +++++++++++++++++++
 src/routes/data/official/raceresults/+page.ts | 12 ++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/routes/data/official/raceresults/+page.svelte
 create mode 100644 src/routes/data/official/raceresults/+page.ts

diff --git a/src/routes/data/official/raceresults/+page.svelte b/src/routes/data/official/raceresults/+page.svelte
new file mode 100644
index 0000000..44febb6
--- /dev/null
+++ b/src/routes/data/official/raceresults/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import type { Race } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const results_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "race_step",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => {
+        const racename: string = get_by_value(await data.races, "step", value)?.name ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${racename}</span>`;
+      },
+    },
+    {
+      data_value_name: "race_step",
+      label: "Step",
+    },
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "status",
+      label: "Status",
+    },
+    {
+      data_value_name: "points",
+      label: "Points",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Race Results</title>
+</svelte:head>
+
+{#await data.scraped_raceresults then results}
+  <Table
+    data={results}
+    columns={results_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}
diff --git a/src/routes/data/official/raceresults/+page.ts b/src/routes/data/official/raceresults/+page.ts
new file mode 100644
index 0000000..071f37c
--- /dev/null
+++ b/src/routes/data/official/raceresults/+page.ts
@@ -0,0 +1,12 @@
+import { fetch_drivers, fetch_races, fetch_scraped_raceresults } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:scraped_raceresults", "data:races", "data:drivers");
+
+  return {
+    scraped_raceresults: fetch_scraped_raceresults(fetch),
+    races: fetch_races(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};