${station.name}

@@ -57,22 +266,30 @@ document.addEventListener('DOMContentLoaded', () => {

${station.id}

+
+ +
`; stationsGrid.appendChild(card); }); - lucide.createIcons(); + + if (window.lucide) { + lucide.createIcons(); + } }; - // --- NEW: Function to update statuses without redrawing everything --- const updateStationStatuses = (stations) => { stations.forEach(station => { - const card = document.getElementById(`station-${station.id}`); + const card = stationsGrid.querySelector(`[data-station-id="${station.id}"]`); if (card) { const status = getStatusAttributes(station.status); const statusBadge = card.querySelector('.status-badge'); const statusText = card.querySelector('.status-text'); const statusIcon = card.querySelector('i[data-lucide]'); - if (statusBadge && statusText && statusIcon) { statusBadge.className = `status-badge flex items-center text-xs font-semibold px-3 py-1 rounded-full ${status.bgColor} ${status.color}`; statusText.textContent = station.status; @@ -80,35 +297,74 @@ document.addEventListener('DOMContentLoaded', () => { } } }); - lucide.createIcons(); // Re-render icons if any changed + if (window.lucide) { + lucide.createIcons(); + } }; - // --- DATA FETCHING & STATUS POLLING --- - const loadAndPollStations = async () => { - try { - const response = await fetch('http://192.168.1.12:5000/api/stations'); - if (!response.ok) throw new Error('Failed to fetch stations'); - const stations = await response.json(); - - // Check if this is the first time loading data - if (allStations.length === 0) { - allStations = stations; - renderStations(allStations); // Initial full render - } else { - allStations = stations; - updateStationStatuses(allStations); // Subsequent, efficient updates + // --- MAIN EVENT LISTENER --- + // This single listener handles all clicks on the grid for efficiency. + stationsGrid.addEventListener('click', async (event) => { + const mainContent = event.target.closest('.main-content'); + const removeButton = event.target.closest('.remove-btn'); + + if (mainContent) { + const card = mainContent.closest('[data-station-id]'); + if (card) { + handleStationSelect(card.dataset.stationId); + } + } else if (removeButton) { + event.stopPropagation(); // Prevent main content click + const card = removeButton.closest('[data-station-id]'); + const stationId = card.dataset.stationId; + const stationName = card.dataset.stationName; + + if (!confirm(`Are you sure you want to permanently remove "${stationName}"?`)) { + return; } + try { + const response = await fetch(`${API_BASE}/stations/${stationId}`, { method: 'DELETE' }); + if (response.ok) { + alert(`Station "${stationName}" removed successfully.`); + allStations = []; // Force a full refresh on next poll + loadAndPollStations(); + } else { + const error = await response.json(); + alert(`Failed to remove station: ${error.message}`); + } + } catch (error) { + console.error('Error removing station:', error); + alert('An error occurred while trying to remove the station.'); + } + } + }); + + // --- DATA FETCHING & POLLING --- + const loadAndPollStations = async () => { + try { + const response = await fetch(`${API_BASE}/stations`); + if (!response.ok) throw new Error('Failed to fetch stations'); + + const newStationList = await response.json(); + + // If the number of stations has changed, we must do a full re-render. + if (newStationList.length !== allStations.length) { + allStations = newStationList; + renderStations(allStations); + } else { + // Otherwise, we can do a more efficient status-only update. + allStations = newStationList; + updateStationStatuses(allStations); + } } catch (error) { console.error(error); stationCountEl.textContent = 'Could not load stations. Is the backend running?'; - // Stop polling on error if (pollingInterval) clearInterval(pollingInterval); } }; // --- INITIALIZATION --- loadAndPollStations(); // Load immediately on page start - // Then, set an interval to refresh the statuses every 10 seconds - const pollingInterval = setInterval(loadAndPollStations, 10000); + pollingInterval = setInterval(loadAndPollStations, 10000); }); \ No newline at end of file diff --git a/frontend/logs.html b/frontend/logs.html index df80f5c..62ab592 100644 --- a/frontend/logs.html +++ b/frontend/logs.html @@ -5,12 +5,17 @@ Swap Station – Logs + + + + + + + diff --git a/frontend/station_selection.html b/frontend/station_selection.html index fc8da1c..5b94e1a 100644 --- a/frontend/station_selection.html +++ b/frontend/station_selection.html @@ -11,6 +11,8 @@ + +