aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-03 15:52:39 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-03 15:52:39 -0700
commitc84878baa4e68aed6bb2e053d0a0c612b68aedda (patch)
tree6952e72a17a5e838763c812f4823a5a235a654c5
parent05b8de1c99321b12ee246a60bb26778543c40094 (diff)
downloadtrackermap-web-c84878baa4e68aed6bb2e053d0a0c612b68aedda.tar.gz
trackermap-web-c84878baa4e68aed6bb2e053d0a0c612b68aedda.tar.bz2
trackermap-web-c84878baa4e68aed6bb2e053d0a0c612b68aedda.zip
Support KML export (fix #10)
-rw-r--r--modern/src/other/ReplayPage.js28
1 files changed, 24 insertions, 4 deletions
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index 7a655d10..a7d5ad49 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -6,7 +6,8 @@ import {
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SettingsIcon from '@mui/icons-material/Settings';
+import TuneIcon from '@mui/icons-material/Tune';
+import DownloadIcon from '@mui/icons-material/Download';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import FastForwardIcon from '@mui/icons-material/FastForward';
@@ -81,6 +82,8 @@ const ReplayPage = () => {
const [positions, setPositions] = useState([]);
const [index, setIndex] = useState(0);
const [selectedDeviceId, setSelectedDeviceId] = useState(defaultDeviceId);
+ const [from, setFrom] = useState();
+ const [to, setTo] = useState();
const [expanded, setExpanded] = useState(true);
const [playing, setPlaying] = useState(false);
@@ -119,6 +122,8 @@ const ReplayPage = () => {
const handleSubmit = useCatch(async ({ deviceId, from, to, headers }) => {
setSelectedDeviceId(deviceId);
+ setFrom(from);
+ setTo(to);
const query = new URLSearchParams({ deviceId, from, to });
const response = await fetch(`/api/positions?${query.toString()}`, { headers });
if (response.ok) {
@@ -135,6 +140,16 @@ const ReplayPage = () => {
}
});
+ const handleDownload = useCatch(async () => {
+ const query = new URLSearchParams({ deviceId: selectedDeviceId, from, to });
+ const response = await fetch(`/api/positions/kml?${query.toString()}`);
+ if (response.ok) {
+ window.location.assign(window.URL.createObjectURL(await response.blob()));
+ } else {
+ throw Error(await response.text());
+ }
+ });
+
return (
<div className={classes.root}>
<MapView>
@@ -151,9 +166,14 @@ const ReplayPage = () => {
</IconButton>
<Typography variant="h6" className={classes.title}>{t('reportReplay')}</Typography>
{!expanded && (
- <IconButton edge="end" onClick={() => setExpanded(true)}>
- <SettingsIcon />
- </IconButton>
+ <>
+ <IconButton onClick={handleDownload}>
+ <DownloadIcon />
+ </IconButton>
+ <IconButton edge="end" onClick={() => setExpanded(true)}>
+ <TuneIcon />
+ </IconButton>
+ </>
)}
</Toolbar>
</Paper>