From b63893963bc1cc50b6e211d29ef6faf89958c32f Mon Sep 17 00:00:00 2001
From: JNNJ <95310130+CodeName-Anti@users.noreply.github.com>
Date: Mon, 3 Mar 2025 22:02:56 +0100
Subject: [PATCH 1/3] refactoring(frontend): merge duplicated layouts

---
 .../{(custom-group) => (root)}/+error.svelte  |  0
 .../{(custom-group) => (root)}/+layout.svelte |  2 +-
 .../{(custom-group) => (root)}/+page.svelte   |  0
 .../[evaNumber]/[type=type]/+error.svelte     |  0
 .../[evaNumber]/[type=type]/+layout.server.ts |  0
 .../[evaNumber]/[type=type]/+layout.svelte    | 59 +++++++++----------
 .../[evaNumber]/[type=type]/+page.server.ts   |  0
 .../[evaNumber]/[type=type]/+page.svelte      |  0
 .../journey/coach-sequence/+error.svelte      |  0
 .../journey/coach-sequence/+page.server.ts    |  0
 .../journey/coach-sequence/+page.svelte       |  0
 .../journey/coach-sequence/+layout.svelte     | 12 ----
 12 files changed, 28 insertions(+), 45 deletions(-)
 rename frontend/src/routes/{(custom-group) => (root)}/+error.svelte (100%)
 rename frontend/src/routes/{(custom-group) => (root)}/+layout.svelte (79%)
 rename frontend/src/routes/{(custom-group) => (root)}/+page.svelte (100%)
 rename frontend/src/routes/{ => (root)}/[evaNumber]/[type=type]/+error.svelte (100%)
 rename frontend/src/routes/{ => (root)}/[evaNumber]/[type=type]/+layout.server.ts (100%)
 rename frontend/src/routes/{ => (root)}/[evaNumber]/[type=type]/+layout.svelte (66%)
 rename frontend/src/routes/{ => (root)}/[evaNumber]/[type=type]/+page.server.ts (100%)
 rename frontend/src/routes/{ => (root)}/[evaNumber]/[type=type]/+page.svelte (100%)
 rename frontend/src/routes/{ => (root)}/journey/coach-sequence/+error.svelte (100%)
 rename frontend/src/routes/{ => (root)}/journey/coach-sequence/+page.server.ts (100%)
 rename frontend/src/routes/{ => (root)}/journey/coach-sequence/+page.svelte (100%)
 delete mode 100644 frontend/src/routes/journey/coach-sequence/+layout.svelte

diff --git a/frontend/src/routes/(custom-group)/+error.svelte b/frontend/src/routes/(root)/+error.svelte
similarity index 100%
rename from frontend/src/routes/(custom-group)/+error.svelte
rename to frontend/src/routes/(root)/+error.svelte
diff --git a/frontend/src/routes/(custom-group)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
similarity index 79%
rename from frontend/src/routes/(custom-group)/+layout.svelte
rename to frontend/src/routes/(root)/+layout.svelte
index 18820c4..dd23b8b 100644
--- a/frontend/src/routes/(custom-group)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -6,7 +6,7 @@
 	let { children }: LayoutProps = $props();
 </script>
 
-<div class="flex h-screen w-screen flex-col overflow-hidden">
+<div class="flex min-h-screen w-full flex-col">
 	<Navbar />
 	{@render children()}
 </div>
