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