CEC-1256/CEC-1330 data logger for vehicles/fleets and details tabs for vehicles/fleets (#136)
* forms for fleet can filters * unit tests for fleet filters * removing warnings * updating regex * added fleet details page * fleet pages * smoothed out bugs * fleets done * working update, delete vehicles * finished mocks, still need snapshots and context tests * contexts done * snapshot tests * updating code smells * smells
This commit is contained in:
Drew Taylor
@@ -18,7 +18,7 @@ const renderCANFitlersTab = async () => {
|
||||
<CANFiltersTab name="US-TEST" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FleetDetailsTab Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Name
|
||||
</b>
|
||||
:
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Vehicles
|
||||
</b>
|
||||
:
|
||||
3
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Log Level
|
||||
</b>
|
||||
:
|
||||
info
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<b>
|
||||
CANBus
|
||||
</b>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Memory Buffer Size
|
||||
</b>
|
||||
:
|
||||
1
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Disk Buffer Size
|
||||
</b>
|
||||
:
|
||||
2
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Filters
|
||||
</b>
|
||||
:
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet-update?name=undefined"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"undefined\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update \\"undefined\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class=""
|
||||
href="/"
|
||||
title="Delete \\"undefined\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Delete \\"undefined\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
96
src/components/Fleets/Status/Details/index.jsx
Normal file
96
src/components/Fleets/Status/Details/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Redirect } from "react-router";
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Grid,
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import EditIcon from "@material-ui/icons/Edit"
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useUserContext } from "../../../Contexts/UserContext"
|
||||
import { useStatusContext } from "../../../Contexts/StatusContext";
|
||||
import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
|
||||
import useStyles from "../../../useStyles";
|
||||
import { logger } from "../../../../services/monitoring";
|
||||
|
||||
const MainForm = ({ name }) => {
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { fleet, getFleet, deleteFleet } = useFleetContext();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!name || !token) return;
|
||||
await getFleet(name, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
const onDelete = async () => {
|
||||
try {
|
||||
await deleteFleet(name, token);
|
||||
setMessage(`Deleted ${name}`)
|
||||
setRedirect(`/fleets`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
if (redirect && redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={12} className={classes.textCenterAlign}>
|
||||
<p><b>Name</b>: {name}</p>
|
||||
<p><b>Vehicles</b>: {fleet.vehicles ? fleet.vehicles.length : 0}</p>
|
||||
{fleet.log_level != null && (
|
||||
<p><b>Log Level</b>: {fleet.log_level}</p>
|
||||
)}
|
||||
</Grid>
|
||||
{fleet.canbus && (
|
||||
<Grid item md={12} className={classes.textCenterAlign}>
|
||||
<b>CANBus</b>
|
||||
<p><b>Enabled</b>: {fleet.canbus.enabled.toString()}</p>
|
||||
<p><b>Max Memory Buffer Size</b>: {fleet.canbus.max_mem_buffer_size ?? "Default"}</p>
|
||||
<p><b>Enabled</b>: {fleet.canbus.data_logger_enabled.toString()}</p>
|
||||
<p><b>Max Disk Buffer Size</b>: {fleet.canbus.max_disk_buffer_size ?? "Default"}</p>
|
||||
<p><b>Filters</b>: {fleet.canbus.filters ? fleet.canbus.filters.length() : 0}</p>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item md={12} className={classes.textCenterAlign}>
|
||||
<Tooltip key={`update-${name}`} title={`Update "${name}"`}>
|
||||
<Link to={`/fleet-update?name=${name}`} style={{ margin: 5 }}>
|
||||
<EditIcon aria-label={`Update "${name}"`} />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
<Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
|
||||
<Link to="#" onClick={onDelete}>
|
||||
<DeleteIcon aria-label={`Delete "${name}"`} />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
const FleetDetails = (props) => (
|
||||
<FleetProvider>
|
||||
<MainForm {...props} />
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetDetails;
|
||||
36
src/components/Fleets/Status/Details/index.test.jsx
Normal file
36
src/components/Fleets/Status/Details/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
jest.mock("../../../Contexts/FleetContext");
|
||||
jest.mock("../../../Contexts/StatusContext");
|
||||
jest.mock("../../../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetDetailsTab = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("FleetDetailsTab", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetDetailsTab();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
21
src/components/Fleets/Status/DetailsTab.jsx
Normal file
21
src/components/Fleets/Status/DetailsTab.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router";
|
||||
import clsx from "clsx";
|
||||
import { Typography } from "@material-ui/core";
|
||||
|
||||
import FleetDetails from "./Details";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const FleetDetailsTab = () => {
|
||||
const { name } = useParams();
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Typography variant="h6">Fleet Details</Typography>
|
||||
<FleetDetails name={name} classes={classes} />
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default FleetDetailsTab;
|
||||
41
src/components/Fleets/Status/DetailsTab.test.jsx
Normal file
41
src/components/Fleets/Status/DetailsTab.test.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
jest.mock("../../Contexts/FleetContext");
|
||||
jest.mock("../../Contexts/StatusContext");
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
jest.mock('@material-ui/core/utils/unstable_useId', () =>
|
||||
jest.fn().mockReturnValue('mui-test-id'),
|
||||
);
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { MemoryRouter, Route } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||
import MainForm from "./DetailsTab"
|
||||
|
||||
const renderDetailsTab = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<MemoryRouter initialEntries={['/testroute/US-TEST']}>
|
||||
<Route path="/testroute/:name">
|
||||
<MainForm name="US-TEST" />
|
||||
</Route>
|
||||
</MemoryRouter >
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("DetailsTab", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderDetailsTab();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -23,7 +23,7 @@ const renderFleetVehicleAdd = async () => {
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ const renderFleetVehiclesTable = async () => {
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ const renderVehiclesTab = async () => {
|
||||
<VehiclesTab name="US-TEST" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DetailsTab Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-h6"
|
||||
>
|
||||
Fleet Details
|
||||
</h6>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Name
|
||||
</b>
|
||||
:
|
||||
US-TEST
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Vehicles
|
||||
</b>
|
||||
:
|
||||
3
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Log Level
|
||||
</b>
|
||||
:
|
||||
info
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<b>
|
||||
CANBus
|
||||
</b>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Memory Buffer Size
|
||||
</b>
|
||||
:
|
||||
1
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Disk Buffer Size
|
||||
</b>
|
||||
:
|
||||
2
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Filters
|
||||
</b>
|
||||
:
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet-update?name=US-TEST"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"US-TEST\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update \\"US-TEST\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class=""
|
||||
href="/testroute/US-TEST"
|
||||
title="Delete \\"US-TEST\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Delete \\"US-TEST\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -41,7 +41,7 @@ exports[`FleetStatus Render 1`] = `
|
||||
<span
|
||||
class="MuiTab-wrapper"
|
||||
>
|
||||
Vehicles
|
||||
Details
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
@@ -55,6 +55,24 @@ exports[`FleetStatus Render 1`] = `
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiTab-wrapper"
|
||||
>
|
||||
Vehicles
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
aria-controls="tabpanel-2"
|
||||
aria-selected="false"
|
||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
|
||||
id="tab-2"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiTab-wrapper"
|
||||
@@ -87,7 +105,7 @@ exports[`FleetStatus Render 1`] = `
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-h6"
|
||||
>
|
||||
Vehicles
|
||||
Fleet Details
|
||||
</h6>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
@@ -99,302 +117,111 @@ exports[`FleetStatus Render 1`] = `
|
||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Name
|
||||
</b>
|
||||
:
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Vehicles
|
||||
</b>
|
||||
:
|
||||
3
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Log Level
|
||||
</b>
|
||||
:
|
||||
info
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<b>
|
||||
CANBus
|
||||
</b>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Memory Buffer Size
|
||||
</b>
|
||||
:
|
||||
1
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Enabled
|
||||
</b>
|
||||
:
|
||||
true
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Max Disk Buffer Size
|
||||
</b>
|
||||
:
|
||||
2
|
||||
</p>
|
||||
<p>
|
||||
<b>
|
||||
Filters
|
||||
</b>
|
||||
:
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<a
|
||||
class="makeStyles-labelInline-9"
|
||||
href="/fleet/undefined/vehicle-add"
|
||||
class=""
|
||||
href="/fleet-update?name=undefined"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"undefined\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
||||
aria-label="Update \\"undefined\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class=""
|
||||
href="/"
|
||||
title="Delete \\"undefined\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Delete \\"undefined\\""
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
align="right"
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
||||
data-shrink="false"
|
||||
for="search"
|
||||
>
|
||||
Search
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
||||
id="search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||
>
|
||||
<button
|
||||
aria-label="search"
|
||||
class="MuiButtonBase-root MuiIconButton-root"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
>
|
||||
<thead
|
||||
class="MuiTableHead-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-head"
|
||||
>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
VIN
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="MuiTableBody-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
href="/vehicle-status/USWESTVIN12345678"
|
||||
>
|
||||
USWESTVIN12345678
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
No actions
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
href="/vehicle-status/USWESTVIN12345679"
|
||||
>
|
||||
USWESTVIN12345679
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
No actions
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
href="/vehicle-status/USWESTVIN12345670"
|
||||
>
|
||||
USWESTVIN12345670
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
No actions
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot
|
||||
class="MuiTableFooter-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-footer"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
||||
colspan="8"
|
||||
>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
||||
>
|
||||
<div
|
||||
class="MuiTablePagination-spacer"
|
||||
/>
|
||||
<p
|
||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||
>
|
||||
Rows per page:
|
||||
</p>
|
||||
<div
|
||||
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
||||
>
|
||||
<select
|
||||
aria-label="rows per page"
|
||||
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
||||
>
|
||||
<option
|
||||
class="MuiTablePagination-menuItem"
|
||||
value="5"
|
||||
>
|
||||
5
|
||||
</option>
|
||||
<option
|
||||
class="MuiTablePagination-menuItem"
|
||||
value="10"
|
||||
>
|
||||
10
|
||||
</option>
|
||||
<option
|
||||
class="MuiTablePagination-menuItem"
|
||||
value="25"
|
||||
>
|
||||
25
|
||||
</option>
|
||||
<option
|
||||
class="MuiTablePagination-menuItem"
|
||||
value="100"
|
||||
>
|
||||
100
|
||||
</option>
|
||||
</select>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M7 10l5 5 5-5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p
|
||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||
>
|
||||
1-3 of 3
|
||||
</p>
|
||||
<div
|
||||
class="MuiTablePagination-actions"
|
||||
>
|
||||
<button
|
||||
aria-label="Previous page"
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
title="Previous page"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Next page"
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
title="Next page"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -406,6 +233,12 @@ exports[`FleetStatus Render 1`] = `
|
||||
id="tabpanel-1"
|
||||
role="tabpanel"
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="tab-2"
|
||||
hidden=""
|
||||
id="tabpanel-2"
|
||||
role="tabpanel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
|
||||
import clsx from "clsx";
|
||||
import { Box, Tab, Tabs } from "@material-ui/core";
|
||||
|
||||
import FleetDetailsTab from "./DetailsTab";
|
||||
import FleetVehiclesTab from "./VehiclesTab";
|
||||
import FleetCANFiltersTab from "./CANFiltersTab";
|
||||
import TabPanel from "../../Controls/TabPanel";
|
||||
@@ -11,6 +12,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const tabHashes = [
|
||||
"details",
|
||||
"vehicles",
|
||||
"filters"
|
||||
]
|
||||
@@ -43,7 +45,7 @@ const FleetStatus = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [name]);
|
||||
|
||||
const handleTabChange = (event, newIndex) => {
|
||||
const handleTabChange = (_event, newIndex) => {
|
||||
setTabIndex(newIndex);
|
||||
};
|
||||
|
||||
@@ -51,16 +53,21 @@ const FleetStatus = () => {
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
|
||||
<Tab label="Vehicles" {...tabProps(0)} />
|
||||
<Tab label="CAN Filters" {...tabProps(1)} />
|
||||
<Tab label="Details" {...tabProps(0)} />
|
||||
<Tab label="Vehicles" {...tabProps(1)} />
|
||||
<Tab label="CAN Filters" {...tabProps(2)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<TabPanel value={tabIndex} index={0}>
|
||||
<FleetVehiclesTab />
|
||||
<FleetDetailsTab />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabIndex} index={1}>
|
||||
<FleetVehiclesTab />
|
||||
</TabPanel >
|
||||
|
||||
<TabPanel value={tabIndex} index={2}>
|
||||
<FleetCANFiltersTab />
|
||||
</TabPanel>
|
||||
</div >
|
||||
|
||||
@@ -26,7 +26,7 @@ const renderCarStatus = async () => {
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
await waitFor(() => { /* render */ });
|
||||
return container;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user