admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-5292: add battery info to fleet vehicles (#474)

Browse Source 
* CEC-5292: add battery info to fleet vehicles

* add permission requirement

* set new message

* responsive

* fix missing status

* update snapshots

* update snapshots
This commit is contained in:
Tristan Timblin
2023-10-26 13:42:57 -07:00
committed by GitHub
parent 1059389d30
commit 342aa3e270
14 changed files with 269 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Fleets/Status/CANFiltersTab.jsx
View File

@@ -12,7 +12,7 @@ const FleetCANFiltersTab = () => {
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">CAN Filters</Typography>
<Typography variant="h6" className={classes.textCenterAlign}>CAN Filters</Typography>
<FleetCANFiltersTable name={name} classes={classes} />
</div >
);

2
src/components/Fleets/Status/DetailsTab.jsx
View File

@@ -12,7 +12,7 @@ const FleetDetailsTab = () => {
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">Fleet Details</Typography>
<Typography variant="h6" className={classes.textCenterAlign}>Fleet Details</Typography>
<FleetDetails name={name} classes={classes} />
</div >
);

71
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
View File

@@ -232,6 +232,75 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Battery
<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"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Voltage
<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"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Park
<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"
@@ -251,7 +320,7 @@ exports[`FleetVehiclesTable Render 1`] = `
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="8"
colspan="9"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

28
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -30,6 +30,7 @@ import TableHeaderSortable from "../../../../Table/HeaderSortable";
import { useLocalStorage } from "../../../../useLocalStorage";
import ConnectedIcon from "../../../../Controls/ConnectedIcon";
import BulkActions from "../../../../BulkActions";
import Battery from "../../../../Battery";
import useStyles from "../../../../useStyles";
const tableColumns = [
@@ -49,6 +50,18 @@ const tableColumns = [
id: "car_update_status",
label: "Car Update Status",
},
{
id: "battery",
label: "Battery",
},
{
id: "voltage",
label: "Voltage",
},
{
id: "park", // TODO: Update to 'gear' when we confirm each possible state
label: "Park",
},
{
id: "",
label: "Actions",
@@ -257,13 +270,22 @@ const MainForm = ({ name }) => {
</Link>
</Tooltip>
</TableCell>
<TableCell key={"cell4" + car.car_update_status}>
<TableCell key={"cell4" + car.vin}>
{car.car_update_status}
{car.car_update_progress > -1 && (
<LinearProgress variant="determinate" value={car.car_update_progress} />
)}
</TableCell>
<TableCell key={"cell5" + car.vin} align="center">{Actions(car.vin)}</TableCell>
<TableCell key={"cell5" + car.vin}>
<Battery percent={car.charge} charge={car.charge_type} />
</TableCell>
<TableCell key={"cell6" + car.vin}>
{car.voltage > 0 && `${car.voltage}V`}
</TableCell>
<TableCell key={"cell7" + car.vin}>
{car.park ? "Yes" : "No"}
</TableCell>
<TableCell key={"cell8" + car.vin} align="center">{Actions(car.vin)}</TableCell>
</TableRow>
)
})}
@@ -272,7 +294,7 @@ const MainForm = ({ name }) => {
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={8}
colSpan={9}
count={totalFleetVehicles}
rowsPerPage={pageSize}
page={pageIndex}

2
src/components/Fleets/Status/VehiclesTab.jsx
View File

@@ -12,7 +12,7 @@ const FleetVehiclesTab = () => {
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">Vehicles</Typography>
<Typography variant="h6" className={classes.textCenterAlign}>Vehicles</Typography>
<FleetVehiclesTable name={name} classes={classes} />
</div >
);

2
src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap
View File

@@ -6,7 +6,7 @@ exports[`CANFiltersTab Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
class="MuiTypography-root makeStyles-textCenterAlign-0 MuiTypography-h6"
>
CAN Filters
</h6>

2
src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`DetailsTab Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
class="MuiTypography-root makeStyles-textCenterAlign-0 MuiTypography-h6"
>
Fleet Details
</h6>

73
src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
View File

@@ -6,7 +6,7 @@ exports[`VehiclesTab Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
class="MuiTypography-root makeStyles-textCenterAlign-0 MuiTypography-h6"
>
Vehicles
</h6>
@@ -231,6 +231,75 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Battery
<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"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Voltage
<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"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Park
<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"
@@ -250,7 +319,7 @@ exports[`VehiclesTab Render 1`] = `
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="8"
colspan="9"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

9
src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
View File

@@ -12,10 +12,10 @@ exports[`FleetStatus Render 1`] = `
data-testid="mocked-userprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
class="makeStyles-paper-0 makeStyles-paperLeft-0 makeStyles-tableSize-0"
>
<div
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0 makeStyles-alignCenter-0"
>
<div
class="MuiTabs-root"
@@ -93,6 +93,7 @@ exports[`FleetStatus Render 1`] = `
</div>
<div
aria-labelledby="tab-0"
class="makeStyles-fullWidth-0"
id="tabpanel-0"
role="tabpanel"
>
@@ -103,7 +104,7 @@ exports[`FleetStatus Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
class="MuiTypography-root makeStyles-textCenterAlign-0 MuiTypography-h6"
>
Fleet Details
</h6>
@@ -291,12 +292,14 @@ exports[`FleetStatus Render 1`] = `
</div>
<div
aria-labelledby="tab-1"
class="makeStyles-fullWidth-0"
hidden=""
id="tabpanel-1"
role="tabpanel"
/>
<div
aria-labelledby="tab-2"
class="makeStyles-fullWidth-0"
hidden=""
id="tabpanel-2"
role="tabpanel"

10
src/components/Fleets/Status/index.jsx
View File

@@ -50,8 +50,8 @@ const FleetStatus = () => {
};
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
<div className={clsx(classes.paper, classes.paperLeft, classes.tableSize)}>
<Box className={clsx(classes.tableToolbar, classes.alignCenter)} sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
<Tab label="Details" {...tabProps(0)} />
<Tab label="Vehicles" {...tabProps(1)} />
@@ -59,15 +59,15 @@ const FleetStatus = () => {
</Tabs>
</Box>
<TabPanel value={tabIndex} index={0}>
<TabPanel value={tabIndex} index={0} className={classes.fullWidth}>
<FleetDetailsTab />
</TabPanel>
<TabPanel value={tabIndex} index={1}>
<TabPanel value={tabIndex} index={1} className={classes.fullWidth}>
<FleetVehiclesTab />
</TabPanel >
<TabPanel value={tabIndex} index={2}>
<TabPanel value={tabIndex} index={2} className={classes.fullWidth}>
<FleetCANFiltersTab />
</TabPanel>
</div >