diff --git a/src/components/Cars/Status/ECUsTab.jsx b/src/components/Cars/Status/ECUsTab.jsx index b966407..276f35a 100644 --- a/src/components/Cars/Status/ECUsTab.jsx +++ b/src/components/Cars/Status/ECUsTab.jsx @@ -1,13 +1,22 @@ -import { Typography } from "@material-ui/core"; +import { + Typography, + Grid, + FormControlLabel, + Checkbox, +} from "@material-ui/core"; import clsx from "clsx"; -import React from "react"; +import React, { useState } from "react"; import { useUserContext } from "../../Contexts/UserContext"; import { VehicleProvider } from "../../Contexts/VehicleContext"; +import { useLocalStorage } from "../../useLocalStorage"; import CarECUsTable from "../../Controls/CarECUsTable"; +import SearchField from "../../Controls/SearchField"; import useStyles from "../../useStyles"; const MainForm = ({ vin }) => { + const [search, setSearch] = useLocalStorage("ECU_SEARCH", ""); + const [unique, setUnique] = useState(true); const classes = useStyles(); const { token: { @@ -15,12 +24,35 @@ const MainForm = ({ vin }) => { }, } = useUserContext(); + const handleSearch = (query) => { + setSearch(query); + }; + + const handleUnique = () => { + setUnique(unique => !unique); + } + return (
Car ECUs - + + + + } + className={classes.noWrap} + /> + + +
); }; diff --git a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap index b37ef2e..a6b0d97 100644 --- a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap +++ b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap @@ -16,6 +16,102 @@ exports[`ECUsTab Render 1`] = ` > Car ECUs +
+
+
+ +
+ +
+ +
+
+
+ +
+
@@ -264,6 +360,29 @@ exports[`ECUsTab Render 1`] = ` + + + Epoch + + + 7/14/2021 8:09:40 PM + + + 7/14/2021 8:09:40 PM + + + { throw new Error(`Get fleet vehicles error. ${result.message}`); } - const connectionsResult = await vehiclesAPI.getConnections(result.data, token) + const connectionsResult = await vehiclesAPI.getConnections({ "VINs": result.data }, token) if (result.error) { setFleetVehicles([]) throw new Error(`Get vehicles connections error. ${result.message}`); diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx index 261a2ab..ba4458d 100644 --- a/src/components/Contexts/VehicleContext.jsx +++ b/src/components/Contexts/VehicleContext.jsx @@ -35,7 +35,7 @@ export const VehicleProvider = ({ children }) => { try { if (cars.length === 0) return; const vins = cars.map((car) => car.vin); - const result = await api.getConnections(vins, token); + const result = await api.getConnections({ "VINs": vins }, token); if (result.error) { throw new Error(`Add connections error. ${result.message}`); @@ -80,7 +80,7 @@ export const VehicleProvider = ({ children }) => { const getConnections = async (vins, token) => { try { setBusy(true); - const result = await api.getConnections(vins, token); + const result = await api.getConnections({ "VINs": vins }, token); if (result.error) throw new Error(`Get connections error. ${result.message}`); return result; diff --git a/src/components/Controls/CarECUsTable/index.jsx b/src/components/Controls/CarECUsTable/index.jsx index 4c3fae0..8bc58ee 100644 --- a/src/components/Controls/CarECUsTable/index.jsx +++ b/src/components/Controls/CarECUsTable/index.jsx @@ -58,11 +58,15 @@ const tableColumns = [ id: "updated_at", label: "Updated", }, + { + id: "epoch_usec", + label: "Epoch", + }, ]; const PAGE_SIZE = "CAR_ECUS_TABLE_PAGE_SIZE"; -const CarECUsTable = ({ vin, token, classes }) => { +const CarECUsTable = ({ vin, token, classes, search, unique }) => { const [ecus, setECUs] = useState([]); const [total, setTotal] = useState(0); const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10); @@ -79,6 +83,8 @@ const CarECUsTable = ({ vin, token, classes }) => { const result = await getECUs( { vin, + search, + unique, limit: pageSize, offset: pageSize * pageIndex, order: `${orderBy} ${order}`, @@ -93,7 +99,7 @@ const CarECUsTable = ({ vin, token, classes }) => { } })(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [vin, token, pageIndex, pageSize, orderBy, order]); + }, [vin, token, pageIndex, pageSize, orderBy, order, search, unique]); const handleChangePageIndex = (event, newIndex) => { setPageIndex(newIndex); diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx index 40a9bba..7c598df 100644 --- a/src/components/useStyles.jsx +++ b/src/components/useStyles.jsx @@ -312,7 +312,13 @@ const useStyles = makeStyles((theme) => ({ display: "flex", alignItems: "center", gap: "12px", - } + }, + flex: { + display: "flex", + }, + noWrap: { + whiteSpace: "nowrap", + }, })); export default useStyles; diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js index 3dcad50..ca737c9 100644 --- a/src/services/__mocks__/vehiclesAPI.js +++ b/src/services/__mocks__/vehiclesAPI.js @@ -116,7 +116,7 @@ const vehiclesAPI = { getConnections: async (vins) => { const result = {}; - vins.forEach((vin) => { + vins.VINs.forEach((vin) => { result[vin] = true; result["2:" + vin] = false; }); diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js index fc398ce..6fe7356 100644 --- a/src/services/vehiclesAPI.js +++ b/src/services/vehiclesAPI.js @@ -41,13 +41,14 @@ const vehiclesAPI = { .catch(errorHandler), getConnections: async (vins, token) => { - const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`; + const u = `${API_ENDPOINT}/carsconnected`; return fetch(u, { - method: "GET", + method: "POST", headers: Object.assign( { "Content-Type": "application/json" }, getAuthHeaderOptions(token) ), + body: JSON.stringify(vins), }) .then(fetchRespHandler) .catch(errorHandler);