Add lap timer UI controls page

angular-client/src/api/lap-timer.api.ts

@@ -0,0 +1,17 @@
+import { urls } from './urls';
+
+export const startLap = (): Promise<Response> => {
+  return fetch(urls.startLap(), { method: 'POST' });
+};
+
+export const pauseLap = (): Promise<Response> => {
+  return fetch(urls.pauseLap(), { method: 'POST' });
+};
+
+export const stopLap = (): Promise<Response> => {
+  return fetch(urls.stopLap(), { method: 'POST' });
+};
+
+export const getLaps = (): Promise<Response> => {
+  return fetch(urls.getLaps());
+};

angular-client/src/api/urls.ts

@@ -35,6 +35,12 @@ const updateVideos = () => `${getAllVideos()}/update`;
 const carCommandConfig = (key: string, values: number[]) =>
   `${baseURL}/config/set/${key}?${values.map((value) => `data=${value}`).join('&')}`;
 
+/* Lap Timer */
+const startLap = () => `${baseURL}/lap-timer/start`;
+const pauseLap = () => `${baseURL}/lap-timer/pause`;
+const stopLap = () => `${baseURL}/lap-timer/stop`;
+const getLaps = () => `${baseURL}/lap-timer/laps`;
+
 /* Authentication */
 const authenticate = () => `${baseURL}/authenticate`;
 
@@ -67,6 +73,12 @@ export const urls = {
   updateVideos,
 
   carCommandConfig,
+
+  startLap,
+  pauseLap,
+  stopLap,
+  getLaps,
+
   authenticate,
 
   scyllaSettings,

angular-client/src/app/app-nav-bar/app-nav-bar.component.ts

@@ -189,6 +189,12 @@ export class AppNavBarComponent implements OnInit, OnDestroy {
       label: 'Commands',
       onClick: () => this.navigateTo(appRoutes.commandsRoute()),
       icon: 'electrical_services'
+    },
+    {
+      id: appRoutes.lapTimerRoute(),
+      label: 'Lap Timer',
+      onClick: () => this.navigateTo(appRoutes.lapTimerRoute()),
+      icon: 'timer'
     }
   ];
 

angular-client/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import EfusesPageComponent from 'src/pages/efuses-page/efuses-page.component';
 import FaultPageComponent from 'src/pages/fault-page/fault-page.component';
 import GraphPageComponent from 'src/pages/graph-page/graph-page.component';
 import LandingPageComponent from 'src/pages/landing-page/landing-page.component';
+import LapTimerPageComponent from 'src/pages/lap-timer-page/lap-timer-page.component';
 import MapComponent from 'src/pages/map/map.component';
 import { Segment } from 'src/utils/bms.utils';
 
@@ -23,6 +24,7 @@ const faultsRoute = () => `/faults`;
 const faultsGraphRoute = () => `/faults/fault-graph`;
 const commandsRoute = () => `/commands`;
 const efusesRoute = () => `/efuses`;
+const lapTimerRoute = () => `/lap-timer`;
 
 export const appRoutes = {
   landingRoute,
@@ -35,7 +37,8 @@ export const appRoutes = {
   faultsRoute,
   faultsGraphRoute,
   commandsRoute,
-  efusesRoute
+  efusesRoute,
+  lapTimerRoute
 };
 
 // Routes should be defined carefully in accordance with the appRoutes
@@ -52,7 +55,8 @@ const routes: Routes = [
   { path: 'faults/fault-graph', component: GraphPageComponent },
   { path: 'camera', component: CameraPageComponent },
   { path: 'commands', component: CarCommandComponent },
-  { path: 'efuses', component: EfusesPageComponent }
+  { path: 'efuses', component: EfusesPageComponent },
+  { path: 'lap-timer', component: LapTimerPageComponent }
 ];
 
 @NgModule({

angular-client/src/pages/lap-timer-page/lap-timer-page.component.css

@@ -0,0 +1,161 @@
+.page-grid {
+  margin: 0 16px;
+}
+.timer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+}
+.timer-display,
+.current-lap-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.timer-display {
+  gap: 4px;
+}
+.current-lap-row {
+  gap: 2px;
+}
+.time-value,
+.current-lap-time,
+.avg-lap-time,
+.stat-value,
+.lap-delta {
+  font-family: 'Roboto', monospace;
+  font-variant-numeric: tabular-nums;
+}
+.time-value {
+  font-size: 2.8rem;
+  font-weight: bold;
+  color: #fbf7f5;
+}
+.current-lap-time {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #cacaca;
+}
+.controls {
+  display: flex;
+  justify-content: center;
+}
+.control-btn {
+  border: none;
+  border-radius: 50px;
+  padding: 10px 28px;
+  font-size: 15px;
+  font-weight: bold;
+  cursor: pointer;
+  min-width: 90px;
+}
+.start-btn,
+.pause-btn,
+.stop-btn {
+  color: #fff;
+}
+.start-btn {
+  background: #1db954;
+}
+.pause-btn {
+  background: #f0a030;
+}
+.stop-btn {
+  background: #f04346;
+}
+.lap-btn,
+.reset-btn {
+  background: #3a3a3a;
+  color: #efefef;
+  border: 1px solid #555;
+}
+.session-stats,
+.lap-list-full {
+  display: flex;
+  flex-direction: column;
+}
+.session-stats {
+  gap: 8px;
+  padding: 4px 8px;
+}
+.live-big {
+  font-family: 'Roboto', monospace;
+  font-size: 2rem;
+  font-weight: bold;
+  color: #fbf7f5;
+  font-variant-numeric: tabular-nums;
+}
+.live-unit {
+  font-size: 0.85rem;
+  color: #999;
+  margin-left: 4px;
+}
+.lap-list-full {
+  width: 100%;
+}
+.lap-list-header {
+  padding: 6px 8px;
+  border-bottom: 1px solid #444;
+}
+.lap-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.lap-entry {
+  border-bottom: 1px solid #333;
+}
+.lap-row {
+  padding: 8px;
+}
+.best-lap {
+  border-left: 3px solid #1db954;
+  padding-left: 8px;
+}
+.worst-lap {
+  border-left: 3px solid #f04346;
+  padding-left: 8px;
+}
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+}
+.stat-label,
+.stat-value {
+  font-size: 13px;
+}
+.stat-label {
+  color: #888;
+}
+.stat-value {
+  color: #ccc;
+}
+.best-text {
+  color: #1db954;
+}
+.lap-time-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+.lap-delta {
+  font-size: 11px;
+}
+.delta-positive {
+  color: #f04346;
+}
+.delta-negative {
+  color: #1db954;
+}
+.avg-lap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+}
+.avg-lap-time {
+  font-size: 1rem;
+  color: #999;
+}