diff --git a/.env.local b/.env.local index f808f5136..06b79e736 100644 --- a/.env.local +++ b/.env.local @@ -15,31 +15,31 @@ ######################### -DB_HOST=10.10.0.70 -DB_USER=root -DB_PASSWORD="root#$" -DB_NAME=talas_v5 -DB_PORT=3306 - -######################### - -NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" -NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" -NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" -NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -######################### - -#DB_HOST=192.168.10.168 +#DB_HOST=10.10.0.70 #DB_USER=root #DB_PASSWORD="root#$" #DB_NAME=talas_v5 #DB_PORT=3306 + +######################### + +#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" +#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" +#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" +######################### + +DB_HOST=192.168.10.168 +DB_USER=root +DB_PASSWORD="root#$" +DB_NAME=talas_v5 +DB_PORT=3306 ######################### #URLs für den Client (clientseitig) -#NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://192.168.10.168" -#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" +NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/" +NEXT_PUBLIC_SERVER_URL="http://192.168.10.168" +NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168" +NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" ######################### online #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 0967ef424..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/components/DataSheet.js b/components/DataSheet.js index 2bdee6ec0..952e4d2e5 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -7,6 +7,7 @@ import { selectedAreaState } from "../store/atoms/selectedAreaState"; import { zoomTriggerState } from "../store/atoms/zoomTriggerState"; import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState"; import EditModeToggle from "./EditModeToggle"; +import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility function DataSheet() { const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState); @@ -17,12 +18,16 @@ function DataSheet() { const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState); const GisSystemStatic = useRecoilValue(gisSystemStaticState); const setZoomTrigger = useSetRecoilState(zoomTriggerState); - + const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines useEffect(() => { const storedPoiVisible = localStorage.getItem("poiVisible"); if (storedPoiVisible !== null) { setPoiVisible(storedPoiVisible === "true"); } + const storedPolylineVisible = localStorage.getItem("polylineVisible"); + if (storedPolylineVisible !== null) { + setPolylineVisible(storedPolylineVisible === "true"); + } const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility"); if (storedMapLayersVisibility) { @@ -96,17 +101,17 @@ function DataSheet() { setSelectedArea("Station wählen"); setZoomTrigger((current) => current + 1); }; + const handlePolylineCheckboxChange = (event) => { + const { checked } = event.target; + setPolylineVisible(checked); + localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage + }; return (
- {stationListing.map((station) => (
-
+ {/* Checkboxen in einem gemeinsamen Container */} +
{systemListing.map((system) => ( - handleCheckboxChange(system.name, e)} id={`system-${system.id}`} /> - -
+
+ handleCheckboxChange(system.name, e)} id={`system-${system.id}`} /> + +
))} - - + +
+ + +
+ +
+ + +
diff --git a/components/MapComponent.js b/components/MapComponent.js index e705f9ff9..cf6e06960 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -74,8 +74,10 @@ import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices"; import { useMapComponentState } from "../hooks/useMapComponentState"; import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; +import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { + const polylineVisible = useRecoilValue(polylineLayerVisibleState); const [editMode, setEditMode] = useState(false); // editMode Zustand const { deviceName, setDeviceName } = useMapComponentState(); const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp"); @@ -509,7 +511,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { polylines.forEach((polyline) => polyline.remove()); // Setze neue Marker und Polylinien mit den aktuellen Daten - const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker); + const { markers: newMarkers, polylines: newPolylines } = setupPolylines( + map, + linePositions, + lineColors, + tooltipContents, + setNewCoords, + tempMarker, + polylineVisible // polylineVisible wird jetzt korrekt übergeben + ); newPolylines.forEach((polyline, index) => { const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt"; @@ -522,38 +532,31 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { pane: "tooltipPane", }); - // Mausbewegung tracken polyline.on("mouseover", (e) => { const tooltip = polyline.getTooltip(); if (tooltip) { - const mousePos = e.containerPoint; // Mausposition relativ zur Karte - const mapSize = map.getSize(); // Größe der Karte + const mousePos = e.containerPoint; + const mapSize = map.getSize(); - // Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt - let direction = "right"; // Standard-Richtung + let direction = "right"; if (mousePos.x > mapSize.x - 100) { - direction = "left"; // Bewege den Tooltip nach links, wenn der Mauszeiger nahe dem rechten Rand ist + direction = "left"; } else if (mousePos.x < 100) { - direction = "right"; // Bewege den Tooltip nach rechts, wenn der Mauszeiger nahe dem linken Rand ist + direction = "right"; } if (mousePos.y > mapSize.y - 100) { - direction = "top"; // Bewege den Tooltip nach oben, wenn der Mauszeiger nahe dem unteren Rand ist + direction = "top"; } else if (mousePos.y < 100) { - direction = "bottom"; // Bewege den Tooltip nach unten, wenn der Mauszeiger nahe dem oberen Rand ist + direction = "bottom"; } - // Setze die neue Richtung und öffne den Tooltip tooltip.options.direction = direction; polyline.openTooltip(e.latlng); } }); - /* polyline.on("mouseover", () => { - polyline.openTooltip(); - }); */ - polyline.on("mouseout", () => { polyline.closeTooltip(); }); @@ -561,7 +564,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setMarkers(newMarkers); setPolylines(newPolylines); - }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]); + }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); //-------------------------------------------- @@ -674,6 +677,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { initializeContextMenu(); }, [map]); + //-------------------------------------------- + return ( <> diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index 795e4aa4f..e7ff84279 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -10,6 +10,8 @@ import endIcon from "../components/gisPolylines/icons/EndIcon"; import { redrawPolyline } from "./mapUtils"; import { openInNewTab } from "./openInNewTab"; import { toast } from "react-toastify"; +import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; +import { useRecoilValue } from "recoil"; // Funktion zum Deaktivieren der Polyline-Ereignisse export function disablePolylineEvents(polylines) { @@ -21,17 +23,21 @@ export function disablePolylineEvents(polylines) { // Funktion zum Aktivieren der Polyline-Ereignisse export function enablePolylineEvents(polylines, lineColors) { + // Überprüfe, ob polylines definiert ist und ob es Elemente enthält + if (!polylines || polylines.length === 0) { + console.warn("Keine Polylinien vorhanden oder polylines ist undefined."); + return; + } + + // Falls Polylinien vorhanden sind, wende die Events an polylines.forEach((polyline) => { polyline.on("mouseover", (e) => { - //console.log("Mouseover on polyline", polyline.options); polyline.setStyle({ weight: 14 }); const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`; - //localStorage.setItem("lastElementType", "polyline"); - //localStorage.setItem("polylineLink", link); + // Verwende den Link oder speichere ihn, falls nötig }); polyline.on("mouseout", (e) => { - //console.log("Mouseout from polyline", polyline.options); polyline.setStyle({ weight: 3 }); }); }); @@ -62,7 +68,18 @@ export const startIntervalWithContextMenuHandling = (map) => { }, 20000); // 20-Sekunden-Intervall }; -export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { +export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible) => { + if (!polylineVisible) { + // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen + if (window.polylines) { + window.polylines.forEach((polyline) => { + if (map.hasLayer(polyline)) { + map.removeLayer(polyline); + } + }); + } + return { markers: [], polylines: [] }; + } const markers = []; const polylines = []; const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist