Merge branch 'main' into feat/map-type-toggle-button

Author: Ahmedhossamdev

src/components/map/GoogleMap.svelte

@@ -9,12 +9,18 @@
 	} from '$env/static/public';
 
 	import { debounce } from '$lib/utils';
-	import { pushState } from '$app/navigation';
 	import { createMap, loadGoogleMapsLibrary, nightModeStyles } from '$lib/googleMaps';
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
+
 	import MapTypeButton from '$lib/MapTypeButton/MapTypeButton.svelte';
+	import { faBus } from '@fortawesome/free-solid-svg-icons';
+	import {
+		RouteType,
+		routePriorities,
+		prioritizedRouteTypeForDisplay
+	} from '../../config/routeConfig';
 
 	export let selectedTrip = null;
 	export let selectedRoute = null;
@@ -32,6 +38,7 @@
 
 	let markers = [];
 	let allStops = [];
+	let routeReference = [];
 
 	async function loadStopsForLocation(lat, lng) {
 		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
@@ -63,16 +70,17 @@
 	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()];
 
 		clearAllMarkers();
 
 		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));
 		}
 	}
 
@@ -113,17 +121,29 @@
 		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}`);
 					dispatch('stopSelected', { stop: s });
 				}
 			}

src/components/map/StopMarker.svelte

@@ -1,13 +1,14 @@
 <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;
+	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} />

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 };

src/routes/+layout.svelte

@@ -1,11 +1,15 @@
 <script>
+	import Header from '$components/navigation/Header.svelte';
 	import '../app.css';
 	import { config } from '@fortawesome/fontawesome-svg-core';
 	import '@fortawesome/fontawesome-svg-core/styles.css';
 	config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 </script>
 
 <div class="relative h-dvh w-full">
+	<div class="absolute w-full">
+		<Header />
+	</div>
 	<div>
 		<slot></slot>
 	</div>

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { pushState } from '$app/navigation';
 	import GoogleMap from '../components/map/GoogleMap.svelte';
 	import Header from '../components/navigation/Header.svelte';
 	import ModalPane from '../components/navigation/ModalPane.svelte';
@@ -15,6 +16,7 @@
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
+		pushState(`/stops/${stop.id}`);
 	}
 
 	function closePane() {