CEC-5542 - Indicate how many fleet vehicles are what flashpack versions
This commit is contained in:
@@ -198,6 +198,27 @@ exports[`FleetDetailsTab Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Flashpack Information
|
||||
</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,11 @@ import { Redirect } from "react-router";
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Grid,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import EditIcon from "@material-ui/icons/Edit"
|
||||
@@ -16,11 +21,23 @@ import useStyles from "../../../useStyles";
|
||||
import { logger } from "../../../../services/monitoring";
|
||||
import DeleteConfirmation from "../../../DeleteConfirmation";
|
||||
import BulkActions from "../../../BulkActions";
|
||||
import TableHeaderSortable from "../../../Table/HeaderSortable";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "flashpack",
|
||||
label: "Flashpack",
|
||||
},
|
||||
{
|
||||
id: "vehicles",
|
||||
label: "# of Vehicles in Fleet",
|
||||
},
|
||||
];
|
||||
|
||||
const MainForm = ({ name }) => {
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { fleet, getFleet, deleteFleet } = useFleetContext();
|
||||
const { fleet, getFleet, deleteFleet, fleetFlashpackInfo, getFleetFlashpackInfo } = useFleetContext();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||
@@ -32,6 +49,7 @@ const MainForm = ({ name }) => {
|
||||
try {
|
||||
if (!name || !token) return;
|
||||
await getFleet(name, token);
|
||||
await getFleetFlashpackInfo(name, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
@@ -104,6 +122,43 @@ const MainForm = ({ name }) => {
|
||||
<BulkActions ids={fleet.vehicles} actions={["addTags", "updateConfig", "sms"]} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item md={12} className={classes.textCenterAlign}>
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={12} className={classes.textCenterAlign}>
|
||||
<p>
|
||||
<b>Flashpack Information</b>
|
||||
</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{fleetFlashpackInfo && (<Table size="small" >
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={"flashpack"}
|
||||
order={"asc"}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={() => { return null }}
|
||||
/>
|
||||
<TableBody>
|
||||
{
|
||||
fleetFlashpackInfo.data && Object.entries(fleetFlashpackInfo.data).map(([flashpack, occurrences]) => (
|
||||
<TableRow key={`${flashpack}-${occurrences.toString()}`}>
|
||||
<TableCell align="center">{flashpack}</TableCell>
|
||||
<TableCell align="center">{occurrences.toString()}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
{!fleetFlashpackInfo || fleetFlashpackInfo.length === 0 ? (
|
||||
<TableCell colSpan={8} align="center">No flashpack info for fleet</TableCell>
|
||||
) : <></>}
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>)}
|
||||
</div>
|
||||
</Grid>
|
||||
<DeleteConfirmation message={name} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={onDelete} />
|
||||
</div >
|
||||
);
|
||||
|
||||
@@ -206,6 +206,27 @@ exports[`DetailsTab Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Flashpack Information
|
||||
</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -295,6 +295,27 @@ exports[`FleetStatus Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
|
||||
>
|
||||
<p>
|
||||
<b>
|
||||
Flashpack Information
|
||||
</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user