Merge CEC-394 Car update log (#82)
This commit is contained in:
John Wu
174
src/components/Controls/CarECUsTable/index.jsx
Normal file
174
src/components/Controls/CarECUsTable/index.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "ecu",
|
||||
label: "ECU",
|
||||
},
|
||||
{
|
||||
id: "sw_version",
|
||||
label: "SW Version",
|
||||
},
|
||||
{
|
||||
id: "boot_loader_version",
|
||||
label: "BL Version",
|
||||
},
|
||||
{
|
||||
id: "hw_version",
|
||||
label: "HW Version",
|
||||
},
|
||||
{
|
||||
id: "vendor",
|
||||
label: "Vendor",
|
||||
},
|
||||
{
|
||||
id: "config",
|
||||
label: "Config",
|
||||
},
|
||||
{
|
||||
id: "fingerprint",
|
||||
label: "Fingerprint",
|
||||
},
|
||||
{
|
||||
id: "serial_number",
|
||||
label: "Serial",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "updated_at",
|
||||
label: "Updated",
|
||||
},
|
||||
];
|
||||
|
||||
const CarECUsTable = ({ vin, token }) => {
|
||||
const [ecus, setECUs] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("ecu");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const { getECUs } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!vin || !token) return;
|
||||
const result = await getECUs(
|
||||
{
|
||||
vin,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
setECUs(result.data);
|
||||
if (result.total > -1) setTotal(result.total);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [vin, token, pageIndex, pageSize, orderBy, order]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSort = (event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{ecus.map((row) => (
|
||||
<TableRow key={row.ecu}>
|
||||
<TableCell align="center">{row.ecu}</TableCell>
|
||||
<TableCell align="center">{row.sw_version}</TableCell>
|
||||
<TableCell align="center">{row.boot_loader_version}</TableCell>
|
||||
<TableCell align="center">{row.hw_version}</TableCell>
|
||||
<TableCell align="center">{row.vendor}</TableCell>
|
||||
<TableCell align="center">{row.config}</TableCell>
|
||||
<TableCell align="center">{row.fingerprint}</TableCell>
|
||||
<TableCell align="center">{row.serial_number}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={10}
|
||||
count={total}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarECUsTable;
|
||||
204
src/components/Controls/CarSelectionTable/index.jsx
Normal file
204
src/components/Controls/CarSelectionTable/index.jsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
import {
|
||||
Checkbox,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ConnectedIcon from "../../Controls/ConnectedIcon";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "vin",
|
||||
label: "VIN",
|
||||
},
|
||||
{
|
||||
id: "model",
|
||||
label: "Model",
|
||||
},
|
||||
{
|
||||
id: "year",
|
||||
label: "Year",
|
||||
},
|
||||
{
|
||||
id: "trim",
|
||||
label: "Trim",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "updated_at",
|
||||
label: "Updated",
|
||||
},
|
||||
];
|
||||
|
||||
const CarSelectionTable = (props) => {
|
||||
const { token, classes, search, selected, onSelect, onSelectAll } = props;
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("vin");
|
||||
const [order, setOrder] = useState("asc");
|
||||
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { search: searchTerm } = search;
|
||||
const sortHandler = (event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSelectAll = (event) => {
|
||||
if (!onSelectAll) return;
|
||||
|
||||
const newSelected = [];
|
||||
if (event.target.checked) {
|
||||
vehicles.forEach((car) => {
|
||||
newSelected.push(car.vin);
|
||||
});
|
||||
}
|
||||
|
||||
onSelectAll(newSelected);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
if (!onSelect) return;
|
||||
|
||||
onSelect(event, key);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const options = {
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
};
|
||||
(async () => {
|
||||
try {
|
||||
await getVehicles(Object.assign(options, search), token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, orderBy, order, search, token]);
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={sortHandler}
|
||||
multiSelect={true}
|
||||
onSelectAll={handleSelectAll}
|
||||
selectCount={selected.length}
|
||||
rowCount={vehicles.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{vehicles.map((row) => {
|
||||
const isSelected = selected.indexOf(row.vin) !== -1;
|
||||
return (
|
||||
<TableRow key={row.vin}>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={(event) => handleSelect(event, row.vin)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<ConnectedIcon
|
||||
connected={row.connected}
|
||||
style={{ marginRight: 5 }}
|
||||
/>
|
||||
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList
|
||||
list={row.ecu_list}
|
||||
search={searchTerm}
|
||||
searchedOnly={true}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.model}</TableCell>
|
||||
<TableCell align="center">{row.year}</TableCell>
|
||||
<TableCell align="center">{row.trim || ""}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={7}
|
||||
count={totalVehicles}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CarSelectionTable.propTypes = {
|
||||
token: PropTypes.string.isRequired,
|
||||
classes: PropTypes.object.isRequired,
|
||||
search: PropTypes.object.isRequired,
|
||||
selected: PropTypes.array.isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
onSelectAll: PropTypes.func.isRequired,
|
||||
connectionStatus: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default CarSelectionTable;
|
||||
128
src/components/Controls/CarUpdateStatusProgress/index.jsx
Normal file
128
src/components/Controls/CarUpdateStatusProgress/index.jsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import { CheckCircle, RadioButtonUnchecked, Error } from "@material-ui/icons";
|
||||
import clsx from "clsx";
|
||||
|
||||
import CircularProgress from "../CircularProgress";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const Progress = ({ value }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
if (value === 100)
|
||||
return (
|
||||
<CheckCircle
|
||||
className={clsx(classes.progressIcon, classes.progressSuccess)}
|
||||
/>
|
||||
);
|
||||
if (value >= 0) return <CircularProgress value={value} />;
|
||||
if (value < -1)
|
||||
return (
|
||||
<Error className={clsx(classes.progressIcon, classes.progressError)} />
|
||||
);
|
||||
|
||||
return <RadioButtonUnchecked className={classes.progressIcon} />;
|
||||
};
|
||||
|
||||
const CarUpdateStatus = ({ status }) => {
|
||||
const classes = useStyles();
|
||||
const [received, setReceived] = useState(-1);
|
||||
const [approval, setApproval] = useState(-1);
|
||||
const [precondition, setPrecondition] = useState(-1);
|
||||
const [download, setDownload] = useState(-1);
|
||||
const [install, setInstall] = useState(-1);
|
||||
const [cleanup, setCleanup] = useState(-1);
|
||||
const [updated, setUpdated] = useState(-1);
|
||||
|
||||
useEffect(() => {
|
||||
/* eslint-disable no-fallthrough, default-case */
|
||||
if (!status) return;
|
||||
// update previous steps
|
||||
switch (status.msg) {
|
||||
case "cleanup_success":
|
||||
setUpdated(100);
|
||||
case "package_install_complete":
|
||||
setInstall(100);
|
||||
case "install_start":
|
||||
case "installing":
|
||||
case "install_complete":
|
||||
case "install_error":
|
||||
case "package_download_complete":
|
||||
setDownload(100);
|
||||
case "download_start":
|
||||
case "downloading":
|
||||
case "download_complete":
|
||||
case "download_error":
|
||||
case "install_approval_received":
|
||||
setApproval(100);
|
||||
case "requirements_succeeded":
|
||||
setPrecondition(100);
|
||||
case "manifest_received":
|
||||
setReceived(100);
|
||||
}
|
||||
// update progress and errors
|
||||
switch (status.msg) {
|
||||
case "installing":
|
||||
setInstall(status.progress);
|
||||
break;
|
||||
case "install_error":
|
||||
setInstall(-100);
|
||||
break;
|
||||
case "downloading":
|
||||
setDownload(status.progress);
|
||||
break;
|
||||
case "download_error":
|
||||
setDownload(-100);
|
||||
break;
|
||||
case "cleanup_failed":
|
||||
setCleanup(-100);
|
||||
break;
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={100} />
|
||||
<Typography>Pending</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={received} />
|
||||
<Typography>Recieved</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={approval} />
|
||||
<Typography>Approved</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={precondition} />
|
||||
<Typography>Precondition</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={download} />
|
||||
<Typography>Download</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={install} />
|
||||
<Typography>Install</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={cleanup} />
|
||||
<Typography>Clean up</Typography>
|
||||
</div>
|
||||
<div className={classes.textCenterAlign}>
|
||||
<Progress value={updated} />
|
||||
<Typography>Updated</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarUpdateStatus;
|
||||
134
src/components/Controls/CarUpdateStatusTable/index.jsx
Normal file
134
src/components/Controls/CarUpdateStatusTable/index.jsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Date",
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
label: "Status",
|
||||
},
|
||||
{
|
||||
id: "error_code",
|
||||
label: "Error",
|
||||
},
|
||||
];
|
||||
|
||||
const CarUpdateStatusTable = ({ carupdateid, token }) => {
|
||||
const classes = useStyles();
|
||||
const [log, setLog] = useState([]);
|
||||
const [logTotal, setLogTotal] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const { getLog } = useCarUpdatesContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!carupdateid || !token) return;
|
||||
const result = await getLog(
|
||||
{
|
||||
carupdateid,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
setLog(result.data);
|
||||
if (pageIndex === 0 && result.total) setLogTotal(result.total);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [carupdateid, token, pageIndex, pageSize, orderBy, order]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSort = (event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{log.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.status}</TableCell>
|
||||
<TableCell align="center">{row.error}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={5}
|
||||
count={logTotal}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarUpdateStatusTable;
|
||||
162
src/components/Controls/CarUpdatesTable/index.jsx
Normal file
162
src/components/Controls/CarUpdatesTable/index.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "id",
|
||||
label: "ID",
|
||||
},
|
||||
{
|
||||
id: "update_package_id",
|
||||
label: "Name",
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
label: "Status",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "updated_at",
|
||||
label: "Updated",
|
||||
},
|
||||
];
|
||||
|
||||
const MainForm = ({ vin, token }) => {
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!vin || !token) return;
|
||||
await getCarUpdates(
|
||||
{
|
||||
vin,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [vin, token, pageIndex, pageSize, orderBy, order]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSort = (event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const updateName = (row) => {
|
||||
if (row.updatemanifest)
|
||||
return `${row.updatemanifest.name} ${row.updatemanifest.version}`;
|
||||
return "None";
|
||||
};
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{carUpdates.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Link to={`/vehicle-status/${row.vin}/${row.id}`}>
|
||||
{updateName(row)}
|
||||
</Link>
|
||||
</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, 100]}
|
||||
colSpan={5}
|
||||
count={totalCarUpdates}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const CarUpdatesTable = (props) => (
|
||||
<CarUpdatesProvider>
|
||||
<MainForm {...props} />
|
||||
</CarUpdatesProvider>
|
||||
);
|
||||
|
||||
export default CarUpdatesTable;
|
||||
43
src/components/Controls/CircularProgress/index.jsx
Normal file
43
src/components/Controls/CircularProgress/index.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Box from "@material-ui/core/Box";
|
||||
|
||||
const CircularProgressWithLabel = (props) => {
|
||||
return (
|
||||
<Box position="relative" display="inline-flex">
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
{...props}
|
||||
style={{ color: "green" }}
|
||||
/>
|
||||
<Box
|
||||
top={0}
|
||||
left={0}
|
||||
bottom={0}
|
||||
right={0}
|
||||
position="absolute"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
component="div"
|
||||
color="textSecondary"
|
||||
>{`${Math.round(props.value)}%`}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
CircularProgressWithLabel.propTypes = {
|
||||
/**
|
||||
* The value of the progress indicator for the determinate variant.
|
||||
* Value between 0 and 100.
|
||||
*/
|
||||
value: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default CircularProgressWithLabel;
|
||||
151
src/components/Controls/SendCommand/index.jsx
Normal file
151
src/components/Controls/SendCommand/index.jsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
|
||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
||||
import commands from "../../../services/commands";
|
||||
import useStyles from "../../useStyles";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const SendCommand = ({ vins }) => {
|
||||
const classes = useStyles();
|
||||
const { sendCommand, busy } = useVehicleContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const NoParameters = {
|
||||
value: "",
|
||||
label: "None",
|
||||
};
|
||||
const { setMessage } = useStatusContext();
|
||||
const [command, setCommand] = useState("");
|
||||
const [parameters, setParameters] = useState([NoParameters]);
|
||||
const [parameter, setParameter] = useState("");
|
||||
const changeCommandHandler = (e) => {
|
||||
selectCommand(e.target.value);
|
||||
};
|
||||
|
||||
const selectCommand = (cmd) => {
|
||||
const params = getParameters(cmd);
|
||||
setCommand(cmd);
|
||||
setParameters(params);
|
||||
setParameter(params[0].value);
|
||||
};
|
||||
|
||||
const changeParametersHandler = (e) => {
|
||||
setParameter(e.target.value);
|
||||
};
|
||||
|
||||
const clickHandler = async (e) => {
|
||||
try {
|
||||
await sendCommand(vins, command, parameter, token);
|
||||
if (vins.length === 1) {
|
||||
setMessage(`Sent command to ${vins[0]}`);
|
||||
} else {
|
||||
setMessage(`Sent command to ${vins.length} cars`);
|
||||
}
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.error(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const getParameters = (command) => {
|
||||
for (let i = 0, len = commands.length; i < len; i += 1) {
|
||||
const item = commands[i];
|
||||
if (item.value === command) {
|
||||
if (!item.parameters) {
|
||||
break;
|
||||
}
|
||||
return item.parameters;
|
||||
}
|
||||
}
|
||||
return [NoParameters];
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!commands || commands.length === 0) return;
|
||||
selectCommand(commands[0].value);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={classes.form} style={{ marginTop: 20 }}>
|
||||
<FormControl
|
||||
className={classes.formControlInline}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
<InputLabel htmlFor="send-command" className={classes.whiteBackground}>
|
||||
Command
|
||||
</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={command}
|
||||
variant="outlined"
|
||||
inputProps={{
|
||||
name: "send-command",
|
||||
id: "send-command",
|
||||
}}
|
||||
onChange={changeCommandHandler}
|
||||
>
|
||||
{commands.map((item, index) => (
|
||||
<option key={index} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
className={classes.formControlInline}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
<InputLabel
|
||||
htmlFor="send-parameter"
|
||||
className={classes.whiteBackground}
|
||||
>
|
||||
Parameter
|
||||
</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={parameter}
|
||||
variant="outlined"
|
||||
inputProps={{
|
||||
name: "send-parameter",
|
||||
id: "send-parameter",
|
||||
}}
|
||||
onChange={changeParametersHandler}
|
||||
disabled={parameters.length === 0}
|
||||
>
|
||||
{parameters.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<IconButton
|
||||
color="primary"
|
||||
aria-label="send command"
|
||||
component="span"
|
||||
onClick={clickHandler}
|
||||
size="small"
|
||||
disabled={busy || vins.length === 0}
|
||||
>
|
||||
<SendIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SendCommand.propTypes = {
|
||||
vins: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export default SendCommand;
|
||||
Reference in New Issue
Block a user