|
1
|
import {
|
|
2
|
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 { useSelector } from 'react-redux'
|
|
22
|
import { RootState } from '../redux/store'
|
|
23
|
|
|
24
|
// Page with tracking tool
|
|
25
|
const TrackingTool = () => {
|
|
26
|
// Path response from the API
|
|
27
|
const pathDto = useSelector((state: RootState) => state.trackingTool.pathDto)
|
|
28
|
const pathVariants = useSelector((state: RootState) => state.trackingTool.pathVariants)
|
|
29
|
const mapCenter = useSelector((state: RootState) => state.trackingTool.mapCenter)
|
|
30
|
|
|
31
|
// const map = useMap()
|
|
32
|
|
|
33
|
// // Set the map center
|
|
34
|
// useEffect(() => {
|
|
35
|
// map.flyTo(mapCenter, mapConfig.defaultZoom)
|
|
36
|
// }, [map, mapCenter])
|
|
37
|
|
|
38
|
|
|
39
|
return (
|
|
40
|
<Fragment>
|
|
41
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
|
42
|
Tracking Tool
|
|
43
|
</Typography>
|
|
44
|
|
|
45
|
{pathDto && (
|
|
46
|
<Fragment>
|
|
47
|
<Card variant="outlined">
|
|
48
|
<CardContent>
|
|
49
|
<Stack direction="column">
|
|
50
|
<Typography
|
|
51
|
variant="h5"
|
|
52
|
sx={{ mb: 1 }}
|
|
53
|
fontWeight="600"
|
|
54
|
>
|
|
55
|
Processed Text
|
|
56
|
</Typography>
|
|
57
|
<Typography variant="body2">
|
|
58
|
{formatHtmlStringToReactDom(
|
|
59
|
pathDto.text ?? ''
|
|
60
|
)}
|
|
61
|
</Typography>
|
|
62
|
</Stack>
|
|
63
|
<Stack justifyItems="flex-end" alignSelf="flex-end" alignItems="flex-end">
|
|
64
|
<Button size="small" variant="outlined" startIcon={<EditIcon />}>Edit</Button>
|
|
65
|
</Stack>
|
|
66
|
</CardContent>
|
|
67
|
</Card>
|
|
68
|
</Fragment>
|
|
69
|
)}
|
|
70
|
<Grid container>
|
|
71
|
<Grid item xs={12}>
|
|
72
|
{pathDto && pathDto?.foundCatalogItems?.length === 0 && (
|
|
73
|
<Typography
|
|
74
|
variant="body1"
|
|
75
|
sx={{ mb: 2 }}
|
|
76
|
fontWeight="500"
|
|
77
|
align="center"
|
|
78
|
color="error.main"
|
|
79
|
>
|
|
80
|
Looks like no path / catalog items match this query.
|
|
81
|
</Typography>
|
|
82
|
)}
|
|
83
|
|
|
84
|
<Stack
|
|
85
|
direction="row"
|
|
86
|
alignItems="flex-start"
|
|
87
|
spacing={2}
|
|
88
|
sx={{ mt: 1 }}
|
|
89
|
>
|
|
90
|
<Typography
|
|
91
|
variant="h5"
|
|
92
|
sx={{ mb: 2 }}
|
|
93
|
fontWeight="500"
|
|
94
|
>
|
|
95
|
{pathDto ? 'Update path' : 'Show Path'}
|
|
96
|
</Typography>
|
|
97
|
<PlaintextUpload />
|
|
98
|
<FileUpload />
|
|
99
|
</Stack>
|
|
100
|
</Grid>
|
|
101
|
|
|
102
|
<Grid
|
|
103
|
item
|
|
104
|
xs={12}
|
|
105
|
md={12}
|
|
106
|
style={{
|
|
107
|
minHeight: '60vh',
|
|
108
|
maxHeight: '100vh',
|
|
109
|
width: '100%',
|
|
110
|
}}
|
|
111
|
>
|
|
112
|
<MapContainer
|
|
113
|
center={[mapCenter[0], mapCenter[1]]}
|
|
114
|
zoom={mapConfig.defaultZoom}
|
|
115
|
style={{ height: '100%', minHeight: '100%' }}
|
|
116
|
>
|
|
117
|
<TileLayer
|
|
118
|
attribution={mapConfig.attribution}
|
|
119
|
url={mapConfig.url}
|
|
120
|
/>
|
|
121
|
{pathVariants &&
|
|
122
|
pathVariants.map((pathVariant, idx) => (
|
|
123
|
<MapPath
|
|
124
|
key={idx}
|
|
125
|
pathVariant={pathVariant}
|
|
126
|
idx={idx}
|
|
127
|
/>
|
|
128
|
))}
|
|
129
|
</MapContainer>
|
|
130
|
</Grid>
|
|
131
|
</Grid>
|
|
132
|
</Fragment>
|
|
133
|
)
|
|
134
|
}
|
|
135
|
|
|
136
|
export default TrackingTool
|