1
|
import { Button, Grid, Stack, Typography } from '@mui/material'
|
2
|
import { Fragment, useEffect } from 'react'
|
3
|
import PlaintextUpload from './Upload/PlaintextUpload'
|
4
|
import FileUpload from './Upload/FileUpload'
|
5
|
import { useDispatch, useSelector } from 'react-redux'
|
6
|
import { RootState } from '../redux/store'
|
7
|
import { clear, consumeErr as consumeError } from './trackingToolSlice'
|
8
|
import { showNotification } from '../Notification/notificationSlice'
|
9
|
import ClearIcon from '@mui/icons-material/Clear'
|
10
|
import GeoJsonExportButton from './Import/GeoJsonExportButton'
|
11
|
import ProcessedTextDisplay from './Controls/ProcessedTextDisplay'
|
12
|
import MapPointToggleables from './Controls/MapPointToggleables'
|
13
|
import GeoJsonImportDialog from './Import/GeoJsonImportDialog'
|
14
|
import Map from './Map/Map'
|
15
|
|
16
|
// Page with tracking tool
|
17
|
const TrackingTool = () => {
|
18
|
const pathDto = useSelector(
|
19
|
// Path response from the API
|
20
|
(state: RootState) => state.trackingTool.pathDto
|
21
|
)
|
22
|
|
23
|
// Use path as flag for undefined or present
|
24
|
const path = useSelector(
|
25
|
(state: RootState) => state.trackingTool.displayedPath
|
26
|
)
|
27
|
|
28
|
// Consume any error
|
29
|
const dispatch = useDispatch()
|
30
|
const err = useSelector((state: RootState) => state.trackingTool.lastError)
|
31
|
useEffect(() => {
|
32
|
if (!err) {
|
33
|
return
|
34
|
}
|
35
|
const error = `${err}`
|
36
|
dispatch(consumeError())
|
37
|
dispatch(
|
38
|
showNotification({
|
39
|
message: error,
|
40
|
severity: 'error',
|
41
|
})
|
42
|
)
|
43
|
}, [err, dispatch])
|
44
|
|
45
|
return (
|
46
|
<Fragment>
|
47
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
48
|
Tracking Tool
|
49
|
</Typography>
|
50
|
|
51
|
<Grid container>
|
52
|
<Grid item xs={12}>
|
53
|
{pathDto && pathDto?.foundCatalogItems?.length === 0 && (
|
54
|
<Typography
|
55
|
variant="body1"
|
56
|
sx={{ mb: 2 }}
|
57
|
fontWeight="500"
|
58
|
align="center"
|
59
|
color="error.main"
|
60
|
>
|
61
|
Looks like no path / catalog items match this query.
|
62
|
</Typography>
|
63
|
)}
|
64
|
<Stack
|
65
|
direction="row"
|
66
|
alignItems="flex-start"
|
67
|
spacing={2}
|
68
|
sx={{ mt: 1 }}
|
69
|
>
|
70
|
{!pathDto && (
|
71
|
<Fragment>
|
72
|
<Typography
|
73
|
variant="h5"
|
74
|
sx={{ mb: 2 }}
|
75
|
fontWeight="500"
|
76
|
>
|
77
|
Upload:
|
78
|
</Typography>
|
79
|
<PlaintextUpload />
|
80
|
<FileUpload />
|
81
|
</Fragment>
|
82
|
)}
|
83
|
{path && (
|
84
|
<Fragment>
|
85
|
<GeoJsonImportDialog />
|
86
|
<GeoJsonExportButton />
|
87
|
</Fragment>
|
88
|
)}
|
89
|
</Stack>
|
90
|
|
91
|
{pathDto && (
|
92
|
<Fragment>
|
93
|
<MapPointToggleables />
|
94
|
<Stack alignItems="flex-end">
|
95
|
<Button
|
96
|
startIcon={<ClearIcon />}
|
97
|
sx={{ mb: 1 }}
|
98
|
variant="contained"
|
99
|
onClick={() => dispatch(clear())}
|
100
|
>
|
101
|
Clear Map
|
102
|
</Button>
|
103
|
</Stack>
|
104
|
</Fragment>
|
105
|
)}
|
106
|
</Grid>
|
107
|
|
108
|
<Grid
|
109
|
item
|
110
|
xs={12}
|
111
|
md={12}
|
112
|
style={{
|
113
|
minHeight: '60vh',
|
114
|
maxHeight: '100vh',
|
115
|
width: '100%',
|
116
|
}}
|
117
|
>
|
118
|
<Map />
|
119
|
</Grid>
|
120
|
<Grid container sx={{ mt: 1, mb: 20 }} spacing={1}>
|
121
|
<Grid item xs={12} md={6}>
|
122
|
{/* <MapPointDraggableList /> */}
|
123
|
</Grid>
|
124
|
<Grid item xs={12} md={6}>
|
125
|
<ProcessedTextDisplay />
|
126
|
</Grid>
|
127
|
</Grid>
|
128
|
</Grid>
|
129
|
</Fragment>
|
130
|
)
|
131
|
}
|
132
|
|
133
|
export default TrackingTool
|