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