Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kabelstrecken einblenden und ausblenden

Browse Source
This commit is contained in:
ISA
2024-09-11 22:19:04 +02:00
parent 633886b466
commit f8a4b1f86b
5 changed files with 96 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
.env.local
View File

@@ -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"

1
.vscode/settings.json vendored
View File

@@ -1 +0,0 @@
{}

51
components/DataSheet.js
View File

@@ -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 (
<div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg">
<div className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between space-x-2">
<select
onChange={handleAreaChange}
id="stationListing"
className="border-solid-1 p-2 rounded ml-1 font-semibold"
style={{ minWidth: "150px", maxWidth: "200px" }} // Hier die Breite des Dropdowns anpassen
>
<select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
<option value="Station wählen">Station wählen</option>
{stationListing.map((station) => (
<option key={station.id} value={station.id}>
@@ -120,20 +125,32 @@ function DataSheet() {
</div>
</div>
<div>
{/* Checkboxen in einem gemeinsamen Container */}
<div className="flex flex-col gap-2">
{systemListing.map((system) => (
<React.Fragment key={system.id}>
<input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
<label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name}
</label>
<br />
<div className="flex items-center">
<input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
<label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name}
</label>
</div>
</React.Fragment>
))}
<input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
<label htmlFor="poi-checkbox" className="text-sm ml-2">
POIs
</label>
<div className="flex items-center">
<input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
<label htmlFor="poi-checkbox" className="text-sm ml-2">
POIs
</label>
</div>
<div className="flex items-center">
<input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
<label htmlFor="polyline-checkbox" className="text-sm ml-2">
Kabelstrecken
</label>
</div>
</div>
</div>
</div>

37
components/MapComponent.js
View File

@@ -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 (
<>
<ToastContainer />

27
utils/setupPolylines.js
View File

@@ -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