Revize 7b864a5c
Přidáno uživatelem Václav Honzík před téměř 3 roky(ů)
| frontend/src/features/TrackingTool/MapPath.tsx | ||
|---|---|---|
| 3 | 3 |
import { RootState } from "../redux/store"
|
| 4 | 4 |
import { PathVariant, MapPoint } from "./buildPathVariants"
|
| 5 | 5 |
import TextPath from "react-leaflet-textpath" |
| 6 |
import { setPrimaryIdx, updateMapMarkerPosition } from "./trackingToolSlice"
|
|
| 6 |
import { setPrimaryIdx, updateMapMarker } from "./trackingToolSlice"
|
|
| 7 | 7 |
import MapMarker from "./MapMarker" |
| 8 | 8 |
import { LatLngTuple } from "leaflet"
|
| 9 | 9 |
import { Popup } from "react-leaflet"
|
| ... | ... | |
| 35 | 35 |
useEffect(() => {
|
| 36 | 36 |
// Either set the path if it exists or set it to an empty array |
| 37 | 37 |
setPath(paths && paths.length > idx ? paths[idx] : []) |
| 38 |
}, [paths]) |
|
| 38 |
}, [idx, paths])
|
|
| 39 | 39 |
|
| 40 | 40 |
// Primary path index to set the correct color |
| 41 | 41 |
const primaryPathIdx = useSelector( |
| ... | ... | |
| 59 | 59 |
(item) => item.active |
| 60 | 60 |
) |
| 61 | 61 |
if (activeMapPoints.length < 2) {
|
| 62 |
setEdges([]) |
|
| 62 | 63 |
return |
| 63 | 64 |
} |
| 64 | 65 |
|
| ... | ... | |
| 72 | 73 |
edges.push( |
| 73 | 74 |
<TextPath |
| 74 | 75 |
// Somehow this refuses to work so let it rerender everything ... |
| 75 |
// key={`${start.latitude},${start.longitude}-${end.latitude},${end.longitude}`}
|
|
| 76 |
// key={`${start.id}-${end.id}`}
|
|
| 76 |
key={`${start.id}-${end.id}:${start.latitude},${start.longitude}-${end.latitude},${end.longitude}`}
|
|
| 77 | 77 |
positions={[
|
| 78 | 78 |
[start.latitude, start.longitude], |
| 79 | 79 |
[end.latitude, end.longitude], |
| ... | ... | |
| 105 | 105 |
setVertices( |
| 106 | 106 |
displayableMapPoints.map((item) => ( |
| 107 | 107 |
<MapMarker |
| 108 |
key={`${item.catalogItem.latitude}${item.catalogItem.latitude}`}
|
|
| 108 |
key={`${item.catalogItem.latitude}${item.catalogItem.longitude}`}
|
|
| 109 | 109 |
position={[
|
| 110 | 110 |
item.catalogItem.latitude as number, |
| 111 | 111 |
item.catalogItem.longitude as number, |
| 112 | 112 |
]} |
| 113 | 113 |
updatePositionCallbackFn={(position: LatLngTuple) => {
|
| 114 |
// Update the position of the map point |
|
| 115 | 114 |
dispatch( |
| 116 |
updateMapMarkerPosition({
|
|
| 115 |
updateMapMarker({
|
|
| 117 | 116 |
idx, |
| 118 |
mapPointIdx: item.idx, |
|
| 119 |
position, |
|
| 117 |
item: new MapPoint(item.idx, item.active, {
|
|
| 118 |
...item.catalogItem, |
|
| 119 |
latitude: position[0], |
|
| 120 |
longitude: position[1], |
|
| 121 |
}), |
|
| 120 | 122 |
}) |
| 121 | 123 |
) |
| 122 | 124 |
}} |
| ... | ... | |
| 138 | 140 |
<Checkbox |
| 139 | 141 |
checked={item.active}
|
| 140 | 142 |
onChange={() => {
|
| 141 |
item.active = !item.active |
|
| 142 |
setDisplayableMapPoints([ |
|
| 143 |
...displayableMapPoints, |
|
| 144 |
]) |
|
| 143 |
dispatch( |
|
| 144 |
updateMapMarker({
|
|
| 145 |
idx, |
|
| 146 |
item: new MapPoint( |
|
| 147 |
item.idx, |
|
| 148 |
!item.active, |
|
| 149 |
item.catalogItem |
|
| 150 |
), |
|
| 151 |
}) |
|
| 152 |
) |
|
| 145 | 153 |
}} |
| 146 | 154 |
/> |
| 147 | 155 |
} |
| frontend/src/features/TrackingTool/trackingToolSlice.ts | ||
|---|---|---|
| 3 | 3 |
import { persistReducer } from "redux-persist"
|
| 4 | 4 |
import mapConfig from "../../config/mapConfig" |
| 5 | 5 |
import { PathDto } from "../../swagger/data-contracts"
|
| 6 |
import buildPathVariants, { PathVariant } from "./buildPathVariants"
|
|
| 6 |
import buildPathVariants, { MapPoint, PathVariant } from "./buildPathVariants"
|
|
| 7 | 7 |
import { sendTextForProcessing } from "./trackingToolThunks"
|
| 8 | 8 |
import storage from "redux-persist/lib/storage" |
| 9 | 9 |
|
| ... | ... | |
| 66 | 66 |
...state, |
| 67 | 67 |
currentPage: action.payload, |
| 68 | 68 |
}), |
| 69 |
updateMapMarkerPosition: (state: TrackingToolState, action: any) => {
|
|
| 70 |
const { idx, mapPointIdx, position } = action.payload
|
|
| 69 |
updateMapMarker: (state: TrackingToolState, action: { payload: { idx: number, item: MapPoint } }) => {
|
|
| 70 |
const { idx, item } = action.payload
|
|
| 71 | 71 |
if (!state.pathVariants || state.pathVariants.length <= idx) {
|
| 72 | 72 |
return state |
| 73 | 73 |
} |
| ... | ... | |
| 79 | 79 |
return [...pathVariant] |
| 80 | 80 |
} |
| 81 | 81 |
|
| 82 |
const mapPoint = pathVariant[mapPointIdx] |
|
| 83 |
mapPoint.catalogItem = {
|
|
| 84 |
...mapPoint.catalogItem, |
|
| 85 |
latitude: position[0], |
|
| 86 |
longitude: position[1] |
|
| 87 |
} |
|
| 88 |
|
|
| 89 | 82 |
return [ |
| 90 |
...pathVariant.slice(0, mapPointIdx),
|
|
| 91 |
mapPoint,
|
|
| 92 |
...pathVariant.slice(mapPointIdx + 1),
|
|
| 83 |
...pathVariant.slice(0, item.idx),
|
|
| 84 |
item,
|
|
| 85 |
...pathVariant.slice(item.idx + 1),
|
|
| 93 | 86 |
] |
| 94 | 87 |
}) |
| 95 | 88 |
} |
| ... | ... | |
| 131 | 124 |
}, |
| 132 | 125 |
}) |
| 133 | 126 |
|
| 134 |
export const { consumeErr, setPrimaryIdx, resetDialogApiCallSuccess, clear, updateMapMarkerPosition } =
|
|
| 127 |
export const { consumeErr, setPrimaryIdx, resetDialogApiCallSuccess, clear, updateMapMarker } =
|
|
| 135 | 128 |
trackingToolSlice.actions |
| 136 | 129 |
const trackingToolReducer = trackingToolSlice.reducer |
| 137 | 130 |
export default trackingToolReducer |
Také k dispozici: Unified diff
path dragging and adjustment seems functional