feat: merge Survey into Scanning and harden live recon
- Delete the Survey stack (sampler, handlers, routes, view, recordings); Scanning gains AP compare (cap 6), whole-page selection filter, channel map (20 MHz lobes, the radio does not report width), and auto-follow that prefers the newest non-empty scan - Richer HTML scan reports: stat cards, band/encryption breakdowns, channel occupancy, color-coded signal cells, GPS line only on a fix - Harden live recon: bounded + retried scan-detail reads (503 on lock), serialize recon starts (409 + scan_remaining while running), GPS and archive discovery move to a 30s poll, GPS_GET skipped when gpsd is down - Read-only history for pineapd-rotated databases (error-*/diagnostic-*): archives list/detail/download endpoints, Previous Scans optgroup, delete disabled, traversal-guarded - Status flags: hopper-radio-offline and history-reset banners; empty scans greyed in the picker - Tests: recon suite grows to 99 cases; all 14 modules green Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
co-authored by
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent
251b1f6261
commit
d8a7074e1f
@@ -316,6 +316,9 @@ html.dark .muted { color: #bdbdbd; }
|
||||
.icon-btn svg { width: 22px; height: 22px; }
|
||||
.recon-scan-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
||||
.recon-scan-bar .sel { width: auto; }
|
||||
.recon-scan-status { font-size: 12px; }
|
||||
.recon-scan-status.warn { color: #b26a00; }
|
||||
html.dark .recon-scan-status.warn { color: #ffb74d; }
|
||||
.recon-table-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
|
||||
.recon-table-head h2 { margin: 0; }
|
||||
.recon-search { max-width: 180px; }
|
||||
@@ -372,50 +375,33 @@ html.dark .recon-dbm-bar { background: #333; }
|
||||
.recon-pill.on { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
|
||||
html.dark .recon-pill.on { background: #1b3a23; color: #81c784; }
|
||||
|
||||
/* ---- Survey view ---- */
|
||||
.survey-live-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
|
||||
.survey-live-status { font-size: 13px; color: var(--text); }
|
||||
.survey-dur { width: auto; }
|
||||
.survey-pill { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 12px; padding: 4px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
|
||||
.survey-pill:hover { color: var(--text); border-color: var(--primary); }
|
||||
.survey-pill.on { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
|
||||
html.dark .survey-pill.on { background: #1b3a23; color: #81c784; }
|
||||
.survey-wigle { font-size: 13px; color: var(--text); margin: 0; }
|
||||
.survey-rec-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
|
||||
.survey-rec-name { flex: 1 1 220px; max-width: 340px; }
|
||||
.survey-rec-status { font-size: 12px; color: var(--muted); }
|
||||
.survey-rec-status.on { color: #e53935; font-weight: 600; }
|
||||
.survey-filter-row { margin-top: 10px; }
|
||||
.survey-search { width: auto; }
|
||||
.survey-chan-box { margin-top: 4px; }
|
||||
.survey-chan-band { font-size: 12px; font-weight: 600; color: var(--primary); margin: 10px 0 4px; }
|
||||
.survey-chan-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
|
||||
.survey-chan-label { width: 46px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
.survey-chan-track { flex: 1; height: 14px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
|
||||
html.dark .survey-chan-track { background: #333; }
|
||||
.survey-chan-fill { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
|
||||
.survey-chan-count { width: 30px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.survey-cmp-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
|
||||
.survey-cmp-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
|
||||
.survey-cmp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.survey-cmp-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
|
||||
.survey-cmp-sig { color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
.survey-cmp-check { display: inline-flex; }
|
||||
.survey-cmp-check input { width: auto; }
|
||||
.survey-discover { margin-top: 10px; }
|
||||
.survey-discover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.survey-discover-title { font-size: 20px; font-weight: 500; }
|
||||
.survey-discover-readout { font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
||||
.survey-discover-sub { color: var(--muted); font-size: 13px; margin: 2px 0 8px; word-break: break-all; }
|
||||
/* ---- Recon compare + selection ---- */
|
||||
.recon-compare-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
|
||||
.recon-compare-empty { margin: 6px 0; }
|
||||
.recon-compare-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
|
||||
.recon-compare-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.recon-compare-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
|
||||
.recon-compare-sig { color: var(--muted); font-variant-numeric: tabular-nums; }
|
||||
.recon-cmp-check { display: inline-flex; }
|
||||
.recon-cmp-check input { width: auto; }
|
||||
.recon-sel-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
|
||||
.recon-sel-chips.hidden { display: none; }
|
||||
.recon-sel-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--primary); border-radius: 12px; padding: 2px 8px 2px 11px; font-size: 12px; color: var(--text); background: var(--surface-alt); }
|
||||
.recon-sel-chip-x { cursor: pointer; color: var(--muted); font-weight: 700; padding: 0 2px; }
|
||||
.recon-sel-chip-x:hover { color: #e53935; }
|
||||
.recon-sel-clear { padding: 2px 10px; font-size: 12px; }
|
||||
|
||||
/* ---- Recon channel map ---- */
|
||||
.recon-map-sub { font-size: 12px; color: var(--muted); margin: -4px 0 6px; }
|
||||
.recon-map-chips { margin: 0 0 6px; }
|
||||
.recon-chip.disabled { opacity: .45; cursor: default; }
|
||||
.recon-chip.disabled:hover { color: var(--muted); border-color: var(--border); }
|
||||
.recon-map-box { position: relative; }
|
||||
.recon-map-box canvas { display: block; }
|
||||
.recon-map-box .recon-no-data { min-height: 60px; }
|
||||
|
||||
/* ---- Reports view ---- */
|
||||
.survey-detail-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
|
||||
.survey-detail-row { padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; margin-top: 6px; cursor: pointer; font-size: 13px; }
|
||||
.survey-detail-row:hover { border-color: var(--primary); }
|
||||
.survey-detail-row.open { border-color: var(--primary); background: var(--surface-alt); }
|
||||
.survey-detail-body { padding: 8px 4px; }
|
||||
.survey-detail-gps { font-size: 12px; color: var(--muted); margin: 6px 0; }
|
||||
.survey-wigle-warn { color: #ef6c00; font-size: 12px; }
|
||||
.wigle-warn { color: #ef6c00; font-size: 12px; }
|
||||
|
||||
/* ---- Mark VII handshakes table + settings dialog ---- */
|
||||
.hs-cell-center { text-align: center; }
|
||||
|
||||
@@ -84,6 +84,10 @@ const App = (() => {
|
||||
function route() {
|
||||
closeToolbarMenus();
|
||||
const hash = (location.hash || '#/dashboard').replace(/\/+$/, '');
|
||||
if (hash === '#/recon/survey') {
|
||||
location.hash = '#/recon';
|
||||
return;
|
||||
}
|
||||
const name = routes[hash];
|
||||
if (currentView && currentView.destroy) currentView.destroy();
|
||||
els.content.innerHTML = '';
|
||||
@@ -396,7 +400,6 @@ const App = (() => {
|
||||
'#/pineap/clients': 'pineap_clients',
|
||||
'#/pineap/filtering': 'pineap_filtering',
|
||||
'#/recon': 'recon',
|
||||
'#/recon/survey': 'recon_survey',
|
||||
'#/recon/reports': 'recon_reports',
|
||||
'#/recon/handshakes': 'recon_handshakes',
|
||||
'#/logging': 'logging',
|
||||
|
||||
@@ -136,5 +136,114 @@ const MiniChart = (() => {
|
||||
});
|
||||
}
|
||||
|
||||
return { draw, doughnut, bar };
|
||||
function chanToMhz(band, ch) {
|
||||
const n = Number(ch);
|
||||
if (band === '2.4') return 2407 + 5 * n;
|
||||
if (band === '5') return 5000 + 5 * n;
|
||||
if (band === '6') return 5950 + 5 * n;
|
||||
return null;
|
||||
}
|
||||
|
||||
function bandRange(band) {
|
||||
if (band === '2.4') return [2400, 2500];
|
||||
if (band === '5') return [5150, 5900];
|
||||
if (band === '6') return [5925, 7125];
|
||||
return null;
|
||||
}
|
||||
|
||||
function hexA(hex, alpha) {
|
||||
const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
|
||||
if (!m) return hex;
|
||||
const n = parseInt(m[1], 16);
|
||||
return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + alpha + ')';
|
||||
}
|
||||
|
||||
// Channel map: each AP is a raised-cosine lobe at its reported center
|
||||
// frequency with the peak at its signal strength. The radio does not report
|
||||
// channel width, so every lobe assumes 20 MHz (half-width +-10 MHz).
|
||||
function channelMap(canvas, aps, opts) {
|
||||
const o = opts || {};
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const H = o.height || 180;
|
||||
canvas.width = canvas.clientWidth * dpr;
|
||||
canvas.height = H * dpr;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
const w = canvas.clientWidth, h = H;
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
if (!aps || !aps.length) return;
|
||||
const pts = aps
|
||||
.map((a) => ({
|
||||
freq: a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel),
|
||||
sig: a.signal
|
||||
}))
|
||||
.filter((p) => p.freq != null && p.sig != null);
|
||||
if (!pts.length) return;
|
||||
const def = bandRange(aps[0].band);
|
||||
const lo = Math.min(def ? def[0] : Infinity, ...pts.map((p) => p.freq));
|
||||
const hi = Math.max(def ? def[1] : -Infinity, ...pts.map((p) => p.freq));
|
||||
const fMin = lo - 10, fMax = hi + 10;
|
||||
const padL = 42, padR = 10, padT = 14, padB = 24;
|
||||
const plotW = w - padL - padR, plotH = h - padT - padB;
|
||||
const YMIN = -100, YMAX = -30;
|
||||
const x = (f) => padL + (f - fMin) / (fMax - fMin) * plotW;
|
||||
const y = (dbm) => padT + (1 - (dbm - YMIN) / (YMAX - YMIN)) * plotH;
|
||||
ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
|
||||
ctx.textAlign = 'right';
|
||||
for (let dbm = YMIN; dbm <= YMAX; dbm += 10) {
|
||||
const yy = y(dbm);
|
||||
ctx.strokeStyle = o.grid || '#e0e0e0';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath(); ctx.moveTo(padL, yy); ctx.lineTo(w - padR, yy); ctx.stroke();
|
||||
ctx.fillStyle = '#888';
|
||||
ctx.fillText(String(dbm), padL - 6, yy + 3);
|
||||
}
|
||||
ctx.strokeStyle = o.grid || '#e0e0e0';
|
||||
for (let f = Math.ceil(fMin / 20) * 20; f <= fMax; f += 20) {
|
||||
ctx.beginPath(); ctx.moveTo(x(f), padT); ctx.lineTo(x(f), h - padB); ctx.stroke();
|
||||
}
|
||||
const baseY = h - padB;
|
||||
aps.forEach((a) => {
|
||||
const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
|
||||
if (freq == null || a.signal == null) return;
|
||||
const color = a.color || '#1976d2';
|
||||
const cx = x(freq);
|
||||
const topY = y(a.signal);
|
||||
const peakH = Math.max(2, baseY - topY);
|
||||
const half = Math.max(4, (10 / (fMax - fMin)) * plotW);
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i <= 28; i++) {
|
||||
const t = -1 + i / 14;
|
||||
const lift = Math.max(0, 0.5 + 0.5 * Math.cos(Math.PI * t));
|
||||
const px = cx + t * half;
|
||||
const py = baseY - lift * peakH;
|
||||
if (i === 0) ctx.moveTo(px, py);
|
||||
else ctx.lineTo(px, py);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = hexA(color, 0.35);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
});
|
||||
let lastLabelX = -Infinity;
|
||||
ctx.textAlign = 'center';
|
||||
aps.forEach((a) => {
|
||||
const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
|
||||
if (freq == null || a.channel == null) return;
|
||||
const cx = x(freq);
|
||||
if (cx - lastLabelX < 34) return;
|
||||
lastLabelX = cx;
|
||||
ctx.strokeStyle = '#999';
|
||||
ctx.beginPath(); ctx.moveTo(cx, h - padB); ctx.lineTo(cx, h - padB + 4); ctx.stroke();
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.fillText('CH ' + a.channel, cx, h - 7);
|
||||
});
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#888';
|
||||
ctx.fillText((aps[0].band || '?') + ' GHz', padL + 4, padT + 2);
|
||||
}
|
||||
|
||||
return { draw, doughnut, bar, channelMap };
|
||||
})();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user