1
|
import {
|
2
|
Button,
|
3
|
Card,
|
4
|
CardContent,
|
5
|
Grid,
|
6
|
Stack,
|
7
|
Typography,
|
8
|
} from '@mui/material'
|
9
|
import { Fragment, useEffect, useRef } from 'react'
|
10
|
import { MapContainer, TileLayer } from 'react-leaflet'
|
11
|
import mapConfig from '../../config/mapConfig'
|
12
|
import PlaintextUpload from './Upload/PlaintextUpload'
|
13
|
import FileUpload from './Upload/FileUpload'
|
14
|
import { Map } from 'leaflet'
|
15
|
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
16
|
import MapPath from './Map/MapPath'
|
17
|
import { useDispatch, useSelector } from 'react-redux'
|
18
|
import { RootState } from '../redux/store'
|
19
|
import { clear, consumeErr as consumeError } from './trackingToolSlice'
|
20
|
import { showNotification } from '../Notification/notificationSlice'
|
21
|
import ClearIcon from '@mui/icons-material/Clear'
|
22
|
import GeoJsonExportButton from './Upload/GeoJsonExportButton'
|
23
|
import GeoJsonImportDialog from './Upload/GeoJsonImportDialog'
|
24
|
import ProcessedTextDisplay from './ProcessedText/ProcessedTextDisplay'
|
25
|
import DraggableMarkerList from './DraggableList/DraggableMarkerList'
|
26
|
|
27
|
// Page with tracking tool
|
28
|
const TrackingTool = () => {
|
29
|
const dispatch = useDispatch()
|
30
|
|
31
|
// Path response from the API
|
32
|
const pathDto = useSelector(
|
33
|
(state: RootState) => state.trackingTool.pathDto
|
34
|
)
|
35
|
const pathVariants = useSelector(
|
36
|
(state: RootState) => state.trackingTool.pathVariants
|
37
|
)
|
38
|
const mapCenter = useSelector(
|
39
|
(state: RootState) => state.trackingTool.mapCenter
|
40
|
)
|
41
|
|
42
|
// Consume any error
|
43
|
const err = useSelector((state: RootState) => state.trackingTool.lastError)
|
44
|
useEffect(() => {
|
45
|
if (!err) {
|
46
|
return
|
47
|
}
|
48
|
const error = `${err}`
|
49
|
dispatch(consumeError())
|
50
|
dispatch(
|
51
|
showNotification({
|
52
|
message: error,
|
53
|
severity: 'error',
|
54
|
})
|
55
|
)
|
56
|
}, [err, dispatch])
|
57
|
|
58
|
const mapRef = useRef<Map | undefined>(undefined)
|
59
|
useEffect(() => {
|
60
|
if (!mapRef || !mapRef.current) {
|
61
|
console.log('No map ref')
|
62
|
return
|
63
|
}
|
64
|
|
65
|
const map = mapRef.current
|
66
|
map.setView(mapCenter, mapConfig.defaultZoom, {
|
67
|
animate: true,
|
68
|
})
|
69
|
}, [mapCenter, mapRef])
|
70
|
|
71
|
return (
|
72
|
<Fragment>
|
73
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
74
|
Tracking Tool
|
75
|
</Typography>
|
76
|
|
77
|
<Grid container>
|
78
|
<Grid item xs={12}>
|
79
|
{pathDto && pathDto?.foundCatalogItems?.length === 0 && (
|
80
|
<Typography
|
81
|
variant="body1"
|
82
|
sx={{ mb: 2 }}
|
83
|
fontWeight="500"
|
84
|
align="center"
|
85
|
color="error.main"
|
86
|
>
|
87
|
Looks like no path / catalog items match this query.
|
88
|
</Typography>
|
89
|
)}
|
90
|
<Stack
|
91
|
direction="row"
|
92
|
alignItems="flex-start"
|
93
|
spacing={2}
|
94
|
sx={{ mt: 1 }}
|
95
|
>
|
96
|
{!pathDto && (
|
97
|
<Fragment>
|
98
|
<Typography
|
99
|
variant="h5"
|
100
|
sx={{ mb: 2 }}
|
101
|
fontWeight="500"
|
102
|
>
|
103
|
Upload:
|
104
|
</Typography>
|
105
|
<PlaintextUpload />
|
106
|
<FileUpload />
|
107
|
</Fragment>
|
108
|
)}
|
109
|
<GeoJsonImportDialog />
|
110
|
{pathVariants && pathVariants.length > 0 && (
|
111
|
<GeoJsonExportButton />
|
112
|
)}
|
113
|
</Stack>
|
114
|
|
115
|
{pathDto && (
|
116
|
<Stack alignItems="flex-end">
|
117
|
<Button
|
118
|
startIcon={<ClearIcon />}
|
119
|
sx={{ mb: 1 }}
|
120
|
variant="contained"
|
121
|
onClick={() => dispatch(clear())}
|
122
|
>
|
123
|
Clear Map
|
124
|
</Button>
|
125
|
</Stack>
|
126
|
)}
|
127
|
</Grid>
|
128
|
|
129
|
<Grid
|
130
|
item
|
131
|
xs={12}
|
132
|
md={12}
|
133
|
style={{
|
134
|
minHeight: '60vh',
|
135
|
maxHeight: '100vh',
|
136
|
width: '100%',
|
137
|
}}
|
138
|
>
|
139
|
<MapContainer
|
140
|
center={[mapCenter[0], mapCenter[1]]}
|
141
|
zoom={mapConfig.defaultZoom}
|
142
|
style={{ height: '100%', minHeight: '100%' }}
|
143
|
whenCreated={(map) => {
|
144
|
mapRef.current = map
|
145
|
}}
|
146
|
>
|
147
|
<TileLayer
|
148
|
attribution={mapConfig.attribution}
|
149
|
url={mapConfig.url}
|
150
|
/>
|
151
|
{pathVariants?.map((pathVariant, idx) => (
|
152
|
<MapPath idx={idx} />
|
153
|
))}
|
154
|
</MapContainer>
|
155
|
</Grid>
|
156
|
<Grid container sx={{ mt: 1, mb: 20 }} spacing={1}>
|
157
|
<Grid item xs={12} md={6}>
|
158
|
<DraggableMarkerList />
|
159
|
</Grid>
|
160
|
<Grid item xs={12} md={6}>
|
161
|
<ProcessedTextDisplay />
|
162
|
</Grid>
|
163
|
</Grid>
|
164
|
</Grid>
|
165
|
</Fragment>
|
166
|
)
|
167
|
}
|
168
|
|
169
|
export default TrackingTool
|