diff options
Diffstat (limited to 'modern/src/map/StatusView.js')
| -rw-r--r-- | modern/src/map/StatusView.js | 109 |
1 files changed, 59 insertions, 50 deletions
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index 5526e14..b892e77 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -4,17 +4,18 @@ import { } 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 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 { - formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed, + formatSpeed, formatHours, formatPosition } from '../common/formatter'; import { useAttributePreference } from '../common/preferences'; import RemoveDialog from '../RemoveDialog'; @@ -27,19 +28,23 @@ const useStyles = makeStyles((theme) => ({ }, ...theme.palette.colors, listItemContainer: { - maxWidth: '240px', + maxWidth: '300px', }, + listItemRoot: { + paddingTop: '0px', + paddingBottom: '0px', + } })); const StatusView = ({ - deviceId, onShowDetails, onShowHistory, onEditClick, + position, 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'); @@ -54,6 +59,11 @@ const StatusView = ({ onEditClick(deviceId); }; + const handleCommandsClick = (e) => { + e.preventDefault(); + onCommandsClick(deviceId); + } + const handleRemove = () => { setRemoveDialogShown(true); }; @@ -62,72 +72,71 @@ const StatusView = ({ setRemoveDialogShown(false); }; + const handleGotoLink = () => { + const url = `https://maps.google.com/maps?q=${position.latitude},${position.longitude}&z=18`; + window.open(url, "_blank"); + } + return ( <> <Paper className={classes.paper} elevation={0} square> <Grid container direction="column"> <Grid item> <List> - <ListItem classes={{ container: classes.listItemContainer }}> - <ListItemText primary={t('deviceStatus')} /> - <ListItemSecondaryAction> - <span className={classes[getStatusColor(device.status)]}>{device.status}</span> - </ListItemSecondaryAction> - </ListItem> - <ListItem classes={{ container: classes.listItemContainer }}> - <ListItemText primary={t('positionSpeed')} /> - <ListItemSecondaryAction> - {formatSpeed(position.speed, speedUnit, t)} - </ListItemSecondaryAction> + <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }} > + <ListItemText primary={t('positionDatetime')} secondary={formatPosition(position, 'fixTime', t)} /> </ListItem> - {position.attributes.batteryLevel && ( - <ListItem classes={{ container: classes.listItemContainer }}> - <ListItemText primary={t('positionBattery')} /> - <ListItemSecondaryAction> - <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}> - {formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)} - </span> - </ListItemSecondaryAction> - </ListItem> - )} - <ListItem classes={{ container: classes.listItemContainer }}> - <ListItemText primary={t('positionDistance')} /> - <ListItemSecondaryAction> - {formatDistance(position.attributes.totalDistance, distanceUnit, t)} - </ListItemSecondaryAction> - </ListItem> - <ListItem classes={{ container: classes.listItemContainer }}> - <ListItemText primary={t('positionCourse')} /> - <ListItemSecondaryAction> - {formatPosition(position.course, 'course', t)} - </ListItemSecondaryAction> + <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}> + <ListItemText primary={t('positionSpeed')} secondary={formatSpeed(position.speed, speedUnit, t)} /> </ListItem> + {device.category + && (device.category.toLowerCase() === 'backhoe' || device.category.toLowerCase() === 'tractor') + && position.attributes.hours + && ( + <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}> + <ListItemText primary={t('positionHours')} secondary={formatHours(position.attributes.hours, t)} /> + </ListItem>)} + {position.address && ( + <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}> + <ListItemText primary={t('positionAddress')} secondary={position.address} /> + </ListItem>)} </List> </Grid> <Grid item container> <Grid item> - <Button color="secondary" onClick={handleClick}>More Info</Button> - </Grid> - <Grid item> - <IconButton onClick={onShowHistory}> - <ReplayIcon /> + <IconButton onClick={handleClick}> + <InfoIcon /> </IconButton> </Grid> <Grid item> - <IconButton> - <ExitToAppIcon /> + <IconButton onClick={() => onShowHistory(deviceId)}> + <PlayCircleFilledIcon /> </IconButton> </Grid> <Grid item> - <IconButton onClick={handleEditClick}> - <EditIcon /> + <IconButton onClick={handleGotoLink}> + <LinkIcon /> </IconButton> </Grid> <Grid item> - <IconButton onClick={handleRemove} className={classes.red}> - <DeleteIcon /> + <IconButton onClick={handleCommandsClick}> + <SendIcon /> </IconButton> </Grid> + {!session.server.deviceReadonly && ( + <> + <Grid item> + <IconButton onClick={handleEditClick}> + <EditIcon /> + </IconButton> + </Grid> + <Grid item> + <IconButton onClick={handleRemove} className={classes.red}> + <DeleteIcon /> + </IconButton> + </Grid> + </> + )} </Grid> </Grid> </Paper> |