1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
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 EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import LinkIcon from '@material-ui/icons/Link';
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',
},
}));
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);
};
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('positionDatetime')} secondary={formatDate(position.serverTime)} />
</ListItem>
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionSpeed')} secondary={formatSpeed(position.speed, speedUnit, t)} />
</ListItem>
{position.attributes.hours && (
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionHours')} secondary={formatHours(position.attributes.hours, t)} />
</ListItem>)}
{position.address && (
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionAddress')} secondary={position.address} />
</ListItem>)}
</List>
</Grid>
<Grid item container>
<Grid item>
<Button color="secondary" onClick={handleClick}>{t('sharedShowInfo')}</Button>
</Grid>
<Grid item>
<IconButton onClick={onShowHistory}>
<ReplayIcon />
</IconButton>
</Grid>
<Grid item>
<IconButton onClick={handleGotoLink}>
<LinkIcon />
</IconButton>
</Grid>
<Grid item>
<IconButton onClick={handleEditClick}>
<EditIcon />
</IconButton>
</Grid>
<Grid item>
<IconButton onClick={handleRemove} className={classes.red}>
<DeleteIcon />
</IconButton>
</Grid>
</Grid>
</Grid>
</Paper>
<RemoveDialog open={removeDialogShown} endpoint="devices" itemId={deviceId} onResult={handleRemoveResult} />
</>
);
};
export default StatusView;
|
