Revize b70813cb
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
| frontend/src/features/TrackingTool/TrackingTool.tsx | ||
|---|---|---|
| 1 |
import {
|
|
| 2 |
Button, |
|
| 3 |
Card, |
|
| 4 |
CardContent, |
|
| 5 |
Divider, |
|
| 6 |
Grid, |
|
| 7 |
Paper, |
|
| 8 |
Stack, |
|
| 9 |
Typography, |
|
| 10 |
} from '@mui/material' |
|
| 1 |
import { Card, CardContent, Grid, Stack, Typography } from '@mui/material'
|
|
| 11 | 2 |
import { Fragment, useEffect, useState } from 'react'
|
| 12 |
import AddIcon from '@mui/icons-material/Add' |
|
| 13 |
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
|
| 3 |
import { MapContainer, TileLayer } from 'react-leaflet'
|
|
| 14 | 4 |
import mapConfig from '../../config/mapConfig' |
| 15 | 5 |
import TextPath from 'react-leaflet-textpath' |
| 16 | 6 |
import PlaintextUpload from './PlaintextUpload' |
| ... | ... | |
| 20 | 10 |
import { PathDto } from '../../swagger/data-contracts'
|
| 21 | 11 |
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
| 22 | 12 |
import buildPathVariants, { PathVariant } from './buildPathVariants'
|
| 13 |
import MapPath from './MapPath' |
|
| 23 | 14 |
|
| 24 | 15 |
// Page with tracking tool |
| 25 | 16 |
const TrackingTool = () => {
|
| ... | ... | |
| 35 | 26 |
undefined |
| 36 | 27 |
) |
| 37 | 28 |
|
| 38 |
// List of all rendered paths to display |
|
| 39 |
const [renderedPaths, setRenderedPaths] = useState<any[]>([]) |
|
| 40 |
|
|
| 29 |
// latitude longitude pair of where the map is to be centered |
|
| 41 | 30 |
const [mapCenter, setMapCenter] = useState<number[]>([ |
| 42 | 31 |
mapConfig.defaultCoordinates[0], |
| 43 | 32 |
mapConfig.defaultCoordinates[1], |
| 44 | 33 |
]) |
| 45 | 34 |
|
| 35 |
const [primaryPathIdx, setActivePathIdx] = useState(0) |
|
| 36 |
|
|
| 37 |
// TODO make some sort of selection list to select active paths? |
|
| 38 |
const [activePaths, setActivePaths] = useState<Set<number>>(new Set()) |
|
| 39 |
|
|
| 46 | 40 |
// Returns tuple of average latitude and longitude |
| 47 | 41 |
const calculateMapCenter = (pathVariant: PathVariant) => [ |
| 48 | 42 |
pathVariant |
| ... | ... | |
| 53 | 47 |
.reduce((a, b) => a + b, 0) / pathVariant.length, |
| 54 | 48 |
] |
| 55 | 49 |
|
| 50 |
useEffect(() => {
|
|
| 51 |
if (!pathVariants || pathVariants.length === 0) {
|
|
| 52 |
return |
|
| 53 |
} |
|
| 54 |
// TODO calculate only for path that has some non-null coordinates |
|
| 55 |
setMapCenter(calculateMapCenter(pathVariants[0])) |
|
| 56 |
}, [pathVariants]) |
|
| 57 |
|
|
| 56 | 58 |
useEffect(() => {
|
| 57 | 59 |
if (!pathDto) {
|
| 58 | 60 |
return |
| ... | ... | |
| 60 | 62 |
|
| 61 | 63 |
setBuildingPathVariants(true) |
| 62 | 64 |
buildPathVariants(pathDto).then((pathVariants) => {
|
| 65 |
setActivePaths(new Set(pathVariants.map((_, idx) => idx))) |
|
| 63 | 66 |
setPathVariants(pathVariants) |
| 64 | 67 |
setBuildingPathVariants(false) |
| 65 |
const paths: any[] = [] |
|
| 66 |
let first = true |
|
| 67 |
pathVariants?.forEach((pathVariant) => {
|
|
| 68 |
if (first) {
|
|
| 69 |
setMapCenter(calculateMapCenter(pathVariant)) |
|
| 70 |
} |
|
| 71 |
for (let i = 0; i < pathVariant.length - 1; i++) {
|
|
| 72 |
paths.push( |
|
| 73 |
<TextPath |
|
| 74 |
positions={[
|
|
| 75 |
[ |
|
| 76 |
pathVariant[i].latitude, |
|
| 77 |
pathVariant[i].longitude, |
|
| 78 |
], |
|
| 79 |
[ |
|
| 80 |
pathVariant[i + 1].latitude, |
|
| 81 |
pathVariant[i + 1].longitude, |
|
| 82 |
], |
|
| 83 |
]} |
|
| 84 |
text="►" |
|
| 85 |
attributes={{
|
|
| 86 |
'font-size': 25, |
|
| 87 |
fill: first ? 'blue' : 'gray', |
|
| 88 |
}} |
|
| 89 |
repeat |
|
| 90 |
center |
|
| 91 |
weight={10}
|
|
| 92 |
/> |
|
| 93 |
) |
|
| 94 |
} |
|
| 95 |
first = false |
|
| 96 |
}) |
|
| 97 |
console.log(paths) |
|
| 98 |
setRenderedPaths(paths) |
|
| 99 | 68 |
}) |
| 100 | 69 |
}, [pathDto]) |
| 101 | 70 |
|
| ... | ... | |
| 115 | 84 |
sx={{ mb: 1 }}
|
| 116 | 85 |
fontWeight="600" |
| 117 | 86 |
> |
| 118 |
Text |
|
| 87 |
Processed Text
|
|
| 119 | 88 |
</Typography> |
| 120 | 89 |
<Typography variant="body2"> |
| 121 | 90 |
{formatHtmlStringToReactDom(
|
| ... | ... | |
| 178 | 147 |
attribution={mapConfig.attribution}
|
| 179 | 148 |
url={mapConfig.url}
|
| 180 | 149 |
/> |
| 181 |
{renderedPaths}
|
|
| 150 |
{pathVariants &&
|
|
| 151 |
pathVariants.map((pathVariant, idx) => ( |
|
| 152 |
<MapPath |
|
| 153 |
key={idx}
|
|
| 154 |
pathVariant={pathVariant}
|
|
| 155 |
idx={idx}
|
|
| 156 |
setPrimary={setActivePathIdx}
|
|
| 157 |
primaryIdx={primaryPathIdx}
|
|
| 158 |
active={activePaths.has(idx)}
|
|
| 159 |
/> |
|
| 160 |
))} |
|
| 182 | 161 |
</MapContainer> |
| 183 | 162 |
</Grid> |
| 184 | 163 |
</Grid> |
Také k dispozici: Unified diff
map displays correctly
re #9629