1 |
dda6e56e
|
Vaclav Honzik
|
import {
|
2 |
|
|
Button,
|
3 |
|
|
Card,
|
4 |
|
|
CardContent,
|
5 |
|
|
Divider,
|
6 |
|
|
Grid,
|
7 |
|
|
Paper,
|
8 |
|
|
Stack,
|
9 |
|
|
Typography,
|
10 |
|
|
} from '@mui/material'
|
11 |
|
|
import { Fragment, useState } from 'react'
|
12 |
788ce11e
|
Vaclav Honzik
|
import AddIcon from '@mui/icons-material/Add'
|
13 |
76e15218
|
Vaclav Honzik
|
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
14 |
788ce11e
|
Vaclav Honzik
|
import mapConfig from '../../config/mapConfig'
|
15 |
76e15218
|
Vaclav Honzik
|
import TextPath from 'react-leaflet-textpath'
|
16 |
0d90d67b
|
Vaclav Honzik
|
import PlaintextUpload from './PlaintextUpload'
|
17 |
|
|
import FileUpload from './FileUpload'
|
18 |
4f42fa52
|
Václav Honzík
|
import L from 'leaflet'
|
19 |
|
|
import DeleteIcon from '@mui/icons-material/Delete'
|
20 |
dda6e56e
|
Vaclav Honzik
|
import { PathDto } from '../../swagger/data-contracts'
|
21 |
|
|
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
22 |
788ce11e
|
Vaclav Honzik
|
|
23 |
|
|
// Page with tracking tool
|
24 |
|
|
const TrackingTool = () => {
|
25 |
dda6e56e
|
Vaclav Honzik
|
// Path response from the API
|
26 |
|
|
const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined)
|
27 |
|
|
|
28 |
0d90d67b
|
Vaclav Honzik
|
const createDummyPathCoords = () => {
|
29 |
76e15218
|
Vaclav Honzik
|
// Sample dummy path to display
|
30 |
|
|
const dummyPath = []
|
31 |
|
|
for (let i = 0; i < 10; i += 1) {
|
32 |
|
|
dummyPath.push({
|
33 |
|
|
latitude:
|
34 |
|
|
mapConfig.defaultCoordinates[0] +
|
35 |
|
|
i * 0.1 +
|
36 |
|
|
Math.random() * 0.1,
|
37 |
|
|
longitude:
|
38 |
|
|
mapConfig.defaultCoordinates[1] +
|
39 |
|
|
i * 0.1 +
|
40 |
|
|
Math.random() * 0.1,
|
41 |
|
|
})
|
42 |
|
|
}
|
43 |
|
|
return dummyPath
|
44 |
|
|
}
|
45 |
|
|
|
46 |
0d90d67b
|
Vaclav Honzik
|
const createDummyPath = () => {
|
47 |
|
|
const coords = createDummyPathCoords()
|
48 |
76e15218
|
Vaclav Honzik
|
const polylines: any[] = []
|
49 |
|
|
|
50 |
0d90d67b
|
Vaclav Honzik
|
if (coords.length < 2) {
|
51 |
76e15218
|
Vaclav Honzik
|
return []
|
52 |
|
|
}
|
53 |
|
|
|
54 |
0d90d67b
|
Vaclav Honzik
|
for (let i = 0; i < coords.length - 1; i += 1) {
|
55 |
76e15218
|
Vaclav Honzik
|
polylines.push(
|
56 |
|
|
<TextPath
|
57 |
|
|
positions={[
|
58 |
0d90d67b
|
Vaclav Honzik
|
[coords[i].latitude, coords[i].longitude],
|
59 |
|
|
[coords[i + 1].latitude, coords[i + 1].longitude],
|
60 |
76e15218
|
Vaclav Honzik
|
]}
|
61 |
|
|
text="►"
|
62 |
|
|
attributes={{
|
63 |
|
|
'font-size': 25,
|
64 |
0d90d67b
|
Vaclav Honzik
|
fill: 'blue',
|
65 |
76e15218
|
Vaclav Honzik
|
}}
|
66 |
|
|
repeat
|
67 |
|
|
center
|
68 |
|
|
weight={10}
|
69 |
4f42fa52
|
Václav Honzík
|
></TextPath>
|
70 |
76e15218
|
Vaclav Honzik
|
)
|
71 |
|
|
}
|
72 |
|
|
|
73 |
0d90d67b
|
Vaclav Honzik
|
return [polylines, coords]
|
74 |
76e15218
|
Vaclav Honzik
|
}
|
75 |
|
|
|
76 |
0d90d67b
|
Vaclav Honzik
|
const [polylines, coords] = createDummyPath()
|
77 |
788ce11e
|
Vaclav Honzik
|
|
78 |
|
|
return (
|
79 |
|
|
<Fragment>
|
80 |
|
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
81 |
|
|
Tracking Tool
|
82 |
|
|
</Typography>
|
83 |
|
|
|
84 |
dda6e56e
|
Vaclav Honzik
|
{pathDto && (
|
85 |
|
|
<Fragment>
|
86 |
|
|
<Card variant="outlined">
|
87 |
|
|
<CardContent>
|
88 |
|
|
<Stack direction="column">
|
89 |
|
|
<Typography
|
90 |
|
|
variant="h5"
|
91 |
|
|
sx={{ mb: 1 }}
|
92 |
|
|
fontWeight="600"
|
93 |
|
|
>
|
94 |
|
|
Sought text
|
95 |
|
|
</Typography>
|
96 |
|
|
<Typography variant="body2">
|
97 |
|
|
{formatHtmlStringToReactDom(
|
98 |
|
|
pathDto.text ?? ''
|
99 |
|
|
)}
|
100 |
|
|
</Typography>
|
101 |
|
|
</Stack>
|
102 |
|
|
</CardContent>
|
103 |
|
|
</Card>
|
104 |
|
|
</Fragment>
|
105 |
|
|
)}
|
106 |
788ce11e
|
Vaclav Honzik
|
<Grid container>
|
107 |
dda6e56e
|
Vaclav Honzik
|
<Grid item xs={12}>
|
108 |
|
|
{pathDto && pathDto?.foundCatalogItems?.length === 0 && (
|
109 |
|
|
<Typography
|
110 |
|
|
variant="body1"
|
111 |
|
|
sx={{ mb: 2 }}
|
112 |
|
|
fontWeight="500"
|
113 |
|
|
align="center"
|
114 |
|
|
color="error.main"
|
115 |
|
|
>
|
116 |
|
|
Looks like no path / catalog items match this query.
|
117 |
|
|
</Typography>
|
118 |
|
|
)}
|
119 |
|
|
|
120 |
788ce11e
|
Vaclav Honzik
|
<Stack
|
121 |
|
|
direction="row"
|
122 |
|
|
alignItems="flex-start"
|
123 |
|
|
spacing={2}
|
124 |
|
|
sx={{ m: 0, p: 0 }}
|
125 |
|
|
>
|
126 |
|
|
<Typography
|
127 |
|
|
variant="h5"
|
128 |
|
|
sx={{ mb: 2 }}
|
129 |
|
|
fontWeight="500"
|
130 |
|
|
>
|
131 |
dda6e56e
|
Vaclav Honzik
|
{pathDto ? 'Update path' : 'Show Path'}
|
132 |
788ce11e
|
Vaclav Honzik
|
</Typography>
|
133 |
dda6e56e
|
Vaclav Honzik
|
<PlaintextUpload setPaths={setPathDto} />
|
134 |
0d90d67b
|
Vaclav Honzik
|
<FileUpload />
|
135 |
788ce11e
|
Vaclav Honzik
|
</Stack>
|
136 |
|
|
</Grid>
|
137 |
dda6e56e
|
Vaclav Honzik
|
|
138 |
76e15218
|
Vaclav Honzik
|
<Grid
|
139 |
|
|
item
|
140 |
|
|
xs={12}
|
141 |
41a11178
|
Vaclav Honzik
|
md={12}
|
142 |
76e15218
|
Vaclav Honzik
|
style={{
|
143 |
|
|
minHeight: '60vh',
|
144 |
|
|
maxHeight: '100vh',
|
145 |
|
|
width: '100%',
|
146 |
|
|
}}
|
147 |
|
|
>
|
148 |
788ce11e
|
Vaclav Honzik
|
<MapContainer
|
149 |
76e15218
|
Vaclav Honzik
|
center={[
|
150 |
|
|
mapConfig.defaultCoordinates[0],
|
151 |
|
|
mapConfig.defaultCoordinates[1],
|
152 |
|
|
]}
|
153 |
788ce11e
|
Vaclav Honzik
|
zoom={mapConfig.defaultZoom}
|
154 |
|
|
style={{ height: '100%', minHeight: '100%' }}
|
155 |
|
|
>
|
156 |
76e15218
|
Vaclav Honzik
|
<TileLayer
|
157 |
|
|
attribution={mapConfig.attribution}
|
158 |
|
|
url={mapConfig.url}
|
159 |
|
|
/>
|
160 |
0d90d67b
|
Vaclav Honzik
|
{coords.map(({ latitude, longitude }, idx) => (
|
161 |
dda6e56e
|
Vaclav Honzik
|
<Marker position={[latitude, longitude]} />
|
162 |
0d90d67b
|
Vaclav Honzik
|
))}
|
163 |
76e15218
|
Vaclav Honzik
|
{polylines}
|
164 |
788ce11e
|
Vaclav Honzik
|
</MapContainer>
|
165 |
|
|
</Grid>
|
166 |
|
|
</Grid>
|
167 |
|
|
</Fragment>
|
168 |
|
|
)
|
169 |
|
|
}
|
170 |
|
|
|
171 |
|
|
export default TrackingTool
|