From d50a9f3c1b5f89555a6bd8966df169a17c970da4 Mon Sep 17 00:00:00 2001 From: mpapenbr Date: Sun, 6 Mar 2022 00:03:54 +0100 Subject: [PATCH] feat(gui): ordering of car entries in filter (num vs race position) in stints, pitstops --- src/components/nivo/carPitstops.tsx | 6 ++-- src/components/nivo/carStints.tsx | 6 ++-- src/container/CarPitstopsContainer.tsx | 39 +++++++++++++++++++++---- src/container/CarStintsContainer.tsx | 40 +++++++++++++++++++++----- 4 files changed, 72 insertions(+), 19 deletions(-) diff --git a/src/components/nivo/carPitstops.tsx b/src/components/nivo/carPitstops.tsx index 07ce99e0..62d54891 100644 --- 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 = (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 = (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 index d8b382fa..c6138a3d 100644 --- 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 = (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 = (
diff --git a/src/container/CarPitstopsContainer.tsx b/src/container/CarPitstopsContainer.tsx index 28741f0f..8e319251 100644 --- 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 index d5ee8cfa..718e79e5 100644 --- 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 })); } };