import React, { useState } from 'react'; import { makeStyles, Paper, IconButton, Grid, Button, } from '@material-ui/core'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import { useSelector } from 'react-redux'; import ReplayIcon from '@material-ui/icons/Replay'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; import { formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed, } from '../common/formatter'; import { useAttributePreference } from '../common/preferences'; import RemoveDialog from '../RemoveDialog'; import { getPosition } from '../common/selectors'; import { useTranslation } from '../LocalizationProvider'; const useStyles = makeStyles((theme) => ({ paper: { width: '300px', }, ...theme.palette.colors, listItemContainer: { maxWidth: '240px', }, })); const StatusView = ({ deviceId, onShowDetails, onShowHistory, onEditClick, }) => { const classes = useStyles(); const t = useTranslation(); const [removeDialogShown, setRemoveDialogShown] = useState(false); const device = useSelector((state) => state.devices.items[deviceId]); const position = useSelector(getPosition(deviceId)); const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const handleClick = (e) => { e.preventDefault(); onShowDetails(position.id); }; const handleEditClick = (e) => { e.preventDefault(); onEditClick(deviceId); }; const handleRemove = () => { setRemoveDialogShown(true); }; const handleRemoveResult = () => { setRemoveDialogShown(false); }; return ( <> {device.status} {formatSpeed(position.speed, speedUnit, t)} {position.attributes.batteryLevel && ( {formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)} )} {formatDistance(position.attributes.totalDistance, distanceUnit, t)} {formatPosition(position.course, 'course', t)} ); }; export default StatusView;