Open stop information on click in route modal, add button to open stop modal (#201)

* Open stop information on click in route modal, add button to open stop modal
* i18n string
* Make stop popup show on Google Maps
* Pass stop time through

Author: bencodeorg

src/components/MapContainer.svelte

@@ -9,14 +9,14 @@
 	import { onMount } from 'svelte';
 	import { MapSource } from './../config/mapSource.js';
 
-	let apiKey = env.GOOGLE_MAPS_API_KEY;
+	let apiKey = env.PUBLIC_OBA_GOOGLE_MAPS_API_KEY;
 	let { handleStopMarkerSelect, mapProvider = $bindable(), ...restProps } = $props();
 
 	onMount(() => {
 		if (PUBLIC_OBA_MAP_PROVIDER === MapSource.Google) {
-			mapProvider = new GoogleMapProvider(apiKey);
+			mapProvider = new GoogleMapProvider(apiKey, handleStopMarkerSelect);
 		} else if (PUBLIC_OBA_MAP_PROVIDER === MapSource.OpenStreetMap) {
-			mapProvider = new OpenStreetMapProvider(apiKey);
+			mapProvider = new OpenStreetMapProvider(handleStopMarkerSelect);
 		} else {
 			console.error('Unknown map provider:');
 		}

src/components/map/PopupContent.svelte

@@ -1,10 +1,11 @@
 <script>
-	let { stopName, arrivalTime } = $props();
+	import { t } from 'svelte-i18n';
+	let { stopName, arrivalTime, handleStopMarkerSelect } = $props();
 </script>
 
 <div class="transform rounded-lg bg-white p-4 shadow-lg">
 	<h3 class="text-xl font-bold text-gray-900">{stopName}</h3>
-	<p class="mt-2 flex items-center text-gray-700">
+	<p class="my-4 flex items-center text-gray-700">
 		<span class="mr-2 rounded-md bg-purple-600 px-2 py-1 text-white">Arrival time:</span>
 		<span
 			>{new Date(arrivalTime * 1000).toLocaleTimeString([], {
@@ -13,4 +14,13 @@
 			})}</span
 		>
 	</p>
+	<div class="mt-auto flex justify-center">
+		<button
+			type="button"
+			class="inline-block rounded-lg border border-brand bg-brand px-3 py-1 text-sm font-medium text-white shadow-md transition duration-200 ease-in-out hover:bg-brand-secondary"
+			onclick={handleStopMarkerSelect}
+		>
+			{$t('view_stop_information')}
+		</button>
+	</div>
 </div>

src/components/routes/RouteModal.svelte

@@ -7,6 +7,7 @@
 
 	function handleStopItemClick(stop) {
 		mapProvider.flyTo(stop.lat, stop.lon, 18);
+		mapProvider.openStopMarker(stop);
 	}
 
 	function title() {

src/lib/Provider/GoogleMapProvider.svelte.js

@@ -9,7 +9,7 @@ import TripPlanPinMarker from '$components/trip-planner/tripPlanPinMarker.svelte
 import { mount, unmount } from 'svelte';
 
 export default class GoogleMapProvider {
-	constructor(apiKey) {
+	constructor(apiKey, handleStopMarkerSelect) {
 		this.apiKey = apiKey;
 		this.map = null;
 		this.globalInfoWindow = null;
@@ -18,6 +18,7 @@ export default class GoogleMapProvider {
 		this.stopMarkers = [];
 		this.vehicleMarkers = [];
 		this.markersMap = new Map();
+		this.handleStopMarkerSelect = handleStopMarkerSelect;
 	}
 
 	async initMap(element, options) {
@@ -122,33 +123,37 @@ export default class GoogleMapProvider {
 
 		this.stopsMap.set(stop.id, stop);
 
-		marker.addListener('click', () => {
-			if (this.globalInfoWindow) {
-				this.globalInfoWindow.close();
-			}
+		marker.addListener('click', () => this.openStopMarker(stop, stopTime));
 
-			if (this.popupContentComponent) {
-				unmount(this.popupContentComponent);
-			}
+		this.markersMap.set(stop.id, marker);
+		this.stopMarkers.push(marker);
+	}
 
-			const popupContainer = document.createElement('div');
+	openStopMarker(stop, stopTime = null) {
+		if (this.globalInfoWindow) {
+			this.globalInfoWindow.close();
+		}
 
-			this.popupContentComponent = mount(PopupContent, {
-				target: popupContainer,
-				props: {
-					stopName: stop.name,
-					arrivalTime: stopTime ? stopTime.arrivalTime : null
-				}
-			});
+		if (this.popupContentComponent) {
+			unmount(this.popupContentComponent);
+		}
 
-			this.globalInfoWindow = new google.maps.InfoWindow({
-				content: popupContainer
-			});
+		const popupContainer = document.createElement('div');
+
+		this.popupContentComponent = mount(PopupContent, {
+			target: popupContainer,
+			props: {
+				stopName: stop.name,
+				arrivalTime: stopTime ? stopTime.arrivalTime : null,
+				handleStopMarkerSelect: () => this.handleStopMarkerSelect(stop)
+			}
+		});
 
-			this.globalInfoWindow.open(this.map, marker);
+		this.globalInfoWindow = new google.maps.InfoWindow({
+			content: popupContainer
 		});
 
-		this.stopMarkers.push(marker);
+		this.globalInfoWindow.open(this.map, this.markersMap.get(stop.id));
 	}
 
 	highlightMarker(stopId) {

src/lib/Provider/OpenStreetMapProvider.svelte.js

@@ -11,7 +11,8 @@ import TripPlanPinMarker from '$components/trip-planner/tripPlanPinMarker.svelte
 import { mount, unmount } from 'svelte';
 
 export default class OpenStreetMapProvider {
-	constructor() {
+	constructor(handleStopMarkerSelect) {
+		this.handleStopMarkerSelect = handleStopMarkerSelect;
 		this.map = null;
 		this.L = null;
 		this.globalInfoWindow = null;
@@ -153,32 +154,35 @@ export default class OpenStreetMapProvider {
 
 		this.stopsMap.set(stop.id, stop);
 
-		marker.on('click', () => {
-			if (this.globalInfoWindow) {
-				this.map.closePopup(this.globalInfoWindow);
-			}
+		marker.on('click', () => this.openStopMarker(stop, stopTime));
 
-			if (this.popupContentComponent) {
-				unmount(this.popupContentComponent);
-			}
+		this.stopMarkers.push(marker);
+	}
 
-			const popupContainer = document.createElement('div');
+	openStopMarker(stop, stopTime = null) {
+		if (this.globalInfoWindow) {
+			this.map.closePopup(this.globalInfoWindow);
+		}
 
-			this.popupContentComponent = mount(PopupContent, {
-				target: popupContainer,
-				props: {
-					stopName: stop.name,
-					arrivalTime: stopTime ? stopTime.arrivalTime : null
-				}
-			});
+		if (this.popupContentComponent) {
+			unmount(this.popupContentComponent);
+		}
+
+		const popupContainer = document.createElement('div');
 
-			this.globalInfoWindow = L.popup()
-				.setLatLng([stop.lat, stop.lon])
-				.setContent(popupContainer)
-				.openOn(this.map);
+		this.popupContentComponent = mount(PopupContent, {
+			target: popupContainer,
+			props: {
+				stopName: stop.name,
+				arrivalTime: stopTime ? stopTime.arrivalTime : null,
+				handleStopMarkerSelect: () => this.handleStopMarkerSelect(stop)
+			}
 		});
 
-		this.stopMarkers.push(marker);
+		this.globalInfoWindow = L.popup()
+			.setLatLng([stop.lat, stop.lon])
+			.setContent(popupContainer)
+			.openOn(this.map);
 	}
 
 	removeStopMarkers() {

src/locales/en.json

@@ -108,5 +108,6 @@
 		"page": "Page",
 		"show": "Show",
 		"hide": "Hide"
-	}
+	},
+	"view_stop_information": "View Stop Information"
 }