From 7b332f873a6606eda4c9433a2984103617d64bf0 Mon Sep 17 00:00:00 2001
From: Will Bradley <wbradley@netburner.com>
Date: Wed, 16 Jul 2025 17:52:24 -0700
Subject: [PATCH] Keep popups open/refreshed, rename app

---
 README.md               |  2 +-
 public/city-select.html |  2 +-
 public/dashboard.html   | 64 ++++++++++++++++++++++++++++++++++++-----
 public/index.html       |  6 ++--
 public/login.html       |  6 ++--
 5 files changed, 65 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index 9543572..f75be06 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Water Station Tracker
+# CoolingStations.org Water Station Tracker
 
 A mobile-first web application for tracking water refill stations with social login, real-time status updates, and interactive mapping.
 
diff --git a/public/city-select.html b/public/city-select.html
index 022e1ce..f598762 100644
--- a/public/city-select.html
+++ b/public/city-select.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Select City - Water Station Tracker</title>
+    <title>Select City - CoolingStations.org</title>
     <style>
         * {
             margin: 0;
diff --git a/public/dashboard.html b/public/dashboard.html
index 232dc84..11dd36c 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Dashboard - Water Station Tracker</title>
+    <title>Dashboard - CoolingStations.org</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
         * {
@@ -561,6 +561,38 @@
         window.openEditModal = openEditModal;
         window.deleteStation = deleteStation;
 
+        // Consolidated station management functions
+        let activePopup = null;
+        let activeStationId = null;
+        let stationMarkers = new Map(); // Map station ID to marker
+
+        function clearMapMarkers() {
+            map.eachLayer(function (layer) {
+                if (layer instanceof L.CircleMarker) {
+                    map.removeLayer(layer);
+                }
+            });
+            stationMarkers.clear();
+        }
+
+        function refreshStationsAndKeepPopup(keepPopupOpen = false) {
+            const stationIdToReopen = keepPopupOpen ? activeStationId : null;
+            clearMapMarkers();
+            loadStations().then(() => {
+                if (stationIdToReopen && stationMarkers.has(stationIdToReopen)) {
+                    // Reopen the popup for the specific station
+                    setTimeout(() => {
+                        const marker = stationMarkers.get(stationIdToReopen);
+                        if (marker) {
+                            marker.openPopup();
+                            activePopup = marker.getPopup();
+                            activeStationId = stationIdToReopen;
+                        }
+                    }, 200);
+                }
+            });
+        }
+
         async function loadStations() {
             try {
                 const response = await fetch(`/api/cities/${currentCity}/stations`);
@@ -621,6 +653,22 @@
 
                 const popupContent = createPopupContent(station);
                 marker.bindPopup(popupContent);
+                
+                // Store marker in the map with station ID as key
+                stationMarkers.set(station.id, marker);
+                
+                // Track popup open/close events
+                marker.on('popupopen', function(e) {
+                    activePopup = e.popup;
+                    activeStationId = station.id;
+                });
+                
+                marker.on('popupclose', function(e) {
+                    if (activePopup === e.popup) {
+                        activePopup = null;
+                        activeStationId = null;
+                    }
+                });
             });
         }
 
@@ -633,9 +681,9 @@
                     <h3>${station.name}</h3>
                     <p style="color: #666; font-size: 0.9rem; margin-bottom: 10px;">${station.description || 'No description'}</p>
                     <p><strong>Status:</strong> ${station.latest_description || 'No status update'}</p>
-                    <p><strong>Last Refill:</strong> ${refillTime}</p>
+                    <p><strong>Status As Of:</strong> ${refillTime}</p>
                     <p><strong>Estimated Empty:</strong> ${estimatedEmpty}</p>
-                    <p><strong>Last Updated By:</strong> ${station.updated_by_name || 'Unknown'}</p>
+                    <p><strong>Status Update By:</strong> ${station.updated_by_name || 'Unknown'}</p>
                     <div style="margin-top: 10px;">
                         <button class="popup-btn" onclick="openEditModal(${station.id})">Edit Station</button>
                         <button class="popup-btn" onclick="openUpdateModal(${station.id})">Update Status</button>
@@ -650,6 +698,7 @@
             if (!station) return;
             
             selectedStation = station;
+            activeStationId = stationId; // Track which station we're updating
             document.getElementById('updateModal').style.display = 'block';
             
             // Set current date/time as default
@@ -695,6 +744,7 @@
             if (!station) return;
             
             selectedStation = station;
+            activeStationId = stationId; // Track which station we're editing
             document.getElementById('editModal').style.display = 'block';
             document.getElementById('editStationName').value = station.name;
             document.getElementById('editStationDescription').value = station.description || '';
@@ -727,7 +777,7 @@
                         showMessage('edit-message', 'Station deleted successfully!');
                         setTimeout(() => {
                             closeEditModal();
-                            loadStations();
+                            refreshStationsAndKeepPopup(false);
                         }, 1500);
                     } else {
                         showMessage('edit-message', result.error || 'Failed to delete station', 'error');
@@ -822,7 +872,7 @@
                     showMessage('add-message', 'Station added successfully!');
                     setTimeout(() => {
                         closeAddModal();
-                        loadStations();
+                        refreshStationsAndKeepPopup(false);
                     }, 1500);
                 } else {
                     const result = await response.json();
@@ -861,7 +911,7 @@
                     showMessage('update-message', 'Station updated successfully!');
                     setTimeout(() => {
                         closeUpdateModal();
-                        loadStations();
+                        refreshStationsAndKeepPopup(true);
                     }, 1500);
                 } else {
                     const result = await response.json();
@@ -899,7 +949,7 @@
                     showMessage('edit-message', 'Station updated successfully!');
                     setTimeout(() => {
                         closeEditModal();
-                        loadStations();
+                        refreshStationsAndKeepPopup(true);
                     }, 1500);
                 } else {
                     const result = await response.json();
diff --git a/public/index.html b/public/index.html
index 0797ee7..df6f53f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Water Station Tracker</title>
+    <title>CoolingStations.org</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
         * {
@@ -132,7 +132,7 @@
 </head>
 <body>
     <div class="header">
-        <h1>💧 Water Stations</h1>
+        <h1>💧 CoolingStations.org</h1>
         <p id="cityName">Loading...</p>
     </div>
     
@@ -347,7 +347,7 @@
                     <p style="color: #666; font-size: 0.9rem; margin-bottom: 10px;">${station.description || 'No description'}</p>
                     <div class="station-info">
                         <p><strong>Status:</strong> ${station.latest_description || 'No status update'}</p>
-                        <p><strong>Last Refill:</strong> ${refillTime}</p>
+                        <p><strong>Status As Of:</strong> ${refillTime}</p>
                         <p><strong>Estimated Empty:</strong> ${estimatedEmpty}</p>
                     </div>
                 </div>
diff --git a/public/login.html b/public/login.html
index a92f0a5..126add3 100644
--- a/public/login.html
+++ b/public/login.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Login - Water Station Tracker</title>
+    <title>Login - CoolingStations.org</title>
     <style>
         * {
             margin: 0;
@@ -190,8 +190,8 @@
 <body>
     <div class="login-container">
         <div class="login-header">
-            <h1>💧 Water Station Tracker</h1>
-            <p>Login to manage water stations</p>
+            <h1>💧 CoolingStations.org</h1>
+            <p>Login to manage water station status</p>
         </div>
 
         <div id="login-form">
