display time according to user setting

src/components/live/util.ts

@@ -7,11 +7,11 @@ import {
   CarStint,
   StintInfo,
 } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-ts/iracelog/analysis/v1/car_stint_pb";
-
 import _ from "lodash";
 import { Comparator } from "semver";
+import { SessionState } from "../../stores";
 import { ICarBaseData as ICarBaseDataGrpc } from "../../stores/grpc/slices/availableCarsSlice";
-import { sortCarNumberStr } from "../../utils/output";
+import { secAsHHMMSS, sortCarNumberStr } from "../../utils/output";
 
 export interface ICarFilterData {
   carNum: string;
@@ -177,3 +177,23 @@ export const isInSelectedRange = (si: StintInfo, range: [number, number]): boole
 export const supportsCarData = (raceloggerVersion: string): boolean => {
   return new Comparator(">=0.4.4").test(raceloggerVersion);
 };
+
+export const hocDisplayTimeByUserSettings =
+  (sessionData: SessionState, timeMode: string, formatter?: (d: number) => string) =>
+  (d: number): string => {
+    const toAdd = sessionData.session.timeOfDay - sessionData.session.sessionTime;
+    const myFormatter = formatter ?? secAsHHMMSS;
+    switch (timeMode) {
+      case "sim":
+        return myFormatter(d + toAdd);
+      case "real":
+        const ref: Date = sessionData.recordDate;
+        // // JS hell when calculating days. In order to use own formatter we need the seconds.
+        // // Note: TZ-offset -60 on GMT+0100 ;)
+        const val = myFormatter((ref.getTime() / 1000 + d - ref.getTimezoneOffset() * 60) % 86400);
+        return val;
+      case "session":
+      default:
+        return myFormatter(d);
+    }
+  };

src/components/nivo/carPitstops.tsx

@@ -7,7 +7,7 @@ import {
   CarPit,
   PitInfo,
 } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-ts/iracelog/analysis/v1/car_pit_pb";
-import { secAsHHMMSS, secAsMMSS } from "../../utils/output";
+import { secAsMMSS } from "../../utils/output";
 
 const { Option } = Select;
 const { useToken } = theme;
@@ -16,6 +16,7 @@ interface MyProps {
   showCars: string[];
   hideLongPitstops: boolean;
   hideThreshold: number;
+  rangeTimeFormatter: (sec: number) => string;
 }
 const CarPitstopsNivo: React.FC<MyProps> = (props: MyProps) => {
   // const cars = useSelector((state: ApplicationState) => state.raceData.availableCars);
@@ -83,7 +84,7 @@ value: 77.66666666553647
           #{pitInfo[pitIdx].carNum} {data.id}
         </strong>
         <br />
-        Lap {pitInfo[pitIdx].lapEnter} at {secAsHHMMSS(pitInfo[pitIdx].enterTime)}
+        Lap {pitInfo[pitIdx].lapEnter} at {props.rangeTimeFormatter(pitInfo[pitIdx].enterTime)}
       </div>
     );
   };

src/components/nivo/carStints.tsx

@@ -8,14 +8,15 @@ import {
   CarStint,
   StintInfo,
 } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-ts/iracelog/analysis/v1/car_stint_pb";
-import { secAsHHMMSS, secAsMMSS } from "../../utils/output";
+import { secAsMMSS } from "../../utils/output";
 
 const { useToken } = theme;
 interface MyProps {
   carStints: CarStint[];
   carOccs: CarOccupancy[];
   showCars: string[];
   showAsLabel: string;
+  rangeTimeFormatter: (sec: number) => string;
 }
 const CarStintsNivo: React.FC<MyProps> = (props: MyProps) => {
   const { token } = useToken();
@@ -103,7 +104,7 @@ value: 77.66666666553647
         <br />
         Lap {item.lapExit} - {item.lapEnter} ({item.lapEnter - item.lapExit + 1})
         <br />
-        {secAsHHMMSS(item.exitTime)} - {secAsHHMMSS(item.enterTime)}
+        {props.rangeTimeFormatter(item.exitTime)} - {props.rangeTimeFormatter(item.enterTime)}
       </div>
     );
   };

src/components/nivo/stintTooltip.tsx

