aligned back btn, used real data on right side of Trip Pane, added th…

…e current location of bus (30 sec interval update), enhanced the modal pane UI, and user icon

src/components/navigation/ModalPane.svelte

@@ -33,7 +33,7 @@
 <style lang="postcss">
 	.modal-pane {
 		@apply absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose;
-		@apply rounded-lg bg-[#F3F2F8] dark:bg-black;
+		@apply rounded-lg bg-[#F3F2F8] dark:bg-black border-b-[1px] border-[#C6C6C8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15;
 	}
 
 	.close-button {

src/components/oba/StopPane.svelte

@@ -3,6 +3,7 @@
 	import TripDetailsPane from './TripDetailsPane.svelte';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	import { faX, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+	import { onMount } from 'svelte';
 
 	export let stop;
 	export let arrivalsAndDeparturesResponse = null;
@@ -12,6 +13,7 @@
 
 	let showTripDetails = false;
 	let selectedTripDetails = null;
+	let interval;
 
 	async function loadData(stopID) {
 		loading = true;
@@ -36,6 +38,14 @@
 		}
 	})(stop, arrivalsAndDeparturesResponse);
 
+	onMount(() => {
+		interval = setInterval(() => {
+			loadData(stop.id);
+		}, 30000);
+
+		return () => clearInterval(interval);
+	});
+
 	let _routeShortNames = null;
 	function routeShortNames() {
 		if (!_routeShortNames) {
@@ -123,17 +133,17 @@
 
 	{#if showTripDetails}
 		<div class="trip-details-modal scrollbar-hidden">
-			<div class="py-1 text-right">
+			<div class="py-1 text-left">
 				<button type="button" on:click={() => (showTripDetails = false)} class="close-button">
 					<FontAwesomeIcon icon={faArrowLeft} class="font-black text-black dark:text-white" />
-					<span class="sr-only">Back</span>
+					<h1 class="font-semibold text-black dark:text-white">Back to {stop.name}</h1>
 				</button>
 			</div>
 			<div
-				class="flex items-center justify-between border-b-[1px] border-[#C6C6C8] bg-white px-4 py-2 dark:border-[#313135] dark:bg-gray-800"
+				class="flex items-center justify-between rounded-lg bg-[#ffffff] p-4 hover:bg-[#e3e3e3]  dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
 			>
 				<div>
-					<h2 class="text-lg font-semibold">
+					<h2 class="text-lg font-semibold text-black dark:text-white">
 						{selectedTripDetails.routeShortName} - {selectedTripDetails.tripHeadsign}
 					</h2>
 					<p class="text-sm font-semibold text-gray-600 dark:text-gray-400">
@@ -146,7 +156,7 @@
 						</span>
 					</p>
 				</div>
-				<p class={`mt-1 text-sm ${selectedTripDetails.arrivalStatus.color}`}>
+				<p class={`mt-1 text-sm font-semibold ${selectedTripDetails.arrivalStatus.color}`}>
 					{selectedTripDetails.timeToReach}
 				</p>
 			</div>
@@ -170,10 +180,10 @@
 	}
 	.trip-details-modal {
 		@apply absolute bottom-0 left-0 z-40 h-full w-full overflow-y-scroll rounded-lg bg-white px-2 shadow-lg md:max-w-prose;
-		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-white p-4 shadow-lg hover:cursor-pointer dark:bg-black;
+		@apply rounded-lg border-b-[1px] border-[#C6C6C8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 bg-white p-4 shadow-lg dark:bg-black;
 	}
 	.close-button {
-		@apply rounded px-4 py-2;
+		@apply flex items-center gap-2 rounded px-4 py-2;
 		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;
 	}
 </style>

src/components/oba/TripDetailsPane.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount, onDestroy } from 'svelte';
-	import { faBus } from '@fortawesome/free-solid-svg-icons';
+	import { faBus, faLocationDot } from '@fortawesome/free-solid-svg-icons';
 	import { faSquare } from '@fortawesome/free-regular-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 
@@ -13,12 +13,30 @@
 	let error = null;
 	let interval;
 	let currentStopIndex = -1;
+	let busPosition = 0;
 
 	function formatTime(seconds) {
-		const date = new Date(seconds);
+		if (!seconds) return '';
+		const date = new Date(seconds * 1000);
 		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 	}
 
+	function calculateBusPosition() {
+		if (tripDetails && tripDetails.status && tripDetails.status.position) {
+			const { lat, lon } = tripDetails.status.position;
+
+			busPosition = tripDetails.schedule.stopTimes.findIndex((stop, index, array) => {
+				const nextStop = array[index + 1];
+				if (!nextStop) return true;
+				const stopLat = stopInfo[stop.stopId].lat;
+				const stopLon = stopInfo[stop.stopId].lon;
+				const nextStopLat = stopInfo[nextStop.stopId].lat;
+				const nextStopLon = stopInfo[nextStop.stopId].lon;
+				return (lat >= stopLat && lat < nextStopLat) || (lon >= stopLon && lon < nextStopLon);
+			});
+		}
+	}
+
 	async function loadTripDetails() {
 		try {
 			let url = `/api/oba/trip-details/${tripId}?includeTrip=true&includeSchedule=true&includeStatus=true`;
@@ -41,17 +59,19 @@
 					}, {});
 				}
 
-				// Update current stop index
 				if (tripDetails.status && tripDetails.status.closestStop) {
 					currentStopIndex = tripDetails.schedule.stopTimes.findIndex(
 						(stop) => stop.stopId === tripDetails.status.closestStop.stopId
 					);
 				}
 
+				calculateBusPosition();
+
 				console.log('Trip details:', tripDetails);
 				console.log('Route info:', routeInfo);
 				console.log('Stop info:', stopInfo);
 				console.log('Current stop index:', currentStopIndex);
+				console.log('Bus position:', busPosition);
 			} else {
 				error = 'Unable to fetch trip details';
 			}
@@ -82,14 +102,20 @@
 		</h2>
 		{#if tripDetails.schedule && tripDetails.schedule.stopTimes && tripDetails.schedule.stopTimes.length > 0}
 			<div class="relative">
-				<div class="absolute bottom-0 left-5 top-0 w-0.5 bg-[#129900]"></div>
+				<div class="absolute bottom-0 left-5 top-0 w-0.5 bg-green-500"></div>
 				{#each tripDetails.schedule.stopTimes as stop, index}
 					<div class="relative mb-4 flex items-center">
 						<div class="relative z-10 flex h-12 w-12 items-center justify-center">
-							<FontAwesomeIcon icon={faSquare} class="text-2xl text-[#129900]" />
-							{#if index === currentStopIndex}
-								<FontAwesomeIcon icon={faBus} class="absolute text-lg text-[#129900]" />
-							{/if}
+							<FontAwesomeIcon
+								icon={faSquare}
+								class="bg-white text-3xl text-green-500 dark:bg-black"
+							/>
+							{#if index === busPosition}
+                                <FontAwesomeIcon icon={faBus} class="bg-white dark:bg-black absolute text-sm text-green-500" />
+                            {/if}
+                            {#if index === currentStopIndex}
+                                <FontAwesomeIcon icon={faLocationDot} class="bg-white dark:bg-black absolute text-sm text-blue-500" />
+                            {/if}
 						</div>
 						<div class="ml-4 flex w-full items-center justify-between">
 							<div class="text-md font-semibold text-[#000000] dark:text-white">
@@ -101,9 +127,9 @@
 				{/each}
 			</div>
 		{:else}
-			<p>No stop times available for this trip.</p>
+			<p class="text-black dark:text-white">No stop times available for this trip.</p>
 		{/if}
 	{:else}
-		<p>Loading trip details...</p>
+		<p class="text-black dark:text-white">Loading trip details...</p>
 	{/if}
 </div>