import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import {
makeStyles, Button, Card, CardContent, Typography, CardActions, CardHeader, IconButton, Avatar, Table, TableBody, TableRow, TableCell, TableContainer,
} from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import ReplayIcon from '@material-ui/icons/Replay';
import PublishIcon from '@material-ui/icons/Publish';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import { useTranslation } from '../LocalizationProvider';
import { formatStatus } from '../common/formatter';
import RemoveDialog from '../RemoveDialog';
import PositionValue from '../components/PositionValue';
import dimensions from '../theme/dimensions';
const useStyles = makeStyles((theme) => ({
card: {
width: dimensions.popupMaxWidth,
},
negative: {
color: theme.palette.colors.negative,
},
icon: {
width: '25px',
height: '25px',
filter: 'brightness(0) invert(1)',
},
table: {
'& .MuiTableCell-sizeSmall': {
paddingLeft: theme.spacing(0.5),
paddingRight: theme.spacing(0.5),
},
},
cell: {
borderBottom: 'none',
},
}));
const StatusRow = ({ name, content }) => {
const classes = useStyles();
return (
{name}
{content}
);
};
const StatusCard = ({ deviceId, onClose }) => {
const classes = useStyles();
const history = useHistory();
const t = useTranslation();
const device = useSelector((state) => state.devices.items[deviceId]);
const position = useSelector((state) => state.positions.items[deviceId]);
const [removeDialogShown, setRemoveDialogShown] = useState(false);
return (
<>
{device && (
)}
action={(
)}
title={device.name}
subheader={formatStatus(device.status, t)}
/>
{position && (
} />
} />
{position.attributes.odometer
? } />
: } />}
} />
)}
history.push('/replay')} disabled={!position}>
history.push(`/device/${deviceId}`)}>
setRemoveDialogShown(true)} className={classes.negative}>
)}
setRemoveDialogShown(false)}
/>
>
);
};
export default StatusCard;