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 ListItemText from '@material-ui/core/ListItemText'; import { useSelector } from 'react-redux'; import EditIcon from '@material-ui/icons/Edit'; import SendIcon from '@material-ui/icons/Send'; import DeleteIcon from '@material-ui/icons/Delete'; import LinkIcon from '@material-ui/icons/Link'; import InfoIcon from '@material-ui/icons/Info'; import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; import { formatSpeed, formatDate, formatHours, } 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: '300px', }, listItemRoot: { paddingTop: '0px', paddingBottom: '0px', } })); const StatusView = ({ deviceId, onShowDetails, onShowHistory, onEditClick, onCommandsClick, }) => { const classes = useStyles(); const t = useTranslation(); const [removeDialogShown, setRemoveDialogShown] = useState(false); const session = useSelector((state) => state.session); 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 handleCommandsClick = (e) => { e.preventDefault(); onCommandsClick(deviceId); } const handleRemove = () => { setRemoveDialogShown(true); }; const handleRemoveResult = () => { setRemoveDialogShown(false); }; const handleGotoLink = () => { const url = `https://maps.google.com/maps?q=${position.latitude},${position.longitude}&z=18`; window.open(url, "_blank"); } return ( <> {position.attributes.hours && ( )} {position.address && ( )} {!session.server.deviceReadonly && ( <> )} ); }; export default StatusView;