909 lines
43 KiB
Markdown
909 lines
43 KiB
Markdown
# Recon Mark VII Parity Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Rework the Pager WebUI Recon section into a faithful clone of the stock Hak5 WiFi Pineapple (Mark VII) Recon UI — Mark VII title cards, scan bar, APs/Clients tables with search + pagination, settings sidebar, and a two-tab Recon (Scanning + Handshakes, no Events) — using only data the Pager backend already exposes, plus one optional-body change to `POST /api/recon/start`.
|
||
|
||
**Architecture:** All front-end changes live under `payload/user/general/pager-webui/www/` (vanilla JS SPA, no build step). The Mark VII layout/markup/colors were extracted from the old Angular bundle `main.ce5a318adf590e170f6d.js`. The scanning view is rewritten to mirror Mark VII's `.recon-title-card-container` structure; charts are extended hand-rolled `<canvas>` renderers (bar + doughnut with legend); the Events tab/route/view is removed. One backend function (`h_recon_start`) forwards an optional `scan_time` to the daemon call.
|
||
|
||
**Tech Stack:** Vanilla JS (ES6, `const`/arrow functions as used today), hand-rolled CSS via custom properties (light/dark), hand-rolled `<canvas>` charts, Python `server.py` for the one backend change, `unittest` for the backend test.
|
||
|
||
## Global Constraints
|
||
|
||
- Device runtime: `python3-light` on WiFi Pineapple Pager 24.10.1 — no third-party pip packages, no build step.
|
||
- Front-end must stay ES6-compatible (matches existing code).
|
||
- No new `/api/*` surface. Only `h_recon_start` body semantics change: optional `scan_time` (int seconds; `0` = continuous). When absent, behavior is byte-for-byte the current `body={}`.
|
||
- Auth/session mechanics unchanged.
|
||
- Design tokens (light): content `#fafafa`, cards `#fff`, toolbar `#424242`, primary `#1976d2`, text `#212121` / muted `#686868`, border `#e0e0e0`. Dark: surfaces `#303030`, cards `#424242`, border `#545454`.
|
||
- Mark VII chart palettes (verbatim from the old bundle):
|
||
- Landscape doughnut: `#2ecc71` (Access Points), `#2980b9` (Clients), `#8e44ad` (Unassociated).
|
||
- Channel bar palette (cycle through for bars): `#FC68AC,#4545FF,#19DE8F,#FF294A,#23E8DB,#0FD349,#4D4AFF,#E2FF68,#FF8368,#B1FF6A,#FFFF3B,#FF677E,#D0FF6E,#F57D67,#F828E4,#EAFF6D,#3676F9,#F169E8,#3B2AE4,#3197F5,#4040FF,#FFF26A,#FCAD67,#0ACE28,#FF9E68,#55FF4A,#F9FF68,#EE687E,#FFFC67,#FFE167,#7FFF6C,#FFF236,#F26868,#6DFF74,#F568D5,#FF402A,#CAFF69,#28C20A,#6B29E9,#C7FF40,#FFB631,#D429F3,#F868C1,#14D96B,#9E29EF,#8EFF45,#FF2980,#FD29B3,#FF7A2C,#FF6967,#FFD569,#27D6EC,#98FF6B,#1EE3B5,#FFFF6B,#FFB969,#FFFF6C,#FF6795,#0BC80A,#3B54FD,#F99467,#FFC667,#2CB7F1,#6EFF91`
|
||
- `localStorage` keys: `pw_scan_duration` (int string, default `'30'`), `pw_recon_cols` (JSON `{ap:{...},client:{...}}`).
|
||
- Recon has exactly two tabs: `Scanning` (`#/recon`) and `Handshakes` (`#/recon/handshakes`).
|
||
- No Band select (Pager cannot single-band scan). No graph/2D/3D view. No AP focus sidebars.
|
||
- Existing Python `unittest` suite must stay green (`tests/` run per-file).
|
||
- Commits follow repo style (`feat:`, `fix:`, `docs:`).
|
||
- Deploy: `.\scripts\deploy.ps1 -SshKey "$HOME\.ssh\pager_key" -Password "<PAGER_PASSWORD>"` (fall back to printed scp/ssh commands if no key/sshpass).
|
||
|
||
---
|
||
|
||
### Task 1: Backend — `h_recon_start` forwards optional `scan_time`
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/server.py:912-916` (`h_recon_start`)
|
||
- Modify: `tests/test_recon.py` (`DaemonSockTest`)
|
||
|
||
**Interfaces:**
|
||
- Consumes: `daemon_sock_call('POST', '/api/pineap/log/recon/start', body=...)` (exists, returns `(status, data)`); handler `ctx` may or may not have a `body` attribute (existing test builds `type('C', (), {'args': ()})()` with no `body`).
|
||
- Produces: `h_recon_start(ctx)` → reads `getattr(ctx, 'body', None)`, forwards `{'scan_time': int}` when `scan_time` present, else `{}`.
|
||
|
||
- [ ] **Step 1: Write the failing test**
|
||
|
||
Add to `tests/test_recon.py`, inside `class DaemonSockTest` (after `test_start_stop_handlers_call_socket`):
|
||
|
||
```python
|
||
def test_start_forwards_scan_time(self):
|
||
calls = []
|
||
server.daemon_sock_call = lambda m, p, body=None: calls.append((m, p, body)) or (200, {'success': True})
|
||
ctx = type('C', (), {'args': (), 'body': {'scan_time': 60}})()
|
||
status, data = server.h_recon_start(ctx)
|
||
self.assertEqual(status, 200)
|
||
self.assertEqual(calls[0], ('POST', '/api/pineap/log/recon/start', {'scan_time': 60}))
|
||
|
||
def test_start_defaults_empty_body(self):
|
||
calls = []
|
||
server.daemon_sock_call = lambda m, p, body=None: calls.append((m, p, body)) or (200, {'success': True})
|
||
server.h_recon_start(type('C', (), {'args': ()})())
|
||
self.assertEqual(calls[0], ('POST', '/api/pineap/log/recon/start', {}))
|
||
```
|
||
|
||
- [ ] **Step 2: Run the test to verify it fails**
|
||
|
||
```powershell
|
||
& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest tests.test_recon.DaemonSockTest -v
|
||
```
|
||
Expected: `test_start_forwards_scan_time` FAIL (body is `{}`), `test_start_defaults_empty_body` FAIL (AttributeError on `ctx.body`).
|
||
|
||
- [ ] **Step 3: Implement the change**
|
||
|
||
Replace `h_recon_start` (currently lines 912-916):
|
||
|
||
```python
|
||
def h_recon_start(ctx):
|
||
body = {}
|
||
scan_time = (getattr(ctx, 'body', None) or {}).get('scan_time')
|
||
if scan_time is not None:
|
||
body['scan_time'] = int(scan_time)
|
||
status, data = daemon_sock_call('POST', '/api/pineap/log/recon/start', body=body)
|
||
if status != 200 or not (data or {}).get('success'):
|
||
return 502, {'error': 'daemon recon start failed'}
|
||
return 200, {'ok': True}
|
||
```
|
||
|
||
- [ ] **Step 4: Run the test to verify it passes**
|
||
|
||
```powershell
|
||
& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest tests.test_recon.DaemonSockTest -v
|
||
```
|
||
Expected: all DaemonSockTest tests PASS.
|
||
|
||
- [ ] **Step 5: Run the full suite for regressions**
|
||
|
||
```powershell
|
||
Get-ChildItem tests\test_*.py | ForEach-Object {
|
||
$mod = "tests." + [IO.Path]::GetFileNameWithoutExtension($_.Name)
|
||
& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest $mod -v
|
||
}
|
||
```
|
||
Expected: all modules PASS.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/server.py tests/test_recon.py
|
||
git commit -m "feat: forward optional scan_time to daemon on recon start"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Charts — doughnut with legend + bar chart in `chart.js`
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/www/js/chart.js`
|
||
|
||
**Interfaces:**
|
||
- Produces (consumed by Task 5):
|
||
- `MiniChart.doughnut(canvas, segments, opts)` — segments `[{label, value, color}]`; opts `{legend: bool, height: number, hole: number}`. Draws a ring doughnut (hole radius = `hole` × outer radius, default `0.65`) and, when `legend` is truthy, a legend row beneath (color dot + label, centered). Segments sum to 0 → draw empty ring and no legend.
|
||
- `MiniChart.bar(canvas, items, opts)` — items `[{label, value, color}]`; opts `{height: number, grid: color}`. X axis labels = item labels (below chart), bars from baseline with item colors, Y gridlines, Y max = max value (min 1), no legend.
|
||
- Unchanged: `MiniChart.draw` (dashboard line chart).
|
||
|
||
- [ ] **Step 1: Rewrite `chart.js`**
|
||
|
||
Replace the whole file with:
|
||
|
||
```js
|
||
'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 max = Math.max(o.max || 10, ...series.map((s) => Math.max(...s.points, 0)), 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 / max);
|
||
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 / max);
|
||
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);
|
||
const text = dots.map((s) => s.label).join(' ');
|
||
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);
|
||
});
|
||
}
|
||
|
||
return { draw, doughnut, bar };
|
||
})();
|
||
```
|
||
|
||
- [ ] **Step 2: Sanity-check the file**
|
||
|
||
```powershell
|
||
$c = Get-Content -Raw payload\user\general\pager-webui\www\js\chart.js
|
||
if ($c -match 'function doughnut' -and $c -match 'function bar' -and $c -match 'return \{ draw, doughnut, bar \}') { 'chart.js OK' }
|
||
```
|
||
Expected: `chart.js OK`.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/www/js/chart.js
|
||
git commit -m "feat: add doughnut legend and bar chart to MiniChart"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Icons — Material path data for new buttons
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/www/js/icons.js`
|
||
|
||
**Interfaces:**
|
||
- Produces (consumed by Task 5): new keys on `PineappleIcons` — `refresh`, `file_download`, `delete`, `settings`, `search`, `first_page`, `last_page`, `chevron_left`, `chevron_right`. Each is a full inline `<svg viewBox="0 0 24 24" fill="currentColor"><path d="..."/></svg>`.
|
||
|
||
- [ ] **Step 1: Append the new icons**
|
||
|
||
Inside the `PineappleIcons` object (after the `receipt` line), add (note trailing commas between entries, last entry has none):
|
||
|
||
```js
|
||
refresh: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/></svg>',
|
||
file_download: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19,9H15V3H9V9H5L12,16L19,9M11,18H13V22H11V18Z"/></svg>',
|
||
delete: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6,19C6,20.1 6.9,21 8,21H16C17.1,21 18,20.1 18,19V7H6V19M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19V4Z"/></svg>',
|
||
settings: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14,12.94C19.18,12.64 19.2,12.33 19.2,12C19.2,11.68 19.18,11.36 19.13,11.06L21.16,9.48C21.34,9.34 21.39,9.07 21.28,8.87L19.36,5.55C19.24,5.33 18.99,5.26 18.77,5.33L16.38,6.29C15.88,5.91 15.35,5.59 14.76,5.35L14.4,2.81C14.36,2.57 14.16,2.4 13.92,2.4H10.08C9.84,2.4 9.65,2.57 9.61,2.81L9.25,5.35C8.66,5.59 8.12,5.91 7.63,6.29L5.24,5.33C5.02,5.26 4.77,5.33 4.65,5.55L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48L4.89,11.06C4.84,11.36 4.8,11.67 4.8,12C4.8,12.33 4.82,12.64 4.87,12.94L2.84,14.52C2.66,14.66 2.61,14.93 2.72,15.13L4.64,18.45C4.76,18.67 5.01,18.74 5.23,18.67L7.62,17.71C8.12,18.09 8.65,18.41 9.24,18.65L9.6,21.19C9.65,21.43 9.84,21.6 10.08,21.6H13.92C14.16,21.6 14.36,21.43 14.4,21.19L14.76,18.65C15.35,18.41 15.88,18.09 16.38,17.71L18.77,18.67C18.99,18.74 19.24,18.67 19.36,18.45L21.28,15.13C21.39,14.93 21.34,14.66 21.16,14.52L19.14,12.94M12,15.6C10.02,15.6 8.4,13.98 8.4,12C8.4,10.02 10.02,8.4 12,8.4C13.98,8.4 15.6,10.02 15.6,12C15.6,13.98 13.98,15.6 12,15.6Z"/></svg>',
|
||
search: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5C16,5.91 13.09,3 9.5,3C5.91,3 3,5.91 3,9.5C3,13.09 5.91,16 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.49L20.49,19L15.5,14M9.5,14C7.01,14 5,11.99 5,9.5C5,7.01 7.01,5 9.5,5C11.99,5 14,7.01 14,9.5C14,11.99 11.99,14 9.5,14Z"/></svg>',
|
||
first_page: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z"/></svg>',
|
||
last_page: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z"/></svg>',
|
||
chevron_left: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/></svg>',
|
||
chevron_right: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>'
|
||
```
|
||
|
||
- [ ] **Step 2: Verify**
|
||
|
||
```powershell
|
||
$c = Get-Content -Raw payload\user\general\pager-webui\www\js\icons.js
|
||
@('refresh','file_download','delete','settings','search','first_page','last_page','chevron_left','chevron_right') | ForEach-Object { if ($c -match $_ + ':') { "$_ OK" } else { "$_ MISSING" } }
|
||
```
|
||
Expected: all `OK`.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/www/js/icons.js
|
||
git commit -m "feat: add Material action icons for recon rework"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: CSS — Mark VII recon styles
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/www/css/app.css` (append; do not remove existing classes)
|
||
|
||
**Interfaces:**
|
||
- Consumes: existing custom properties (`--surface`, `--border`, `--muted`, `--primary`, `--shadow`, `--text`), `html.dark` overrides.
|
||
- Produces (consumed by Task 5): classes `.recon-title-card-container`, `.recon-title-card`, `.recon-card`, `.recon-title-card-title`, `.recon-card-title-link`, `.recon-title-card-content`, `.recon-chart-box`, `.recon-no-data`, `.recon-hs-col`, `.recon-hs-count`, `.recon-hs-label`, `.recon-toggle`, `.recon-ps-row`, `.recon-scan-bar`, `.recon-table-head`, `.recon-search`, `.recon-paginator`, `.icon-btn`, `.recon-scan-results-card`, `.recon-table-body`, `.recon-settings-sidebar`, `.recon-settings-head`, `.recon-settings-title`, `.recon-settings-section`, `.recon-row-selected`.
|
||
|
||
- [ ] **Step 1: Append the recon stylesheet block**
|
||
|
||
Append to `app.css`:
|
||
|
||
```css
|
||
/* ---- Recon (Mark VII parity) ---- */
|
||
.recon-title-card-container { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 8px 0 16px; }
|
||
.recon-title-card { flex: 1 1 220px; min-width: 220px; margin-bottom: 1em; }
|
||
.recon-card { background: var(--surface); border-radius: 2px; box-shadow: var(--shadow); height: 200px; padding: 12px 16px; display: flex; flex-direction: column; }
|
||
.recon-title-card-title { font-size: 20px; margin-bottom: 15px; display: flex; align-items: center; color: var(--text); }
|
||
.recon-card-title-link { color: inherit; text-decoration: none; }
|
||
.recon-card-title-link:visited { color: inherit; }
|
||
.recon-card-title-link:hover { text-decoration: underline; }
|
||
.recon-title-card-content { display: flex; justify-content: center; align-items: center; height: 70%; }
|
||
.recon-chart-box { width: 100%; height: 150px; position: relative; }
|
||
.recon-chart-box canvas { width: 100%; height: 100%; }
|
||
.recon-no-data { font-style: italic; color: #787878; display: flex; justify-content: center; padding: 12px; }
|
||
.recon-hs-col { display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
||
.recon-hs-count { font-size: 32px; font-weight: 700; line-height: 1.1; }
|
||
.recon-hs-label { color: grey; margin: 2px 0 10px; }
|
||
.recon-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 0; cursor: pointer; }
|
||
.recon-ps-row { display: flex; align-items: center; width: 100%; gap: 4px; }
|
||
.recon-ps-row .sel { width: 100%; }
|
||
.icon-btn { background: transparent; color: var(--muted); border: 0; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
|
||
.icon-btn:hover { background: var(--surface-alt); color: var(--text); }
|
||
.icon-btn:disabled { opacity: .38; cursor: default; }
|
||
.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-results-card { }
|
||
.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; }
|
||
.recon-paginator { display: flex; align-items: center; gap: 2px; font-size: 12px; }
|
||
.recon-paginator .icon-btn { width: 30px; height: 30px; }
|
||
.recon-paginator .icon-btn svg { width: 18px; height: 18px; }
|
||
.recon-table-body { }
|
||
.recon-row-selected td { background: #eaeaea; }
|
||
html.dark .recon-row-selected td { background: #565656; }
|
||
.recon-settings-sidebar {
|
||
position: fixed; top: 64px; right: 0; bottom: 0; width: 270px; z-index: 50;
|
||
background: var(--surface); box-shadow: -2px 0 6px rgba(0,0,0,.24); padding: 16px;
|
||
overflow-y: auto;
|
||
}
|
||
.recon-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||
.recon-settings-title { font-size: 20px; }
|
||
.recon-settings-section { font-size: 14px; font-weight: 500; margin: 14px 0 4px; color: var(--muted); }
|
||
.recon-settings-sidebar .toggle { font-size: 13px; }
|
||
.recon-handshakes-card .recon-table-head h2 { font-size: 20px; margin-bottom: 15px; }
|
||
```
|
||
|
||
- [ ] **Step 2: Sanity-check**
|
||
|
||
```powershell
|
||
Select-String -Path payload\user\general\pager-webui\www\css\app.css -Pattern 'recon-title-card-container','recon-scan-bar','recon-settings-sidebar','recon-row-selected'
|
||
```
|
||
Expected: all four found.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/www/css/app.css
|
||
git commit -m "feat: Mark VII recon styles (title cards, scan bar, tables, settings sidebar)"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: Views — rewrite `views.recon`, restyle handshakes, remove Events
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/www/js/views.js`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `h`, `table`, `fmtTime`, `btn`, `tabBar` (all existing module-level helpers), `PagerAPI`, `App.toast`, `App.apiBase`, `PineappleIcons` (Task 3), `MiniChart.doughnut` / `MiniChart.bar` (Task 2).
|
||
- Produces: module-level `iconBtn(name, title, onclk)` helper; `RECON_TABS` (2 entries); `views.recon`; restyled `views.recon_handshakes`. **Deletes** `views.recon_events`.
|
||
|
||
- [ ] **Step 1: Add the `iconBtn` helper**
|
||
|
||
After the `btn` helper definition (near line 53):
|
||
|
||
```js
|
||
const iconBtn = (name, title, onclk) => {
|
||
const b = h('button', { class: 'icon-btn', title: title || '', onclick: onclk });
|
||
b.innerHTML = PineappleIcons[name] || '';
|
||
return b;
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 2: Replace `RECON_TABS` and add constants**
|
||
|
||
Replace the current `RECON_TABS` (3 entries) with:
|
||
|
||
```js
|
||
const RECON_TABS = [
|
||
{ label: 'Scanning', hash: '#/recon' },
|
||
{ label: 'Handshakes', hash: '#/recon/handshakes' }
|
||
];
|
||
|
||
const RECON_LANDSCAPE_COLORS = ['#2ecc71', '#2980b9', '#8e44ad'];
|
||
const RECON_CHANNEL_COLORS = ['#FC68AC','#4545FF','#19DE8F','#FF294A','#23E8DB','#0FD349','#4D4AFF','#E2FF68','#FF8368','#B1FF6A','#FFFF3B','#FF677E','#D0FF6E','#F57D67','#F828E4','#EAFF6D','#3676F9','#F169E8','#3B2AE4','#3197F5','#4040FF','#FFF26A','#FCAD67','#0ACE28','#FF9E68','#55FF4A','#F9FF68','#EE687E','#FFFC67','#FFE167','#7FFF6C','#FFF236','#F26868','#6DFF74','#F568D5','#FF402A','#CAFF69','#28C20A','#6B29E9','#C7FF40','#FFB631','#D429F3','#F868C1','#14D96B','#9E29EF','#8EFF45','#FF2980','#FD29B3','#FF7A2C','#FF6967','#FFD569','#27D6EC','#98FF6B','#1EE3B5','#FFFF6B','#FFB969','#FFFF6C','#FF6795','#0BC80A','#3B54FD','#F99467','#FFC667','#2CB7F1','#6EFF91'];
|
||
const RECON_AP_COLS = [
|
||
{ key: 'ssid', label: 'SSID', render: (a) => a.ssid || '(hidden)' },
|
||
{ key: 'bssid', label: 'MAC', render: (a) => a.bssid || '--' },
|
||
{ key: 'channel', label: 'Channel', render: (a) => a.channel == null ? '--' : a.channel },
|
||
{ key: 'signal', label: 'Signal', render: (a) => a.signal == null ? '--' : a.signal + ' dBm' },
|
||
{ key: 'encryption', label: 'Encryption', render: (a) => a.encryption || '--' },
|
||
{ key: 'hidden', label: 'Hidden', render: (a) => a.hidden ? 'Yes' : 'No' }
|
||
];
|
||
const RECON_CLIENT_COLS = [
|
||
{ key: 'mac', label: 'Client MAC', render: (c) => c.mac },
|
||
{ key: 'signal', label: 'Signal', render: (c) => c.signal == null ? '--' : c.signal + ' dBm' },
|
||
{ key: 'freq', label: 'Frequency', render: (c) => c.freq || '--' },
|
||
{ key: 'packets', label: 'Packets', render: (c) => c.packets || 0 }
|
||
];
|
||
```
|
||
|
||
- [ ] **Step 3: Replace `views.recon`**
|
||
|
||
Replace the entire `views.recon = (root) => {...};` block (lines 364-525 in the current file) with:
|
||
|
||
```js
|
||
function reconDefaultCols() {
|
||
return {
|
||
ap: { ssid: true, bssid: true, channel: true, signal: true, encryption: true, hidden: true },
|
||
client: { mac: true, signal: true, freq: true, packets: true }
|
||
};
|
||
}
|
||
|
||
function reconLoadCols() {
|
||
try {
|
||
const v = JSON.parse(localStorage.getItem('pw_recon_cols'));
|
||
if (v && v.ap && v.client) return v;
|
||
} catch (e) {}
|
||
return reconDefaultCols();
|
||
}
|
||
|
||
function reconFiltered(rows, q, colsArr) {
|
||
const ql = (q || '').toLowerCase();
|
||
if (!ql) return rows;
|
||
return rows.filter((r) => colsArr.some((c) => String(r[c.key] == null ? '' : r[c.key]).toLowerCase().indexOf(ql) !== -1));
|
||
}
|
||
|
||
views.recon = (root) => {
|
||
root.appendChild(h('h1', { class: 'page-title', text: 'Recon' }));
|
||
tabBar(root, RECON_TABS, '#/recon');
|
||
|
||
const state = { scans: [], selected: null, detail: null, active: false,
|
||
apPage: 0, apSearch: '', cliPage: 0, cliSearch: '' };
|
||
const cols = reconLoadCols();
|
||
|
||
function iconBtnView(name, title, onclk) { return iconBtn(name, title, onclk); }
|
||
|
||
// ---- title cards ----
|
||
const cardWrap = h('div', { class: 'recon-title-card-container' });
|
||
root.appendChild(cardWrap);
|
||
|
||
function titleCard(titleText, link) {
|
||
const wrap = h('div', { class: 'recon-title-card' });
|
||
const card = h('div', { class: 'recon-card' });
|
||
wrap.appendChild(card);
|
||
card.appendChild(link
|
||
? h('a', { class: 'recon-card-title-link', href: '#/recon/handshakes', text: titleText })
|
||
: h('div', { class: 'recon-title-card-title', text: titleText }));
|
||
const content = h('div', { class: 'recon-title-card-content' });
|
||
card.appendChild(content);
|
||
cardWrap.appendChild(wrap);
|
||
return content;
|
||
}
|
||
|
||
const landContent = titleCard('Wireless Landscape', false);
|
||
const landBox = h('div', { class: 'recon-chart-box' });
|
||
landContent.appendChild(landBox);
|
||
const landCanvas = h('canvas', { id: 'recon-landscape' });
|
||
landBox.appendChild(landCanvas);
|
||
const landEmpty = h('div', { class: 'recon-no-data', text: 'No wireless landscape data is available yet.' });
|
||
landBox.appendChild(landEmpty);
|
||
|
||
const chanContent = titleCard('Channel Distribution', false);
|
||
const chanBox = h('div', { class: 'recon-chart-box' });
|
||
chanContent.appendChild(chanBox);
|
||
const chanCanvas = h('canvas', { id: 'recon-channel' });
|
||
chanBox.appendChild(chanCanvas);
|
||
const chanEmpty = h('div', { class: 'recon-no-data', text: 'No channel distribution data is available yet.' });
|
||
chanBox.appendChild(chanEmpty);
|
||
|
||
const hsContent = titleCard('Handshakes', true);
|
||
const hsCol = h('div', { class: 'recon-hs-col' });
|
||
hsContent.appendChild(hsCol);
|
||
const hsCount = h('span', { class: 'recon-hs-count', text: '0' });
|
||
hsCol.appendChild(hsCount);
|
||
hsCol.appendChild(h('span', { class: 'recon-hs-label', text: 'Handshakes Captured' }));
|
||
const hsAuto = h('label', { class: 'recon-toggle' },
|
||
h('input', { type: 'checkbox', id: 'recon-auto-hs' }), ' Automatically Collect Any Handshakes');
|
||
hsAuto.querySelector('input').addEventListener('change', () => {
|
||
PagerAPI.post('/api/pineap/settings', { collect_handshakes: hsAuto.querySelector('input').checked })
|
||
.then(() => App.toast('Settings saved')).catch(() => App.toast('Failed to save', 'error'));
|
||
});
|
||
hsCol.appendChild(hsAuto);
|
||
|
||
const psContent = titleCard('Previous Scans', false);
|
||
const psRow = h('div', { class: 'recon-ps-row' });
|
||
psContent.appendChild(psRow);
|
||
const sel = h('select', { class: 'sel', id: 'recon-scan-select' });
|
||
sel.addEventListener('change', () => {
|
||
state.selected = parseInt(sel.value, 10) || null;
|
||
state.apPage = 0; state.cliPage = 0;
|
||
loadDetail();
|
||
});
|
||
psRow.appendChild(sel);
|
||
psRow.appendChild(iconBtnView('file_download', 'Download scan JSON', () => {
|
||
if (state.selected != null) window.location = App.apiBase + '/api/recon/scans/' + state.selected + '/download/json';
|
||
}));
|
||
psRow.appendChild(iconBtnView('delete', 'Delete scan', () => {
|
||
if (state.selected == null) return;
|
||
if (!confirm('Delete scan #' + state.selected + '? This cannot be undone.')) return;
|
||
PagerAPI.del('/api/recon/scans/' + state.selected)
|
||
.then(() => { App.toast('Scan deleted'); load(); })
|
||
.catch(() => App.toast('Delete failed', 'error'));
|
||
}));
|
||
|
||
// ---- scan bar ----
|
||
const scanBar = h('div', { class: 'section recon-scan-bar' });
|
||
root.appendChild(scanBar);
|
||
const scanToggle = h('input', { type: 'checkbox', id: 'recon-scan-toggle' });
|
||
const scanLabel = h('label', { class: 'switch recon-scan-toggle' }, scanToggle, h('span', { class: 'track' }), ' Scan');
|
||
scanBar.appendChild(scanLabel);
|
||
const durSel = h('select', { class: 'sel', id: 'recon-duration' });
|
||
[[30, '30 Seconds'], [60, '1 Minute'], [120, '2 Minutes'], [300, '5 Minutes'], [600, '10 Minutes'], [0, 'Continuous']]
|
||
.forEach(([v, t]) => durSel.appendChild(h('option', { value: String(v), text: t })));
|
||
durSel.value = localStorage.getItem('pw_scan_duration') || '30';
|
||
durSel.addEventListener('change', () => localStorage.setItem('pw_scan_duration', durSel.value));
|
||
scanBar.appendChild(durSel);
|
||
scanBar.appendChild(h('span', { class: 'toolbar-spacer' }));
|
||
scanBar.appendChild(iconBtnView('settings', 'Recon settings', () => sidebar.classList.toggle('hidden')));
|
||
scanToggle.addEventListener('change', () => {
|
||
const on = scanToggle.checked;
|
||
scanToggle.disabled = true;
|
||
PagerAPI.post(on ? '/api/recon/start' : '/api/recon/stop', on ? { scan_time: parseInt(durSel.value, 10) } : {})
|
||
.then(() => { App.toast(on ? 'Scan started' : 'Scan stopped'); load(); })
|
||
.catch(() => { scanToggle.checked = !on; App.toast('Recon control failed', 'error'); })
|
||
.finally(() => { scanToggle.disabled = false; });
|
||
});
|
||
|
||
// ---- settings sidebar ----
|
||
const sidebar = h('div', { class: 'recon-settings-sidebar hidden' });
|
||
sidebar.appendChild(h('div', { class: 'recon-settings-head' },
|
||
h('span', { class: 'recon-settings-title', text: 'Recon Settings' }),
|
||
btn('×', () => sidebar.classList.add('hidden'), 'ghost')));
|
||
const colDefs = {
|
||
ap: [['ssid', 'Show SSID'], ['bssid', 'Show MAC'], ['channel', 'Show Channel'],
|
||
['signal', 'Show Signal'], ['encryption', 'Show Encryption'], ['hidden', 'Show Hidden']],
|
||
client: [['mac', 'Show MAC'], ['signal', 'Show Signal'], ['freq', 'Show Frequency'], ['packets', 'Show Packets']]
|
||
};
|
||
Object.keys(colDefs).forEach((grp) => {
|
||
sidebar.appendChild(h('div', { class: 'recon-settings-section', text: grp === 'ap' ? 'Access Points' : 'Clients' }));
|
||
colDefs[grp].forEach(([key, label]) => {
|
||
const cb = h('input', { type: 'checkbox', id: 'col-' + grp + '-' + key });
|
||
cb.checked = cols[grp][key];
|
||
cb.addEventListener('change', () => { cols[grp][key] = cb.checked; localStorage.setItem('pw_recon_cols', JSON.stringify(cols)); renderTables(); });
|
||
sidebar.appendChild(h('label', { class: 'toggle' }, cb, ' ' + label));
|
||
});
|
||
});
|
||
root.appendChild(sidebar);
|
||
|
||
// ---- results tables ----
|
||
const apCard = h('div', { class: 'section recon-scan-results-card' });
|
||
root.appendChild(apCard);
|
||
const cliCard = h('div', { class: 'section recon-scan-results-card' });
|
||
root.appendChild(cliCard);
|
||
|
||
function buildPaginator(key) {
|
||
const mk = (id, label, fn) => {
|
||
const b = h('button', { class: 'icon-btn', id: key + '-' + id, title: label });
|
||
b.innerHTML = PineappleIcons[['first', 'last'].indexOf(id) !== -1
|
||
? (id === 'first' ? 'first_page' : 'last_page')
|
||
: (id === 'prev' ? 'chevron_left' : 'chevron_right')] || '';
|
||
b.addEventListener('click', fn);
|
||
return b;
|
||
};
|
||
return h('div', { class: 'recon-paginator' },
|
||
mk('first', 'First page', () => { state[key + 'Page'] = 0; renderTables(); }),
|
||
mk('prev', 'Previous page', () => { state[key + 'Page'] = Math.max(0, state[key + 'Page'] - 1); renderTables(); }),
|
||
h('span', { class: 'muted', id: key + '-range', text: '' }),
|
||
mk('next', 'Next page', () => { state[key + 'Page'] = Math.min(reconPageCount(key) - 1, state[key + 'Page'] + 1); renderTables(); }),
|
||
mk('last', 'Last page', () => { state[key + 'Page'] = Math.max(0, reconPageCount(key) - 1); renderTables(); }));
|
||
}
|
||
|
||
function reconPageCount(key) {
|
||
const d = state.detail || {};
|
||
const rows = key === 'ap' ? (d.aps || []) : (d.clients || []);
|
||
const colsArr = key === 'ap' ? RECON_AP_COLS : RECON_CLIENT_COLS;
|
||
const q = key === 'ap' ? state.apSearch : state.cliSearch;
|
||
return Math.max(1, Math.ceil(reconFiltered(rows, q, colsArr).length / 10));
|
||
}
|
||
|
||
function tableHead(box, title, key, searchId, onInput) {
|
||
const head = h('div', { class: 'recon-table-head' },
|
||
h('h2', { text: title }),
|
||
h('span', { class: 'toolbar-spacer' }),
|
||
h('input', { class: 'recon-search', id: searchId, placeholder: 'Search' }),
|
||
buildPaginator(key));
|
||
box.appendChild(head);
|
||
const input = head.querySelector('#' + searchId);
|
||
input.addEventListener('input', onInput);
|
||
return head;
|
||
}
|
||
|
||
tableHead(apCard, 'Access Points', 'ap', 'ap-search', () => { state.apSearch = document.getElementById('ap-search').value; state.apPage = 0; renderTables(); });
|
||
const apBody = h('div', { class: 'recon-table-body' });
|
||
apCard.appendChild(apBody);
|
||
|
||
tableHead(cliCard, 'Clients', 'client', 'cli-search', () => { state.cliSearch = document.getElementById('cli-search').value; state.cliPage = 0; renderTables(); });
|
||
const cliBody = h('div', { class: 'recon-table-body' });
|
||
cliCard.appendChild(cliBody);
|
||
|
||
function renderTable(box, key, rows, colsArr, selectedBssid, emptyMsg) {
|
||
box.innerHTML = '';
|
||
const vis = colsArr.filter((c) => cols[key][c.key]);
|
||
const page = state[key + 'Page'];
|
||
const start = page * 10;
|
||
const slice = rows.slice(start, start + 10);
|
||
box.appendChild(table(vis, slice,
|
||
key === 'ap' ? (r) => ({ style: 'cursor:pointer' + (r.bssid === selectedBssid ? ';background:var(--surface-alt)' : '') }) : undefined));
|
||
if (!rows.length) box.appendChild(h('div', { class: 'empty', text: emptyMsg }));
|
||
const range = document.getElementById(key + '-range');
|
||
if (range) range.textContent = rows.length ? (start + 1) + '–' + Math.min(start + 10, rows.length) + ' of ' + rows.length : '0 of 0';
|
||
const p = reconPageCount(key);
|
||
[['first', 0], ['prev', 0], ['next', p - 1], ['last', p - 1]].forEach(([id, limit]) => {
|
||
const el = document.getElementById(key + '-' + id);
|
||
if (el) el.disabled = page >= p - 1 && limit !== 0 ? true : (page <= 0 && (id === 'first' || id === 'prev'));
|
||
});
|
||
}
|
||
|
||
function renderTables() {
|
||
const d = state.detail || { aps: [], clients: [], handshakes: [] };
|
||
const apRows = reconFiltered(d.aps || [], state.apSearch, RECON_AP_COLS);
|
||
const cliRows = reconFiltered(d.clients || [], state.cliSearch, RECON_CLIENT_COLS);
|
||
renderTable(apBody, 'ap', apRows, RECON_AP_COLS, '', 'No access points in this scan.');
|
||
renderTable(cliBody, 'client', cliRows, RECON_CLIENT_COLS, '', 'No clients in this scan.');
|
||
}
|
||
|
||
function drawCharts(d) {
|
||
const n = (d.aps || []).length;
|
||
const c = (d.clients || []).length;
|
||
const land = document.getElementById('recon-landscape');
|
||
if (land && typeof MiniChart !== 'undefined' && MiniChart.doughnut) {
|
||
if (n + c > 0) {
|
||
MiniChart.doughnut(land, [
|
||
{ label: 'Access Points', value: n, color: RECON_LANDSCAPE_COLORS[0] },
|
||
{ label: 'Clients', value: c, color: RECON_LANDSCAPE_COLORS[1] },
|
||
{ label: 'Unassociated', value: 0, color: RECON_LANDSCAPE_COLORS[2] }
|
||
], { legend: true, height: 130 });
|
||
land.classList.remove('hidden');
|
||
landEmpty.classList.add('hidden');
|
||
} else {
|
||
land.classList.add('hidden');
|
||
landEmpty.classList.remove('hidden');
|
||
}
|
||
}
|
||
const counts = {};
|
||
(d.aps || []).forEach((a) => {
|
||
const ch = a.channel == null ? '?' : a.channel;
|
||
counts[ch] = (counts[ch] || 0) + 1;
|
||
});
|
||
const keys = Object.keys(counts).sort((a, b) => {
|
||
if (a === '?') return 1;
|
||
if (b === '?') return -1;
|
||
return Number(a) - Number(b);
|
||
});
|
||
const ch = document.getElementById('recon-channel');
|
||
if (ch && typeof MiniChart !== 'undefined' && MiniChart.bar) {
|
||
if (keys.length) {
|
||
MiniChart.bar(ch, keys.map((k, i) => ({
|
||
label: k, value: counts[k], color: RECON_CHANNEL_COLORS[i % RECON_CHANNEL_COLORS.length]
|
||
})), { height: 130 });
|
||
ch.classList.remove('hidden');
|
||
chanEmpty.classList.add('hidden');
|
||
} else {
|
||
ch.classList.add('hidden');
|
||
chanEmpty.classList.remove('hidden');
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadDetail() {
|
||
if (state.selected == null) return;
|
||
PagerAPI.get('/api/recon/scans/' + state.selected).then((r) => {
|
||
state.detail = r.data;
|
||
drawCharts(r.data);
|
||
renderTables();
|
||
hsCount.textContent = (r.data.handshakes || []).length;
|
||
}).catch(() => {});
|
||
}
|
||
|
||
function load() {
|
||
PagerAPI.get('/api/recon/scans').then((r) => {
|
||
state.scans = r.data.scans || [];
|
||
const keep = state.selected && state.scans.some((s) => s.id === state.selected)
|
||
? state.selected : (state.scans[0] ? state.scans[0].id : null);
|
||
sel.innerHTML = '';
|
||
state.scans.forEach((s) => {
|
||
const opt = document.createElement('option');
|
||
opt.value = s.id;
|
||
opt.textContent = 'Scan #' + s.id + ' — ' + fmtTime(s.time);
|
||
sel.appendChild(opt);
|
||
});
|
||
if (keep == null) {
|
||
state.detail = null;
|
||
drawCharts({ aps: [], clients: [], handshakes: [] });
|
||
renderTables();
|
||
hsCount.textContent = '0';
|
||
}
|
||
if (keep != null) sel.value = keep;
|
||
state.selected = keep;
|
||
if (keep != null) loadDetail();
|
||
}).catch(() => {});
|
||
PagerAPI.get('/api/recon/status').then((r) => {
|
||
state.active = !!r.data.active;
|
||
scanToggle.checked = state.active;
|
||
}).catch(() => {});
|
||
PagerAPI.get('/api/pineap/settings').then((r) => {
|
||
hsAuto.querySelector('input').checked = !!((r.data.settings || {}).collect_handshakes);
|
||
}).catch(() => {});
|
||
}
|
||
|
||
load();
|
||
const iv = setInterval(load, 10000);
|
||
return { destroy: () => clearInterval(iv) };
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 4: Replace `views.recon_handshakes` title row**
|
||
|
||
In `views.recon_handshakes`, replace the line:
|
||
|
||
```js
|
||
const box = h('div', { class: 'section' }, h('h2', {}, 'Handshakes'));
|
||
root.appendChild(box);
|
||
```
|
||
|
||
with:
|
||
|
||
```js
|
||
const box = h('div', { class: 'section recon-handshakes-card' });
|
||
root.appendChild(box);
|
||
```
|
||
|
||
and replace the first two lines inside `load()`:
|
||
|
||
```js
|
||
box.innerHTML = '';
|
||
box.appendChild(h('h2', {}, 'Handshakes'));
|
||
```
|
||
|
||
with:
|
||
|
||
```js
|
||
box.innerHTML = '';
|
||
const head = h('div', { class: 'recon-table-head' },
|
||
h('h2', { text: 'Captured WPA Handshakes' }),
|
||
h('span', { class: 'toolbar-spacer' }),
|
||
iconBtn('settings', 'Handshakes settings', () => App.toast('Handshakes settings are not available on the Pager')));
|
||
box.appendChild(head);
|
||
```
|
||
|
||
- [ ] **Step 5: Remove `views.recon_events`**
|
||
|
||
Delete the entire `views.recon_events = (root) => {...};` block (lines 578-612 in the current file), including its `let all = []; let page = 0;` state and pager markup.
|
||
|
||
- [ ] **Step 6: Verify definitions**
|
||
|
||
```powershell
|
||
$v = Get-Content -Raw payload\user\general\pager-webui\www\js\views.js
|
||
@('RECON_TABS','reconDefaultCols','reconLoadCols','reconFiltered','iconBtn','views.recon =','views.recon_handshakes =','RECON_CHANNEL_COLORS','RECON_AP_COLS','RECON_CLIENT_COLS') | ForEach-Object { if ($v -match [regex]::Escape($_) ) { "$_ OK" } else { "$_ MISSING" } }
|
||
if ($v -match 'views\.recon_events') { 'recon_events STILL PRESENT (bad)' } else { 'recon_events REMOVED (good)' }
|
||
```
|
||
Expected: all definitions `OK`, `recon_events REMOVED (good)`.
|
||
|
||
- [ ] **Step 7: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/www/js/views.js
|
||
git commit -m "feat: Mark VII recon scanning view, restyled handshakes, remove Events tab"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 6: Routing — drop the Events route
|
||
|
||
**Files:**
|
||
- Modify: `payload/user/general/pager-webui/www/js/app.js:180`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `views.recon`, `views.recon_handshakes` (Task 5). `views.recon_events` no longer exists.
|
||
- Produces: routes map without `#/recon/events`.
|
||
|
||
- [ ] **Step 1: Remove the line**
|
||
|
||
Delete line 180 (`'#/recon/events': 'recon_events',`) from the `routes` object.
|
||
|
||
- [ ] **Step 2: Verify**
|
||
|
||
```powershell
|
||
$c = Get-Content -Raw payload\user\general\pager-webui\www\js\app.js
|
||
if ($c -match "'#/recon/events'") { 'events route STILL PRESENT (bad)' } else { 'events route REMOVED (good)' }
|
||
```
|
||
Expected: `events route REMOVED (good)`.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add payload/user/general/pager-webui/www/js/app.js
|
||
git commit -m "fix: remove recon events route"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 7: Build, deploy, on-device verification
|
||
|
||
**Files:**
|
||
- No source changes.
|
||
|
||
- [ ] **Step 1: Run the full backend test suite**
|
||
|
||
```powershell
|
||
Get-ChildItem tests\test_*.py | ForEach-Object {
|
||
$mod = "tests." + [IO.Path]::GetFileNameWithoutExtension($_.Name)
|
||
& "$env:LOCALAPPDATA\Programs\Python\Python311\python.exe" -m unittest $mod -v
|
||
}
|
||
```
|
||
Expected: every module PASS.
|
||
|
||
- [ ] **Step 2: Deploy to the Pager**
|
||
|
||
```powershell
|
||
& .\scripts\deploy.ps1 -SshKey "$HOME\.ssh\pager_key" -Password "<PAGER_PASSWORD>"
|
||
```
|
||
(If no key, rely on sshpass; otherwise run the printed scp/ssh commands manually.)
|
||
|
||
- [ ] **Step 3: Verify assets serve**
|
||
|
||
```powershell
|
||
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/
|
||
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/js/chart.js
|
||
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/js/views.js
|
||
curl.exe -s -o NUL -w "%{http_code} %{size_download}`n" http://172.16.52.1:8080/css/app.css
|
||
```
|
||
Expected: all `200` with non-zero sizes.
|
||
|
||
- [ ] **Step 4: On-device smoke pass**
|
||
|
||
Log in at `http://172.16.52.1:8080/` and walk through:
|
||
- `#/recon`: two tabs (Scanning, Handshakes); 4 title cards render (landscape doughnut + legend, channel bar chart, handshakes count, previous-scans select + download/delete icons).
|
||
- Scan bar: Scan toggle, duration select (persist via reload), settings icon opens sidebar (column toggles persist; hide SSID column → table updates).
|
||
- Table search filters APs/Clients; paginator first/last/prev/next + range label work; 10-per-page.
|
||
- Previous-scan select switches detail + charts + tables; download icon fetches JSON; delete icon confirms + deletes.
|
||
- Handshakes tab: "Captured WPA Handshakes" card, file table, Download/Delete row actions, Download all / Archive.
|
||
- `#/recon/events` → "View not available." (route gone). Keyboard `r` → `#/recon`.
|
||
- Dark theme (Settings → Theme) renders cards correctly.
|
||
- Backend: start a scan with Duration = 1 Minute; confirm `/api/recon/start` returns 200 (daemon acceptance of `scan_time` is daemon-dependent; UI unaffected either way).
|
||
|
||
- [ ] **Step 5: Commit any smoke fixes**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "fix: recon rework smoke-test fixes"
|
||
```
|
||
(Only if changes exist.)
|
||
|
||
---
|
||
|
||
## Self-Review Notes (run before handing off)
|
||
|
||
- **Spec coverage:** §3.1 tabs → Tasks 5–6; §3.2 layout → Task 5; §3.3 handshakes → Task 5; §3.4 charts → Task 2; §3.5 icons → Task 3; §3.6 CSS → Task 4; §3.7 backend → Task 1; §3.8 routing → Task 6; §4 data flow → Task 5 (`pw_scan_duration`, `pw_recon_cols`); §5 testing → Tasks 1 & 7; §6 out of scope → enforced (no band select, no graph view, no focus sidebars, no `/api/recon/events` removal).
|
||
- **Name consistency:** `MiniChart.doughnut`/`MiniChart.bar` defined in Task 2 and consumed in Task 5 with the documented signatures (`doughnut(canvas, [{label,value,color}], {legend,height})`, `bar(canvas, [{label,value,color}], {height})`). `iconBtn` defined in Task 5 Step 1, used in Steps 3–4. `RECON_*` constants defined in Step 2, used in Step 3. `reconFiltered`/`reconPageCount`/`renderTables`/`renderTable`/`drawCharts`/`loadDetail`/`load` all defined before first use inside `views.recon`.
|
||
- **Guardrail:** Task 1 must not break `test_start_stop_handlers_call_socket` — that test asserts `body={}` and `h_recon_start` now reads `getattr(ctx, 'body', None)` (absent → `{}`).
|
||
- **Placeholder scan:** no TBD/TODO; every code step ships the full content.
|