370 lines
17 KiB
JavaScript
370 lines
17 KiB
JavaScript
// document.addEventListener('DOMContentLoaded', () => {
|
|
// // --- DOM ELEMENTS ---
|
|
// const stationsGrid = document.getElementById('stations-grid');
|
|
// const stationTemplate = document.getElementById('stationCardTemplate');
|
|
// const errorMessage = document.getElementById('error-message');
|
|
// const stationCountEl = document.getElementById('station-count');
|
|
// // Note: SocketIO is not needed on this page anymore
|
|
|
|
// let allStations = []; // To store the master list of stations
|
|
|
|
// // --- AUTHENTICATION & USER INFO (Your existing code is perfect) ---
|
|
// const user = JSON.parse(localStorage.getItem('user'));
|
|
// if (!user) {
|
|
// window.location.href = 'index.html'; // Redirect if not logged in
|
|
// return;
|
|
// }
|
|
|
|
// // User info and logout button logic... (omitted for brevity, no changes needed)
|
|
|
|
// // --- ADMIN FEATURES (Your existing code is perfect) ---
|
|
// // Admin button and add station card logic... (omitted for brevity, no changes needed)
|
|
|
|
|
|
// // --- HELPER FUNCTIONS ---
|
|
// const getStatusAttributes = (status) => {
|
|
// switch (status) {
|
|
// case 'Online': return { color: 'text-green-500', bgColor: 'bg-green-100/60 dark:bg-green-500/10', icon: 'power' };
|
|
// case 'Offline': return { color: 'text-red-500', bgColor: 'bg-red-100/60 dark:bg-red-500/10', icon: 'power-off' };
|
|
// default: return { color: 'text-gray-500', bgColor: 'bg-gray-100/60 dark:bg-gray-500/10', icon: 'help-circle' };
|
|
// }
|
|
// };
|
|
|
|
// const handleStationSelect = (stationId) => {
|
|
// window.location.href = `dashboard.html?station_id=${stationId}`;
|
|
// };
|
|
|
|
// // This function now only renders the initial grid
|
|
// // const renderStations = (stations) => {
|
|
// // stationsGrid.innerHTML = '';
|
|
// // stationCountEl.textContent = `${stations.length} stations found. Select one to monitor.`;
|
|
|
|
// // stations.forEach(station => {
|
|
// // const status = getStatusAttributes(station.status);
|
|
// // const card = document.createElement('div');
|
|
// // card.className = "group bg-gray-900/60 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-700 transition-transform duration-300 ease-out cursor-pointer flex flex-col justify-between hover:-translate-y-1.5 hover:border-emerald-400/60 hover:shadow-[0_0_0_1px_rgba(16,185,129,0.25),0_20px_40px_rgba(0,0,0,0.45)]";
|
|
// // card.id = `station-${station.id}`;
|
|
// // card.onclick = () => handleStationSelect(station.id);
|
|
|
|
// // card.innerHTML = `
|
|
// // <div class="p-5 flex-grow">
|
|
// // <div class="flex justify-between items-start">
|
|
// // <h3 class="text-lg font-bold text-white pr-2">${station.name}</h3>
|
|
// // <div class="status-badge flex items-center text-xs font-semibold px-3 py-1 rounded-full ${status.bgColor} ${status.color}">
|
|
// // <i data-lucide="${status.icon}" class="w-4 h-4 mr-1.5"></i>
|
|
// // <span class="status-text">${station.status}</span>
|
|
// // </div>
|
|
// // </div>
|
|
// // <p class="text-sm text-gray-400 mt-1">${station.id}</p>
|
|
// // </div>
|
|
// // <div class="border-t border-gray-700/50 px-5 py-2 flex justify-end">
|
|
// // <button
|
|
// // class="remove-btn text-xs font-semibold text-red-500 hover:text-red-400 transition"
|
|
// // data-id="${station.id}"
|
|
// // data-name="${station.name}"
|
|
// // >
|
|
// // Remove Station
|
|
// // </button>
|
|
// // </div>
|
|
// // `;
|
|
// // stationsGrid.appendChild(card);
|
|
// // });
|
|
// // lucide.createIcons();
|
|
// // };
|
|
|
|
// const renderStations = (stations) => {
|
|
// stationsGrid.innerHTML = '';
|
|
// stationCountEl.textContent = `${stations.length} stations found. Select one to monitor.`;
|
|
|
|
// stations.forEach(station => {
|
|
// const status = getStatusAttributes(station.status);
|
|
// const card = document.createElement('div');
|
|
// card.className = "group bg-gray-900/60 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-700 transition-transform duration-300 ease-out flex flex-col justify-between hover:-translate-y-1.5 hover:border-emerald-400/60 hover:shadow-[0_0_0_1px_rgba(16,185,129,0.25),0_20px_40px_rgba(0,0,0,0.45)]";
|
|
// card.id = `station-${station.id}`;
|
|
|
|
// // --- Make the main card content clickable ---
|
|
// const mainContent = document.createElement('div');
|
|
// mainContent.className = "p-5 flex-grow cursor-pointer";
|
|
// mainContent.onclick = () => handleStationSelect(station.id);
|
|
// mainContent.innerHTML = `
|
|
// <div class="flex justify-between items-start">
|
|
// <h3 class="text-lg font-bold text-white pr-2">${station.name}</h3>
|
|
// <div class="status-badge flex items-center text-xs font-semibold px-3 py-1 rounded-full ${status.bgColor} ${status.color}">
|
|
// <i data-lucide="${status.icon}" class="w-4 h-4 mr-1.5"></i>
|
|
// <span class="status-text">${station.status}</span>
|
|
// </div>
|
|
// </div>
|
|
// <p class="text-sm text-gray-400 mt-1">${station.id}</p>
|
|
// `;
|
|
|
|
// // --- Create the footer with the remove button ---
|
|
// const footer = document.createElement('div');
|
|
// footer.className = "border-t border-gray-700/50 px-5 py-2 flex justify-end";
|
|
// footer.innerHTML = `
|
|
// <button
|
|
// class="remove-btn text-xs font-semibold text-red-500 hover:text-red-400 transition"
|
|
// data-id="${station.id}"
|
|
// data-name="${station.name}"
|
|
// >
|
|
// Remove Station
|
|
// </button>
|
|
// `;
|
|
|
|
// card.appendChild(mainContent);
|
|
// card.appendChild(footer);
|
|
// stationsGrid.appendChild(card);
|
|
// });
|
|
// lucide.createIcons();
|
|
// };
|
|
|
|
// // --- NEW: Function to update statuses without redrawing everything ---
|
|
// const updateStationStatuses = (stations) => {
|
|
// stations.forEach(station => {
|
|
// const card = document.getElementById(`station-${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;
|
|
// statusIcon.setAttribute('data-lucide', status.icon);
|
|
// }
|
|
// }
|
|
// });
|
|
// lucide.createIcons(); // Re-render icons if any changed
|
|
// };
|
|
|
|
// // --- 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
|
|
// }
|
|
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// stationCountEl.textContent = 'Could not load stations. Is the backend running?';
|
|
// // Stop polling on error
|
|
// if (pollingInterval) clearInterval(pollingInterval);
|
|
// }
|
|
// };
|
|
|
|
// // In station_selection.js
|
|
// stationsGrid.addEventListener('click', async (event) => {
|
|
// const removeButton = event.target.closest('.remove-btn');
|
|
|
|
// if (!removeButton) return;
|
|
|
|
// // Stop the click from triggering the card's navigation
|
|
// event.stopPropagation();
|
|
|
|
// const stationId = removeButton.dataset.id;
|
|
// const stationName = removeButton.dataset.name;
|
|
|
|
// if (!confirm(`Are you sure you want to permanently remove "${stationName}"?`)) {
|
|
// return;
|
|
// }
|
|
|
|
// try {
|
|
// const response = await fetch(`http://192.168.1.12:5000/api/stations/${stationId}`, {
|
|
// method: 'DELETE',
|
|
// });
|
|
|
|
// if (response.ok) {
|
|
// alert(`Station "${stationName}" removed successfully.`);
|
|
// allStations = [];
|
|
// 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.');
|
|
// }
|
|
// });
|
|
|
|
// // --- INITIALIZATION ---
|
|
// loadAndPollStations(); // Load immediately on page start
|
|
// // Then, set an interval to refresh the statuses every 10 seconds
|
|
// const pollingInterval = setInterval(loadAndPollStations, 10000);
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// --- DOM ELEMENTS ---
|
|
const stationsGrid = document.getElementById('stations-grid');
|
|
const stationCountEl = document.getElementById('station-count'); // Make sure you have an element with this ID in your HTML
|
|
|
|
// --- CONFIG & STATE ---
|
|
const API_BASE = 'http://192.168.1.12:5000/api';
|
|
let allStations = []; // Master list of stations from the API
|
|
let pollingInterval = null;
|
|
|
|
// --- AUTHENTICATION ---
|
|
const user = JSON.parse(localStorage.getItem('user'));
|
|
if (!user) {
|
|
window.location.href = 'index.html'; // Redirect if not logged in
|
|
return;
|
|
}
|
|
|
|
// (Your other button listeners for logout, add user, etc., can go here)
|
|
// document.getElementById('logoutBtn').onclick = () => { ... };
|
|
|
|
// --- HELPER FUNCTIONS ---
|
|
const getStatusAttributes = (status) => {
|
|
switch (status) {
|
|
case 'Online': return { color: 'text-green-500', bgColor: 'bg-green-100/60 dark:bg-green-500/10', icon: 'power' };
|
|
case 'Offline': return { color: 'text-red-500', bgColor: 'bg-red-100/60 dark:bg-red-500/10', icon: 'power-off' };
|
|
default: return { color: 'text-gray-500', bgColor: 'bg-gray-100/60 dark:bg-gray-500/10', icon: 'help-circle' };
|
|
}
|
|
};
|
|
|
|
const handleStationSelect = (stationId) => {
|
|
window.location.href = `dashboard.html?station_id=${stationId}`;
|
|
};
|
|
|
|
// --- UI RENDERING ---
|
|
// This function's only job is to build the HTML. It does not add event listeners.
|
|
const renderStations = (stations) => {
|
|
stationsGrid.innerHTML = ''; // Clear the grid
|
|
stationCountEl.textContent = `${stations.length} stations found.`;
|
|
|
|
stations.forEach(station => {
|
|
const status = getStatusAttributes(station.status);
|
|
const card = document.createElement('div');
|
|
// Add station ID to the card's dataset for easy access
|
|
card.dataset.stationId = station.id;
|
|
card.dataset.stationName = station.name;
|
|
card.className = "group bg-gray-900/60 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-700 transition-transform duration-300 ease-out flex flex-col justify-between hover:-translate-y-1.5 hover:border-emerald-400/60 hover:shadow-[0_0_0_1px_rgba(16,185,129,0.25),0_20px_40px_rgba(0,0,0,0.45)]";
|
|
|
|
card.innerHTML = `
|
|
<div class="main-content p-5 flex-grow cursor-pointer">
|
|
<div class="flex justify-between items-start">
|
|
<h3 class="text-lg font-bold text-white pr-2">${station.name}</h3>
|
|
<div class="status-badge flex items-center text-xs font-semibold px-3 py-1 rounded-full ${status.bgColor} ${status.color}">
|
|
<i data-lucide="${status.icon}" class="w-4 h-4 mr-1.5"></i>
|
|
<span class="status-text">${station.status}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-400 mt-1">${station.id}</p>
|
|
</div>
|
|
<div class="border-t border-gray-700/50 px-5 py-2 flex justify-end">
|
|
<button
|
|
class="remove-btn text-xs font-semibold text-red-500 hover:text-red-400 transition"
|
|
>
|
|
Remove Station
|
|
</button>
|
|
</div>
|
|
`;
|
|
stationsGrid.appendChild(card);
|
|
});
|
|
|
|
if (window.lucide) {
|
|
lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
const updateStationStatuses = (stations) => {
|
|
stations.forEach(station => {
|
|
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;
|
|
statusIcon.setAttribute('data-lucide', status.icon);
|
|
}
|
|
}
|
|
});
|
|
if (window.lucide) {
|
|
lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
// --- 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?';
|
|
if (pollingInterval) clearInterval(pollingInterval);
|
|
}
|
|
};
|
|
|
|
// --- INITIALIZATION ---
|
|
loadAndPollStations(); // Load immediately on page start
|
|
pollingInterval = setInterval(loadAndPollStations, 10000);
|
|
}); |