Enable Fetching of Logs from Timekeeper (#99)

* Initial refactoring

* Adding subscription for Cars

* Trigger the state function if it has not run the last minute

* Add API calls into main API file for cars

* Track if car is logging capable

* Button dropdown in devices list

* Allow filter on racer

* Column fixes

* Clean car option - with or without ROS logs

* Make notifications time out

* Embed fetching of logs in time-keeper

* Fix fetch logs button

Author: larsll

website/public/locales/en/translation.json

@@ -653,6 +653,7 @@
     "end-session.warning-message": "Discarding the race will delete the race without saving it!",
     "end-session.page-header": "Timekeeper: Submit race",
     "end-session.page-description": "Check lap information and racer details before submitting a race to the leaderboard.",
+    "end-session.fetch-logs": "Fetch logs",
     "fastest-lap": "Fastest lap",
     "lap-table.valid-header": "Valid",
     "lap-table.valid": "Yes",

website/src/pages/timekeeper/pages/raceFinishPage.jsx

@@ -6,12 +6,14 @@ import {
   Header,
   Modal,
   SpaceBetween,
+  ToggleButton,
 } from '@cloudscape-design/components';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RaceTypeEnum } from '../../../admin/events/support-functions/raceConfig';
 import { SimpleHelpPanelLayout } from '../../../components/help-panels/simple-help-panel';
 import { PageLayout } from '../../../components/pageLayout';
+import { useCarCmdApi } from '../../../hooks/useCarsApi';
 import useMutation from '../../../hooks/useMutation';
 import { useStore } from '../../../store/store';
 import { FastestAverageLapTable } from '../components/fastesAverageLapTable';
@@ -26,12 +28,16 @@ export const RaceFinishPage = ({
   raceConfig,
   onAction,
   onNext,
+  startTime,
+  fetchLogsEnable,
 }) => {
   const { t } = useTranslation(['translation', 'help-admin-timekeeper-race-finish']);
+  const { carFetchLogs } = useCarCmdApi();
   const [buttonsIsDisabled, SetButtonsIsDisabled] = useState(false);
   const [sendMutation, loading, errorMessage, data] = useMutation();
   const [warningModalVisible, setWarningModalVisible] = useState(false);
-  const [, dispatch] = useStore();
+  const [state, dispatch] = useStore();
+  const [fetchLogs, setFetchLogs] = React.useState(fetchLogsEnable);
   const messageDisplayTime = 4000;
   const notificationId = '';
 
@@ -44,7 +50,7 @@ export const RaceFinishPage = ({
         onNext();
       }, messageDisplayTime);
     }
