1
|
import { Button } from '@mui/material'
|
2
|
import { useEffect, useState } from 'react'
|
3
|
import { useSelector } from 'react-redux'
|
4
|
import { RootState } from '../../redux/store'
|
5
|
import { isMapPointDisplayable, PathVariant } from '../Map/pathUtils'
|
6
|
import { exportAsGeoJsonString } from './GeoJsonIo'
|
7
|
|
8
|
const GeoJsonExportButton = () => {
|
9
|
const [path, setPath] = useState<PathVariant | undefined>(undefined)
|
10
|
const primaryPathIdx = useSelector(
|
11
|
(state: RootState) => state.trackingTool.primaryPathIdx
|
12
|
)
|
13
|
const pathVariants = useSelector(
|
14
|
(state: RootState) => state.trackingTool.pathVariants
|
15
|
)
|
16
|
useEffect(() => {
|
17
|
if (
|
18
|
!pathVariants ||
|
19
|
pathVariants.length === 0 ||
|
20
|
pathVariants.length <= primaryPathIdx
|
21
|
) {
|
22
|
setPath(undefined)
|
23
|
return
|
24
|
}
|
25
|
|
26
|
setPath(pathVariants[primaryPathIdx])
|
27
|
}, [primaryPathIdx, pathVariants])
|
28
|
|
29
|
const exportPath = () => {
|
30
|
if (!path) {
|
31
|
return
|
32
|
}
|
33
|
|
34
|
const exportPath = path.filter(
|
35
|
(vertex) => isMapPointDisplayable(vertex) && vertex.addToPath
|
36
|
)
|
37
|
const exportPathString = exportAsGeoJsonString(exportPath)
|
38
|
const blob = new Blob([exportPathString], { type: 'application/json' })
|
39
|
const url = window.URL.createObjectURL(blob)
|
40
|
const link = document.createElement('a')
|
41
|
link.href = url
|
42
|
link.setAttribute('download', 'path.json')
|
43
|
document.body.appendChild(link)
|
44
|
link.click()
|
45
|
document.body.removeChild(link)
|
46
|
}
|
47
|
|
48
|
return (
|
49
|
<Button variant="contained" onClick={exportPath}>
|
50
|
Export
|
51
|
</Button>
|
52
|
)
|
53
|
}
|
54
|
|
55
|
export default GeoJsonExportButton
|