Fixed datetime formatting and now passing position as parameter for StatusView

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());