-  }, [errorMessage, loading]);
+  }, [errorMessage, loading, data, dispatch, notificationId, onNext]);
 
   const submitRaceHandler = async () => {
     SetButtonsIsDisabled(true);
@@ -62,6 +68,27 @@ export const RaceFinishPage = ({
       raceStatus: 'RACE_SUBMITTED',
     });
     sendMutation('addRace', { ...raceInfo });
+
+    if (fetchLogs) {
+      const uniqueCars = new Set();
+      raceInfo.laps.forEach((lap) => {
+        const car = state.cars.cars.find((car) => {
+          return car.ComputerName === lap.carName && car.LoggingCapable;
+        });
+        if (car) {
+          uniqueCars.add(car);
+        }
+      });
+
+      console.debug(Array.from(uniqueCars));
+
+      carFetchLogs(
+        uniqueCars,
+        { eventId: raceInfo.eventId, eventName: raceConfig.eventName },
+        new Date(startTime.getTime()).toISOString(),
+        raceInfo.username
+      );
+    }
   };
 
   const discardRaceHandler = () => {
@@ -137,6 +164,15 @@ export const RaceFinishPage = ({
   const actionButtons = (
     <Box float="right">
       <SpaceBetween direction="horizontal" size="xs">
+        <ToggleButton
+          onChange={({ detail }) => setFetchLogs(detail.pressed)}
+          pressed={fetchLogs}
+          disabled={!fetchLogsEnable}
+          iconName="upload"
+          pressedIconName="upload"
+        >
+          {t('timekeeper.end-session.fetch-logs')}
+        </ToggleButton>
         <Button
           variant="link"
           disabled={buttonsIsDisabled}

website/src/pages/timekeeper/pages/raceFinishPageLite.jsx

@@ -6,6 +6,7 @@ import {
   Header,
   Modal,
   SpaceBetween,
+  Toggle,
 } from '@cloudscape-design/components';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,12 +21,13 @@ export const RaceFinishPage = ({
   fastestAverageLap = [],
   raceConfig,
   onAction,
-  onNext,
-  submitRaceHandler,
-  discardRaceHandler
+  discardRaceHandler,
+  fetchLogsEnable,
+  fetchLogs,
+  setFetchLogs,
 }) => {
   const { t } = useTranslation(['translation', 'help-admin-timekeeper-race-finish']);
-  const [buttonsIsDisabled, SetButtonsIsDisabled] = useState(false);
+  const [buttonsIsDisabled] = useState(false);
   const [warningModalVisible, setWarningModalVisible] = useState(false);
 
   const raceInfoPanel = (
@@ -47,6 +49,14 @@ export const RaceFinishPage = ({
           <Header variant="h3">{t('timekeeper.end-session.raced-by-proxy')}</Header>
           {raceInfo.racedByProxy ? t('common.yes') : t('common.no')}
         </Box>
+        <Box>
+          <Header variant="h3">{t('timekeeper.end-session.fetch-logs')}</Header>
+          <Toggle
+            onChange={({ detail }) => setFetchLogs(detail.checked)}
+            checked={fetchLogs}
+            disabled={!fetchLogsEnable}
+          />
+        </Box>
       </SpaceBetween>
     </Container>
   );

website/src/pages/timekeeper/pages/racePage.jsx

@@ -7,7 +7,7 @@ import {
   Header,
   Modal,
   Select,
-  SpaceBetween
+  SpaceBetween,
 } from '@cloudscape-design/components';
 import { useMachine } from '@xstate/react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -37,6 +37,7 @@ import styles from './racePage.module.css';
 export const RacePage = ({
   raceInfo,
   setRaceInfo,
+  setStartTime,
   fastestLap,
   fastestAverageLap,
   raceConfig,
@@ -59,7 +60,7 @@ export const RacePage = ({
   const [btnUndoFalseFinish, setBtnUndoFalseFinish] = useState(true);
   const [btnEndRace, setBtnEndRace] = useState(false);
   const [btnStartRace, setBtnStartRace] = useState(false);
-  const [currentCar, setCurrentCar] = useState(defaultCar)
+  const [currentCar, setCurrentCar] = useState(defaultCar);
 
   const [
     carResetCounter,
@@ -91,6 +92,7 @@ export const RacePage = ({
         setBtnStartRace(true);
       },
       startTimer: () => {
+        setStartTime(new Date());
         setStartButtonText(t('timekeeper.pause-race'));
         startTimers();
         // Buttons
@@ -317,12 +319,15 @@ export const RacePage = ({
                 <span>
                   <Header variant="h5">{t('timekeeper.current-car')}:</Header>
                   <Select
-                    selectedOption={{ label: currentCar.ComputerName, value: currentCar.Computername }}
+                    selectedOption={{
+                      label: currentCar.ComputerName,
+                      value: currentCar.Computername,
+                    }}
                     onChange={({ detail }) => {
-                      setCurrentCar(detail.selectedOption.value)
+                      setCurrentCar(detail.selectedOption.value);
                     }}
-                    options={cars.map(car => {
-                        return { label: car['ComputerName'], value: car }
+                    options={cars.map((car) => {
+                      return { label: car['ComputerName'], value: car };
                     })}
                   />
                 </span>

website/src/pages/timekeeper/pages/racePageLite.jsx

@@ -39,6 +39,7 @@ export const RacePage = ({
   raceConfig,
   onNext,
   selectedCar,
+  setStartTime,
 }) => {
   const { t } = useTranslation(['translation', 'help-admin-timekeeper-race-page']);
   const [state] = useStore();
@@ -57,7 +58,7 @@ export const RacePage = ({
   const [btnUndoFalseFinish, setBtnUndoFalseFinish] = useState(true);
   const [btnEndRace, setBtnEndRace] = useState(false);
   const [btnStartRace, setBtnStartRace] = useState(false);
-  const [currentCar, setCurrentCar] = useState(selectedCar || defaultCar)
+  const [currentCar, setCurrentCar] = useState(selectedCar || defaultCar);
 
   const [
     carResetCounter,
@@ -90,6 +91,7 @@ export const RacePage = ({
       },
       startTimer: () => {
         setStartButtonText(t('timekeeper.pause-race'));
+        setStartTime(new Date());
         startTimers();
         // Buttons
         toggleBtnState(false);
@@ -302,12 +304,15 @@ export const RacePage = ({
                 <span>
                   <Header variant="h5">{t('timekeeper.current-car')}:</Header>
                   <Select
-                    selectedOption={{ label: currentCar.ComputerName, value: currentCar.Computername }}
+                    selectedOption={{
+                      label: currentCar.ComputerName,
+                      value: currentCar.Computername,
+                    }}
                     onChange={({ detail }) => {
-                      setCurrentCar(detail.selectedOption.value)
+                      setCurrentCar(detail.selectedOption.value);
                     }}
-                    options={cars.map(car => {
-                        return { label: car['ComputerName'], value: car }
+                    options={cars.map((car) => {
+                      return { label: car['ComputerName'], value: car };
                     })}
                   />
                 </span>

website/src/pages/timekeeper/timeKeeper.jsx

@@ -15,12 +15,16 @@ export const Timekeeper = () => {
   const [activeStepIndex, setActiveStepIndex] = useLocalStorage('DREM-timekeeper-state', 0);
   const [raceConfig, setRaceConfig] = useLocalStorage('DREM-timekeeper-race-config', {});
   const [race, setRace] = useLocalStorage('DREM-timekeeper-current-race', defaultRace);
-  const [fastestLap, SetFastestLap] = useState([]);
+  const [fetchLogsEnable, setFetchLogsEnable] = useState(false);
+  const [fastestLap, setFastestLap] = useState([]);
   const [fastestAverageLap, setFastestAverageLap] = useState([]);
+  const [startTime, setStartTime] = useState(() => {
+    new Date();
+  });
   const selectedEvent = useSelectedEventContext();
   const selectedTrack = useSelectedTrackContext();
 
-  const [, dispatch] = useStore();
+  const [state, dispatch] = useStore();
   // change event info and race config when a user select another event
   useEffect(() => {
     if (selectedEvent.eventId !== race.eventId) {
@@ -31,7 +35,8 @@ export const Timekeeper = () => {
       const modifiedRace = { ...race, eventId: selectedEvent.eventId };
       setRace(modifiedRace);
     }
-  }, [selectedEvent, selectedTrack, race, setRace, setRaceConfig]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEvent, selectedTrack]);
 
   // Reset the timekeeper when navigating away from the timekeeper
   useEffect(() => {
@@ -40,6 +45,7 @@ export const Timekeeper = () => {
       setActiveStepIndex(0);
       setRace(defaultRace);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -65,12 +71,26 @@ export const Timekeeper = () => {
         const obj = validLaps.find((o) => {
           return o.time === res;
         });
-        SetFastestLap([obj]);
+        setFastestLap([obj]);
+        // Find if any car is able to log
+        if (!fetchLogsEnable) {
+          validLaps.some((lap) => {
+            const car = state.cars.cars.find((car) => {
+              return car.ComputerName === lap.carName && car.LoggingCapable;
+            });
+            if (car) {
+              setFetchLogsEnable(true);
+              return true;
+            } else {
+              return false;
+            }
+          });
+        }
       } else {
-        SetFastestLap([]);
+        setFastestLap([]);
       }
     } else {
-      SetFastestLap([]);
+      setFastestLap([]);
     }
 
     race.averageLaps = getAverageWindows(race.laps, raceConfig.averageLapsWindow);
@@ -82,6 +102,7 @@ export const Timekeeper = () => {
     } else {
       setFastestAverageLap([]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [race.laps]);
 
   // handlers functions
@@ -115,7 +136,7 @@ export const Timekeeper = () => {
   const resetRacehandler = () => {
     setRace(defaultRace);
     setRaceConfig({});
-    SetFastestLap([]);
+    setFastestLap([]);
     setFastestAverageLap([]);
 
     setActiveStepIndex(0);
@@ -135,6 +156,7 @@ export const Timekeeper = () => {
             fastestLap={fastestLap}
             fastestAverageLap={fastestAverageLap}
             raceConfig={raceConfig}
+            setStartTime={setStartTime}
             onNext={raceIsDoneHandler}
           />
         );
@@ -149,6 +171,8 @@ export const Timekeeper = () => {
             raceConfig={raceConfig}
             onAction={actionHandler}
             onNext={resetRacehandler}
+            startTime={startTime}
+            fetchLogsEnable={fetchLogsEnable}
           />
         );
         break;