CEC-5542 - Indicate how many fleet vehicles are what flashpack versions

This commit is contained in:
padamsen_fisker
2024-04-23 15:30:32 -04:00
parent a59a3df85e
commit 3bf93a8940
7 changed files with 156 additions and 3 deletions

View File

@@ -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>

View File

@@ -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 >
);

View File

@@ -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>

View File

@@ -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>