1
|
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
|
import AddIcon from '@mui/icons-material/Add'
|
13
|
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
14
|
import mapConfig from '../../config/mapConfig'
|
15
|
import TextPath from 'react-leaflet-textpath'
|
16
|
import PlaintextUpload from './PlaintextUpload'
|
17
|
import FileUpload from './FileUpload'
|
18
|
import L from 'leaflet'
|
19
|
import DeleteIcon from '@mui/icons-material/Delete'
|
20
|
import { PathDto } from '../../swagger/data-contracts'
|
21
|
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
22
|
|
23
|
// Page with tracking tool
|
24
|
const TrackingTool = () => {
|
25
|
// Path response from the API
|
26
|
const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined)
|
27
|
|
28
|
const createDummyPathCoords = () => {
|
29
|
// 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
|
const createDummyPath = () => {
|
47
|
const coords = createDummyPathCoords()
|
48
|
const polylines: any[] = []
|
49
|
|
50
|
if (coords.length < 2) {
|
51
|
return []
|
52
|
}
|
53
|
|
54
|
for (let i = 0; i < coords.length - 1; i += 1) {
|
55
|
polylines.push(
|
56
|
<TextPath
|
57
|
positions={[
|
58
|
[coords[i].latitude, coords[i].longitude],
|
59
|
[coords[i + 1].latitude, coords[i + 1].longitude],
|
60
|
]}
|
61
|
text="►"
|
62
|
attributes={{
|
63
|
'font-size': 25,
|
64
|
fill: 'blue',
|
65
|
}}
|
66
|
repeat
|
67
|
center
|
68
|
weight={10}
|
69
|
></TextPath>
|
70
|
)
|
71
|
}
|
72
|
|
73
|
return [polylines, coords]
|
74
|
}
|
75
|
|
76
|
const [polylines, coords] = createDummyPath()
|
77
|
|
78
|
return (
|
79
|
<Fragment>
|
80
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
81
|
Tracking Tool
|
82
|
</Typography>
|
83
|
|
84
|
{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
|
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
|
<Grid container>
|
107
|
<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
|
<Stack
|
121
|
direction="row"
|
122
|
alignItems="flex-start"
|
123
|
spacing={2}
|
124
|
sx={{ mt: 1 }}
|
125
|
>
|
126
|
<Typography
|
127
|
variant="h5"
|
128
|
sx={{ mb: 2 }}
|
129
|
fontWeight="500"
|
130
|
>
|
131
|
{pathDto ? 'Update path' : 'Show Path'}
|
132
|
</Typography>
|
133
|
<PlaintextUpload setPaths={setPathDto} />
|
134
|
<FileUpload />
|
135
|
</Stack>
|
136
|
</Grid>
|
137
|
|
138
|
<Grid
|
139
|
item
|
140
|
xs={12}
|
141
|
md={12}
|
142
|
style={{
|
143
|
minHeight: '60vh',
|
144
|
maxHeight: '100vh',
|
145
|
width: '100%',
|
146
|
}}
|
147
|
>
|
148
|
<MapContainer
|
149
|
center={[
|
150
|
mapConfig.defaultCoordinates[0],
|
151
|
mapConfig.defaultCoordinates[1],
|
152
|
]}
|
153
|
zoom={mapConfig.defaultZoom}
|
154
|
style={{ height: '100%', minHeight: '100%' }}
|
155
|
>
|
156
|
<TileLayer
|
157
|
attribution={mapConfig.attribution}
|
158
|
url={mapConfig.url}
|
159
|
/>
|
160
|
{coords.map(({ latitude, longitude }, idx) => (
|
161
|
<Marker position={[latitude, longitude]} />
|
162
|
))}
|
163
|
{polylines}
|
164
|
</MapContainer>
|
165
|
</Grid>
|
166
|
</Grid>
|
167
|
</Fragment>
|
168
|
)
|
169
|
}
|
170
|
|
171
|
export default TrackingTool
|