@@ -8,8 +8,10 @@ interface MyProps {
   stintInfo: StintInfo;
   driver: string;
   avgLap?: number;
+  displayTime?: (sec: number) => string;
 }
 const StintTooltip: React.FC<MyProps> = (props: MyProps) => {
+  const dispTime = props.displayTime ?? secAsHHMMSS;
   return (
     <div className="iracelog-stint-tooltip">
       <strong>
@@ -21,7 +23,7 @@ const StintTooltip: React.FC<MyProps> = (props: MyProps) => {
       {props.stintInfo.lapEnter - props.stintInfo.lapExit + 1})
       {props.avgLap ? ` (${lapTimeString(props.avgLap)})` : ""}
       <br />
-      {secAsHHMMSS(props.stintInfo.exitTime)} - {secAsHHMMSS(props.stintInfo.enterTime)}
+      {dispTime(props.stintInfo.exitTime)} - {dispTime(props.stintInfo.enterTime)}
     </div>
   );
 };

src/components/nivo/stintsummary/stintstretch.tsx

@@ -5,7 +5,7 @@ import { Tooltip, theme } from "antd";
 import React from "react";
 import { useAppSelector } from "../../../stores";
 import { secAsMMSS } from "../../../utils/output";
-import { findDriverByStint } from "../../live/util";
+import { findDriverByStint, hocDisplayTimeByUserSettings } from "../../live/util";
 import StintTooltip from "../stintTooltip";
 import { CombinedStintData } from "./commons";
 
