1 files changed, 29 insertions, 14 deletions
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index bb32daa..5d2b803 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,13 +1,17 @@
 import React, { useState } from 'react';
 import {
-  Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography,
+  Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box
 } from '@material-ui/core';
+
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import SkipNextIcon from '@material-ui/icons/SkipNext';
+import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
-import { formatPosition } from '../common/formatter';
+import { formatPosition, formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 
@@ -68,18 +72,29 @@ const ReplayPage = () => {
       <Container maxWidth="sm" className={classes.controlPanel}>
         {!!positions.length
           && (
-          <Paper className={classes.controlContent}>
-            <Slider
-              max={positions.length - 1}
-              step={null}
-              marks={positions.map((_, index) => ({ value: index }))}
-              value={index}
-              onChange={(_, index) => setIndex(index)}
-              valueLabelDisplay="auto"
-              valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
-              ValueLabelComponent={TimeLabel}
-            />
-          </Paper>
+            <Paper className={classes.controlContent}>
+                <Box maxWidth="sm" display="flex">
+                    <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>
+                    </Box>
+                    <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}>
+                        <SkipNextIcon />
+                    </IconButton>
+                </Box>
+                <Slider
+                  max={positions.length - 1}
+                  step={null}
+                  marks={positions.map((_, index) => ({ value: index }))}
+                  value={index}
+                  onChange={(_, index) => setIndex(index)}
+                  valueLabelDisplay="auto"
+                  valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
+                  ValueLabelComponent={TimeLabel}
+                />
+            </Paper>
           )}
         <div>
           <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>