diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/DevicesList.js | 2 | ||||
| -rw-r--r-- | modern/src/map/PositionsMap.js | 2 | ||||
| -rw-r--r-- | modern/src/map/StatusView.js | 6 | ||||
| -rw-r--r-- | modern/src/reports/ReplayPage.js | 10 | ||||
| -rw-r--r-- | modern/src/reports/ReportFilter.js | 4 |
6 files changed, 15 insertions, 11 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index b6d0084..95ed1c2 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -60,7 +60,7 @@ const App = () => { {!initialized ? (<LinearProgress />) : ( <Switch> <Route exact path="/" component={MainPage} /> - <Route exact path="/replay" component={ReplayPage} /> + <Route exact path="/replay/:id?" component={ReplayPage} /> <Route exact path="/position/:id?" component={PositionPage} /> <Route exact path="/user/:id?" component={UserPage} /> <Route exact path="/device/:id?" component={DevicePage} /> diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 74aa6bc..3085552 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -152,7 +152,7 @@ const DeviceRow = ({ data, index, style }) => { {/* Speed */} <SpeedIcon fontSize="inherit" /> {formatSpeed(position.speed, speedUnit, t)}<br /> {/* Datetime */} - <CalendarTodayIcon fontSize="inherit" /> {formatDate(position.serverTime)} + <CalendarTodayIcon fontSize="inherit" /> {formatPosition(position, 'fixTime', t)} {/* Hours */} {item.category && (item.category.toLowerCase() === 'backhoe' || item.category.toLowerCase() === 'tractor' ) diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index 5320158..b702400 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -64,7 +64,7 @@ const PositionsMap = ({ positions }) => { position={position} deviceId={feature.properties.deviceId} onShowDetails={(positionId) => history.push(`/position/${positionId}`)} - onShowHistory={() => history.push('/replay')} + onShowHistory={(deviceId) => history.push(`/replay/${deviceId}`)} onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) } /> diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index b451573..b892e77 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -15,7 +15,7 @@ import InfoIcon from '@material-ui/icons/Info'; import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; import { - formatSpeed, formatDate, formatHours, + formatSpeed, formatHours, formatPosition } from '../common/formatter'; import { useAttributePreference } from '../common/preferences'; import RemoveDialog from '../RemoveDialog'; @@ -84,7 +84,7 @@ const StatusView = ({ <Grid item> <List> <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }} > - <ListItemText primary={t('positionDatetime')} secondary={formatDate(position.serverTime)} /> + <ListItemText primary={t('positionDatetime')} secondary={formatPosition(position, 'fixTime', t)} /> </ListItem> <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}> <ListItemText primary={t('positionSpeed')} secondary={formatSpeed(position.speed, speedUnit, t)} /> @@ -109,7 +109,7 @@ const StatusView = ({ </IconButton> </Grid> <Grid item> - <IconButton onClick={onShowHistory}> + <IconButton onClick={() => onShowHistory(deviceId)}> <PlayCircleFilledIcon /> </IconButton> </Grid> diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index 5d2b803..afb7d04 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { useParams } from 'react-router-dom'; import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box } from '@material-ui/core'; @@ -11,7 +12,7 @@ import MainToolbar from '../MainToolbar'; import Map from '../map/Map'; import ReplayPathMap from '../map/ReplayPathMap'; import PositionsMap from '../map/PositionsMap'; -import { formatPosition, formatDate } from '../common/formatter'; +import { formatPosition } from '../common/formatter'; import ReportFilter from './ReportFilter'; import { useTranslation } from '../LocalizationProvider'; @@ -45,6 +46,7 @@ const TimeLabel = ({ children, open, value }) => ( const ReplayPage = () => { const classes = useStyles(); + const { id } = useParams(); const t = useTranslation(); const [expanded, setExpanded] = useState(true); @@ -74,12 +76,14 @@ const ReplayPage = () => { && ( <Paper className={classes.controlContent}> <Box maxWidth="sm" display="flex"> + {/* Previous position button */} <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}> <SkipPreviousIcon /> </IconButton> <Box flexGrow={1} textAlign="center"> - <Typography variant="button">{formatDate(positions[index].deviceTime)}</Typography> + <Typography variant="button">{formatPosition(positions[index], 'fixTime', t)}</Typography> </Box> + {/* Next position button*/} <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}> <SkipNextIcon /> </IconButton> @@ -104,7 +108,7 @@ const ReplayPage = () => { </Typography> </AccordionSummary> <AccordionDetails className={classes.configForm}> - <ReportFilter handleSubmit={handleSubmit} showOnly /> + <ReportFilter handleSubmit={handleSubmit} showOnly defaultSelected={id} /> </AccordionDetails> </Accordion> </div> diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 1f3a3f0..25b0af7 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -6,11 +6,11 @@ import { useSelector } from 'react-redux'; import moment from 'moment'; import { useTranslation } from '../LocalizationProvider'; -const ReportFilter = ({ children, handleSubmit, showOnly }) => { +const ReportFilter = ({ children, handleSubmit, showOnly, defaultSelected }) => { const t = useTranslation(); const devices = useSelector((state) => Object.values(state.devices.items)); - const [deviceId, setDeviceId] = useState(); + const [deviceId, setDeviceId] = useState(defaultSelected); const [period, setPeriod] = useState('today'); const [from, setFrom] = useState(moment().subtract(1, 'hour')); const [to, setTo] = useState(moment()); |