Add details for station

static/script.js

@@ -3,13 +3,19 @@
 
 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() {
@@ -21,7 +27,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
 // Refresh station data
 async function refreshStations() {
-    if (isRefreshing) return; // Prevent concurrent refreshes
+  if (isRefreshing)
+    return; // Prevent concurrent refreshes
 
   isRefreshing = true;
 
@@ -44,7 +51,8 @@ async function refreshStations() {
 
   } catch (error) {
     console.error('Error refreshing stations:', error);
-        showError('Failed to load station data. Please check if the API is running.');
+    showError(
+        'Failed to load station data. Please check if the API is running.');
   } finally {
     isRefreshing = false;
   }
@@ -67,9 +75,9 @@ async function populateStationTable(stations) {
   const stationPromises = stations.map(async (mac) => {
     try {
       const details = await fetchStationDetails(mac);
-            return { mac, details, error: null };
+      return {mac, details, error : null};
     } catch (error) {
-            return { mac, details: null, error: error.message };
+      return {mac, details : null, error : error.message};
     }
   });
 
@@ -77,8 +85,9 @@ async function populateStationTable(stations) {
 
   const rows = [];
   // Add rows to table
-    stationResults.forEach(({ mac, details, error }) => {
+  stationResults.forEach(({mac, details, error}) => {
     const row = document.createElement('tr');
+    row.dataset.mac = mac; // Store MAC address for selection
 
     if (error) {
       row.innerHTML = `
@@ -93,16 +102,29 @@ async function populateStationTable(stations) {
       // 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';
+      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="${
+          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>
             `;
     }
+
+    // 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);
@@ -141,16 +163,16 @@ function showError(message) {
 }
 
 // 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';
+  if (!rateStr)
+    return 'N/A';
 
   const rate = parseInt(rateStr);
-    if (isNaN(rate)) return rateStr;
+  if (isNaN(rate))
+    return rateStr;
 
   // Convert to Mbps if it seems to be in a different unit
   if (rate > 1000) {
@@ -161,11 +183,13 @@ function formatDataRate(rateStr) {
 
 // Format bytes to human readable format
 function formatBytes(bytes) {
-    if (bytes === 0) return '0 B';
-    if (!bytes) return 'N/A';
+  if (bytes === 0)
+    return '0 B';
+  if (!bytes)
+    return 'N/A';
 
   const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+  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];
@@ -173,12 +197,293 @@ function formatBytes(bytes) {
 
 // Get CSS class for connection status
 function getConnectionStatusClass(connectedTimeStr) {
-    if (!connectedTimeStr) return 'status-established';
+  if (!connectedTimeStr)
+    return 'status-established';
 
   const seconds = parseInt(connectedTimeStr);
-    if (isNaN(seconds)) return 'status-established';
+  if (isNaN(seconds))
+    return 'status-established';
 
-    if (seconds < 60) return 'status-new';
-    else if (seconds < 300) return 'status-medium';
-    else 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;
+  }
 }

static/styles.css

@@ -40,38 +40,17 @@ header h1 {
     color: #666;
 }
 
-/* Controls */
-.controls {
+/* Main layout */
+.main-layout {
     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);
+    gap: 20px;
+    min-height: 500px;
 }
 
-.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;
+/* Adjust layout for always-visible details panel */
+.content-area {
+    flex: 1;
+    min-width: 300px;
 }
 
 /* Table styles */
@@ -108,6 +87,24 @@ tr:hover {
     background-color: #f8f9fa;
 }
 
+tr.selected {
+    background-color: #e3f2fd;
+    cursor: pointer;
+}
+
+tr.selected:hover {
+    background-color: #bbdefb;
+}
+
+tr.selected td:first-child {
+    border-left: 4px solid #2196f3;
+}
+
+tr:not(.selected):hover {
+    background-color: #f8f9fa;
+    cursor: pointer;
+}
+
 /* Status colors */
 .status-new {
     background-color: #e74c3c;
@@ -139,6 +136,146 @@ tr:hover {
     text-align: center;
 }
 
+/* Details panel */
+.details-panel {
+    width: 400px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #34495e;
+    color: white;
+    padding: 15px 20px;
+    border-radius: 8px 8px 0 0;
+}
+
+.details-header h2 {
+    margin: 0;
+    font-size: 1.2em;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5em;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.close-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.details-content {
+    padding: 20px;
+    flex: 1;
+    overflow-y: auto;
+    max-height: 500px;
+}
+
+.detail-item {
+    display: flex;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ecf0f1;
+    align-items: flex-start;
+}
+
+.detail-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.detail-label {
+    font-weight: 600;
+    color: #2c3e50;
+    min-width: 150px;
+    padding-right: 15px;
+    text-align: left;
+    flex-shrink: 0;
+}
+
+.detail-value {
+    color: #34495e;
+    flex: 1;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+}
+
+/* Tooltip styling */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted #95a5a6;
+    cursor: help;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #34495e;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.9em;
+    font-weight: normal;
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #34495e transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Mono font for technical values */
+.detail-value.mono {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.detail-value.mono {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
 /* Loading and error states */
 .loading {
     text-align: center;
@@ -170,6 +307,34 @@ footer {
 }
 
 /* Responsive design */
+@media (max-width: 1024px) {
+    .main-layout {
+        flex-direction: column;
+    }
+    
+    .details-panel {
+        width: 100%;
+    }
+    
+    .container {
+        padding: 10px;
+    }
+    
+    table {
+        font-size: 0.9em;
+    }
+    
+    th, td {
+        padding: 8px 10px;
+    }
+    
+    .status-bar {
+        flex-direction: column;
+        gap: 5px;
+        text-align: center;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 10px;
@@ -183,12 +348,6 @@ footer {
         padding: 8px 10px;
     }
     
-    .controls {
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-    }
-    
     .status-bar {
         flex-direction: column;
         gap: 5px;

templates/index.html

@@ -15,7 +15,8 @@
             </div>
         </header>
 
-        <main>
+        <main class="main-layout">
+            <div class="content-area">
                 <div class="station-table-container">
                     <table id="station-table">
                         <thead>
@@ -37,6 +38,16 @@
                 <div id="error-message" class="error hidden">
                     <p>Error loading station data. Please check if the API is running.</p>
                 </div>
+            </div>
+
+            <div id="station-details-panel" class="details-panel">
+                <div class="details-header">
+                    <h2>Station Details</h2>
+                </div>
+                <div id="station-details-content" class="details-content">
+                    <div class="loading">Select a station to view details</div>
+                </div>
+            </div>
         </main>
 
         <footer>