From dc749417d42c89763596368d23bc7c6462521669 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 3 Sep 2024 21:00:57 +0530
Subject: [PATCH 1/3] feat: show the correct icon type according to priority

---
 src/components/map/GoogleMap.svelte  | 69 ++++++++++++++++++++++++++--
 src/components/map/StopMarker.svelte |  3 +-
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 1c0cc0de..92a87aef 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -14,6 +14,13 @@
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
+	import {
+		faBus,
+		faFerry,
+		faTrainSubway,
+		faTrain,
+		faCableCar
+	} from '@fortawesome/free-solid-svg-icons';
 
 	export let selectedTrip = null;
 	export let selectedRoute = null;
@@ -30,6 +37,48 @@
 
 	let markers = [];
 	let allStops = [];
+	let routeReference = [];
+
+	const RouteType = {
+		LIGHT_RAIL: 0,
+		SUBWAY: 1,
+		RAIL: 2,
+		BUS: 3,
+		FERRY: 4,
+		CABLE_CAR: 5,
+		GONDOLA: 6,
+		FUNICULAR: 7,
+		UNKNOWN: 999
+	};
+
+	const routePriorities = [
+		RouteType.FERRY,
+		RouteType.LIGHT_RAIL,
+		RouteType.SUBWAY,
+		RouteType.RAIL,
+		RouteType.BUS,
+		RouteType.CABLE_CAR,
+		RouteType.GONDOLA,
+		RouteType.FUNICULAR,
+		RouteType.UNKNOWN
+	];
+
+	const prioritizedRouteTypeForDisplay = (routeType) => {
+		switch (routeType) {
+			case RouteType.FERRY:
+				return faFerry;
+			case RouteType.LIGHT_RAIL:
+			case RouteType.SUBWAY:
+			case RouteType.CABLE_CAR:
+				return faTrainSubway;
+			case RouteType.RAIL:
+				return faTrain;
+			case RouteType.GONDOLA:
+				return faCableCar;
+			default:
+				return faBus;
+		}
+	};
 
 	async function loadStopsForLocation(lat, lng) {
 		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
@@ -61,6 +110,7 @@
 	async function loadStopsAndAddMarkers(lat, lng) {
 		const json = await loadStopsForLocation(lat, lng);
 		const newStops = json.data.list;
+		routeReference = json.data.references?.routes || [];
 
 		allStops = [...new Map([...allStops, ...newStops].map((stop) => [stop.id, stop])).values()];
 
@@ -68,9 +118,9 @@
 
 		if (showRoute && selectedRoute) {
 			const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
-			stopsToShow.forEach((s) => addMarker(s));
+			stopsToShow.forEach((s) => addMarker(s, routeReference));
 		} else {
-			newStops.forEach((s) => addMarker(s));
+			newStops.forEach((s) => addMarker(s, routeReference));
 		}
 	}
 
@@ -111,14 +161,27 @@
 		allStops.forEach((s) => addMarker(s));
 	}
 
