ui: url state handling

motis-project · Jan 18, 2025 · 636154f · 636154f
1 parent a97cd0c
commit 636154f
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 87 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host 0.0.0.0 --port 3000",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "npm run test:integration && npm run test:unit",
@@ -18,7 +18,7 @@
 		"@hey-api/openapi-ts": "^0.53.11",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/kit": "^2.12.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^8.56.0",
 		"@types/polyline": "^0.1.32",

diff --git a/ui/src/app.css b/ui/src/app.css
@@ -104,4 +104,4 @@
 	display: flex;
 	flex-direction: column;
 	z-index: 3;
-}
+}
diff --git a/ui/src/app.d.ts b/ui/src/app.d.ts
@@ -1,11 +1,19 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import type { Itinerary } from '$lib/openapi';
+
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+			selectedItinerary?: Itinerary;
+			selectedStop?: { name: string; stopId: string; time: Date };
+			stopArriveBy?: boolean;
+			tripId?: string;
+		}
 		// interface Platform {}
 	}
 }

diff --git a/ui/src/lib/ConnectionDetail.svelte b/ui/src/lib/ConnectionDetail.svelte
@@ -36,7 +36,13 @@
 		{timestamp}
 		{scheduledTimestamp}
 	/>
-	<Time variant="realtime" class="font-semibold w-16" {isRealtime} {timestamp} {scheduledTimestamp} />
+	<Time
+		variant="realtime"
+		class="font-semibold w-16"
+		{isRealtime}
+		{timestamp}
+		{scheduledTimestamp}
+	/>
 	{#if stopId}
 		<Button
 			class="text-[length:inherit] leading-none justify-normal text-wrap text-left"
@@ -144,7 +150,9 @@
 								({formatDurationSec(l.duration)})
 							</span>
 						</summary>
-						<div class="mb-1 grid gap-y-1 grid-cols-[max-content_max-content_auto] items-center text-sm">
+						<div
+							class="mb-1 grid gap-y-1 grid-cols-[max-content_max-content_auto] items-center text-sm"
+						>
 							{#each l.intermediateStops! as s}
 								{@render stopTimes(s.arrival!, s.scheduledArrival!, l.realTime, s.name!, s.stopId)}
 							{/each}
@@ -153,7 +161,9 @@
 				{/if}
 
 				{#if !isLast && !(isLastPred && next!.duration === 0)}
-					<div class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-3 text-lg">
+					<div
+						class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-3 text-lg"
+					>
 						{@render stopTimes(
 							l.endTime!,
 							l.scheduledEndTime!,
@@ -183,16 +193,23 @@
 				</div>
 				{@render streetLeg(l)}
 				{#if !isLast}
-					<div class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-4 text-lg">
+					<div
+						class="grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center pb-4 text-lg"
+					>
 						{@render stopTimes(l.endTime, l.scheduledEndTime, l.realTime, l.to.name, l.to.stopId)}
 					</div>
 				{/if}
 			</div>
 		{/if}
 	{/each}
 	<div class="relative pl-6 left-4">
-		<div class="absolute left-[-6px] top-[0px] w-[15px] h-[15px] rounded-full" style={routeColor(lastLeg!)}></div>
-		<div class="relative left-[4px] bottom-[7px] grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center text-lg">
+		<div
+			class="absolute left-[-6px] top-[0px] w-[15px] h-[15px] rounded-full"
+			style={routeColor(lastLeg!)}
+		></div>
+		<div
+			class="relative left-[4px] bottom-[7px] grid gap-y-6 grid-cols-[max-content_max-content_auto] items-center text-lg"
+		>
 			{@render stopTimes(
 				lastLeg!.endTime,
 				lastLeg!.scheduledEndTime,

diff --git a/ui/src/lib/ItineraryList.svelte b/ui/src/lib/ItineraryList.svelte
@@ -22,12 +22,12 @@
 		routingResponses,
 		baseResponse,
 		baseQuery,
-		selectedItinerary = $bindable()
+		selectItinerary
 	}: {
 		routingResponses: Array<Promise<PlanResponse>>;
 		baseResponse: Promise<PlanResponse> | undefined;
 		baseQuery: PlanData | undefined;
-		selectedItinerary: Itinerary | undefined;
+		selectItinerary: (it: Itinerary) => void;
 	} = $props();
 
 	const throwOnError = (promise: RequestResult<PlanResponse, PlanError, false>) =>
@@ -65,7 +65,7 @@
 					<DirectConnection
 						{d}
 						onclick={() => {
-							selectedItinerary = d;
+							selectItinerary(d);
 						}}
 					/>
 				{/each}
@@ -105,7 +105,7 @@
 						{#each r.itineraries as it}
 							<button
 								onclick={() => {
-									selectedItinerary = it;
+									selectItinerary(it);
 								}}
 							>
 								<Card class="p-4">

diff --git a/ui/src/lib/RailViz.svelte b/ui/src/lib/RailViz.svelte
@@ -15,7 +15,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import Palette from 'lucide-svelte/icons/palette';
 	import Rss from 'lucide-svelte/icons/rss';
-	import { browser } from '$app/environment'
+	import { browser } from '$app/environment';
 
 	let {
 		map,

diff --git a/ui/src/lib/StopTimes.svelte b/ui/src/lib/StopTimes.svelte
@@ -12,12 +12,16 @@
 	let {
 		stopId,
 		time: queryTime,
-		arriveBy = $bindable(),
+		stopNameFromResponse = $bindable(),
+		arriveBy,
+		setArriveBy,
 		onClickTrip
 	}: {
 		stopId: string;
 		time: Date;
 		arriveBy?: boolean;
+		stopNameFromResponse: string;
+		setArriveBy: (arriveBy: boolean) => void;
 		onClickTrip: (tripId: string) => void;
 	} = $props();
 
@@ -33,8 +37,11 @@
 				console.log(response.error);
 				throw new Error('HTTP ' + response.response?.status);
 			}
+			stopNameFromResponse =
+				(response.data?.stopTimes.length && response.data?.stopTimes[0].place?.name) || '';
 			return response.data!;
 		});
+	stop;
 </script>
 
 <div
@@ -45,7 +52,7 @@
 			class="font-bold"
 			variant="outline"
 			onclick={() => {
-				arriveBy = !arriveBy;
+				setArriveBy(!arriveBy);
 			}}
 		>
 			{#if arriveBy}