import React, { useEffect, 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';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SkipNextIcon from '@material-ui/icons/SkipNext';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause';
import MainToolbar from '../MainToolbar';
import Map from '../map/Map';
import ReplayPathMap from '../map/ReplayPathMap';
import PositionsMap from '../map/PositionsMap';
import { formatPosition, formatSpeed, formatDistance } from '../common/formatter';
import ReportFilter from './ReportFilter';
import { useTranslation } from '../LocalizationProvider';
import { useAttributePreference } from '../common/preferences';
import { useInterval } from '../reactHelper';
const useStyles = makeStyles((theme) => ({
root: {
height: '100%',
display: 'flex',
flexDirection: 'column',
},
controlPanel: {
position: 'absolute',
bottom: theme.spacing(5),
left: '50%',
transform: 'translateX(-50%)',
},
controlContent: {
padding: theme.spacing(2),
marginBottom: theme.spacing(2),
},
configForm: {
display: 'flex',
flexDirection: 'column',
},
}));
const TimeLabel = ({ children, open, value }) => (
{children}
);
const ReplayPage = () => {
const classes = useStyles();
const { id } = useParams();
const t = useTranslation();
const speedUnit = useAttributePreference('speedUnit');
const [playback, setPlayback] = useState(false);
const [expanded, setExpanded] = useState(true);
const [positions, setPositions] = useState([]);
const [totalDistance, setTotalDistance] = useState(0.0);
const [index, setIndex] = useState(0);
const handleSubmit = async (deviceId, from, to, _, headers) => {
const query = new URLSearchParams({ deviceId, from, to });
const response = await fetch(`/api/positions?${query.toString()}`, { headers });
if (response.ok) {
setIndex(0);
setPositions(await response.json());
setExpanded(false);
const response2 = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
if (response2.ok) {
let data = await response2.json();
if (data.length > 0) {
setTotalDistance (data[0].distance);
}
}
}
};
useInterval(() => {
if (playback && index < positions.length - 1) {
console.log(`Index: ${index}`);
setIndex(index + 1);
}
}, 1000);
return (
{!!positions.length
&& (
{/* Previous position button */}
setPlayback(!playback)}>
{ playback ? : }
{/* Date time */}
{formatPosition(positions[index], 'fixTime', t)}
{/* Speed */}
{positions[index].speed != undefined &&
<>
{formatSpeed(positions[index].speed, speedUnit, t)}
{t('deviceTotalDistance')} {formatDistance(totalDistance, 'km', t)}
>}
{/* Previous position button */}
setIndex(index - 1)}>
{/* Next position button*/}
setIndex(index + 1)}>
({ value: index }))}
value={index}
onChange={(_, index) => setIndex(index)}
valueLabelDisplay="auto"
valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
ValueLabelComponent={TimeLabel}
/>
)}
setExpanded(!expanded)}>
}>
{t('reportConfigure')}
);
};
export default ReplayPage;