-	function addMarker(s) {
+	function addMarker(s, routeReference) {
 		const container = document.createElement('div');
 		document.body.appendChild(container);
 
+		let icon = faBus;
+
+		if (routeReference && routeReference.length > 0) {
+			const availableRoutes = s.routeIds
+				.map((id) => routeReference.find((r) => r.id === id))
+				.filter(Boolean);
+			const routeTypes = new Set(availableRoutes.map((r) => r.type));
+			const prioritizedType =
+				routePriorities.find((type) => routeTypes.has(type)) || RouteType.UNKNOWN;
+			icon = prioritizedRouteTypeForDisplay(prioritizedType);
+		}
+
 		new StopMarker({
 			target: container,
 			props: {
 				stop: s,
+				icon,
 				onClick: () => {
 					selectedStopID = s.id;
 					pushState(`/stops/${s.id}`);
diff --git a/src/components/map/StopMarker.svelte b/src/components/map/StopMarker.svelte
index c9deb77b..1319305f 100644
--- a/src/components/map/StopMarker.svelte
+++ b/src/components/map/StopMarker.svelte
@@ -3,11 +3,12 @@
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	export let stop;
 	export let onClick;
+	export let icon;
 </script>
 
 <button class="custom-marker dark:border-[#5a2c2c]" on:click={onClick}>
 	<span class="bus-icon dark:text-white">
-		<FontAwesomeIcon icon={faBus} class="text-black " />
+		<FontAwesomeIcon {icon} class=" text-black" />
 		{#if stop.direction}
 			<span class="direction-arrow {stop.direction.toLowerCase()} dark:text-white">
 				<FontAwesomeIcon icon={faCaretUp} />

From ace24c2fc68deafdd70cdb3a3575e90928fc7ed0 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 3 Sep 2024 21:19:32 +0530
Subject: [PATCH 2/3] Refactor: Move route configuration to a separate file,
 linting

---
 src/components/map/GoogleMap.svelte | 52 +++--------------------------
 src/config/routeConfig.js           | 50 +++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 47 deletions(-)
 create mode 100644 src/config/routeConfig.js

diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 92a87aef..3e42dca2 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -14,13 +14,12 @@
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
+	import { faBus } from '@fortawesome/free-solid-svg-icons';
 	import {
-		faBus,
-		faFerry,
-		faTrainSubway,
-		faTrain,
-		faCableCar
-	} from '@fortawesome/free-solid-svg-icons';
+		RouteType,
+		routePriorities,
+		prioritizedRouteTypeForDisplay
+	} from '../../config/routeConfig';
 
 	export let selectedTrip = null;
 	export let selectedRoute = null;
@@ -39,47 +38,6 @@
 	let allStops = [];
 	let routeReference = [];
 
-	const RouteType = {
-		LIGHT_RAIL: 0,
-		SUBWAY: 1,
-		RAIL: 2,
-		BUS: 3,
-		FERRY: 4,
-		CABLE_CAR: 5,
-		GONDOLA: 6,
-		FUNICULAR: 7,
-		UNKNOWN: 999
-	};
-
-	const routePriorities = [
-		RouteType.FERRY,
-		RouteType.LIGHT_RAIL,
-		RouteType.SUBWAY,
-		RouteType.RAIL,
-		RouteType.BUS,
-		RouteType.CABLE_CAR,
-		RouteType.GONDOLA,
-		RouteType.FUNICULAR,
-		RouteType.UNKNOWN
-	];
-
-	const prioritizedRouteTypeForDisplay = (routeType) => {
-		switch (routeType) {
-			case RouteType.FERRY:
-				return faFerry;
-			case RouteType.LIGHT_RAIL:
-			case RouteType.SUBWAY:
-			case RouteType.CABLE_CAR:
-				return faTrainSubway;
-			case RouteType.RAIL:
-				return faTrain;
-			case RouteType.GONDOLA:
-				return faCableCar;
-			default:
-				return faBus;
-		}
-	};
-
 	async function loadStopsForLocation(lat, lng) {
 		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
 		if (!response.ok) {
diff --git a/src/config/routeConfig.js b/src/config/routeConfig.js
new file mode 100644
index 00000000..1a90ef0b
--- /dev/null
+++ b/src/config/routeConfig.js
@@ -0,0 +1,50 @@
+import {
+	faBus,
+	faFerry,
+	faTrainSubway,
+	faTrain,
+	faCableCar
+} from '@fortawesome/free-solid-svg-icons';
+
+const RouteType = {
+	LIGHT_RAIL: 0,
+	SUBWAY: 1,
+	RAIL: 2,
+	BUS: 3,
+	FERRY: 4,
+	CABLE_CAR: 5,
+	GONDOLA: 6,
+	FUNICULAR: 7,
+	UNKNOWN: 999
+};
+
+const routePriorities = [
+	RouteType.FERRY,
+	RouteType.LIGHT_RAIL,
+	RouteType.SUBWAY,
+	RouteType.RAIL,
+	RouteType.BUS,
+	RouteType.CABLE_CAR,
+	RouteType.GONDOLA,
+	RouteType.FUNICULAR,
+	RouteType.UNKNOWN
+];
+
+const prioritizedRouteTypeForDisplay = (routeType) => {
+	switch (routeType) {
+		case RouteType.FERRY:
+			return faFerry;
+		case RouteType.LIGHT_RAIL:
+		case RouteType.SUBWAY:
+		case RouteType.CABLE_CAR:
+			return faTrainSubway;
+		case RouteType.RAIL:
+			return faTrain;
+		case RouteType.GONDOLA:
+			return faCableCar;
+		default:
+			return faBus;
+	}
+};
+
+export { RouteType, routePriorities, prioritizedRouteTypeForDisplay };

From 94c6b4473e81f802188a6ba5ac1e0b7cfda6cd45 Mon Sep 17 00:00:00 2001
From: tarunsinghofficial <tarunsinghwap7@gmail.com>
Date: Tue, 3 Sep 2024 21:21:51 +0530
Subject: [PATCH 3/3] chore: removed unused faBus

---
 src/components/map/StopMarker.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/map/StopMarker.svelte b/src/components/map/StopMarker.svelte
index 1319305f..933b0a67 100644
--- a/src/components/map/StopMarker.svelte
+++ b/src/components/map/StopMarker.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { faBus, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+	import { faCaretUp } from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	export let stop;
 	export let onClick;