integrated with unifi api

static/app.js

@@ -6,18 +6,77 @@ function updateDiagnostics() {
             diagnosticsPanel.innerHTML = '';
             
             Object.entries(data).forEach(([device, diagnostics]) => {
-                const diagElement = document.createElement('div');
-                diagElement.className = `diagnostic-item ${diagnostics.type}-diagnostic`;
-                diagElement.innerHTML = `
-                    <h3>${device}</h3>
-                    <pre>${JSON.stringify(diagnostics.results, null, 2)}</pre>
-                `;
+                const diagElement = createDiagnosticElement(device, diagnostics);
                 diagnosticsPanel.appendChild(diagElement);
             });
         });
 }
 
-// Update diagnostics every minute
+function createDiagnosticElement(device, diagnostics) {
+    const element = document.createElement('div');
+    element.className = `diagnostic-item ${diagnostics.connection_type}-diagnostic`;
+    
+    const content = `
+        <h3>${device}</h3>
+        <div class="diagnostic-details">
+            <div class="status-group">
+                <span class="label">Status:</span>
+                <span class="value ${diagnostics.state.toLowerCase()}">${diagnostics.state}</span>
+            </div>
+            <div class="firmware-group">
+                <span class="label">Firmware:</span>
+                <span class="value">${diagnostics.firmware.version}</span>
+            </div>
+            ${createInterfaceHTML(diagnostics.interfaces)}
+        </div>
+    `;
+    
+    element.innerHTML = content;
+    return element;
+}
+
+function createInterfaceHTML(interfaces) {
+    let html = '<div class="interfaces-group">';
+    
+    // Add port information
+    Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
+        html += `
+            <div class="interface-item">
+                <span class="label">${portName}:</span>
+                <span class="value">${port.speed.current}/${port.speed.max} Mbps</span>
+                <span class="state ${port.state.toLowerCase()}">${port.state}</span>
+            </div>
+        `;
+    });
+    
+    // Add radio information
+    Object.entries(interfaces.radios || {}).forEach(([radioName, radio]) => {
+        html += `
+            <div class="interface-item">
+                <span class="label">${radioName}:</span>
+                <span class="value">${radio.standard} - Ch${radio.channel} (${radio.width})</span>
+            </div>
+        `;
+    });
+    
+    html += '</div>';
+    return html;
+}
+
+function updateDeviceStatus() {
+    fetch('/api/status')
+        .then(response => response.json())
+        .then(data => {
+            Object.entries(data).forEach(([deviceName, status]) => {
+                updateDeviceIndicator(deviceName, status);
+            });
+        });
+}
+
+// Update intervals
+setInterval(updateDeviceStatus, 30000);
 setInterval(updateDiagnostics, 60000);
-// Initial update
+
+// Initial updates
 updateDeviceStatus();
+updateDiagnostics();