aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/DevicesList.js2
-rw-r--r--modern/src/map/PositionsMap.js2
-rw-r--r--modern/src/map/StatusView.js6
-rw-r--r--modern/src/reports/ReplayPage.js10
-rw-r--r--modern/src/reports/ReportFilter.js4
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());