diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte index 7fe5ae0..2aeb3e6 100644 --- a/src/components/map/GoogleMap.svelte +++ b/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 }); + }
diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte index f3b829e..e81a823 100644 --- a/src/components/navigation/ModalPane.svelte +++ b/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'); } diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte index 6b5fff7..ca1b373 100644 --- a/src/components/oba/StopPane.svelte +++ b/src/components/oba/StopPane.svelte @@ -2,21 +2,17 @@ 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'; } @@ -24,9 +20,27 @@ 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; + }
@@ -64,8 +78,8 @@

{stop.name}

Stop #{stop.id}

- {#if routeShortNames} -

Routes: {routeShortNames.join(', ')}

+ {#if routeShortNames()} +

Routes: {routeShortNames().join(', ')}

{/if}
diff --git a/src/lib/RestAPI/arrivalsAndDeparturesForStop.js b/src/lib/RestAPI/arrivalsAndDeparturesForStop.js new file mode 100644 index 0000000..082e385 --- /dev/null +++ b/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); +} diff --git a/src/lib/RestAPI/stop.js b/src/lib/RestAPI/stop.js new file mode 100644 index 0000000..2fb518a --- /dev/null +++ b/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); +} diff --git a/src/routes/api/oba/arrivals-and-departures-for-stop/[id]/+server.js b/src/routes/api/oba/arrivals-and-departures-for-stop/[id]/+server.js index 11ed674..9ebfd51 100644 --- a/src/routes/api/oba/arrivals-and-departures-for-stop/[id]/+server.js +++ b/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); } diff --git a/src/routes/api/oba/stop/[stopID]/+server.js b/src/routes/api/oba/stop/[stopID]/+server.js new file mode 100644 index 0000000..aed93b1 --- /dev/null +++ b/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); +} diff --git a/src/routes/stops/[stopID]/+page.server.js b/src/routes/stops/[stopID]/+page.server.js new file mode 100644 index 0000000..c5f189b --- /dev/null +++ b/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 + } +} diff --git a/src/routes/stops/[stopID]/+page.svelte b/src/routes/stops/[stopID]/+page.svelte new file mode 100644 index 0000000..9c47e40 --- /dev/null +++ b/src/routes/stops/[stopID]/+page.svelte @@ -0,0 +1,10 @@ + + +
+ +
diff --git a/svelte.config.js b/svelte.config.js index b5d2a9a..8d3bc0e 100644 --- a/svelte.config.js +++ b/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' } },