Add details for station
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Juanjo Gutiérrez
parent
594636b5cc
commit
fd42ffd987
3 changed files with 648 additions and 173 deletions
541
static/script.js
541
static/script.js
|
|
@ -3,131 +3,153 @@
|
|||
|
||||
const API_BASE_URL = '/api/v1/sta';
|
||||
const REFRESH_INTERVAL = 2000;
|
||||
const DETAILS_REFRESH_INTERVAL =
|
||||
1000; // Refresh selected station details more frequently
|
||||
|
||||
let isRefreshing = false;
|
||||
let selectedStation = null;
|
||||
let detailsRefreshInterval = null;
|
||||
|
||||
// DOM Elements
|
||||
const stationTableBody = document.getElementById('station-tbody');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
const lastUpdate = document.getElementById('last-update');
|
||||
const detailsPanel = document.getElementById('station-details-panel');
|
||||
const detailsContent = document.getElementById('station-details-content');
|
||||
|
||||
// Initialize the application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load initial data
|
||||
refreshStations();
|
||||
|
||||
setInterval(refreshStations, REFRESH_INTERVAL);
|
||||
// Load initial data
|
||||
refreshStations();
|
||||
|
||||
setInterval(refreshStations, REFRESH_INTERVAL);
|
||||
});
|
||||
|
||||
// Refresh station data
|
||||
async function refreshStations() {
|
||||
if (isRefreshing) return; // Prevent concurrent refreshes
|
||||
|
||||
isRefreshing = true;
|
||||
|
||||
try {
|
||||
// Fetch station list
|
||||
const stations = await fetchStations();
|
||||
|
||||
if (stations.length === 0) {
|
||||
showNoStations();
|
||||
} else {
|
||||
// Fetch details for each station and populate table
|
||||
await populateStationTable(stations);
|
||||
}
|
||||
|
||||
// Update last refresh time
|
||||
lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;
|
||||
|
||||
// Hide any previous error messages
|
||||
hideError();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error refreshing stations:', error);
|
||||
showError('Failed to load station data. Please check if the API is running.');
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
if (isRefreshing)
|
||||
return; // Prevent concurrent refreshes
|
||||
|
||||
isRefreshing = true;
|
||||
|
||||
try {
|
||||
// Fetch station list
|
||||
const stations = await fetchStations();
|
||||
|
||||
if (stations.length === 0) {
|
||||
showNoStations();
|
||||
} else {
|
||||
// Fetch details for each station and populate table
|
||||
await populateStationTable(stations);
|
||||
}
|
||||
|
||||
// Update last refresh time
|
||||
lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;
|
||||
|
||||
// Hide any previous error messages
|
||||
hideError();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error refreshing stations:', error);
|
||||
showError(
|
||||
'Failed to load station data. Please check if the API is running.');
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch list of connected stations
|
||||
async function fetchStations() {
|
||||
const response = await fetch(`${API_BASE_URL}/list`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
const response = await fetch(`${API_BASE_URL}/list`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Populate table with station data
|
||||
async function populateStationTable(stations) {
|
||||
// Process each station concurrently
|
||||
const stationPromises = stations.map(async (mac) => {
|
||||
try {
|
||||
const details = await fetchStationDetails(mac);
|
||||
return { mac, details, error: null };
|
||||
} catch (error) {
|
||||
return { mac, details: null, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
const stationResults = await Promise.all(stationPromises);
|
||||
|
||||
const rows = [];
|
||||
// Add rows to table
|
||||
stationResults.forEach(({ mac, details, error }) => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
if (error) {
|
||||
row.innerHTML = `
|
||||
// Process each station concurrently
|
||||
const stationPromises = stations.map(async (mac) => {
|
||||
try {
|
||||
const details = await fetchStationDetails(mac);
|
||||
return {mac, details, error : null};
|
||||
} catch (error) {
|
||||
return {mac, details : null, error : error.message};
|
||||
}
|
||||
});
|
||||
|
||||
const stationResults = await Promise.all(stationPromises);
|
||||
|
||||
const rows = [];
|
||||
// Add rows to table
|
||||
stationResults.forEach(({mac, details, error}) => {
|
||||
const row = document.createElement('tr');
|
||||
row.dataset.mac = mac; // Store MAC address for selection
|
||||
|
||||
if (error) {
|
||||
row.innerHTML = `
|
||||
<td>${mac}</td>
|
||||
<td colspan="6" class="error">Error: ${error}</td>
|
||||
`;
|
||||
} else {
|
||||
// Calculate total bytes
|
||||
const rxBytes = parseInt(details.rx_bytes) || 0;
|
||||
const txBytes = parseInt(details.tx_bytes) || 0;
|
||||
|
||||
// Determine signal strength category
|
||||
const signal = parseInt(details.signal) || 0;
|
||||
let signalClass = 'status-established';
|
||||
if (signal < -80) signalClass = 'status-new';
|
||||
else if (signal < -60) signalClass = 'status-medium';
|
||||
|
||||
row.innerHTML = `
|
||||
<td><span class="${getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
|
||||
} else {
|
||||
// Calculate total bytes
|
||||
const rxBytes = parseInt(details.rx_bytes) || 0;
|
||||
const txBytes = parseInt(details.tx_bytes) || 0;
|
||||
|
||||
// Determine signal strength category
|
||||
const signal = parseInt(details.signal) || 0;
|
||||
let signalClass = 'status-established';
|
||||
if (signal < -80)
|
||||
signalClass = 'status-new';
|
||||
else if (signal < -60)
|
||||
signalClass = 'status-medium';
|
||||
|
||||
row.innerHTML = `
|
||||
<td><span class="${
|
||||
getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
|
||||
<td><span class="${signalClass}">${signal} dBm</span></td>
|
||||
<td>${formatDataRate(details.rx_rate_info)}/${formatDataRate(details.tx_rate_info)}</td>
|
||||
<td>${formatDataRate(details.rx_rate_info)}/${
|
||||
formatDataRate(details.tx_rate_info)}</td>
|
||||
<td>${formatBytes(rxBytes)}/${formatBytes(txBytes)}</td>
|
||||
`;
|
||||
}
|
||||
rows.push(row);
|
||||
});
|
||||
stationTableBody.replaceChildren(...rows);
|
||||
}
|
||||
|
||||
// Add click handler for station selection
|
||||
row.addEventListener('click', () => selectStation(mac, details, error));
|
||||
|
||||
// Highlight selected station
|
||||
if (mac === selectedStation) {
|
||||
row.classList.add('selected');
|
||||
}
|
||||
|
||||
rows.push(row);
|
||||
});
|
||||
stationTableBody.replaceChildren(...rows);
|
||||
}
|
||||
|
||||
// Fetch details for a specific station
|
||||
async function fetchStationDetails(mac) {
|
||||
const response = await fetch(`${API_BASE_URL}/details/${mac}`);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw new Error('Station not found');
|
||||
} else if (response.status === 400) {
|
||||
throw new Error('Invalid MAC address');
|
||||
} else {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const response = await fetch(`${API_BASE_URL}/details/${mac}`);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw new Error('Station not found');
|
||||
} else if (response.status === 400) {
|
||||
throw new Error('Invalid MAC address');
|
||||
} else {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Show message when no stations are connected
|
||||
function showNoStations() {
|
||||
stationTableBody.innerHTML = `
|
||||
stationTableBody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="loading">No stations connected</td>
|
||||
</tr>
|
||||
|
|
@ -136,49 +158,332 @@ function showNoStations() {
|
|||
|
||||
// Show error message
|
||||
function showError(message) {
|
||||
errorMessage.querySelector('p').textContent = message;
|
||||
errorMessage.classList.remove('hidden');
|
||||
errorMessage.querySelector('p').textContent = message;
|
||||
errorMessage.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Hide error message
|
||||
function hideError() {
|
||||
errorMessage.classList.add('hidden');
|
||||
}
|
||||
function hideError() { errorMessage.classList.add('hidden'); }
|
||||
|
||||
// Format data rate (assuming it's in Mbps or similar)
|
||||
function formatDataRate(rateStr) {
|
||||
if (!rateStr) return 'N/A';
|
||||
|
||||
const rate = parseInt(rateStr);
|
||||
if (isNaN(rate)) return rateStr;
|
||||
|
||||
// Convert to Mbps if it seems to be in a different unit
|
||||
if (rate > 1000) {
|
||||
return `${(rate / 1000).toFixed(1)} Mbps`;
|
||||
}
|
||||
return `${rate} Mbps`;
|
||||
if (!rateStr)
|
||||
return 'N/A';
|
||||
|
||||
const rate = parseInt(rateStr);
|
||||
if (isNaN(rate))
|
||||
return rateStr;
|
||||
|
||||
// Convert to Mbps if it seems to be in a different unit
|
||||
if (rate > 1000) {
|
||||
return `${(rate / 1000).toFixed(1)} Mbps`;
|
||||
}
|
||||
return `${rate} Mbps`;
|
||||
}
|
||||
|
||||
// Format bytes to human readable format
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
if (!bytes) return 'N/A';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
if (bytes === 0)
|
||||
return '0 B';
|
||||
if (!bytes)
|
||||
return 'N/A';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = [ 'B', 'KB', 'MB', 'GB' ];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// Get CSS class for connection status
|
||||
function getConnectionStatusClass(connectedTimeStr) {
|
||||
if (!connectedTimeStr) return 'status-established';
|
||||
|
||||
const seconds = parseInt(connectedTimeStr);
|
||||
if (isNaN(seconds)) return 'status-established';
|
||||
|
||||
if (seconds < 60) return 'status-new';
|
||||
else if (seconds < 300) return 'status-medium';
|
||||
else return 'status-established';
|
||||
if (!connectedTimeStr)
|
||||
return 'status-established';
|
||||
|
||||
const seconds = parseInt(connectedTimeStr);
|
||||
if (isNaN(seconds))
|
||||
return 'status-established';
|
||||
|
||||
if (seconds < 60)
|
||||
return 'status-new';
|
||||
else if (seconds < 300)
|
||||
return 'status-medium';
|
||||
else
|
||||
return 'status-established';
|
||||
}
|
||||
|
||||
// Select a station and show its details
|
||||
function selectStation(mac, details, error) {
|
||||
// Update selected station
|
||||
selectedStation = mac;
|
||||
|
||||
// Highlight selected row
|
||||
const rows = stationTableBody.querySelectorAll('tr');
|
||||
rows.forEach(row => {
|
||||
if (row.dataset.mac === mac) {
|
||||
row.classList.add('selected');
|
||||
} else {
|
||||
row.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
|
||||
// Show details panel
|
||||
if (error) {
|
||||
showStationDetailsError(mac, error);
|
||||
} else {
|
||||
showStationDetails(mac, details);
|
||||
}
|
||||
|
||||
// Start continuous details refresh
|
||||
startDetailsRefresh(mac);
|
||||
}
|
||||
|
||||
// Friendly names mapping for known fields
|
||||
const FIELD_FRIENDLY_NAMES = {
|
||||
'80211RSNAStatsSTAAddress' : 'RSNA Stats STA Address',
|
||||
'80211RSNAStatsSelectedPairwiseCipher' : 'RSNA Selected Pairwise Cipher',
|
||||
'80211RSNAStatsTKIPLocalMICFailures' : 'RSNA TKIP Local MIC Failures',
|
||||
'80211RSNAStatsTKIPRemoteMICFailures' : 'RSNA TKIP Remote MIC Failures',
|
||||
'80211RSNAStatsVersion' : 'RSNA Stats Version',
|
||||
'AKMSuiteSelector' : 'AKM Suite Selector',
|
||||
'aid' : 'Association ID',
|
||||
'auth_alg' : 'Authentication Algorithm',
|
||||
'auth_failures' : 'Authentication Failures',
|
||||
'authenticated' : 'Authenticated',
|
||||
'authorized' : 'Authorized',
|
||||
'capability' : 'Capability',
|
||||
'channel_width' : 'Channel Width',
|
||||
'connected_time' : 'Connected Time',
|
||||
'dot11RSNAStatsSTAAddress' : 'Dot11 RSNA Stats STA Address',
|
||||
'dot11RSNAStatsSelectedPairwiseCipher' :
|
||||
'Dot11 RSNA Selected Pairwise Cipher',
|
||||
'dot11RSNAStatsTKIPLocalMICFailures' : 'Dot11 RSNA TKIP Local MIC Failures',
|
||||
'dot11RSNAStatsTKIPRemoteMICFailures' : 'Dot11 RSNA TKIP Remote MIC Failures',
|
||||
'dot11RSNAStatsVersion' : 'Dot11 RSNA Stats Version',
|
||||
'ext_capab' : 'Extended Capabilities',
|
||||
'flags' : 'Flags',
|
||||
'hostapdMFPR' : 'Hostapd MFPR',
|
||||
'hostapdWPAPTKGroupState' : 'Hostapd WPA PTK Group State',
|
||||
'hostapdWPAPTKState' : 'Hostapd WPA PTK State',
|
||||
'ht_caps_info' : 'HT Capabilities Info',
|
||||
'ht_operation' : 'HT Operation',
|
||||
'inactive_msec' : 'Inactive Time (ms)',
|
||||
'listen_interval' : 'Listen Interval',
|
||||
'max_amsdu_length' : 'Max AMSDU Length',
|
||||
'noise' : 'Noise Level',
|
||||
'num_ps_buf_frames' : 'Number of PS Buffer Frames',
|
||||
'ps_buf_frames_freed' : 'PS Buffer Frames Freed',
|
||||
'ps_buffering' : 'Power Save Buffering',
|
||||
'rx_bitrate' : 'RX Bitrate',
|
||||
'rx_bytes' : 'RX Bytes',
|
||||
'rx_packets' : 'RX Packets',
|
||||
'rx_rate_info' : 'RX Rate Info',
|
||||
'short_preamble' : 'Short Preamble',
|
||||
'signal' : 'Signal Strength',
|
||||
'snr' : 'Signal-to-Noise Ratio',
|
||||
'supp_channels' : 'Supported Channels',
|
||||
'supp_op_classes' : 'Supported Operating Classes',
|
||||
'supported_rates' : 'Supported Rates',
|
||||
'timeout_next' : 'Next Timeout Action',
|
||||
'tx_ampdu_len' : 'TX AMPDU Length',
|
||||
'tx_ampdu_pkts' : 'TX AMPDU Packets',
|
||||
'tx_bitrate' : 'TX Bitrate',
|
||||
'tx_bytes' : 'TX Bytes',
|
||||
'tx_failed' : 'TX Failed',
|
||||
'tx_packets' : 'TX Packets',
|
||||
'tx_rate_info' : 'TX Rate Info',
|
||||
'vht_caps_info' : 'VHT Capabilities Info',
|
||||
'vht_operation' : 'VHT Operation',
|
||||
'wmm_ie' : 'WMM IE',
|
||||
'wpa' : 'WPA Version'
|
||||
};
|
||||
|
||||
// Show station details in the details panel
|
||||
function showStationDetails(mac, details) {
|
||||
// Build details HTML with all fields
|
||||
let detailsHTML = `
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">MAC Address</div>
|
||||
<div class="detail-value mono">${mac}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Separate known important fields from others
|
||||
const importantFields = [
|
||||
'connected_time', 'signal', 'rx_packets', 'tx_packets', 'rx_bytes',
|
||||
'tx_bytes', 'rx_rate_info', 'tx_rate_info', 'flags', 'capability',
|
||||
'auth_alg'
|
||||
];
|
||||
|
||||
// Display important fields first
|
||||
importantFields.forEach(field => {
|
||||
if (details.hasOwnProperty(field)) {
|
||||
const friendlyName = FIELD_FRIENDLY_NAMES[field] || formatFieldName(field);
|
||||
const value = formatFieldValue(field, details[field]);
|
||||
const displayValue = value.toString();
|
||||
|
||||
// Check if field name or value is too long for tooltip
|
||||
const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
|
||||
|
||||
let labelHTML = friendlyName;
|
||||
if (friendlyName.length > 25) {
|
||||
labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
|
||||
}
|
||||
|
||||
let valueHTML = displayValue;
|
||||
if (displayValue.length > 30) {
|
||||
valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
|
||||
}
|
||||
|
||||
detailsHTML += `
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">${labelHTML}</div>
|
||||
<div class="detail-value">${valueHTML}</div>
|
||||
</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
// Display all other fields
|
||||
const otherFields =
|
||||
Object.keys(details).filter(key => !importantFields.includes(key));
|
||||
if (otherFields.length > 0) {
|
||||
// Group fields alphabetically for better organization
|
||||
otherFields.sort().forEach(key => {
|
||||
const friendlyName = FIELD_FRIENDLY_NAMES[key] || formatFieldName(key);
|
||||
const value = formatFieldValue(key, details[key]);
|
||||
const displayValue = value.toString();
|
||||
|
||||
// Check if field name or value is too long for tooltip
|
||||
const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
|
||||
|
||||
let labelHTML = friendlyName;
|
||||
if (friendlyName.length > 25) {
|
||||
labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
|
||||
}
|
||||
|
||||
let valueHTML = displayValue;
|
||||
if (displayValue.length > 30) {
|
||||
valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
|
||||
}
|
||||
|
||||
detailsHTML += `
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">${labelHTML}</div>
|
||||
<div class="detail-value">${valueHTML}</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
detailsContent.innerHTML = detailsHTML;
|
||||
}
|
||||
|
||||
// Format field names to be more readable
|
||||
function formatFieldName(fieldName) {
|
||||
// Convert camelCase to Title Case
|
||||
let formatted = fieldName.replace(/([A-Z])/g, ' $1');
|
||||
// Replace underscores with spaces
|
||||
formatted = formatted.replace(/_/g, ' ');
|
||||
// Capitalize first letter
|
||||
formatted = formatted.charAt(0).toUpperCase() + formatted.slice(1);
|
||||
return formatted;
|
||||
}
|
||||
|
||||
// Format field values based on their type
|
||||
function formatFieldValue(fieldName, value) {
|
||||
if (value === undefined || value === null) {
|
||||
return 'N/A';
|
||||
}
|
||||
|
||||
// Handle numeric fields
|
||||
if (fieldName.includes('bytes')) {
|
||||
const numValue = parseInt(value);
|
||||
return isNaN(numValue) ? value : formatBytes(numValue);
|
||||
}
|
||||
|
||||
if (fieldName.includes('rate') && fieldName.includes('info')) {
|
||||
return formatDataRate(value);
|
||||
}
|
||||
|
||||
if (fieldName.includes('time')) {
|
||||
const numValue = parseInt(value);
|
||||
return isNaN(numValue) ? value : formatConnectedTime(value);
|
||||
}
|
||||
|
||||
if (fieldName.includes('signal') || fieldName.includes('noise') ||
|
||||
fieldName.includes('snr')) {
|
||||
const numValue = parseInt(value);
|
||||
return isNaN(numValue) ? value : `${numValue} dBm`;
|
||||
}
|
||||
|
||||
// Handle flag-like fields
|
||||
if (typeof value === 'string' && (value === 'true' || value === 'false')) {
|
||||
return value.charAt(0).toUpperCase() + value.slice(1);
|
||||
}
|
||||
|
||||
// Handle hex values
|
||||
if (typeof value === 'string' && value.match(/^[0-9a-fA-F\-]+$/)) {
|
||||
return value.toUpperCase();
|
||||
}
|
||||
|
||||
return value.toString();
|
||||
}
|
||||
|
||||
// Show error in details panel
|
||||
function showStationDetailsError(mac, error) {
|
||||
detailsContent.innerHTML = `
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">MAC Address</div>
|
||||
<div class="detail-value mono">${mac}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">Error</div>
|
||||
<div class="detail-value error">${error}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Format connected time to human readable format
|
||||
function formatConnectedTime(secondsStr) {
|
||||
if (!secondsStr)
|
||||
return 'Unknown';
|
||||
|
||||
const seconds = parseInt(secondsStr);
|
||||
if (isNaN(seconds))
|
||||
return secondsStr;
|
||||
|
||||
if (seconds < 60) {
|
||||
return `${seconds} seconds`;
|
||||
} else if (seconds < 3600) {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
|
||||
} else {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
return `${hours} hour${hours !== 1 ? 's' : ''} ${minutes} minute${
|
||||
minutes !== 1 ? 's' : ''}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Start continuous details refresh for selected station
|
||||
function startDetailsRefresh(mac) {
|
||||
stopDetailsRefresh(); // Clear any existing interval
|
||||
|
||||
detailsRefreshInterval = setInterval(async () => {
|
||||
if (selectedStation) {
|
||||
try {
|
||||
const details = await fetchStationDetails(selectedStation);
|
||||
showStationDetails(selectedStation, details);
|
||||
} catch (error) {
|
||||
showStationDetailsError(selectedStation, error.message);
|
||||
}
|
||||
}
|
||||
}, DETAILS_REFRESH_INTERVAL);
|
||||
}
|
||||
|
||||
// Stop continuous details refresh
|
||||
function stopDetailsRefresh() {
|
||||
if (detailsRefreshInterval) {
|
||||
clearInterval(detailsRefreshInterval);
|
||||
detailsRefreshInterval = null;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue