Add multi-city support
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user