489 lines
No EOL
15 KiB
JavaScript
489 lines
No EOL
15 KiB
JavaScript
// Hostapd Web UI JavaScript
|
|
// Handles API communication and dynamic UI updates
|
|
|
|
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);
|
|
});
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
// 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();
|
|
}
|
|
|
|
// 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');
|
|
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>
|
|
<td><span class="${signalClass}">${signal} dBm</span></td>
|
|
<td>${formatDataRate(details.rx_rate_info)}/${
|
|
formatDataRate(details.tx_rate_info)}</td>
|
|
<td>${formatBytes(rxBytes)}/${formatBytes(txBytes)}</td>
|
|
`;
|
|
}
|
|
|
|
// 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}`);
|
|
}
|
|
}
|
|
|
|
return await response.json();
|
|
}
|
|
|
|
// Show message when no stations are connected
|
|
function showNoStations() {
|
|
stationTableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="7" class="loading">No stations connected</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
errorMessage.querySelector('p').textContent = message;
|
|
errorMessage.classList.remove('hidden');
|
|
}
|
|
|
|
// Hide error message
|
|
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`;
|
|
}
|
|
|
|
// 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];
|
|
}
|
|
|
|
// 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';
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
} |