Merge pull request #26 from OneBusAway/feature/url-change

Adds Stop Details Page

src/components/map/GoogleMap.svelte

@@ -7,6 +7,7 @@
 		PUBLIC_OBA_REGION_CENTER_LAT as initialLat,
 		PUBLIC_OBA_REGION_CENTER_LNG as initialLng
 	} from '$env/static/public';
+	import { pushState } from '$app/navigation';
 
 	import { createMap, loadGoogleMapsLibrary, nightModeStyles } from '$lib/googleMaps';
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
@@ -68,6 +69,7 @@
 		const container = document.createElement('div');
 		document.body.appendChild(container);
 		function handleClick() {
+			pushState(`/stops/${s.id}`);
 			dispatch('stopSelected', { stop: s });
 		}
 
@@ -156,6 +158,10 @@
 			}
 		});
 	});
+
+	function handleStopSelected(stop) {
+		dispatch('stopSelected', { stop });
+	}
 </script>
 
 <div id="map"></div>

src/components/navigation/ModalPane.svelte

@@ -4,10 +4,12 @@
 	import { faX } from '@fortawesome/free-solid-svg-icons';
 	import { keybinding } from '$lib/keybinding';
 	import { createEventDispatcher } from 'svelte';
+	import { pushState } from '$app/navigation';
 
 	const dispatch = createEventDispatcher();
 
 	function closePane() {
+		pushState('/');
 		dispatch('close');
 	}
 </script>

src/components/oba/StopPane.svelte

@@ -2,31 +2,45 @@
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
 
 	export let stop;
+	export let arrivalsAndDeparturesResponse = null;
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
-	let routeShortNames = null;
 
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
 		if (response.ok) {
-			const json = await response.json();
-			arrivalsAndDepartures = json.data.entry;
-			routeShortNames = json.data.references.routes
-				.filter((r) => stop.routeIds.includes(r.id))
-				.map((r) => r.nullSafeShortName)
-				.sort();
+			arrivalsAndDeparturesResponse = await response.json();
+			arrivalsAndDepartures = arrivalsAndDeparturesResponse.data.entry;
 		} else {
 			error = 'Unable to fetch arrival/departure data';
 		}
 
 		loading = false;
 	}
 
-	$: (async (s) => {
-		await loadData(s.id);
-	})(stop);
+	$: (async (s, arrDep) => {
+		// if the arrivalsAndDeparturesResponse is passed in, use that
+		// instead of loading fresh data.
+		if (arrDep) {
+			arrivalsAndDepartures = arrDep.data.entry;
+		}
+		else {
+			await loadData(s.id);
+		}
+	})(stop, arrivalsAndDeparturesResponse);
+
+	let _routeShortNames = null;
+	function routeShortNames() {
+		if (!_routeShortNames) {
+			_routeShortNames = arrivalsAndDeparturesResponse.data.references.routes
+				.filter((r) => stop.routeIds.includes(r.id))
+				.map((r) => r.nullSafeShortName)
+				.sort();
+		}
+		return _routeShortNames;
+	}
 </script>
 
 <div>
@@ -64,8 +78,8 @@
 				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
 					<h1 class="text-xl font-semibold text-white">{stop.name}</h1>
 					<h1 class="text-lg text-white">Stop #{stop.id}</h1>
-					{#if routeShortNames}
-						<h1 class="text-lg text-white">Routes: {routeShortNames.join(', ')}</h1>
+					{#if routeShortNames()}
+						<h1 class="text-lg text-white">Routes: {routeShortNames().join(', ')}</h1>
 					{/if}
 				</div>
 			</div>

src/lib/RestAPI/arrivalsAndDeparturesForStop.js

@@ -0,0 +1,17 @@
+import { error, json } from '@sveltejs/kit';
+
+import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
+import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+
+export default async function(stopID) {
+	const apiURL = `${baseURL}/api/where/arrivals-and-departures-for-stop/${stopID}.json?key=${apiKey}`;
+	const response = await fetch(apiURL);
+
+	if (!response.ok) {
+		error(500, 'Unable to fetch arrivals-and-departures-for-stop.');
+		return;
+	}
+
+	const data = await response.json();
+	return json(data);
+}

src/lib/RestAPI/stop.js

@@ -0,0 +1,16 @@
+import { error, json } from '@sveltejs/kit';
+
+import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
+import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+
+export default async function(stopID) {
+	const apiURL = `${baseURL}/api/where/stop/${stopID}.json?key=${apiKey}`;
+	const response = await fetch(apiURL);
+
+	if (!response.ok) {
+		return error(500, 'Unable to fetch arrivals-and-departures-for-stop.');
+	}
+
+	const data = await response.json();
+	return json(data);
+}

src/routes/api/oba/arrivals-and-departures-for-stop/[id]/+server.js

@@ -1,20 +1,6 @@
-import { error, json } from '@sveltejs/kit';
-
-import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
-
-import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+import arrivalDepartureAPI from '$lib/RestAPI/arrivalsAndDeparturesForStop';
 
 /** @type {import('./$types').RequestHandler} */
 export async function GET({ params }) {
-	const stopID = params.id;
-	const apiURL = `${baseURL}/api/where/arrivals-and-departures-for-stop/${stopID}.json?key=${apiKey}`;
-	const response = await fetch(apiURL);
-
-	if (!response.ok) {
-		error(500, 'Unable to fetch arrivals-and-departures-for-stop.');
-		return;
-	}
-
-	const data = await response.json();
-	return json(data);
+	return arrivalDepartureAPI(params.id);
 }

src/routes/api/oba/stop/[stopID]/+server.js

@@ -0,0 +1,6 @@
+import stopAPI from '$lib/RestAPI/stop';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+	return stopAPI(params.stopID);
+}

src/routes/stops/[stopID]/+page.server.js

@@ -0,0 +1,16 @@
+import stopAPI from '$lib/RestAPI/stop.js';
+import arrivalDepartureAPI from '$lib/RestAPI/arrivalsAndDeparturesForStop.js';
+
+export async function load({ params }) {
+  const stopID = params.stopID;
+  const stopResponse = await stopAPI(stopID);
+  const stopBody = await stopResponse.json();
+  const arrivalsAndDeparturesResponse = await arrivalDepartureAPI(stopID)
+  const arrivalsAndDeparturesResponseJSON = await arrivalsAndDeparturesResponse.json();
+
+  return {
+    stopID: params.stopID,
+    stopData: stopBody.data,
+    arrivalsAndDeparturesResponse: arrivalsAndDeparturesResponseJSON
+  }
+}

src/routes/stops/[stopID]/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	import StopPane from '$components/oba/StopPane.svelte';
+	export let data;
+	const stop = data.stopData.entry;
+	const arrivalsAndDeparturesResponse = data.arrivalsAndDeparturesResponse;
+</script>
+
+<div class='pt-20 px-8 max-w-5xl mx-auto'>
+	<StopPane {stop} {arrivalsAndDeparturesResponse} />
+</div>

svelte.config.js

@@ -9,6 +9,7 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		alias: {
+			$components: './src/components',
 			$images: './src/assets/images'
 		}
 	},