mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40:00 -07:00
feat(wifi): network detail panel replaces slide-up drawer
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
@@ -4018,87 +4018,110 @@ header h1 .tagline {
|
||||
.wifi-security-ring-name { color: var(--text-dim); flex: 1; }
|
||||
.wifi-security-ring-count { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
/* WiFi Detail Drawer */
|
||||
.wifi-detail-drawer {
|
||||
display: none;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wifi-detail-drawer.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wifi-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.wifi-detail-title {
|
||||
/* WiFi Detail Panel */
|
||||
.wifi-detail-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wifi-detail-head { display: flex; flex-direction: column; gap: 3px; }
|
||||
|
||||
.wifi-detail-essid {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.wifi-detail-bssid {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-family: monospace;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.wifi-detail-close {
|
||||
background: none;
|
||||
border: none;
|
||||
.wifi-detail-signal-bar {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.wifi-detail-signal-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wifi-detail-close:hover {
|
||||
color: var(--accent-red);
|
||||
.wifi-detail-signal-track {
|
||||
height: 6px;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wifi-detail-content {
|
||||
padding: 15px;
|
||||
.wifi-detail-signal-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, var(--accent-green), var(--accent-orange));
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.wifi-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wifi-detail-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.wifi-detail-stat .label {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.wifi-detail-stat .value {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.wifi-detail-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.wifi-detail-close-btn {
|
||||
padding: 7px 12px;
|
||||
font-family: inherit;
|
||||
font-size: 10px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.wifi-detail-close-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.wifi-detail-clients {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
@@ -4225,9 +4248,6 @@ header h1 .tagline {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.wifi-detail-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bluetooth Layout Container */
|
||||
|
||||
@@ -216,8 +216,8 @@ const WiFiMode = (function() {
|
||||
zoneNear: document.getElementById('wifiZoneNear'),
|
||||
zoneFar: document.getElementById('wifiZoneFar'),
|
||||
|
||||
// Detail drawer
|
||||
detailDrawer: document.getElementById('wifiDetailDrawer'),
|
||||
// Detail panel
|
||||
detailSignalFill: document.getElementById('wifiDetailSignalFill'),
|
||||
detailEssid: document.getElementById('wifiDetailEssid'),
|
||||
detailBssid: document.getElementById('wifiDetailBssid'),
|
||||
detailRssi: document.getElementById('wifiDetailRssi'),
|
||||
@@ -1252,12 +1252,17 @@ const WiFiMode = (function() {
|
||||
function selectNetwork(bssid) {
|
||||
selectedBssid = bssid;
|
||||
|
||||
// Update row selection
|
||||
// Highlight selected row
|
||||
elements.networkList?.querySelectorAll('.network-row').forEach(row => {
|
||||
row.classList.toggle('selected', row.dataset.bssid === bssid);
|
||||
});
|
||||
|
||||
// Update detail panel
|
||||
// Show detail in right panel
|
||||
if (elements.heatmapView) elements.heatmapView.style.display = 'none';
|
||||
if (elements.detailView) elements.detailView.style.display = 'flex';
|
||||
if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Network Detail';
|
||||
if (elements.detailBackBtn) elements.detailBackBtn.style.display = 'inline-block';
|
||||
|
||||
updateDetailPanel(bssid);
|
||||
|
||||
// Highlight on radar
|
||||
@@ -1272,7 +1277,6 @@ const WiFiMode = (function() {
|
||||
|
||||
function updateDetailPanel(bssid, options = {}) {
|
||||
const { refreshClients = true } = options;
|
||||
if (!elements.detailDrawer) return;
|
||||
|
||||
const network = networks.get(bssid);
|
||||
if (!network) {
|
||||
@@ -1280,7 +1284,7 @@ const WiFiMode = (function() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update drawer header
|
||||
// Update detail header
|
||||
if (elements.detailEssid) {
|
||||
elements.detailEssid.textContent = network.display_name || network.essid || '[Hidden SSID]';
|
||||
}
|
||||
@@ -1314,8 +1318,12 @@ const WiFiMode = (function() {
|
||||
elements.detailFirstSeen.textContent = formatTime(network.first_seen);
|
||||
}
|
||||
|
||||
// Show the drawer
|
||||
elements.detailDrawer.classList.add('open');
|
||||
// Update signal bar
|
||||
if (elements.detailSignalFill) {
|
||||
const rssi = network.rssi_current;
|
||||
const pct = rssi != null ? Math.max(0, Math.min(100, (rssi + 100) / 80 * 100)) : 0;
|
||||
elements.detailSignalFill.style.width = pct.toFixed(1) + '%';
|
||||
}
|
||||
|
||||
// Fetch and display clients for this network
|
||||
if (refreshClients) {
|
||||
@@ -1325,12 +1333,17 @@ const WiFiMode = (function() {
|
||||
|
||||
function closeDetail() {
|
||||
selectedBssid = null;
|
||||
if (elements.detailDrawer) {
|
||||
elements.detailDrawer.classList.remove('open');
|
||||
}
|
||||
|
||||
// Deselect all rows
|
||||
elements.networkList?.querySelectorAll('.network-row').forEach(row => {
|
||||
row.classList.remove('selected');
|
||||
});
|
||||
|
||||
// Restore heatmap in right panel
|
||||
if (elements.detailView) elements.detailView.style.display = 'none';
|
||||
if (elements.heatmapView) elements.heatmapView.style.display = 'flex';
|
||||
if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Channel Heatmap';
|
||||
if (elements.detailBackBtn) elements.detailBackBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
|
||||
@@ -970,62 +970,70 @@
|
||||
|
||||
<!-- On network click: detail panel (wired in Task 5) -->
|
||||
<div id="wifiDetailView" style="display:none; flex:1; overflow-y:auto;">
|
||||
<!-- populated in Task 5 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wifi-detail-inner">
|
||||
<div class="wifi-detail-head">
|
||||
<div class="wifi-detail-essid" id="wifiDetailEssid">—</div>
|
||||
<div class="wifi-detail-bssid" id="wifiDetailBssid">—</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Drawer (slides up on network selection) -->
|
||||
<div class="wifi-detail-drawer" id="wifiDetailDrawer">
|
||||
<div class="wifi-detail-header">
|
||||
<div class="wifi-detail-title">
|
||||
<span class="wifi-detail-essid" id="wifiDetailEssid">Network Name</span>
|
||||
<span class="wifi-detail-bssid" id="wifiDetailBssid">00:00:00:00:00:00</span>
|
||||
</div>
|
||||
<button class="wfl-locate-btn" onclick="(function(){ var p={bssid: document.getElementById('wifiDetailBssid')?.textContent, ssid: document.getElementById('wifiDetailEssid')?.textContent}; if(typeof WiFiLocate!=='undefined'){WiFiLocate.handoff(p);return;} if(typeof switchMode==='function'){switchMode('wifi_locate').then(function(){if(typeof WiFiLocate!=='undefined')WiFiLocate.handoff(p);});} })()" title="Locate this AP">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 7 8 11.7z"/></svg>
|
||||
Locate
|
||||
</button>
|
||||
<button class="wifi-detail-close" onclick="WiFiMode.closeDetail()">×</button>
|
||||
</div>
|
||||
<div class="wifi-detail-content" id="wifiDetailContent">
|
||||
<div class="wifi-detail-grid">
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Signal</span>
|
||||
<span class="value" id="wifiDetailRssi">--</span>
|
||||
<div class="wifi-detail-signal-bar">
|
||||
<div class="wifi-detail-signal-labels">
|
||||
<span>Signal</span>
|
||||
<span id="wifiDetailRssi">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-signal-track">
|
||||
<div class="wifi-detail-signal-fill" id="wifiDetailSignalFill" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wifi-detail-grid">
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Channel</span>
|
||||
<span class="value" id="wifiDetailChannel">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Band</span>
|
||||
<span class="value" id="wifiDetailBand">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Security</span>
|
||||
<span class="value" id="wifiDetailSecurity">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Cipher</span>
|
||||
<span class="value" id="wifiDetailCipher">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Clients</span>
|
||||
<span class="value" id="wifiDetailClients">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">First Seen</span>
|
||||
<span class="value" id="wifiDetailFirstSeen">—</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat" style="grid-column: 1 / -1;">
|
||||
<span class="label">Vendor</span>
|
||||
<span class="value" id="wifiDetailVendor" style="font-size:11px;">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wifi-detail-clients" id="wifiDetailClientList" style="display: none;">
|
||||
<h6>Connected Clients <span class="wifi-client-count-badge" id="wifiClientCountBadge"></span></h6>
|
||||
<div class="wifi-client-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="wifi-detail-actions">
|
||||
<button class="wfl-locate-btn" title="Locate this AP"
|
||||
onclick="(function(){ var p={bssid: document.getElementById('wifiDetailBssid')?.textContent, ssid: document.getElementById('wifiDetailEssid')?.textContent}; if(typeof WiFiLocate!=='undefined'){WiFiLocate.handoff(p);return;} if(typeof switchMode==='function'){switchMode('wifi_locate').then(function(){if(typeof WiFiLocate!=='undefined')WiFiLocate.handoff(p);});} })()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 7 8 11.7z"/>
|
||||
</svg>
|
||||
Locate
|
||||
</button>
|
||||
<button class="wifi-detail-close-btn" onclick="WiFiMode.closeDetail()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Channel</span>
|
||||
<span class="value" id="wifiDetailChannel">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Band</span>
|
||||
<span class="value" id="wifiDetailBand">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Security</span>
|
||||
<span class="value" id="wifiDetailSecurity">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Cipher</span>
|
||||
<span class="value" id="wifiDetailCipher">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Vendor</span>
|
||||
<span class="value" id="wifiDetailVendor">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">Clients</span>
|
||||
<span class="value" id="wifiDetailClients">--</span>
|
||||
</div>
|
||||
<div class="wifi-detail-stat">
|
||||
<span class="label">First Seen</span>
|
||||
<span class="value" id="wifiDetailFirstSeen">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wifi-detail-clients" id="wifiDetailClientList" style="display: none;">
|
||||
<h6>Connected Clients <span class="wifi-client-count-badge" id="wifiClientCountBadge"></span></h6>
|
||||
<div class="wifi-client-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user