1 |
48690561
|
Vaclav Honzik
|
import { Button, Grid, Stack, Typography } from '@mui/material'
|
2 |
|
|
import { Fragment, useEffect } from 'react'
|
3 |
a7ae217f
|
Vaclav Honzik
|
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 |
48690561
|
Vaclav Honzik
|
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 |
788ce11e
|
Vaclav Honzik
|
|
16 |
|
|
// Page with tracking tool
|
17 |
|
|
const TrackingTool = () => {
|
18 |
11fca75a
|
Vaclav Honzik
|
const pathDto = useSelector(
|
19 |
48690561
|
Vaclav Honzik
|
// Path response from the API
|
20 |
11fca75a
|
Vaclav Honzik
|
(state: RootState) => state.trackingTool.pathDto
|
21 |
|
|
)
|
22 |
48690561
|
Vaclav Honzik
|
|
23 |
|
|
// Use path as flag for undefined or present
|
24 |
|
|
const path = useSelector(
|
25 |
|
|
(state: RootState) => state.trackingTool.displayedPath
|
26 |
11fca75a
|
Vaclav Honzik
|
)
|
27 |
|
|
|
28 |
|
|
// Consume any error
|
29 |
48690561
|
Vaclav Honzik
|
const dispatch = useDispatch()
|
30 |
11fca75a
|
Vaclav Honzik
|
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 |
a7ae217f
|
Vaclav Honzik
|
severity: 'error',
|
41 |
11fca75a
|
Vaclav Honzik
|
})
|
42 |
|
|
)
|
43 |
|
|
}, [err, dispatch])
|
44 |
dd270a41
|
Vaclav Honzik
|
|
45 |
11fca75a
|
Vaclav Honzik
|
return (
|
46 |
|
|
<Fragment>
|
47 |
|
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
48 |
|
|
Tracking Tool
|
49 |
788ce11e
|
Vaclav Honzik
|
</Typography>
|
50 |
|
|
|
51 |
11fca75a
|
Vaclav Honzik
|
<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 |
a7ae217f
|
Vaclav Honzik
|
<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 |
48690561
|
Vaclav Honzik
|
{path && (
|
84 |
c0b66eaf
|
Vaclav Honzik
|
<Fragment>
|
85 |
|
|
<GeoJsonImportDialog />
|
86 |
|
|
<GeoJsonExportButton />
|
87 |
|
|
</Fragment>
|
88 |
a7ae217f
|
Vaclav Honzik
|
)}
|
89 |
|
|
</Stack>
|
90 |
11fca75a
|
Vaclav Honzik
|
|
91 |
|
|
{pathDto && (
|
92 |
26f9c9ff
|
Vaclav Honzik
|
<Fragment>
|
93 |
|
|
<MapPointToggleables />
|
94 |
48690561
|
Vaclav Honzik
|
<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 |
26f9c9ff
|
Vaclav Honzik
|
</Fragment>
|
105 |
11fca75a
|
Vaclav Honzik
|
)}
|
106 |
|
|
</Grid>
|
107 |
dda6e56e
|
Vaclav Honzik
|
|
108 |
11fca75a
|
Vaclav Honzik
|
<Grid
|
109 |
|
|
item
|
110 |
|
|
xs={12}
|
111 |
|
|
md={12}
|
112 |
|
|
style={{
|
113 |
a7ae217f
|
Vaclav Honzik
|
minHeight: '60vh',
|
114 |
|
|
maxHeight: '100vh',
|
115 |
|
|
width: '100%',
|
116 |
11fca75a
|
Vaclav Honzik
|
}}
|
117 |
|
|
>
|
118 |
48690561
|
Vaclav Honzik
|
<Map />
|
119 |
812b9f90
|
Vaclav Honzik
|
</Grid>
|
120 |
|
|
<Grid container sx={{ mt: 1, mb: 20 }} spacing={1}>
|
121 |
|
|
<Grid item xs={12} md={6}>
|
122 |
48690561
|
Vaclav Honzik
|
{/* <MapPointDraggableList /> */}
|
123 |
812b9f90
|
Vaclav Honzik
|
</Grid>
|
124 |
|
|
<Grid item xs={12} md={6}>
|
125 |
|
|
<ProcessedTextDisplay />
|
126 |
|
|
</Grid>
|
127 |
11fca75a
|
Vaclav Honzik
|
</Grid>
|
128 |
|
|
</Grid>
|
129 |
|
|
</Fragment>
|
130 |
|
|
)
|
131 |
788ce11e
|
Vaclav Honzik
|
}
|
132 |
|
|
|
133 |
|
|
export default TrackingTool
|