docs: update PLAN.md Phase 23 completion and README project status
Phase 23 section updated with full list of changes from all polish passes: Overview stats card, speed chart rework, mobile dashcam table fixes, trip history mobile layout, notification badge fix, footer text. README project status updated to reflect Phases 1-23 complete. Co-authored-by: Copilot <[email protected]>
This commit is contained in:
@@ -1162,7 +1162,8 @@ client simultaneously:
|
||||
uplink; Phase 22 does not prematurely implement that server schema/API.
|
||||
|
||||
### Phase 23: Finish web UI redesign — ✅ DONE
|
||||
**Completed 2026-08-10 (commit 981b24b).** Full responsive redesign of the Pi web UI.
|
||||
**Completed 2026-08-10 (final commit c685ef2).** Full responsive redesign of the Pi web UI,
|
||||
including two UX polish passes and multiple bug-fix rounds.
|
||||
|
||||
**What was done:**
|
||||
- Replaced the SB Admin 2-style fixed left sidebar with a purpose-built layout:
|
||||
@@ -1170,19 +1171,28 @@ client simultaneously:
|
||||
icon-only mode (`4 rem`). State persisted via `localStorage`. Logo is a functional home link.
|
||||
- **Mobile (<768 px):** no sidebar. Full-width content with a sticky **bottom tab bar** (5 items:
|
||||
Dashboard, Dashcam, History, DTC, Settings). Logo shown in the topbar.
|
||||
- Removed every placeholder element: "Placeholder button", stub dropdown menus ("Action" /
|
||||
"Another action"), inline `style` colour hacks, and meaningless card-header dropdowns.
|
||||
- Dashboard now shows **6 OBD stat cards**: OBD status, speed, RPM, coolant temp, throttle,
|
||||
fuel level — all wired to live socket events (`obd_coolant_temp`, `obd_fuel_level`,
|
||||
`obd_throttle` added to `yaris.js`).
|
||||
- GPS info section replaced with clean lat/lon display.
|
||||
- DTC page fully wired to a new **`/api/dtc`** route (returns `{mil, codes}` from
|
||||
`app_obd.get_fresh_mil()` / `get_fresh_dtc_codes()`). MIL indicator pill + DTC table
|
||||
populated from the API on load and on manual refresh.
|
||||
- Removed every placeholder element, inline style hacks, and stub dropdowns.
|
||||
- Dashboard shows **6 OBD stat cards** wired to live socket events; RPM shows `—` (not `- rpm`)
|
||||
when disconnected.
|
||||
- GPS map and coordinates merged into one card (lat/lon in card footer).
|
||||
- **Speed history chart** (Chart.js): gradient fill, 60-point rolling window, session max/avg/count,
|
||||
NOW+MAX badges in header, auto-expands on desktop, collapsed by default on mobile.
|
||||
- **Overview stats card** (new `/api/stats` endpoint): trips, total km, drive time, all-time max
|
||||
speed, videos on Pi, active DTC count (green/red) — displayed in a 3-column bottom row alongside
|
||||
GPS and speed history.
|
||||
- DTC page fully wired to `/api/dtc` (MIL indicator + table, live refresh).
|
||||
- `yaris.css` completely rewritten: CSS custom properties, sidebar, bottom nav, OBD cards,
|
||||
`border-start-*` utilities.
|
||||
- `theme.js` rewritten: localStorage-backed collapse toggle; no Bootstrap Collapse dependency.
|
||||
- All 63 tests still pass. Verified on Pi at both 390×844 (mobile) and 1280×800 (desktop).
|
||||
`border-start-*` utilities, mobile padding fix (removed Bootstrap `py-4 !important` conflict).
|
||||
- `theme.js` rewritten: localStorage-backed collapse toggle.
|
||||
- **Dashcam mobile**: thumbnail/size/date/upload columns hidden on mobile; action buttons icon-only
|
||||
(`<i>` only, no text); `data_table` macro supports optional column `class`; action buttons wrapped
|
||||
in `<div class="data-list-actions">` inside `<td>` (fixes desktop row layout).
|
||||
- **Trip history mobile**: date shortened to `"9 Aug 18:00"` on <768 px; imperial units wrapped in
|
||||
`d-none d-sm-inline` spans; Replay button icon-only (`▶`).
|
||||
- **Notification badge**: repositioned with `top/right` CSS offset (was clipped by `translate-middle`).
|
||||
- Footer updated to `© vroom vroom yaris de course 2023`.
|
||||
- Synthetic test trip in DB: 50 points, Old Port → Plateau Montreal, 3 km, 8 min, 43.5 km/h max.
|
||||
- All 63 tests pass. Verified on Pi at 390×844 (mobile) and 1280×800 (desktop).
|
||||
|
||||
### Phase 24: Remote trip + dashcam portal with shared web UI — 🚧 PLANNED
|
||||
**Added 2026-08-09; intentionally scheduled after Phase 23.** Phase 23 first establishes the final
|
||||
|
||||
@@ -24,9 +24,11 @@ i have a dream
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Screenshot
|
||||
## Screenshots
|
||||
|
||||

