73 lines
2.8 KiB
JavaScript
73 lines
2.8 KiB
JavaScript
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 useStyles from "../useStyles";
|
|
|
|
const VehiclePopUp = (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>
|
|
<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>
|
|
<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>
|
|
<h3>Location</h3>
|
|
{Object.entries(location).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{(!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>
|
|
);
|
|
};
|
|
|
|
export { VehiclePopUp };
|