Initial commit
This commit is contained in:
commit
94d8e201f5
10 changed files with 909 additions and 0 deletions
231
static/script.js
Normal file
231
static/script.js
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
// Hostapd Web UI JavaScript
|
||||
// Handles API communication and dynamic UI updates
|
||||
|
||||
const API_BASE_URL = '/api/v1/sta';
|
||||
const REFRESH_INTERVAL = 2000;
|
||||
|
||||
let isRefreshing = false;
|
||||
|
||||
// DOM Elements
|
||||
const stationTableBody = document.getElementById('station-tbody');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
const lastUpdate = document.getElementById('last-update');
|
||||
|
||||
// Initialize the application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load initial data
|
||||
refreshStations();
|
||||
|
||||
startAutoRefresh();
|
||||
});
|
||||
|
||||
// Start auto-refresh interval
|
||||
function startAutoRefresh() {
|
||||
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');
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
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];
|
||||
}
|
||||
|
||||
// Format duration from seconds to human readable format
|
||||
function formatDuration(secondsStr) {
|
||||
if (!secondsStr) return 'N/A';
|
||||
|
||||
const seconds = parseInt(secondsStr);
|
||||
if (isNaN(seconds) || seconds <= 0) return 'Just now';
|
||||
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
} else {
|
||||
return `${secs}s`;
|
||||
}
|
||||
}
|
||||
|
||||
// Get connection status based on connection time
|
||||
function getConnectionStatus(connectedTimeStr) {
|
||||
if (!connectedTimeStr) return 'Unknown';
|
||||
|
||||
const seconds = parseInt(connectedTimeStr);
|
||||
if (isNaN(seconds)) return 'Connected';
|
||||
|
||||
if (seconds < 60) return 'New';
|
||||
else if (seconds < 300) return 'Medium';
|
||||
else return 'Established';
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
// Add CSS classes for status indicators (in case they're not in the CSS)
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.status-connected { color: #27ae60; font-weight: bold; }
|
||||
.status-connecting { color: #f39c12; font-weight: bold; }
|
||||
.status-disconnected { color: #7f8c8d; font-weight: bold; }
|
||||
.status-error { color: #e74c3c; font-weight: bold; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
197
static/styles.css
Normal file
197
static/styles.css
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.auto-refresh label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.station-table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #34495e;
|
||||
color: white;
|
||||
text-align: left;
|
||||
padding: 12px 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Status colors */
|
||||
.status-new {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-medium {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-established {
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Loading and error states */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #7f8c8d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #fadbd8;
|
||||
color: #c0392b;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue