bzuccaro
d7ef0624f4
- Top 5 recon cards restyled as stat cards: value + sub-line + mini chart, consistent 190px anatomy; Handshakes links to the handshakes page; Previous Scans shows count/latest plus a compact picker + action row - Channel map records lobe geometry (canvas.__reconLobes / __reconLobesHit); hovering lists the networks under the cursor, click pins the tooltip, mouseleave hides it; empty states hide the tooltip too - Recon focus sidebar gains 'Send to PineAP — Twin this network': routes to Evil WPA (psk2/sae/owe from recon encryption) or OpenAP (with BSSID) and prefills the form; one-shot PineAPPrefill is consumed by the attack launcher and never auto-deploys or leaks into manual forms - Existing Actions verified end-to-end and hardened: capture/stop handshake sync the auto-collect toggle, examine buttons disable while pending - Recon resilience: loadDetail retries after failed render or 503 (no more permanently blank page), scan-list errors surface in the scan bar, poll guard prevents overlapping loads, chart draws are individually isolated - Auto-collect toggle re-syncs from get_config on the slow poll so the UI tracks the pager's own settings
268 lines
10 KiB
JavaScript
268 lines
10 KiB
JavaScript
'use strict';
|
|
|
|
const MiniChart = (() => {
|
|
function draw(canvas, series, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
canvas.width = canvas.clientWidth * dpr;
|
|
canvas.height = 140 * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
const w = canvas.clientWidth, h = 140;
|
|
ctx.clearRect(0, 0, w, h);
|
|
const oMin = o.min == null ? 0 : o.min;
|
|
const max = Math.max(o.max || 10, ...series.map((s) => Math.max(...s.points, oMin)), oMin + 1);
|
|
const min = Math.min(oMin, ...series.map((s) => Math.min(...s.points, oMin)));
|
|
const span = Math.max(max - min, 1);
|
|
const pad = 8;
|
|
ctx.strokeStyle = o.grid || '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
for (let g = 0; g <= 4; g++) {
|
|
const y = pad + (h - pad * 2) * g / 4;
|
|
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
|
|
}
|
|
series.forEach((s) => {
|
|
const pts = s.points;
|
|
if (!pts || pts.length < 2) return;
|
|
ctx.strokeStyle = s.color || '#1976d2';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
let started = false;
|
|
pts.forEach((v, i) => {
|
|
if (v == null) { started = false; return; }
|
|
const x = pad + (w - pad * 2) * i / Math.max(pts.length - 1, 1);
|
|
const y = h - pad - (h - pad * 2) * ((v - min) / span);
|
|
if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
const last = pts[pts.length - 1];
|
|
if (last != null) {
|
|
const x = pad + (w - pad * 2) * (pts.length - 1) / Math.max(pts.length - 1, 1);
|
|
const y = h - pad - (h - pad * 2) * ((last - min) / span);
|
|
ctx.fillStyle = s.color || '#1976d2';
|
|
ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill();
|
|
}
|
|
});
|
|
}
|
|
|
|
function doughnut(canvas, segments, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const legendH = o.legend ? 22 : 0;
|
|
const H = (o.height || 160) + legendH;
|
|
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 = o.height || 160;
|
|
ctx.clearRect(0, 0, w, H);
|
|
const cx = w / 2, cy = h / 2;
|
|
const r = Math.min(w, h) / 2 - 8;
|
|
const hole = (o.hole == null ? 0.65 : o.hole) * r;
|
|
const total = segments.reduce((s, x) => s + x.value, 0);
|
|
if (!total) {
|
|
ctx.strokeStyle = '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
|
|
ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
|
|
return;
|
|
}
|
|
let a0 = -Math.PI / 2;
|
|
segments.forEach((seg) => {
|
|
const a1 = a0 + (seg.value / total) * Math.PI * 2;
|
|
ctx.fillStyle = seg.color;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, r, a0, a1);
|
|
ctx.arc(cx, cy, hole, a1, a0, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
a0 = a1;
|
|
});
|
|
ctx.strokeStyle = o.stroke || '#ffffff';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
|
|
ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
|
|
if (o.legend) {
|
|
ctx.font = '11px Roboto, "Segoe UI", Arial, sans-serif';
|
|
const dots = segments.filter((s) => s.value > 0);
|
|
let tw = 0;
|
|
dots.forEach((s) => { tw += 16 + ctx.measureText(s.label).width + 8; });
|
|
tw = Math.max(tw - 8, 0);
|
|
let x = (w - tw) / 2;
|
|
const ly = h + 13;
|
|
dots.forEach((s) => {
|
|
ctx.fillStyle = s.color;
|
|
ctx.beginPath(); ctx.arc(x + 4, ly - 3, 4, 0, Math.PI * 2); ctx.fill();
|
|
ctx.fillStyle = '#686868';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(s.label, x + 12, ly);
|
|
x += 16 + ctx.measureText(s.label).width + 8;
|
|
});
|
|
}
|
|
}
|
|
|
|
function bar(canvas, items, opts) {
|
|
const o = opts || {};
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const H = o.height || 160;
|
|
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 (!items || !items.length) return;
|
|
const max = Math.max(1, ...items.map((i) => i.value));
|
|
const padB = 16, padT = 8, padL = 6, padR = 6;
|
|
const plotW = w - padL - padR, plotH = h - padT - padB;
|
|
const bw = plotW / items.length;
|
|
ctx.strokeStyle = o.grid || '#e0e0e0';
|
|
ctx.lineWidth = 1;
|
|
for (let g = 0; g <= 4; g++) {
|
|
const y = padT + plotH * g / 4;
|
|
ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(w - padR, y); ctx.stroke();
|
|
}
|
|
items.forEach((it, i) => {
|
|
const bh = it.value / max * plotH;
|
|
const x = padL + bw * i + bw * 0.15;
|
|
const wd = bw * 0.7;
|
|
const y = padT + plotH - bh;
|
|
ctx.fillStyle = it.color;
|
|
ctx.fillRect(x, y, wd, bh);
|
|
ctx.fillStyle = '#686868';
|
|
ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(String(it.label), padL + bw * i + bw / 2, h - 4);
|
|
});
|
|
}
|
|
|
|
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).
|
|
// Lobe geometry (CSS px) is recorded on the canvas so the caller can
|
|
// hit-test pointer position against the networks under the cursor.
|
|
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);
|
|
canvas.__reconLobes = [];
|
|
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);
|
|
canvas.__reconLobes.push({ ap: a, cx: cx, half: half, topY: topY, baseY: baseY });
|
|
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();
|
|
});
|
|
// Hit test: list networks whose lobe is under (mx, my) in CSS px.
|
|
canvas.__reconLobesHit = function (mx, my, padPx) {
|
|
const pad = padPx == null ? 4 : padPx;
|
|
const hits = [];
|
|
(this.__reconLobes || []).forEach((l) => {
|
|
const dx = mx - l.cx;
|
|
if (Math.abs(dx) > l.half + 2) return;
|
|
const t = Math.min(1, Math.max(-1, dx / l.half));
|
|
const lift = Math.max(0, 0.5 + 0.5 * Math.cos(Math.PI * t));
|
|
const lobeTop = l.baseY - lift * (l.baseY - l.topY);
|
|
if (my >= lobeTop - pad && my <= l.baseY + pad) hits.push(l.ap);
|
|
});
|
|
return hits;
|
|
};
|
|
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 };
|
|
})();
|