Revize dda6e56e
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
| frontend/src/features/TrackingTool/TrackingTool.tsx | ||
|---|---|---|
| 1 |
import { Button, Divider, Grid, Stack, Typography } from '@mui/material'
|
|
| 2 |
import { Fragment } from 'react'
|
|
| 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'
|
|
| 3 | 12 |
import AddIcon from '@mui/icons-material/Add' |
| 4 | 13 |
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
| 5 | 14 |
import mapConfig from '../../config/mapConfig' |
| ... | ... | |
| 8 | 17 |
import FileUpload from './FileUpload' |
| 9 | 18 |
import L from 'leaflet' |
| 10 | 19 |
import DeleteIcon from '@mui/icons-material/Delete' |
| 20 |
import { PathDto } from '../../swagger/data-contracts'
|
|
| 21 |
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
|
| 11 | 22 |
|
| 12 | 23 |
// Page with tracking tool |
| 13 | 24 |
const TrackingTool = () => {
|
| 25 |
// Path response from the API |
|
| 26 |
const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined) |
|
| 27 |
|
|
| 14 | 28 |
const createDummyPathCoords = () => {
|
| 15 | 29 |
// Sample dummy path to display |
| 16 | 30 |
const dummyPath = [] |
| ... | ... | |
| 39 | 53 |
|
| 40 | 54 |
for (let i = 0; i < coords.length - 1; i += 1) {
|
| 41 | 55 |
polylines.push( |
| 42 |
// <Polyline |
|
| 43 |
// key={i}
|
|
| 44 |
// positions={[
|
|
| 45 |
// [dummyPath[i].latitude, dummyPath[i].longitude], |
|
| 46 |
// [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude], |
|
| 47 |
// ]} |
|
| 48 |
// color="red" |
|
| 49 |
// weight={5}
|
|
| 50 |
// opacity={1}
|
|
| 51 |
|
|
| 52 |
// smoothFactor={1}
|
|
| 53 |
// > |
|
| 54 |
// <Popup>Caesar 🥗 War Path (Allegedly)</Popup> |
|
| 55 |
// </Polyline> |
|
| 56 | 56 |
<TextPath |
| 57 | 57 |
positions={[
|
| 58 | 58 |
[coords[i].latitude, coords[i].longitude], |
| ... | ... | |
| 81 | 81 |
Tracking Tool |
| 82 | 82 |
</Typography> |
| 83 | 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 |
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 |
)} |
|
| 84 | 106 |
<Grid container> |
| 85 |
<Grid item xs={12} md={4}>
|
|
| 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 |
|
|
| 86 | 120 |
<Stack |
| 87 | 121 |
direction="row" |
| 88 | 122 |
alignItems="flex-start" |
| ... | ... | |
| 94 | 128 |
sx={{ mb: 2 }}
|
| 95 | 129 |
fontWeight="500" |
| 96 | 130 |
> |
| 97 |
Upload:
|
|
| 131 |
{pathDto ? 'Update path' : 'Show Path'}
|
|
| 98 | 132 |
</Typography> |
| 99 |
<PlaintextUpload /> |
|
| 133 |
<PlaintextUpload setPaths={setPathDto} />
|
|
| 100 | 134 |
<FileUpload /> |
| 101 | 135 |
</Stack> |
| 102 | 136 |
</Grid> |
| 137 |
|
|
| 103 | 138 |
<Grid |
| 104 | 139 |
item |
| 105 | 140 |
xs={12}
|
| ... | ... | |
| 123 | 158 |
url={mapConfig.url}
|
| 124 | 159 |
/> |
| 125 | 160 |
{coords.map(({ latitude, longitude }, idx) => (
|
| 126 |
<Marker |
|
| 127 |
position={[latitude, longitude]}
|
|
| 128 |
/> |
|
| 161 |
<Marker position={[latitude, longitude]} />
|
|
| 129 | 162 |
))} |
| 130 | 163 |
{polylines}
|
| 131 | 164 |
</MapContainer> |
Také k dispozici: Unified diff
Send text query to the api
re #9629