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

Add updates by car screen and modal popup (#29)

Browse Source
This commit is contained in:
John Wu
2021-04-06 19:43:49 -07:00
committed by GitHub
parent 09ebbe96e0
commit 1f9db5454f
12 changed files with 401 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Cars/List/index.jsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
Table,
TableBody,
@@ -75,7 +76,9 @@ const MainForm = () => {
<TableBody>
{vehicles.map((row) => (
<TableRow key={row.vin}>
<TableCell align="center">{row.vin}</TableCell>
<TableCell align="center">
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
</TableCell>
<TableCell align="center">{row.model}</TableCell>
<TableCell align="center">{row.year}</TableCell>
<TableCell align="center">

122
src/components/Cars/Status/index.jsx Normal file
View File

@@ -0,0 +1,122 @@
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TableHead,
TablePagination,
TableRow,
Typography,
} from "@material-ui/core";
import {
UpdatesProvider,
useUpdatesContext,
} from "../../Contexts/UpdatesContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates";
const MainForm = () => {
const { vin } = useParams();
const classes = useStyles();
const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(0);
const { getCarUpdates, carUpdates, totalCarUpdates } = useUpdatesContext();
const { setMessage } = useStatusContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
useEffect(() => {
try {
getCarUpdates(
{
vin,
limit: pageSize,
offset: pageSize * pageIndex,
},
token
);
} catch (e) {
setMessage(e.message);
}
// eslint-disable-next-line
}, [pageIndex, pageSize, token]);
const handleChangePageIndex = (event, newIndex) => {
setPageIndex(newIndex);
};
const handleChangePageSize = (event) => {
setPageSize(parseInt(event.target.value, 10));
setPageIndex(0);
};
return (
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
<Typography component="h1" variant="h5">
{vin} Updates
</Typography>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell align="center">ID</TableCell>
<TableCell align="center">Update</TableCell>
<TableCell align="center">Status</TableCell>
<TableCell align="center">Created</TableCell>
<TableCell align="center">Updated</TableCell>
</TableRow>
</TableHead>
<TableBody>
{carUpdates.map((row) => (
<TableRow key={row.id}>
<TableCell align="center">{row.id}</TableCell>
<TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
<TableCell align="center">{row.status}</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.created)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
colSpan={5}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onChangePage={handleChangePageIndex}
onChangeRowsPerPage={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</div>
);
};
const CarUpdates = () => (
<UpdatesProvider>
<MainForm />
</UpdatesProvider>
);
export default CarUpdates;

91
src/components/Cars/StatusModal/index.jsx Normal file
View File

@@ -0,0 +1,91 @@
import React, { useEffect, useState } from "react";
import {
Backdrop,
Modal,
Fade,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
} from "@material-ui/core";
import useStyles from "../../useStyles";
import { useUpdatesContext } from "../../Contexts/UpdatesContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { LocalDateTimeString } from "../../../utils/dates";
export default function CarStatusModal(props) {
const classes = useStyles();
const [updates, setUpdates] = useState([]);
const { setMessage } = useStatusContext();
const { getVINUpdates } = useUpdatesContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
useEffect(() => {
(async () => {
try {
if (!props.vin) return;
const result = await getVINUpdates(props.vin, token);
if (result.error) {
throw new Error(`Get VIN updates error. ${result.message}`);
} else {
setUpdates(result.data);
}
} catch (e) {
setMessage(e.message);
}
})();
// eslint-disable-next-line
}, [props.vin]);
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={props.vin}
onClose={props.handleClose}
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.vin}>
<div className={classes.modaldialog}>
<h2 id="transition-modal-title">{props.vin} Updates</h2>
<Table>
<TableHead>
<TableRow>
<TableCell align="center">Date</TableCell>
<TableCell align="center">Update</TableCell>
<TableCell align="center">Status</TableCell>
<TableCell align="center">Updated</TableCell>
</TableRow>
</TableHead>
<TableBody>
{updates.map((update) => (
<TableRow key={update.id}>
<TableCell align="center">
{LocalDateTimeString(update.created)}
</TableCell>
<TableCell align="center">{`${update.updatepackage.package_name} ${update.updatepackage.version}`}</TableCell>
<TableCell align="center">{update.status}</TableCell>
<TableCell align="center">
{LocalDateTimeString(update.updated)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</Fade>
</Modal>
</div>
);
}