feat(gui): ordering of car entries in filter (num vs race position) i…

…n stints, pitstops
mpapenbr · Mar 6, 2022 · d50a9f3 · d50a9f3
1 parent ff12d7a
commit d50a9f3
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 19 deletions.
diff --git a/src/components/nivo/carPitstops.tsx b/src/components/nivo/carPitstops.tsx
@@ -3,7 +3,7 @@ import { Empty, Select } from "antd";
 import _ from "lodash";
 import React from "react";
 import { ICarPitInfo, IPitInfo } from "../../stores/wamp/types";
-import { secAsHHMMSS, secAsMMSS, sortCarNumberStr } from "../../utils/output";
+import { secAsHHMMSS, secAsMMSS } from "../../utils/output";
 
 const { Option } = Select;
 
@@ -18,7 +18,7 @@ const CarPitstopsNivo: React.FC<MyProps> = (props: MyProps) => {
   // const carPits = useSelector((state: ApplicationState) => state.raceData.carPits);
   // const uiSettings = useSelector((state: ApplicationState) => state.userSettings.pitstops);
 
-  const carOrder = [...props.showCars].sort(sortCarNumberStr).reverse();
+  const carOrder = [...props.showCars].reverse(); //.sort(sortCarNumberStr).reverse();
 
   const numEntries = (item: ICarPitInfo) => item.history.length + (item.current.isCurrentPitstop ? 1 : 0);
   const maxPitstops = props.carPits.reduce((a, b) => (numEntries(b) > a ? numEntries(b) : a), 0);
@@ -45,7 +45,7 @@ const CarPitstopsNivo: React.FC<MyProps> = (props: MyProps) => {
     }
     return { ...work };
   });
