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

CEC-1450 Show Trex version (#169)

Browse Source 
* CEC-1450 Show Trex version

* Code smells

* Clean up

* Fixes

* Optimize test
This commit is contained in:
John Wu
2022-07-26 09:19:48 -07:00
committed by GitHub
parent 058edb63ba
commit b70afa5312
10 changed files with 479 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/VehicleMap/index.jsx
View File

@@ -179,7 +179,8 @@ const Component = () => {
doors={carState.doors}
location={carState.location}
windows={carState.windows}
updatedAt={carState.updated}
trex_version={carState.trex_version}
updated={carState.updated}
className={classes.popup}
onClose={handleClose}
/>

123
src/components/VehicleMap/popup.jsx
View File

@@ -1,84 +1,63 @@
import React from "react";
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import useStyles from "../useStyles";
import { LocalDateTimeString } from "../../utils/dates";
import DigitalTwin from "../DigitalTwin";
const VehiclePopUp = (props) => {
const classes = useStyles();
const { vin, online, battery, doors, location, updatedAt, windows, onClose } = props;
const classes = useStyles();
const { vin, online, battery, doors, location, windows, onClose } = props;
return (
<Dialog
fullWidth
classes={{ paper: classes.popUp }}
open={true}
onClose={onClose}
>
<DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
<div align="center" className={classes.popUpContent}>
<p><b>Connected</b>: {online.toString()}</p>
{online && (
<div>
{battery != null && (
<p><b>Battery</b>: {battery.percent}%</p>
)}
{doors != null && (
<div className={classes.popupSection}>
<h3>Doors</h3>
{Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
</div>
)}
{windows != null && (
<div className={classes.popupSection}>
<h3>Windows</h3>
{Object.entries(windows).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
</div>
)}
{location != null && (
<div className={classes.popupSection}>
<h3>Location</h3>
{Object.entries(location).map((value) => {
if (value[0] === "altitude") {
return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>);
} else {
return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}°</p>)
}
})}
</div>
)}
{updatedAt != null && (
<div className={classes.popupSection}>
<p><b>Updated at</b>: {LocalDateTimeString(updatedAt)}</p>
</div>
)}
</div>
)}
{(!online || (battery == null && doors == null && location == null && windows == null)) && (
<p>No vehicle data to display.</p>
)}
</div>
</Dialog >
);
return (
<Dialog
fullWidth
classes={{ paper: classes.popUp }}
open={true}
onClose={onClose}
>
<DialogTitle align="center" onClose={onClose}>
{vin}
</DialogTitle>
<div align="center" className={classes.popUpContent}>
<p>
<b>Connected</b>: {online.toString()}
</p>
{online && <DigitalTwin {...props} />}
{(!online ||
(battery == null &&
doors == null &&
location == null &&
windows == null)) && <p>No vehicle data to display.</p>}
</div>
</Dialog>
);
};
const DialogTitle = (props) => {
const { children, onClose, ...other } = props;
const classes = useStyles();
return (
<MuiDialogTitle disableTypography className={classes.ppopUpTItle} {...other}>
<Typography variant="h6">{children}</Typography>
{onClose ? (
<IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
const { children, onClose, ...other } = props;
const classes = useStyles();
return (
<MuiDialogTitle
disableTypography
className={classes.ppopUpTItle}
{...other}
>
<Typography variant="h6">{children}</Typography>
{onClose ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={onClose}
>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
};
export { VehiclePopUp };