Skip to content

Add lap timer UI controls page#554

Draft
bracyw wants to merge 6 commits intodevelopfrom
547-lap-timer-ui-controls
Draft

Add lap timer UI controls page#554
bracyw wants to merge 6 commits intodevelopfrom
547-lap-timer-ui-controls

Conversation

@bracyw
Copy link
Copy Markdown
Collaborator

@bracyw bracyw commented Mar 29, 2026

Changes

Adds a Lap Timer page to the Angular client — a stopwatch-style interface for managing laps during field deployments. The page has start/pause/stop/lap/reset controls, live telemetry gauges (speed, battery SOC, motor temp), and a scrollable lap list with per-lap stats and delta-from-best highlighting. A root-provided service manages timer state using requestAnimationFrame for smooth sub-second updates, records telemetry snapshots per lap (avg speed, energy used, max motor temp), and persists across navigation. API calls are stubbed and fire-and-forget since the backend endpoints don't exist yet.

New files include the page component (lap-timer-page), a lap timer service, a lap timer API stub, and URL constants. Modified app-routing and the nav bar to register the route and add a nav entry.

Notes

  • Best/worst lap highlighting uses left-border color (green/red) following motorsport UI conventions
  • Grid layout uses mat-grid-list consistent with other pages
  • Telemetry subscriptions stay active during pause to avoid subscribe/unsubscribe churn
  • Component uses OnPush with signals for efficient change detection

Test Cases

  • Start timer, verify total and lap counters increment in real time
  • Pause timer, verify counters freeze; resume, verify they continue
  • Record multiple laps, verify lap list populates in reverse-chronological order
  • Stop timer, verify final partial lap is recorded and state returns to idle
  • Reset after stop, verify all laps and counters are cleared
  • Best lap gets green highlight, worst gets red; deltas show +/- from best
  • Session stats panel shows correct lap count, best time, average, and energy used
  • Edge case: hitting Lap immediately after Start (zero-duration lap) is ignored
  • Edge case: stopping with no laps recorded still works cleanly
  • Edge case: navigating away and back — timer keeps running (root service persists)

To Do

Checklist

  • All commits are tagged with the ticket number
  • No linting errors / newline at end of file warnings
  • All code follows repository-configured prettier formatting
  • No merge conflicts
  • All checks passing
  • Screenshots of UI changes
  • No package-lock.json changes (unless dependencies have changed)
  • Request reviewers & ping on Slack
  • PR is linked to the ticket

Closes #547

bracyw added 5 commits March 23, 2026 21:34
Add iPhone stopwatch-style lap timer with start/pause/stop/lap
controls, real-time timer display, and scrollable lap history.
Stub backend API endpoints for future integration.
@bracyw bracyw self-assigned this Mar 29, 2026
@bracyw bracyw marked this pull request as draft March 29, 2026 18:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Lap Timer UI Controls

1 participant