From 4d1a218b2145c45c684628ad2a6d3330bcac277d Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 17 Dec 2024 14:22:45 +0100 Subject: [PATCH] WIP: Bereich wird angezeigt, aber da ist noch ein Bug, Talas Marker erscheint trotz Checkbox ausgecheckt --- components/DataSheet.js | 14 +++++ components/MapComponent.js | 12 ++++ hooks/layers/useBereicheMarkersLayer.js | 66 ++++++++++++++++++++ pages/api/talas_v5_DB/bereich/readBereich.js | 51 +++++++++++++++ 4 files changed, 143 insertions(+) create mode 100644 hooks/layers/useBereicheMarkersLayer.js create mode 100644 pages/api/talas_v5_DB/bereich/readBereich.js diff --git a/components/DataSheet.js b/components/DataSheet.js index f7f433ead..b357e5b47 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -20,6 +20,7 @@ function DataSheet() { const GisSystemStatic = useRecoilValue(gisSystemStaticState); const setZoomTrigger = useSetRecoilState(zoomTriggerState); const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines + const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status useEffect(() => { // LocalStorage Werte laden const storedPoiVisible = localStorage.getItem("poiVisible"); @@ -113,6 +114,12 @@ function DataSheet() { localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage }; //--------------------------- + const handleBereicheCheckboxChange = (event) => { + if (editMode) return; + const { checked } = event.target; + setBereicheVisible(checked); + localStorage.setItem("bereicheVisible", checked); + }; //--------------------------- return ( @@ -163,6 +170,13 @@ function DataSheet() { Kabelstrecken + {/* Bereiche */} +
+ + +
diff --git a/components/MapComponent.js b/components/MapComponent.js index 379a583c1..f508291e3 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -34,6 +34,7 @@ import { initializeMap } from "../utils/initializeMap.js"; import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js"; +import useBereicheMarkersLayer from "../hooks/layers/useBereicheMarkersLayer.js"; import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js"; import { setupPolylines } from "../utils/setupPolylines.js"; import { setupPOIs } from "../utils/setupPOIs.js"; @@ -109,6 +110,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [ulafMarkers, setUlafMarkers] = useState([]); const [sonstigeMarkers, setSonstigeMarkers] = useState([]); const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]); + //const [lteModemMarkers, setLteModemMarkers] = useState([]); const [lineStatusData, setLineStatusData] = useState([]); @@ -802,6 +804,16 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); //--------------------------------------- + // Initialisiere Leaflet-Karte + // Rufe useBereicheMarkersLayer direkt auf + const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12"); + + useEffect(() => { + if (map && oms) { + // Wenn zusätzliche Initialisierung nötig ist, führe sie hier aus. + console.log("Bereiche-Markierungen geladen:", bereicheMarkers); + } + }, [map, oms, bereicheMarkers]); //---------------------------------- diff --git a/hooks/layers/useBereicheMarkersLayer.js b/hooks/layers/useBereicheMarkersLayer.js new file mode 100644 index 000000000..867911c8f --- /dev/null +++ b/hooks/layers/useBereicheMarkersLayer.js @@ -0,0 +1,66 @@ +import { useEffect, useState } from "react"; +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; + +// Definiere ein Standard-Icon +const customIcon = new L.Icon({ + iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an + iconSize: [25, 41], // Größe des Icons + iconAnchor: [12, 41], // Position des Icons + popupAnchor: [1, -34], + shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten + shadowSize: [41, 41], +}); + +const useBereicheMarkersLayer = (map, oms, apiUrl) => { + const [bereicheMarkers, setBereicheMarkers] = useState([]); + + useEffect(() => { + // Hole die Daten aus der API + const fetchBereiche = async () => { + try { + const response = await fetch(apiUrl); + const data = await response.json(); + + const markers = data.map((item) => { + // Erstelle Marker für jedes Datenbank-Item + const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(` + ID Location: ${item.idLocation}
+ ID Map: ${item.idMaps} + `); + + return marker; + }); + + setBereicheMarkers(markers); + } catch (error) { + console.error("Fehler beim Laden der Bereiche:", error); + } + }; + + fetchBereiche(); + }, [apiUrl]); + + useEffect(() => { + if (map && bereicheMarkers.length) { + // Füge alle Marker zur Karte hinzu + bereicheMarkers.forEach((marker) => { + marker.addTo(map); + if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier + }); + } + }, [map, bereicheMarkers, oms]); + useEffect(() => { + if (!map) return; // Sicherheitsprüfung + if (bereicheMarkers.length > 0) { + bereicheMarkers.forEach((marker) => { + marker.addTo(map); + if (oms) oms.addMarker(marker); + }); + } + }, [map, bereicheMarkers, oms]); + + return bereicheMarkers; +}; + +export default useBereicheMarkersLayer; diff --git a/pages/api/talas_v5_DB/bereich/readBereich.js b/pages/api/talas_v5_DB/bereich/readBereich.js new file mode 100644 index 000000000..e9c244a42 --- /dev/null +++ b/pages/api/talas_v5_DB/bereich/readBereich.js @@ -0,0 +1,51 @@ +import getPool from "../../../../utils/mysqlPool"; // Singleton-Pool importieren + +export default async function handler(req, res) { + const pool = getPool(); // Singleton-Pool verwenden + + if (req.method !== "GET") { + return res.status(405).json({ error: "Nur GET Methode erlaubt" }); + } + + const { m: idMaps, idLocation } = req.query; // URL-Parameter "m" und "idLocation" + + if (!idMaps) { + return res.status(400).json({ error: "idMaps (Parameter 'm') ist erforderlich" }); + } + + let query = "SELECT * FROM location_coordinates WHERE idMaps = ?"; + const queryParams = [idMaps]; + + if (idLocation) { + query += " AND idLocation = ?"; + queryParams.push(idLocation); + } + + let connection; + + try { + connection = await pool.getConnection(); // Verbindung aus dem Pool holen + + // SQL-Abfrage ausführen + const [results] = await connection.query(query, queryParams); + + if (results.length > 0) { + // Ergebnisse formatieren und zurückgeben + const formattedResults = results.map((row) => ({ + idLocation: row.idLocation, + x: row.x, + y: row.y, + idMaps: row.idMaps, + })); + + res.status(200).json(formattedResults); + } else { + res.status(404).json({ error: "Keine Koordinaten gefunden" }); + } + } catch (error) { + console.error("Fehler beim Abrufen der Koordinaten:", error); + res.status(500).json({ error: "Interner Serverfehler beim Abrufen der Koordinaten" }); + } finally { + if (connection) connection.release(); // Verbindung in den Pool zurückgeben + } +}