@@ -317,5 +345,128 @@
}
});
});
+
+ // ── Clients modal ──────────────────────────────────────────────────────────
+ const clientsModal = document.getElementById('clients-modal');
+ const clientsTitle = document.getElementById('clients-modal-title');
+ const clientsSubtitle = document.getElementById('clients-modal-subtitle');
+ const clientsBody = document.getElementById('clients-body');
+
+ function closeClientsModal() { clientsModal.classList.add('hidden'); }
+ document.getElementById('clients-backdrop').addEventListener('click', closeClientsModal);
+ document.getElementById('clients-close').addEventListener('click', closeClientsModal);
+
+ // Event delegation on the table body — catch clicks on name cells
+ document.getElementById('ap-table-body')?.addEventListener('click', e => {
+ const cell = e.target.closest('[data-action="view-clients"]');
+ if (!cell) return;
+ openClientsModal(cell.dataset.mac, cell.dataset.name, cell.dataset.siteKey);
+ });
+
+ function esc(str) {
+ return String(str ?? '').replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
+ }
+
+ function signalInfo(dbm) {
+ if (dbm == null) return { label: '—', color: 'text-gray-400', display: '—' };
+ if (dbm >= -50) return { label: 'Excellent', color: 'text-green-600', display: dbm + ' dBm' };
+ if (dbm >= -65) return { label: 'Good', color: 'text-blue-500', display: dbm + ' dBm' };
+ if (dbm >= -75) return { label: 'Fair', color: 'text-yellow-500',display: dbm + ' dBm' };
+ return { label: 'Poor', color: 'text-red-500', display: dbm + ' dBm' };
+ }
+
+ function fmtRate(kbps) {
+ if (!kbps) return '—';
+ return kbps >= 1000 ? Math.round(kbps / 1000) + ' Mbps' : kbps + ' Kbps';
+ }
+
+ function fmtUptime(s) {
+ if (!s) return '—';
+ const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+ return h > 0 ? `${h}h ${m}m` : m > 0 ? `${m}m ${sec}s` : `${sec}s`;
+ }
+
+ const bandMap = { 0: '2.4 GHz', 1: '5 GHz', 2: '6 GHz' };
+
+ async function openClientsModal(mac, name, siteKey) {
+ clientsTitle.textContent = name;
+ clientsSubtitle.textContent = 'Loading…';
+ clientsBody.innerHTML = '
';
+ clientsModal.classList.remove('hidden');
+
+ try {
+ const res = await fetch(`/api/ap-clients?mac=${encodeURIComponent(mac)}&site_key=${encodeURIComponent(siteKey)}`);
+ if (!res.ok) { const e = await res.json(); throw new Error(e.detail || 'Request failed'); }
+ const { clients } = await res.json();
+ renderClients(clients);
+ } catch (err) {
+ clientsSubtitle.textContent = '';
+ clientsBody.innerHTML = `
+
Failed to load clients
+
${esc(err.message)}
`;
+ }
+ }
+
+ function renderClients(clients) {
+ if (!clients || clients.length === 0) {
+ clientsSubtitle.textContent = 'No clients connected';
+ clientsBody.innerHTML = `
+
+
No clients connected
+
No wireless devices are currently associated with this AP.
`;
+ return;
+ }
+
+ clientsSubtitle.textContent = `${clients.length} device${clients.length !== 1 ? 's' : ''} connected`;
+
+ const rows = clients.map(c => {
+ const displayName = esc(c.name || c.hostName || c.hostname || '');
+ const mac = esc(c.mac || '—');
+ const ip = esc(c.ip || '—');
+ const ssid = esc(c.ssid || '—');
+ const band = esc(bandMap[c.radioId ?? c.radioType] ?? '—');
+ const ch = esc(c.channel || '—');
+ const signal = c.signal ?? c.rssi ?? null;
+ const sq = signalInfo(signal);
+ const tx = fmtRate(c.txRate);
+ const rx = fmtRate(c.rxRate);
+ const uptime = fmtUptime(c.uptime ?? c.connectTime);
+ return `
+ |
+ ${displayName ? ` ${displayName} ` : ''}
+ ${mac}
+ |
+ ${ip} |
+ ${ssid} |
+ ${band} |
+ ${ch} |
+
+ ${sq.display}
+ ${sq.label}
+ |
+ ↑ ${tx}
↓ ${rx} |
+ ${uptime} |
+
`;
+ }).join('');
+
+ clientsBody.innerHTML = `
+
+
+ | Client |
+ IP |
+ SSID |
+ Band |
+ Ch |
+ Signal |
+ Link Rate |
+ Connected |
+
+
+ ${rows}
+
`;
+ }
{% endblock %}