diff --git a/frontend/src/routes/(custom-group)/+page.svelte b/frontend/src/routes/(root)/+page.svelte
similarity index 100%
rename from frontend/src/routes/(custom-group)/+page.svelte
rename to frontend/src/routes/(root)/+page.svelte
diff --git a/frontend/src/routes/[evaNumber]/[type=type]/+error.svelte b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte
similarity index 100%
rename from frontend/src/routes/[evaNumber]/[type=type]/+error.svelte
rename to frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte
diff --git a/frontend/src/routes/[evaNumber]/[type=type]/+layout.server.ts b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.server.ts
similarity index 100%
rename from frontend/src/routes/[evaNumber]/[type=type]/+layout.server.ts
rename to frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.server.ts
diff --git a/frontend/src/routes/[evaNumber]/[type=type]/+layout.svelte b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte
similarity index 66%
rename from frontend/src/routes/[evaNumber]/[type=type]/+layout.svelte
rename to frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte
index 419fe47..893e1b5 100644
--- a/frontend/src/routes/[evaNumber]/[type=type]/+layout.svelte
+++ b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import "$src/app.css";
-	import Navbar from "$components/Navbar.svelte";
 	import type { LayoutProps } from "./$types";
 	import { MetaTags } from "svelte-meta-tags";
 	import Clock from "$components/timetable/Clock.svelte";
@@ -75,37 +74,33 @@
 	}}
 />
 