-  console.log(pitData);
+
   const guessNumToDraw = props.carPits
     .filter((v) => props.showCars.includes(v.carNum))
     .reduce((prev, cur) => {

diff --git a/src/components/nivo/carStints.tsx b/src/components/nivo/carStints.tsx
@@ -3,7 +3,7 @@ import { Empty } from "antd";
 import _ from "lodash";
 import React from "react";
 import { ICarInfo, ICarStintInfo, IStintInfo } from "../../stores/wamp/types";
-import { secAsHHMMSS, secAsMMSS, sortCarNumberStr } from "../../utils/output";
+import { secAsHHMMSS, secAsMMSS } from "../../utils/output";
 
 interface MyProps {
   carStints: ICarStintInfo[];
@@ -12,7 +12,7 @@ interface MyProps {
   showAsLabel: string;
 }
 const CarStintsNivo: React.FC<MyProps> = (props: MyProps) => {
-  const carOrder = [...props.showCars].sort(sortCarNumberStr).reverse();
+  const carOrder = [...props.showCars].reverse();
   const numEntries = (item: ICarStintInfo) => item.history.length + (item.current.isCurrentStint ? 1 : 0);
   const maxStints = props.carStints.reduce((a, b) => (numEntries(b) > a ? numEntries(b) : a), 0);
 
@@ -120,7 +120,7 @@ value: 77.66666666553647
     // indexScale: {type: "band", round:true},
   };
 
-  console.log(guessNumToDraw);
+  // console.log(guessNumToDraw);
   const calcHeight = Math.min(1200, Math.max(150, carOrder.length * 30));
   const InternalGraph = (
     <div style={{ height: `${calcHeight}px` }}>

diff --git a/src/container/CarPitstopsContainer.tsx b/src/container/CarPitstopsContainer.tsx
@@ -3,10 +3,16 @@ import { Button, Col, Popover, Row } from "antd";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import CarFilter from "../components/live/carFilter";
-import { collectCarsByCarClassFilter, processCarClassSelectionNew } from "../components/live/util";
+import {
+  collectCarsByCarClassFilter,
+  orderedCarNumsByPosition,
+  processCarClassSelectionNew,
+  sortedSelectableCars,
+} from "../components/live/util";
 import CarPitstopsNivo from "../components/nivo/carPitstops";
 import PitstopControl from "../components/pitstopControl";
 import { ApplicationState } from "../stores";
+import { ICarBaseData } from "../stores/racedata/types";
 import { globalSettings, pitstopsSettings } from "../stores/ui/actions";
 
 export const CarPitstopsContainer: React.FC = () => {
@@ -16,11 +22,26 @@ export const CarPitstopsContainer: React.FC = () => {
   const userSettings = useSelector((state: ApplicationState) => state.userSettings.pitstops);
   const stateGlobalSettings = useSelector((state: ApplicationState) => state.userSettings.global);
 
+  const stateCarManifest = useSelector((state: ApplicationState) => state.wamp.data.manifests.car);
+  const raceOrder = useSelector((state: ApplicationState) => state.raceData.classification);
+  const createSelectableCars = (cars: ICarBaseData[]): ICarBaseData[] => {
+    return sortedSelectableCars(cars, stateGlobalSettings.filterOrderByPosition, () =>
+      orderedCarNumsByPosition(raceOrder, stateCarManifest)
+    );
+  };
+  const orderedShowCars = (carNums: string[]): string[] => {
+    return createSelectableCars(cars)
+      .filter((c) => carNums.includes(c.carNum))
+      .map((c) => c.carNum);
+  };
   const selectSettings = () => {
     if (stateGlobalSettings.syncSelection) {
-      return { showCars: stateGlobalSettings.showCars, filterCarClasses: stateGlobalSettings.filterCarClasses };
+      return {
+        showCars: orderedShowCars(stateGlobalSettings.showCars),
+        filterCarClasses: stateGlobalSettings.filterCarClasses,
+      };
     } else {
-      return { showCars: userSettings.showCars, filterCarClasses: userSettings.filterCarClasses };
+      return { showCars: orderedShowCars(userSettings.showCars), filterCarClasses: userSettings.filterCarClasses };
     }
   };
   const { showCars, filterCarClasses } = selectSettings();
@@ -33,15 +54,21 @@ export const CarPitstopsContainer: React.FC = () => {
       currentShowCars: showCars,
       newSelection: values,
     });
+
+    const sortedSelectabled = createSelectableCars(collectCarsByCarClassFilter(cars, values));
+
+    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => newShowcars.includes(carNum));
+
     const curSettings = {
       ...userSettings,
       filterCarClasses: values,
-      showCars: newShowcars,
-      selectableCars: collectCarsByCarClassFilter(cars, values),
+      showCars: reorderedShowCars,
+      selectableCars: sortedSelectabled,
     };
+    // const curSettings = { ...userSettings, filterCarClasses: values };
     dispatch(pitstopsSettings(curSettings));
     if (stateGlobalSettings.syncSelection) {
-      dispatch(globalSettings({ ...stateGlobalSettings, showCars: newShowcars, filterCarClasses: values }));
+      dispatch(globalSettings({ ...stateGlobalSettings, showCars: reorderedShowCars, filterCarClasses: values }));
     }
   };
 

diff --git a/src/container/CarStintsContainer.tsx b/src/container/CarStintsContainer.tsx
@@ -2,9 +2,15 @@ import { Col, Radio, RadioChangeEvent, Row } from "antd";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import CarFilter from "../components/live/carFilter";
-import { collectCarsByCarClassFilter, processCarClassSelectionNew } from "../components/live/util";
+import {
+  collectCarsByCarClassFilter,
+  orderedCarNumsByPosition,
+  processCarClassSelectionNew,
+  sortedSelectableCars,
+} from "../components/live/util";
 import CarStintsNivo from "../components/nivo/carStints";
 import { ApplicationState } from "../stores";
+import { ICarBaseData } from "../stores/racedata/types";
 import { globalSettings, stintsSettings } from "../stores/ui/actions";
 
 export const CarStintsContainer: React.FC = () => {
@@ -15,11 +21,26 @@ export const CarStintsContainer: React.FC = () => {
   const userSettings = useSelector((state: ApplicationState) => state.userSettings.stints);
   const stateGlobalSettings = useSelector((state: ApplicationState) => state.userSettings.global);
 
+  const stateCarManifest = useSelector((state: ApplicationState) => state.wamp.data.manifests.car);
+  const raceOrder = useSelector((state: ApplicationState) => state.raceData.classification);
+  const createSelectableCars = (cars: ICarBaseData[]): ICarBaseData[] => {
+    return sortedSelectableCars(cars, stateGlobalSettings.filterOrderByPosition, () =>
+      orderedCarNumsByPosition(raceOrder, stateCarManifest)
+    );
+  };
+  const orderedShowCars = (carNums: string[]): string[] => {
+    return createSelectableCars(cars)
+      .filter((c) => carNums.includes(c.carNum))
+      .map((c) => c.carNum);
+  };
   const selectSettings = () => {
     if (stateGlobalSettings.syncSelection) {
-      return { showCars: stateGlobalSettings.showCars, filterCarClasses: stateGlobalSettings.filterCarClasses };
+      return {
+        showCars: orderedShowCars(stateGlobalSettings.showCars),
+        filterCarClasses: stateGlobalSettings.filterCarClasses,
+      };
     } else {
-      return { showCars: userSettings.showCars, filterCarClasses: userSettings.filterCarClasses };
+      return { showCars: orderedShowCars(userSettings.showCars), filterCarClasses: userSettings.filterCarClasses };
     }
   };
   const { showCars, filterCarClasses } = selectSettings();
@@ -32,16 +53,21 @@ export const CarStintsContainer: React.FC = () => {
       currentShowCars: showCars,
       newSelection: values,
     });
+
+    const sortedSelectabled = createSelectableCars(collectCarsByCarClassFilter(cars, values));
+
+    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => newShowcars.includes(carNum));
+
     const curSettings = {
       ...userSettings,
       filterCarClasses: values,
-      showCars: newShowcars,
-      selectableCars: collectCarsByCarClassFilter(cars, values),
+      showCars: reorderedShowCars,
+      selectableCars: sortedSelectabled,
     };
+    // const curSettings = { ...userSettings, filterCarClasses: values };
     dispatch(stintsSettings(curSettings));
-
     if (stateGlobalSettings.syncSelection) {
-      dispatch(globalSettings({ ...stateGlobalSettings, showCars: newShowcars, filterCarClasses: values }));
+      dispatch(globalSettings({ ...stateGlobalSettings, showCars: reorderedShowCars, filterCarClasses: values }));
     }
   };