|
||||
Dashboard — mobile (390 px) and desktop (1280 px):
|
||||
|
||||

|
||||
|
||||
## Features
|
||||
|
||||
@@ -101,12 +103,12 @@ For the remote server (receives trip logs + dashcam uploads), see [server/README
|
||||
|
||||
## Project status
|
||||
|
||||
This project was revived after a couple of years on the shelf. Phases 1-13 and 15-20 are complete:
|
||||
real GNSS, hardened OBD support, offline maps/UI, automatic WiFi hotspot switching, local logging,
|
||||
dashcam import, resumable remote upload, trip history/replay, deployment, and the shared UI
|
||||
foundation are implemented.
|
||||
The pipeline has been exercised on the real Pi and dashcam, including a complete 28GB import and
|
||||
remote upload. Actual OBD PID availability still needs the first in-car test.
|
||||
Phases 1–13, 15–23 are complete. The full responsive web UI redesign (Phase 23) is done:
|
||||
desktop sidebar with collapse, mobile bottom tab bar, 6 live OBD stat cards, Overview stats
|
||||
card (trips, distance, drive time, top speed, video count, active DTC), merged GPS+coords card,
|
||||
reworked speed history chart (gradient, rolling window, session stats, auto-expand on desktop),
|
||||
collapsible dashcam sections with mobile-friendly icon-only action buttons, compact trip history
|
||||
with short mobile date format and icon-only Replay button, and live-wired DTC page.
|
||||
|
||||
Phase 14 is partially complete: the Pi's hardware watchdog is deployed and reboot-verified.
|
||||
Read-only-root storage hardening is deferred until persistent storage is moved off the SD root
|
||||
@@ -114,18 +116,9 @@ partition, and clean shutdown still needs delayed-power or ignition-sense hardwa
|
||||
|
||||
The browser-based phone relay was removed after real-world testing confirmed that mobile browsers
|
||||
cannot reliably use the Pi's WiFi and cellular data simultaneously. A native Android companion is
|
||||
planned later instead. The next roadmap work is settings, followed by a final UI polish pass.
|
||||
After the redesign, the same interface will become a secure remote trip portal backed by the
|
||||
self-hosted server, including trip replay and browsing/playing/downloading archived dashcam videos,
|
||||
with clear Local Pi/Remote Server labeling and hardware-only Pi sections omitted remotely. Full
|
||||
phase history, verification notes, and current scope live in
|
||||
[PLAN.md](./PLAN.md).
|
||||
planned later instead.
|
||||
|
||||
A temporary, removable real-vehicle compatibility test in the 2013 Yaris precedes the final
|
||||
low-priority Android phase; bench and synthetic verification alone are not treated as
|
||||
ready-to-install sign-off. Permanent installation is owner-handled and is not a roadmap phase.
|
||||
|
||||
The local Web UI also includes a Settings page for safe runtime configuration: dashcam uploads,
|
||||
The local Web UI includes a Settings page for safe runtime configuration: dashcam uploads,
|
||||
uploaded-video retention, cellular APN fallback, optional ntfy delivery, and alert thresholds.
|
||||
Notification secrets are write-only in the browser API, and network credentials that could lock
|
||||
the Pi out remain SSH/file-managed. When cellular is configured, small ntfy notifications use the
|
||||
@@ -134,7 +127,9 @@ still needs real-SIM/carrier verification.
|
||||
|
||||
The Pi can also join a configured phone hotspot for outbound internet when no SIM is available,
|
||||
including trip synchronization and WiFi dashcam uploads, with automatic recovery to home WiFi or
|
||||
the Pi-hosted local hotspot. Phone credentials are write-only in the Web UI and stored in a
|
||||
root-only NetworkManager profile. Real Pixel testing proved cold boot, reconnect/fallback, server
|
||||
tracking, and chunked video upload; a 1400-byte phone-profile MTU was required for reliable
|
||||
tethered TLS uploads.
|
||||
the Pi-hosted local hotspot.
|
||||
|
||||
A temporary, removable real-vehicle compatibility test in the 2013 Yaris (Phase 25) precedes the
|
||||
final low-priority Android phase (Phase 26). Permanent installation is owner-handled and is not a
|
||||
roadmap phase. Full phase history, verification notes, and current scope live in
|
||||
[PLAN.md](./PLAN.md).
|
||||
|
||||
Reference in New Issue
Block a user