Revize a7ae217f
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
| frontend/src/features/TrackingTool/MapPath.tsx | ||
|---|---|---|
| 1 |
import { Fragment, FunctionComponent, useEffect, useState } from "react"
|
|
| 2 |
import { useDispatch, useSelector } from "react-redux"
|
|
| 3 |
import { RootState } from "../redux/store"
|
|
| 4 |
import { PathVariant, MapPoint } from "./buildPathVariants"
|
|
| 5 |
import TextPath from "react-leaflet-textpath"
|
|
| 6 |
import { setPrimaryIdx, updateMapMarker } from "./trackingToolSlice"
|
|
| 7 |
import MapMarker from "./MapMarker"
|
|
| 8 |
import { LatLngTuple } from "leaflet"
|
|
| 9 |
import { Popup, Tooltip } from "react-leaflet"
|
|
| 10 |
import { Checkbox, FormControlLabel, Stack, Typography } from "@mui/material"
|
|
| 11 |
import { formatHtmlStringToReactDom } from "../../utils/formatting/HtmlUtils"
|
|
| 12 |
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from "../Catalog/CatalogItemDetail"
|
|
| 1 |
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
|
|
| 2 |
import { useDispatch, useSelector } from 'react-redux'
|
|
| 3 |
import { RootState } from '../redux/store'
|
|
| 4 |
import { PathVariant, MapPoint, isMapPointDisplayable } from './pathUtils'
|
|
| 5 |
import TextPath from 'react-leaflet-textpath'
|
|
| 6 |
import { setPrimaryIdx, updateMapMarker } from './trackingToolSlice'
|
|
| 7 |
import MapMarker from './MapMarker'
|
|
| 8 |
import { LatLngTuple } from 'leaflet'
|
|
| 9 |
import { Popup, Tooltip } from 'react-leaflet'
|
|
| 10 |
import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
|
|
| 11 |
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
|
|
| 12 |
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
|
|
| 13 | 13 |
|
| 14 | 14 |
export interface MapPathProps {
|
| 15 | 15 |
idx: number // index of the path in the list |
| ... | ... | |
| 18 | 18 |
type EdgeElement = any |
| 19 | 19 |
|
| 20 | 20 |
// Blue |
| 21 |
export const primaryPathColor = "#346eeb"
|
|
| 21 |
export const primaryPathColor = '#346eeb'
|
|
| 22 | 22 |
|
| 23 | 23 |
// Grey |
| 24 |
export const secondaryPathColor = "#878e9c"
|
|
| 24 |
export const secondaryPathColor = '#878e9c'
|
|
| 25 | 25 |
|
| 26 | 26 |
const MapPath: FunctionComponent<MapPathProps> = ({ idx }) => {
|
| 27 | 27 |
const dispatch = useDispatch() |
| ... | ... | |
| 48 | 48 |
>([]) |
| 49 | 49 |
useEffect(() => {
|
| 50 | 50 |
// Set all displayable vertices |
| 51 |
setDisplayableMapPoints(path.filter((vertex) => vertex.displayable)) |
|
| 51 |
setDisplayableMapPoints( |
|
| 52 |
path.filter((mapPoint) => isMapPointDisplayable(mapPoint)) |
|
| 53 |
) |
|
| 52 | 54 |
}, [path]) |
| 53 | 55 |
|
| 54 | 56 |
// List of all edges in the path |
| ... | ... | |
| 81 | 83 |
text="►" |
| 82 | 84 |
// text=" > > > > " |
| 83 | 85 |
attributes={{
|
| 84 |
"font-size": 19,
|
|
| 86 |
'font-size': 19,
|
|
| 85 | 87 |
// Set to primaryPathColor if primary index in the tracking tool is equal to this index |
| 86 | 88 |
fill: |
| 87 | 89 |
primaryPathIdx === idx |
| ... | ... | |
| 114 | 116 |
dispatch( |
| 115 | 117 |
updateMapMarker({
|
| 116 | 118 |
idx, |
| 117 |
item: new MapPoint(item.idx, item.active, {
|
|
| 118 |
...item.catalogItem, |
|
| 119 |
latitude: position[0], |
|
| 120 |
longitude: position[1], |
|
| 121 |
}), |
|
| 119 |
item: {
|
|
| 120 |
idx: item.idx, |
|
| 121 |
active: item.active, |
|
| 122 |
catalogItem: {
|
|
| 123 |
...item.catalogItem, |
|
| 124 |
latitude: position[0], |
|
| 125 |
longitude: position[1], |
|
| 126 |
}, |
|
| 127 |
}, |
|
| 122 | 128 |
}) |
| 123 | 129 |
) |
| 124 | 130 |
}} |
| ... | ... | |
| 126 | 132 |
<Fragment> |
| 127 | 133 |
<Tooltip> |
| 128 | 134 |
{/* <Typography> */}
|
| 129 |
{item.catalogItem.name ?? ""}
|
|
| 135 |
{item.catalogItem.name ?? ''}
|
|
| 130 | 136 |
{/* </Typography> */}
|
| 131 | 137 |
</Tooltip> |
| 132 | 138 |
<Popup> |
| ... | ... | |
| 149 | 155 |
dispatch( |
| 150 | 156 |
updateMapMarker({
|
| 151 | 157 |
idx, |
| 152 |
item: new MapPoint( |
|
| 153 |
item.idx, |
|
| 154 |
!item.active, |
|
| 155 |
item.catalogItem |
|
| 156 |
), |
|
| 158 |
item: {
|
|
| 159 |
...item, |
|
| 160 |
active: !item.active, |
|
| 161 |
}, |
|
| 157 | 162 |
}) |
| 158 | 163 |
) |
| 159 | 164 |
}} |
| ... | ... | |
| 163 | 168 |
label="Active" |
| 164 | 169 |
/> |
| 165 | 170 |
<CatalogItemDetailDialog |
| 166 |
itemId={item.catalogItem.id ?? ""}
|
|
| 171 |
itemId={item.catalogItem.id ?? ''}
|
|
| 167 | 172 |
/> |
| 168 | 173 |
</Stack> |
| 169 | 174 |
</Fragment> |
Také k dispozici: Unified diff
import export part 1
re #9741