-<div class="flex min-h-screen flex-col">
-	<Navbar />
-
-	<div class="bg-background sticky top-20 z-10 container mx-auto w-full flex-col px-6 pt-4">
-		<div class="flex justify-between">
-			{#snippet favoriteStation()}
-				<div class="flex flex-row items-baseline gap-x-2 break-all">
-					{#if $session.data}
-						<Star
-							class="shrink-0 cursor-pointer transition-all duration-300 {favor
-								? 'fill-accent stroke-yellow-400'
-								: 'hover:stroke-accent fill-transparent'}"
-							onclick={toggleFavour}
-						/>
-					{/if}
-					<span class="text-xl font-semibold break-words whitespace-normal md:text-4xl">{station.name}</span>
-				</div>
-			{/snippet}
-
-			{@render favoriteStation()}
-			<Clock />
-		</div>
-
-		<button class="group relative flex cursor-pointer gap-x-2 text-base md:text-xl" onclick={navigate}>
-			<CornerDownRight />
-			Show {isDeparture ? "Arrivals" : "Departures"}
-			<span
-				class="bg-accent absolute bottom-0 left-0 h-0.5 w-full scale-x-0 transform transition-transform duration-300 group-hover:scale-x-100"
-			></span>
-		</button>
+<div class="bg-background sticky top-20 z-10 container mx-auto w-full flex-col px-6 pt-4">
+	<div class="flex justify-between">
+		{#snippet favoriteStation()}
+			<div class="flex flex-row items-baseline gap-x-2 break-all">
+				{#if $session.data}
+					<Star
+						class="shrink-0 cursor-pointer transition-all duration-300 {favor
+							? 'fill-accent stroke-yellow-400'
+							: 'hover:stroke-accent fill-transparent'}"
+						onclick={toggleFavour}
+					/>
+				{/if}
+				<span class="text-xl font-semibold break-words whitespace-normal md:text-4xl">{station.name}</span>
+			</div>
+		{/snippet}
+
+		{@render favoriteStation()}
+		<Clock />
 	</div>
 
-	{@render children()}
+	<button class="group relative flex cursor-pointer gap-x-2 text-base md:text-xl" onclick={navigate}>
+		<CornerDownRight />
+		Show {isDeparture ? "Arrivals" : "Departures"}
+		<span
+			class="bg-accent absolute bottom-0 left-0 h-0.5 w-full scale-x-0 transform transition-transform duration-300 group-hover:scale-x-100"
+		></span>
+	</button>
 </div>
+
+{@render children()}
diff --git a/frontend/src/routes/[evaNumber]/[type=type]/+page.server.ts b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.server.ts
similarity index 100%
rename from frontend/src/routes/[evaNumber]/[type=type]/+page.server.ts
rename to frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.server.ts
diff --git a/frontend/src/routes/[evaNumber]/[type=type]/+page.svelte b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.svelte
similarity index 100%
rename from frontend/src/routes/[evaNumber]/[type=type]/+page.svelte
rename to frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.svelte
diff --git a/frontend/src/routes/journey/coach-sequence/+error.svelte b/frontend/src/routes/(root)/journey/coach-sequence/+error.svelte
similarity index 100%
rename from frontend/src/routes/journey/coach-sequence/+error.svelte
rename to frontend/src/routes/(root)/journey/coach-sequence/+error.svelte
diff --git a/frontend/src/routes/journey/coach-sequence/+page.server.ts b/frontend/src/routes/(root)/journey/coach-sequence/+page.server.ts
similarity index 100%
rename from frontend/src/routes/journey/coach-sequence/+page.server.ts
rename to frontend/src/routes/(root)/journey/coach-sequence/+page.server.ts
diff --git a/frontend/src/routes/journey/coach-sequence/+page.svelte b/frontend/src/routes/(root)/journey/coach-sequence/+page.svelte
similarity index 100%
rename from frontend/src/routes/journey/coach-sequence/+page.svelte
rename to frontend/src/routes/(root)/journey/coach-sequence/+page.svelte
diff --git a/frontend/src/routes/journey/coach-sequence/+layout.svelte b/frontend/src/routes/journey/coach-sequence/+layout.svelte
deleted file mode 100644
index 18820c4..0000000
--- a/frontend/src/routes/journey/coach-sequence/+layout.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import "$src/app.css";
-	import Navbar from "$components/Navbar.svelte";
-	import type { LayoutProps } from "./$types";
-
-	let { children }: LayoutProps = $props();
-</script>
-
-<div class="flex h-screen w-screen flex-col overflow-hidden">
-	<Navbar />
-	{@render children()}
-</div>

From 7c020413932d3d98705006c6eb338b911814bbaa Mon Sep 17 00:00:00 2001
From: JNNJ <95310130+CodeName-Anti@users.noreply.github.com>
Date: Thu, 6 Mar 2025 21:32:28 +0100
Subject: [PATCH 2/3] frontend: fix error boundaries and check if evaNumber is
 numerical

---
 .../ui/controls/StationSearch.svelte          |  2 +-
 .../components/ui/controls/TimePicker.svelte  |  2 +-
 frontend/src/params/int.ts                    |  5 ++
 frontend/src/routes/(root)/+error.svelte      |  2 +-
 frontend/src/routes/(root)/+layout.svelte     |  1 -
 .../(root)/[...missing]/+page.server.ts       |  7 +++
 .../(root)/[evaNumber=int]/+page.server.ts    |  6 +++
 .../[type=type]/+layout.server.ts             |  5 +-
 .../[type=type]/+layout.svelte                |  3 +-
 .../[type=type]/+page.server.ts               |  0
 .../[type=type]/+page.svelte                  |  0
 .../[evaNumber]/[type=type]/+error.svelte     | 12 -----
 frontend/src/routes/+layout.svelte            |  8 ++++
 frontend/src/routes/login/+layout.svelte      | 42 ----------------
 frontend/src/routes/login/+page.svelte        | 48 ++++++++++++++++---
 15 files changed, 75 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/params/int.ts
 create mode 100644 frontend/src/routes/(root)/[...missing]/+page.server.ts
 create mode 100644 frontend/src/routes/(root)/[evaNumber=int]/+page.server.ts
 rename frontend/src/routes/(root)/{[evaNumber] => [evaNumber=int]}/[type=type]/+layout.server.ts (79%)
 rename frontend/src/routes/(root)/{[evaNumber] => [evaNumber=int]}/[type=type]/+layout.svelte (96%)
 rename frontend/src/routes/(root)/{[evaNumber] => [evaNumber=int]}/[type=type]/+page.server.ts (100%)
 rename frontend/src/routes/(root)/{[evaNumber] => [evaNumber=int]}/[type=type]/+page.svelte (100%)
 delete mode 100644 frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte
 create mode 100644 frontend/src/routes/+layout.svelte
 delete mode 100644 frontend/src/routes/login/+layout.svelte

diff --git a/frontend/src/components/ui/controls/StationSearch.svelte b/frontend/src/components/ui/controls/StationSearch.svelte
index b000711..6ed890d 100644
--- a/frontend/src/components/ui/controls/StationSearch.svelte
+++ b/frontend/src/components/ui/controls/StationSearch.svelte
@@ -2,7 +2,7 @@
 	import type { Station } from "$models/station";
 	import { onMount } from "svelte";
 	import { env } from "$env/dynamic/public";
-	import { Search } from "lucide-svelte";
+	import Search from "lucide-svelte/icons/search";
 
 	let { station = $bindable(undefined) }: { station?: Station } = $props();
 	let open = $state<boolean>(false);
diff --git a/frontend/src/components/ui/controls/TimePicker.svelte b/frontend/src/components/ui/controls/TimePicker.svelte
index ad06205..6333647 100644
--- a/frontend/src/components/ui/controls/TimePicker.svelte
+++ b/frontend/src/components/ui/controls/TimePicker.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { DateTime } from "luxon";
-	import { CalendarDays } from "lucide-svelte";
+	import CalendarDays from "lucide-svelte/icons/calendar-days";
 
 	let { selectedDate = $bindable(DateTime.now().set({ second: 0, millisecond: 0 })) } = $props();
 
diff --git a/frontend/src/params/int.ts b/frontend/src/params/int.ts
new file mode 100644
index 0000000..331bce6
--- /dev/null
+++ b/frontend/src/params/int.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from "@sveltejs/kit";
+
+export const match: ParamMatcher = (param) => {
+	return /^\d+$/.test(param);
+};
diff --git a/frontend/src/routes/(root)/+error.svelte b/frontend/src/routes/(root)/+error.svelte
index b35e289..59a20d0 100644
--- a/frontend/src/routes/(root)/+error.svelte
+++ b/frontend/src/routes/(root)/+error.svelte
@@ -7,6 +7,6 @@
 		<p class="text-7xl font-bold">
 			{page.status}
 		</p>
-		<p class="text-2xl font-medium">This is not what you are looking for...</p>
+		<p class="text-2xl font-medium">{page.error?.message ?? "This is not what you are looking for..."}</p>
 	</div>
 </div>
diff --git a/frontend/src/routes/(root)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
index dd23b8b..ea1c2a7 100644
--- a/frontend/src/routes/(root)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import "$src/app.css";
 	import Navbar from "$components/Navbar.svelte";
 	import type { LayoutProps } from "./$types";
 
diff --git a/frontend/src/routes/(root)/[...missing]/+page.server.ts b/frontend/src/routes/(root)/[...missing]/+page.server.ts
new file mode 100644
index 0000000..0d721bf
--- /dev/null
+++ b/frontend/src/routes/(root)/[...missing]/+page.server.ts
@@ -0,0 +1,7 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+// This is to catch all unfound pages and redirect them to the error page with the layout
+export const load = (async () => {
+	throw error(404, "No page found...");
+}) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(root)/[evaNumber=int]/+page.server.ts b/frontend/src/routes/(root)/[evaNumber=int]/+page.server.ts
new file mode 100644
index 0000000..cedb3ac
--- /dev/null
+++ b/frontend/src/routes/(root)/[evaNumber=int]/+page.server.ts
@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load = (async ({ url }) => {
+	return redirect(308, `${url.pathname}/departures`);
+}) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.server.ts b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.server.ts
similarity index 79%
rename from frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.server.ts
rename to frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.server.ts
index 6d5bf0a..ca37c82 100644
--- a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.server.ts
+++ b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.server.ts
@@ -13,13 +13,14 @@ const loadStation = async (evaNumber: string): Promise<Station> => {
 	const response = await fetch(`${env.BACKEND_DOCKER_BASE_URL}/api/v1/stations/${evaNumber}`, {
 		method: "GET"
 	});
+
 	if (!response.ok) {
-		throw error(404, `No station found for ${evaNumber}`);
+		throw error(404, `No station found for ${evaNumber}. Maybe try a different one?`);
 	}
 
 	const station = (await response.json()) as Station;
 	if (station.evaNumber === undefined) {
-		throw error(404, `No station found for ${evaNumber}`);
+		throw error(404, `No station found for ${evaNumber}. Maybe try a different one?`);
 	}
 	return station;
 };
diff --git a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.svelte
similarity index 96%
rename from frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte
rename to frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.svelte
index 893e1b5..3c2719c 100644
--- a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+layout.svelte
+++ b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+layout.svelte
@@ -3,7 +3,8 @@
 	import type { LayoutProps } from "./$types";
 	import { MetaTags } from "svelte-meta-tags";
 	import Clock from "$components/timetable/Clock.svelte";
-	import { CornerDownRight, Star } from "lucide-svelte";
+	import CornerDownRight from "lucide-svelte/icons/corner-down-right";
+	import Star from "lucide-svelte/icons/star";
 	import { authClient } from "$lib/auth-client";
 	import { page } from "$app/state";
 	import { getContext, setContext } from "svelte";
diff --git a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.server.ts b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.server.ts
rename to frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts
diff --git a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.svelte b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte
similarity index 100%
rename from frontend/src/routes/(root)/[evaNumber]/[type=type]/+page.svelte
rename to frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte
diff --git a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte b/frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte
deleted file mode 100644
index 6ba8036..0000000
--- a/frontend/src/routes/(root)/[evaNumber]/[type=type]/+error.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { page } from "$app/state";
-</script>
-
-<div class="flex items-center justify-center align-middle">
-	<div>
-		<p class="text-7xl font-bold">
-			{page.status}
-		</p>
-		<p class="text-2xl font-medium">This station does not exist. Maybe you want to try a different?</p>
-	</div>
-</div>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
new file mode 100644
index 0000000..4fafff3
--- /dev/null
+++ b/frontend/src/routes/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import "$src/app.css";
+	import type { LayoutProps } from "./$types";
+
+	let { children }: LayoutProps = $props();
+</script>
+
+{@render children()}
diff --git a/frontend/src/routes/login/+layout.svelte b/frontend/src/routes/login/+layout.svelte
deleted file mode 100644
index 37822dc..0000000
--- a/frontend/src/routes/login/+layout.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import "$src/app.css";
-	import type { LayoutProps } from "./$types";
-	import { MetaTags } from "svelte-meta-tags";
-	import LogoIcon from "$components/branding/LogoIcon.svelte";
-
-	let { children }: LayoutProps = $props();
-</script>
-
-<MetaTags
-	title="Navigator"
-	description="Login to continue"
-	openGraph={{
-		url: "https://navigator.voldechse.wtf/login",
-		title: "Navigator",
-		siteName: "Navigator",
-		description: "Login to continue",
-		images: [
-			{
-				url: "https://navigator.voldechse.wtf/logo.png",
-				width: 1024,
-				height: 1024,
-				alt: "Navigator Logo"
-			}
-		]
-	}}
-/>
-
-<div class="container mx-auto flex h-screen flex-col items-center gap-y-4 pt-24 md:pt-48">
-	<a class="flex justify-center" href="/">
-		<LogoIcon height="150" width="150" />
-	</a>
-
-	<div class="space-y-12 md:w-[40%]">
-		<div class="flex flex-col">
-			<span class="text-3xl font-bold">Login</span>
-			<span>Please login to continue.</span>
-		</div>
-
-		{@render children()}
-	</div>
-</div>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 5565dbc..3305761 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,12 +1,46 @@
 <script lang="ts">
 	import GitHub from "$components/ui/icons/GitHub.svelte";
 	import { authClient } from "$lib/auth-client";
+	import { MetaTags } from "svelte-meta-tags";
+	import LogoIcon from "$components/branding/LogoIcon.svelte";
 </script>
 
-<button
-	class="bg-primary-darker hover:bg-primary-dark flex w-full cursor-pointer flex-row items-center justify-center gap-x-4 rounded-l p-2"
-	onclick={() => authClient.signIn.social({ provider: "github", callbackURL: window.location.origin })}
->
-	<GitHub height="25" width="25" />
-	<span class="text-lg font-medium">Continue with GitHub</span>
-</button>
+<MetaTags
+	title="Navigator"
+	description="Login to continue"
+	openGraph={{
+		url: "https://navigator.voldechse.wtf/login",
+		title: "Navigator",
+		siteName: "Navigator",
+		description: "Login to continue",
+		images: [
+			{
+				url: "https://navigator.voldechse.wtf/logo.png",
+				width: 1024,
+				height: 1024,
+				alt: "Navigator Logo"
+			}
+		]
+	}}
+/>
+
+<div class="container mx-auto flex h-screen flex-col items-center gap-y-4 pt-24 md:pt-48">
+	<a class="flex justify-center" href="/">
+		<LogoIcon height="150" width="150" />
+	</a>
+
+	<div class="space-y-12 md:w-[40%]">
+		<div class="flex flex-col">
+			<span class="text-3xl font-bold">Login</span>
+			<span>Please login to continue.</span>
+		</div>
+
+		<button
+			class="bg-primary-darker hover:bg-primary-dark flex w-full cursor-pointer flex-row items-center justify-center gap-x-4 rounded-l p-2"
+			onclick={() => authClient.signIn.social({ provider: "github", callbackURL: window.location.origin })}
+		>
+			<GitHub height="25" width="25" />
+			<span class="text-lg font-medium">Continue with GitHub</span>
+		</button>
+	</div>
+</div>

From f2ef34358c59308ac7478328605c3a91c96ed0fc Mon Sep 17 00:00:00 2001
From: JNNJ <95310130+CodeName-Anti@users.noreply.github.com>
Date: Thu, 6 Mar 2025 22:35:44 +0100
Subject: [PATCH 3/3] frontend: stream journeys to frontend and add loading
 spinner

---
 frontend/src/components/Loader.svelte         | 72 +++++++++++++++++++
 .../[type=type]/+page.server.ts               |  4 +-
 .../[evaNumber=int]/[type=type]/+page.svelte  | 44 +++++++-----
 3 files changed, 101 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/Loader.svelte

diff --git a/frontend/src/components/Loader.svelte b/frontend/src/components/Loader.svelte
new file mode 100644
index 0000000..27160c3
--- /dev/null
+++ b/frontend/src/components/Loader.svelte
@@ -0,0 +1,72 @@
+<span class="loader"></span>
+
+<style>
+	/* https://cssloaders.github.io/ */
+	.loader {
+		animation: rotate 1s infinite;
+		height: 50px;
+		width: 50px;
+	}
+
+	.loader:before,
+	.loader:after {
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: 20px;
+		width: 20px;
+	}
+	.loader:before {
+		animation: ball1 1s infinite;
+		background-color: var(--text);
+		box-shadow: 30px 0 0 var(--accent);
+		margin-bottom: 10px;
+	}
+	.loader:after {
+		animation: ball2 1s infinite;
+		background-color: var(--accent);
+		box-shadow: 30px 0 0 var(--text);
+	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg) scale(0.8);
+		}
+		50% {
+			transform: rotate(360deg) scale(1.2);
+		}
+		100% {
+			transform: rotate(720deg) scale(0.8);
+		}
+	}
+
+	@keyframes ball1 {
+		0% {
+			box-shadow: 30px 0 0 var(--accent);
+		}
+		50% {
+			box-shadow: 0 0 0 var(--accent);
+			margin-bottom: 0;
+			transform: translate(15px, 15px);
+		}
+		100% {
+			box-shadow: 30px 0 0 var(--accent);
+			margin-bottom: 10px;
+		}
+	}
+
+	@keyframes ball2 {
+		0% {
+			box-shadow: 30px 0 0 var(--text);
+		}
+		50% {
+			box-shadow: 0 0 0 var(--text);
+			margin-top: -20px;
+			transform: translate(15px, 15px);
+		}
+		100% {
+			box-shadow: 30px 0 0 var(--text);
+			margin-top: 0;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts
index 95f1e1c..aa66c4f 100644
--- a/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts
+++ b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.server.ts
@@ -4,8 +4,8 @@ import type { Journey } from "$models/connection";
 import { DateTime } from "luxon";
 import { env } from "$env/dynamic/private";
 
-export const load: PageServerLoad = async ({ params, url }): Promise<{ journeys: Journey[] }> => {
-	const journeys = await loadJourneys(
+export const load: PageServerLoad = async ({ params, url }): Promise<{ journeys: Promise<Journey[]> }> => {
+	const journeys = loadJourneys(
 		params.evaNumber,
 		params.type,
 		url.searchParams.get("startDate") ?? DateTime.now().set({ second: 0, millisecond: 0 }).toISO()
diff --git a/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte
index 111467d..125d284 100644
--- a/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte
+++ b/frontend/src/routes/(root)/[evaNumber=int]/[type=type]/+page.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { PageProps } from "./$types";
 	import Filter from "$components/timetable/filter/Filter.svelte";
 	import type { Connection, Journey } from "$models/connection";
 	import ConnectionComponent from "$components/timetable/ConnectionComponent.svelte";
 	import WingTrain from "$components/timetable/WingTrain.svelte";
+	import Loader from "$components/Loader.svelte";
 
 	let { data }: PageProps = $props();
 
 	let currentFilter = $state(["*"]);
+
 	const matchesFilter = (journey: Journey) => {
 		if (currentFilter.length === 0) return true;
 		if (currentFilter.includes("*")) return true;
@@ -18,26 +21,33 @@
 		return currentFilter.includes(firstConnection?.lineInformation?.type ?? "");
 	};
 
-	const allowedProducts = (): string[] => {
-		const products = data?.station?.products || [];
+	const allowedProducts = (journeys: Journey[] | undefined): string[] => {
+		const products = data.station?.products || [];
 
-		const types = data?.journeys
-			?.flatMap((journey) => journey.connections.map((conn) => conn.lineInformation?.type))
+		const types = journeys!
+			.flatMap((journey) => journey.connections.map((conn) => conn.lineInformation?.type))
 			.filter(Boolean);
+
 		return products.filter((product) => types.includes(product));
 	};
 </script>
 
-<div class="scrollbar-track-sky-300 container mx-auto flex flex-1 flex-col divide-y-2 md:divide-y-0">
-	{#each data.journeys as journey}
-		{#if !matchesFilter(journey)}{:else if journey.connections.length > 1}
-			<WingTrain {journey} />
-		{:else}
-			<ConnectionComponent connection={journey.connections[0]} renderInformation={true} renderBorder={true} />
-		{/if}
-	{/each}
-</div>
-
-<div class="sticky bottom-0 mt-auto w-full">
-	<Filter allowedProducts={allowedProducts()} bind:selected={currentFilter} />
-</div>
+{#await data.journeys}
+	<div class="mx-auto flex-1">
+		<Loader />
+	</div>
+{:then journeys}
+	<div class="scrollbar-track-sky-300 container mx-auto flex flex-1 flex-col divide-y-2 md:divide-y-0">
+		{#each journeys as journey}
+			{#if !matchesFilter(journey)}{:else if journey.connections.length > 1}
+				<WingTrain {journey} />
+			{:else}
+				<ConnectionComponent connection={journey.connections[0]} renderInformation={true} renderBorder={true} />
+			{/if}
+		{/each}
+	</div>
+
+	<div class="sticky bottom-0 mt-auto w-full">
+		<Filter allowedProducts={allowedProducts(journeys)} bind:selected={currentFilter} />
+	</div>
+{/await}