Keep popups open/refreshed, rename app
This commit is contained in:
Will Bradley
parent
e5ba61c71c
commit
7b332f873a
@ -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.
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user