Add multi-city support

public/dashboard.html

@@ -37,6 +37,21 @@
             gap: 1rem;
         }
 
+        .city-selector {
+            background: rgba(255,255,255,0.2);
+            color: white;
+            border: 1px solid rgba(255,255,255,0.3);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .city-selector:hover {
+            background: rgba(255,255,255,0.3);
+        }
+
         .user-info {
             font-size: 0.9rem;
         }
@@ -304,9 +319,10 @@
     <div class="header">
         <div class="header-right">
             <div class="user-info">
-        <h1>💧 Water Stations</h1>
+                <h1>💧 Water Stations - <span id="cityName">Loading...</span></h1>
                 Welcome, <span id="username"></span>
             </div>
+            <a href="/city-select" class="city-selector">Change City</a>
             <button class="logout-btn" onclick="logout()">Logout</button>
         </div>
     </div>
@@ -389,8 +405,20 @@
         let addMode = false;
         let tempMarker = null;
         let user = null;
+        let currentCity = null;
 
         function initDashboard() {
+            // Get city name from URL
+            const pathParts = window.location.pathname.split('/');
+            currentCity = pathParts[2];
+            
+            if (!currentCity) {
+                window.location.href = '/city-select';
+                return;
+            }
+            
+            document.getElementById('cityName').textContent = currentCity.charAt(0).toUpperCase() + currentCity.slice(1);
+            
             checkAuth();
             initMap();
             loadStations();
@@ -449,9 +477,12 @@
 
         async function loadStations() {
             try {
-                const response = await fetch('/api/stations');
+                const response = await fetch(`/api/cities/${currentCity}/stations`);
                 const data = await response.json();
                 stations = data;
+                if (data.length > 0) {
+                    document.getElementById('cityName').textContent = data[0].city_name;
+                }
                 displayStations();
                 populateStationList();
                 fitMapToStations();
@@ -654,7 +685,7 @@
             };
             
             try {
-                const response = await fetch('/api/stations', {
+                const response = await fetch(`/api/cities/${currentCity}/stations`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',