Add multi-city support

This commit is contained in:
Will Bradley
2025-07-16 12:24:27 -07:00
parent f4039224be
commit 1a53f60b90
4 changed files with 518 additions and 12 deletions

View File

@@ -127,10 +127,11 @@
<body>
<div class="header">
<h1>💧 Water Stations</h1>
<p>Salem</p>
<p id="cityName">Loading...</p>
</div>
<a href="/login" class="auth-button">Login</a>
<a href="/city-select" class="auth-button" style="top: 1rem; right: 8rem;">All Cities</a>
<div id="map"></div>
@@ -158,8 +159,22 @@
<script>
let map;
let stations = [];
let currentCity = null;
function initMap() {
// Get city name from URL
const pathParts = window.location.pathname.split('/');
const cityName = pathParts[2];
if (!cityName) {
// If no city in URL, redirect to city selection
window.location.href = '/city-select';
return;
}
currentCity = cityName;
document.getElementById('cityName').textContent = cityName.charAt(0).toUpperCase() + cityName.slice(1);
map = L.map('map').setView([37.7749, -122.4194], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -170,14 +185,20 @@
}
function loadStations() {
fetch('/api/stations')
fetch(`/api/cities/${currentCity}/stations`)
.then(response => response.json())
.then(data => {
stations = data;
if (data.length > 0) {
document.getElementById('cityName').textContent = data[0].city_name;
}
displayStations();
fitMapToStations();
})
.catch(error => console.error('Error loading stations:', error));
.catch(error => {
console.error('Error loading stations:', error);
document.getElementById('cityName').textContent = 'City Not Found';
});
}
function getStationColor(station) {