Merge pull request #33 from OneBusAway/busroute-feat

Added the feature for hiding the bus route on back to button

src/components/map/GoogleMap.svelte

@@ -15,9 +15,11 @@
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
 
-	export let selectedTrip;
+	export let selectedTrip = null;
 	export let selectedRoute = null;
 	export let showRoute = false;
+	export let showRouteMap = false;
+	export let showAllStops = true;
 
 	const dispatch = createEventDispatcher();
 
@@ -83,6 +85,11 @@
 		markers = [];
 	}
 
+	$: if (showAllStops) {
+		clearAllMarkers();
+		allStops.forEach((s) => addMarker(s));
+	}
+
 	$: if (selectedRoute && showRoute) {
 		clearAllMarkers();
 		const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
@@ -194,7 +201,7 @@
 
 <div id="map"></div>
 
-{#if selectedTrip}
+{#if selectedTrip && showRouteMap}
 	<RouteMap {map} tripId={selectedTrip.tripId} />
 {/if}
 

src/components/oba/StopPane.svelte

@@ -6,6 +6,8 @@
 
 	export let stop;
 	export let arrivalsAndDeparturesResponse = null;
+	export let showAllStops = true;
+
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
@@ -29,6 +31,11 @@
 		loading = false;
 	}
 
+	$: if (showAllStops) {
+		showTripDetails = false;
+		selectedTripDetails = null;
+	}
+
 	$: (async (s, arrDep) => {
 		// if the arrivalsAndDeparturesResponse is passed in, use that
 		// instead of loading fresh data.
@@ -66,9 +73,14 @@
 		};
 		showTripDetails = true;
 		dispatch('tripSelected', selectedTripDetails);
+		dispatch('updateRouteMap', { show: true });
 	}
+
 	function handleCloseTripDetailModal() {
 		showTripDetails = false;
+		dispatch('tripSelected', null);
+		dispatch('updateRouteMap', { show: false });
+		dispatch('showAllStops');
 	}
 </script>
 

src/routes/+page.svelte

@@ -7,6 +7,8 @@
 	let selectedTrip = null;
 	let showRoute = false;
 	let selectedRoute = null;
+	let showRouteMap = false;
+	let showAllStops = false;
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
@@ -20,19 +22,47 @@
 	}
 
 	function tripSelected(event) {
-		selectedTrip = event.detail;
-		showRoute = true;
-		selectedRoute = {
-			id: event.detail.routeId,
-			shortName: event.detail.routeShortName
-		};
+		if (event.detail) {
+			selectedTrip = event.detail;
+			showRoute = true;
+			selectedRoute = {
+				id: event.detail.routeId,
+				shortName: event.detail.routeShortName
+			};
+		} else {
+			selectedTrip = null;
+			showRoute = false;
+			selectedRoute = null;
+		}
+	}
+
+	function handleUpdateRouteMap(event) {
+		showRouteMap = event.detail.show;
+		showAllStops = !event.detail.show;
+	}
+
+	function handleShowAllStops() {
+		showAllStops = true;
+		showRouteMap = false;
 	}
 </script>
 
 {#if stop}
 	<ModalPane on:close={closePane}>
-		<StopPane {stop} on:tripSelected={tripSelected} />
+		<StopPane
+			{showAllStops}
+			{stop}
+			on:tripSelected={tripSelected}
+			on:updateRouteMap={handleUpdateRouteMap}
+			on:showAllStops={handleShowAllStops}
+		/>
 	</ModalPane>
 {/if}
 
-<GoogleMap {selectedTrip} {selectedRoute} on:stopSelected={stopSelected} {showRoute} />
+<GoogleMap
+	{selectedTrip}
+	{selectedRoute}
+	on:stopSelected={stopSelected}
+	{showRoute}
+	{showRouteMap}
+/>