postgres DAL + New UI

public/app.js

@@ -1,6 +1,4 @@
-// ------------------------------
-// MAP SETUP
-// ------------------------------
+
 var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '© OpenStreetMap contributors'
 });
@@ -23,10 +21,6 @@ const MJR_LINES = ["701", "703", "704", "720", "750"];
 const LRT_LINES = ["701", "703", "704", "720"];
 const FRONTRUNNER = ["750"];
 const API_URL = "http://localhost:7653/api/v0/";
-
-// ------------------------------
-// ROUTE STYLES
-// ------------------------------
 const ROUTE_STYLES = {
   "701": { color: "#0074D9", train: "🔵", stop: "🔹" },
   "704": { color: "#2ECC40", train: "🟢", stop: "🟩" },
@@ -35,11 +29,8 @@ const ROUTE_STYLES = {
   "720": { color: "#000000", train: "⚪", stop: "🔷" }
 };
 
-// ------------------------------
-// ICON BUILDER
-// ------------------------------
+
 function buildIcon(emoji, bearing) {
-  const rotate = bearing ? `transform: rotate(${bearing}deg); transform-origin: center;` : '';
   const svg = `
   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
     <text x="50%" y="50%" text-anchor="middle"
@@ -59,9 +50,6 @@ function buildIcon(emoji, bearing) {
   });
 }
 
-// ------------------------------
-// MARKER HELPER
-// ------------------------------
 function addMarker(lat, lon, content, icon) {
   if (!isNaN(lat) && !isNaN(lon)) {
     const marker = L.marker([lat, lon], { icon });
@@ -71,9 +59,7 @@ function addMarker(lat, lon, content, icon) {
   console.warn("Invalid coordinates:", lat, lon);
 }
 
-// ------------------------------
-// ROUTE LINES
-// ------------------------------
+
 function drawPolyLine(polylinePoints, color) {
   L.polyline(polylinePoints, { color, weight: 4, opacity: 0.8 }).addTo(map);
 }
@@ -108,9 +94,7 @@ function drawLines() {
   MJR_LINES.forEach(drawLine);
 }
 
-// ------------------------------
-// STOPS
-// ------------------------------
+
 let stopMarkers = {};
 function getStopsByRoute(route) {
   if (stopMarkers[route]) return;
@@ -134,9 +118,6 @@ function getStopsByRoute(route) {
     .catch(err => console.error("Error fetching stops:", err));
 }
 
-// ------------------------------
-// VEHICLES
-// ------------------------------
 let trainMarkers = {};
 let filterType = "all";
 
@@ -153,14 +134,12 @@ function refreshVehicles() {
     .then(data => {
       let vehicles = data.data;
 
-      // Apply filter
       if (filterType === "lrt") {
         vehicles = vehicles.filter(v => LRT_LINES.includes(v.routeNum) || FRONTRUNNER.includes(v.routeNum));
       }
 
       vehicles = vehicles.filter(v => MJR_LINES.includes(v.routeNum));
 
-      // Remove vehicles no longer active
       Object.keys(trainMarkers).forEach(id => {
         if (!vehicles.find(v => v.vehicleId == id)) {
           map.removeLayer(trainMarkers[id]);
@@ -194,9 +173,7 @@ function refreshVehicles() {
     .catch(err => console.error("Error refreshing vehicles:", err));
 }
 
-// ------------------------------
-// USER LOCATION & TRAIN DETECTION
-// ------------------------------
+
 let userMarker, accuracyCircle;
 const ON_BOARD_RADIUS = 50; // meters
 
@@ -237,7 +214,6 @@ if (navigator.geolocation) {
       if (userMarker) userMarker.setLatLng([userLat, userLon]);
       if (accuracyCircle) accuracyCircle.setLatLng([userLat, userLon]).setRadius(position.coords.accuracy);
 
-      // Detect if user is on a train
       const vehicles = Object.values(trainMarkers).map(m => m.vehicleData);
       let closest = null, minDistance = Infinity;
 
@@ -260,9 +236,6 @@ if (navigator.geolocation) {
   console.warn("Geolocation not supported by this browser.");
 }
 
-// ------------------------------
-// INITIAL LOAD
-// ------------------------------
 drawLines();
 MJR_LINES.forEach(r => getStopsByRoute(r));
 refreshVehicles();