@@ -27,8 +27,9 @@ const { useToken } = theme;
 const StintStretch: React.FC<MyProps> = (props: MyProps) => {
   const carOccs = useAppSelector((state) => state.carOccupancies);
   const carStints = useAppSelector((state) => state.carStints);
-
   const carStint = carStints.find((v) => v.carNum === props.carNum);
+  const sessionData = useAppSelector((state) => state.session);
+  const stateGlobalSettings = useAppSelector((state) => state.userSettings.global);
   if (!props.carNum || !carStint) {
     return <></>;
     // return <Empty />;
@@ -46,6 +47,10 @@ const StintStretch: React.FC<MyProps> = (props: MyProps) => {
   const textHeight = Math.min(12, barHeight);
   const carNumLabel = props.showCarNum ? 40 : 0;
 
+  const displayTimeFromSettings = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+  );
   const step = (w - carNumLabel) / (maxTime - minTime);
   // console.log(`min: ${minTime}, max: ${maxTime}, step: ${step}`);
   const InternalGraph = (
@@ -98,6 +103,7 @@ const StintStretch: React.FC<MyProps> = (props: MyProps) => {
                       driver={
                         findDriverByStint(currentCarInfo, c.data as StintInfo)?.name ?? "n.a."
                       }
+                      displayTime={displayTimeFromSettings}
                     />
                   }
                 >

src/components/stintRanking/rankingSvg.tsx

@@ -3,9 +3,9 @@ import { StintInfo } from "@buf/mpapenbr_iracelog.community_timostamm-protobuf-t
 import { Empty, Tooltip, theme } from "antd";
 import _ from "lodash";
 import { useAppSelector } from "../../stores";
-import { lapTimeString } from "../../utils/output";
+import { lapTimeString, secAsHHMM, secAsHHMMSS } from "../../utils/output";
 import { boxPlotDataFor } from "../live/statsutil";
-import { findDriverByStint } from "../live/util";
+import { findDriverByStint, hocDisplayTimeByUserSettings } from "../live/util";
 import StintTooltip from "../nivo/stintTooltip";
 import { ICarCombinedStintData } from "../nivo/stintsummary/commons";
 
@@ -21,7 +21,6 @@ interface MyProps {
   showCars: string[];
   hightlightCars: string[];
   toggleHighlightCar: (carNum: string) => void;
-  displayTime: (sec: number) => string;
 }
 
 interface IStintInfoExt extends StintInfo {
@@ -30,7 +29,8 @@ interface IStintInfoExt extends StintInfo {
 const { useToken } = theme;
 const StintRankingSvg: React.FC<MyProps> = (props: MyProps) => {
   const carOccs = useAppSelector((state) => state.carOccupancies);
-  const globalSettings = useAppSelector((state) => state.userSettings.globalSettings);
+  const stateGlobalSettings = useAppSelector((state) => state.userSettings.globalSettings);
+  const sessionData = useAppSelector((state) => state.session);
   const { token } = useToken();
   const width = props.width ?? 800;
   const height = props.height ?? 600;
@@ -82,6 +82,17 @@ const StintRankingSvg: React.FC<MyProps> = (props: MyProps) => {
     }
     return 1.0;
   };
+  const displayTimeX = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+    secAsHHMM,
+  );
+  const displayTimeTT = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+    secAsHHMMSS,
+  );
+
   const carRow = (carData: ICarCombinedStintData) => {
     return carData.data
       .filter((d) => d.type == "stint")
@@ -105,6 +116,7 @@ const StintRankingSvg: React.FC<MyProps> = (props: MyProps) => {
                 no={d.idx}
                 driver={findDriverByStint(currentCarInfo, d.data as StintInfo)?.name ?? "n.a."}
                 avgLap={d.avgTime}
+                displayTime={displayTimeTT}
               />
             }
           >
@@ -154,7 +166,7 @@ const StintRankingSvg: React.FC<MyProps> = (props: MyProps) => {
             textAnchor="middle"
             alignmentBaseline="hanging"
           >
-            {props.displayTime(d)}
+            {displayTimeX(d)}
           </text>
         ))}
       </g>

src/components/stintSummary.tsx

@@ -5,7 +5,7 @@ import { ColumnsType } from "antd/lib/table";
 import React from "react";
 import { useAppSelector } from "../stores";
 import { lapTimeString, secAsHHMMSS } from "../utils/output";
-import { findDriverByStint, getCarStints } from "./live/util";
+import { findDriverByStint, getCarStints, hocDisplayTimeByUserSettings } from "./live/util";
 
 interface MyProps {
   carNum?: string;
@@ -27,6 +27,8 @@ const StintSummary: React.FC<MyProps> = (props: MyProps) => {
   const carInfo = useAppSelector((state) => state.carOccupancies);
   const carStints = useAppSelector((state) => state.carStints);
   const carLaps = useAppSelector((state) => state.carLaps);
+  const sessionData = useAppSelector((state) => state.session);
+  const stateGlobalSettings = useAppSelector((state) => state.userSettings.global);
 
   const carStint = carStints.find((v) => v.carNum === props.carNum);
   if (!props.carNum || !carStint) {
@@ -92,11 +94,15 @@ const StintSummary: React.FC<MyProps> = (props: MyProps) => {
       dataIndex: "avgLapTime",
     },
   ];
+  const displayTimeFromSettings = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+  );
   const data: IStintSummary[] = getCarStints(carStints, props.carNum).map((v, idx) => ({
     no: idx + 1,
     driver: findDriverByStint(currentCarInfo, v)?.name ?? "n.a.",
-    startStint: secAsHHMMSS(v.exitTime),
-    endStint: secAsHHMMSS(v.enterTime),
+    startStint: displayTimeFromSettings(v.exitTime),
+    endStint: displayTimeFromSettings(v.enterTime),
     laps: v.numLaps,
     stintTime: secAsHHMMSS(v.stintTime),
     avgLapTime: stintAvg(v),

src/container/CarPitstopsContainer.tsx

@@ -2,6 +2,7 @@ import { SettingOutlined } from "@ant-design/icons";
 import { Button, Col, Popover, Row } from "antd";
 import * as React from "react";
 import MultiSelectCarFilter from "../components/live/multiCarSelectFilter";
+import { hocDisplayTimeByUserSettings } from "../components/live/util";
 import CarPitstopsNivo from "../components/nivo/carPitstops";
 import PitstopControl from "../components/pitstopControl";
 import { useAppDispatch, useAppSelector } from "../stores";
@@ -17,6 +18,7 @@ export const CarPitstopsContainer: React.FC = () => {
 
   const stateGlobalSettings = useAppSelector((state) => state.userSettings.global);
   const raceOrder = useAppSelector((state) => state.raceOrder);
+  const sessionData = useAppSelector((state) => state.session);
   const dispatch = useAppDispatch();
 
   const inputData: InputData = {
@@ -55,12 +57,16 @@ export const CarPitstopsContainer: React.FC = () => {
       }
     },
   };
-
+  const displayTimeFromSettings = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+  );
   const graphProps = {
     showCars: filterProps.selectedCars,
     carPits: carPits,
     hideLongPitstops: userSettings.hideLongPitstops,
     hideThreshold: userSettings.hideThreshold,
+    rangeTimeFormatter: displayTimeFromSettings,
   };
   return (
     <>

src/container/CarStintsContainer.tsx

@@ -1,6 +1,7 @@
 import { Col, Radio, RadioChangeEvent, Row } from "antd";
 import * as React from "react";
 import MultiSelectCarFilter from "../components/live/multiCarSelectFilter";
+import { hocDisplayTimeByUserSettings } from "../components/live/util";
 import CarStintsNivo from "../components/nivo/carStints";
 import { useAppDispatch, useAppSelector } from "../stores";
 import { IMultiCarSelectFilterSettings } from "../stores/grpc/slices/types";
@@ -15,6 +16,7 @@ export const CarStintsContainer: React.FC = () => {
   const carOccs = useAppSelector((state) => state.carOccupancies);
   const stateGlobalSettings = useAppSelector((state) => state.userSettings.global);
   const raceOrder = useAppSelector((state) => state.raceOrder);
+  const sessionData = useAppSelector((state) => state.session);
   const dispatch = useAppDispatch();
 
   const inputData: InputData = {
@@ -53,12 +55,16 @@ export const CarStintsContainer: React.FC = () => {
       }
     },
   };
-
+  const displayTimeFromSettings = hocDisplayTimeByUserSettings(
+    sessionData,
+    stateGlobalSettings.timeMode,
+  );
   const graphProps = {
     showCars: filterProps.selectedCars,
     carStints: carStints,
     carOccs: carOccs,
     showAsLabel: userSettings.showAsLabel,
+    rangeTimeFormatter: displayTimeFromSettings,
   };
   const onShowModeChange = (e: RadioChangeEvent) => {
     dispatch(updateStints({ ...userSettings, showAsLabel: e.target.value }));

src/container/StintRankingContainer.tsx

@@ -16,7 +16,7 @@ import {
   updateStintRankings,
 } from "../stores/grpc/slices/userSettingsSlice";
 
-import { secAsHHMM, secAsHHMMSS } from "../utils/output";
+import { secAsHHMMSS } from "../utils/output";
 import { InputData, prepareFilterData } from "./multiCarSelectFilterHelper";
 
 const { Option } = Select;
@@ -80,21 +80,7 @@ export const StintRankingContainer: React.FC = () => {
       }
     },
   };
-  const displayTimeFromSettings = (d: number) => {
-    const toAdd = sessionData.session.timeOfDay - sessionData.session.sessionTime;
-    switch (stateGlobalSettings.timeMode) {
-      case "session":
-        return secAsHHMM(d);
-      case "sim":
-        return secAsHHMM(d + toAdd);
-      case "real":
-        const ref: Date = sessionData.recordDate;
-        // // JS hell when calculating days. In order to use own formatter we need the seconds.
-        // // Note: TZ-offset -60 on GMT+0100 ;)
-        const val = secAsHHMM((ref.getTime() / 1000 + d - ref.getTimezoneOffset() * 60) % 86400);
-        return val;
-    }
-  };
+
   const filterProps = prepareFilterData(inputData);
   const props = {
     ...filterProps,
@@ -109,7 +95,6 @@ export const StintRankingContainer: React.FC = () => {
     toggleHighlightCar: (carNum: string) => {
       dispatch(toggleHighlightCar(carNum));
     },
-    displayTime: displayTimeFromSettings,
   };
 
   const carColors = assignCarColors(availableCars);
@@ -176,7 +161,6 @@ export const StintRankingContainer: React.FC = () => {
               showCars={props.selectedCars}
               hightlightCars={props.highlightCars}
               toggleHighlightCar={props.toggleHighlightCar}
-              displayTime={props.displayTime}
             />
           </Row>
           {globalWamp.currentLiveId === undefined ? (

src/stores/index.ts

@@ -74,6 +74,7 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
 });
 export type RootState = ReturnType<typeof store.getState>;
+export type SessionState = ReturnType<typeof sessionSlice.reducer>;
 export type AppDispatch = typeof store.dispatch;
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();