aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ReplayPage.js43
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)}>