From a07d5f940e38ba2890ec8cdf21df6c3a213a7b1e Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 29 Apr 2024 11:46:22 +0200 Subject: [PATCH] =?UTF-8?q?Vorbereitung=20f=C3=BCr=20den=20Umzug=20auf=20d?= =?UTF-8?q?en=20TALAS-Server?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataSheet.js | 12 +- components/MapComponent - Kopie.js | 1134 ---------------------------- components/MapComponent.js | 8 +- config/config.js | 17 - pages/api/[...path].js | 1 - store/zoomOutState.js | 7 - 6 files changed, 10 insertions(+), 1169 deletions(-) delete mode 100644 components/MapComponent - Kopie.js delete mode 100644 store/zoomOutState.js diff --git a/components/DataSheet.js b/components/DataSheet.js index 234a4285e..81dafbcf3 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -22,8 +22,8 @@ function DataSheet() { const selectedIndex = event.target.options.selectedIndex; const areaName = event.target.options[selectedIndex].text; setSelectedArea(areaName); - console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole - console.log("event.target:", event.target); + //console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole + //console.log("event.target:", event.target); }; useEffect(() => { @@ -33,7 +33,7 @@ function DataSheet() { (system) => system.IdSystem ) ); - console.log("allowedSystems:", allowedSystems); + //console.log("allowedSystems:", allowedSystems); // Filter unique areas that belong to allowed systems const seenNames = new Set(); @@ -64,7 +64,7 @@ function DataSheet() { const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1; if (isUnique) { seenSystemNames.add(formattedName); // Füge den formatierten Namen hinzu - console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole + //console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole } return isUnique; }); @@ -79,14 +79,14 @@ function DataSheet() { //--------------------------------------------------------- const handleCheckboxChange = (name, event) => { const { checked } = event.target; - console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox + //console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox setMapLayersVisibility((prev) => { const newState = { ...prev, [name]: checked, }; - console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update + //console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update return newState; }); }; diff --git a/components/MapComponent - Kopie.js b/components/MapComponent - Kopie.js deleted file mode 100644 index c87de5b54..000000000 --- a/components/MapComponent - Kopie.js +++ /dev/null @@ -1,1134 +0,0 @@ -// components/MapComponent.js -import React, { useEffect, useRef, useState } from "react"; -import L, { marker } from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; -import "leaflet-contextmenu"; -import * as config from "../config/config.js"; -import dynamic from "next/dynamic"; -import "leaflet.smooth_marker_bouncing"; -import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; -import DataSheet from "../components/DataSheet"; -import { useRecoilState, useRecoilValue } from "recoil"; -import { gisStationsStaticDistrictState } from "../states/gisStationState"; -import { gisSystemStaticState } from "../states/gisSystemState"; -import { mapLayersState } from "../states/mapLayersState"; - -const MapComponent = ({ locations, onLocationUpdate }) => { - const layerVisibility = useRecoilValue(mapLayersState); - const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte - const [map, setMap] = useState(null); // Zustand der Karteninstanz - const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung - const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = - useRecoilState(gisStationsStaticDistrictState); - const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState( - [] - ); // Zustand für Statusdaten - const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten - const [GisSystemStatic, setGisSystemStatic] = - useRecoilState(gisSystemStaticState); // Zustand für Systemdaten - const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten - - // Konstanten für die URLs - const mapGisStationsStaticDistrictUrl = - config.mapGisStationsStaticDistrictUrl; - const mapGisStationsStatusDistrictUrl = - config.mapGisStationsStatusDistrictUrl; - const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; - const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; - const mapDataIconUrl = config.mapDataIconUrl; - const [oms, setOms] = useState(null); // State für OMS-Instanz - - // Funktion zum Aktualisieren der Position in der Datenbank - const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { - const response = await fetch("/api/updateLocation", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - id, - latitude: newLatitude, - longitude: newLongitude, - }), - }); - - if (response.ok) { - //schreib die neue Kooridnaten in die Console - //akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE - } else { - console.error("Fehler beim Aktualisieren der Position"); - } - }; - - // API-Daten laden für GisStationsStaticDistrict - //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485 - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStaticDistrictUrl); - const jsonResponse = await response.json(); - - // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält - if (jsonResponse && jsonResponse.Points) { - setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points' - } else { - console.error( - 'Erwartete Daten im "Points"-Array nicht gefunden', - jsonResponse - ); - setGisStationsStaticDistrict([]); - } - } catch (error) { - console.error("Fehler beim Laden der Daten 1: ", error); - setGisStationsStaticDistrict([]); - } - }; - - fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen - - //GisStationsStaticDistrict Daten laden - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStaticDistrictUrl); - const jsonResponse = await response.json(); - - // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält - if (jsonResponse && jsonResponse.Points) { - setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points' - } else { - console.error( - 'Erwartete Daten im "Points"-Array nicht gefunden', - jsonResponse - ); - setGisStationsStaticDistrict([]); - } - } catch (error) { - console.error("Fehler beim Laden der Daten 1: ", error); - setGisStationsStaticDistrict([]); - } - }; - - fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen - //------------------------------------------ - //GisStationsStatusDistrict Daten laden - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStatusDistrictUrl); - const jsonResponse = await response.json(); - - // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält - if (jsonResponse && jsonResponse.Statis) { - setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' - } else { - console.error( - 'Erwartete Daten im "Statis"-Array nicht gefunden', - jsonResponse - ); - setGisStationsStatusDistrict([]); - } - } catch (error) { - console.error("Fehler beim Laden der Daten 2: ", error); - setGisStationsStatusDistrict([]); - } - }; - - fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen - //------------------------------------------ - //GisStationsMeasurements Daten laden - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsMeasurementsUrl); - const jsonResponse = await response.json(); - - // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält - if (jsonResponse && jsonResponse.Statis) { - setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' - } else { - console.error( - 'Erwartete Daten im "Statis"-Array nicht gefunden', - - jsonResponse - ); - setGisStationsMeasurements([]); - } - } catch (error) { - console.error("Fehler beim Laden der Daten 3: ", error); - setGisStationsMeasurements([]); - } - }; - - fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen - //------------------------------------------ - //GisSystemStatic Daten laden - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisSystemStaticUrl); - const jsonResponse = await response.json(); - - // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält - if (jsonResponse && jsonResponse.Systems) { - setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems' - /* console.log( - "GisSystemStatic in MapComponent.js :", - jsonResponse.Systems - ); */ - } else { - console.error( - 'Erwartete Daten im "Systems"-Array nicht gefunden', - jsonResponse - ); - setGisSystemStatic([]); - } - } catch (error) { - console.error("Fehler beim Laden der Daten 4: ", error); - setGisSystemStatic([]); - } - }; - - fetchData(); - }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen - //------------------------------------------ - - const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; - const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; - // Create map layers - const TALAS = new L.layerGroup(); - const ECI = new L.layerGroup(); - const ULAF = new L.layerGroup(); - const GSMModem = new L.layerGroup(); - const CiscoRouter = new L.layerGroup(); - const WAGO = new L.layerGroup(); - const Siemens = new L.layerGroup(); - const OTDR = new L.layerGroup(); - const WDM = new L.layerGroup(); - const GMA = new L.layerGroup(); - const Sonstige = new L.layerGroup(); - const TALASICL = new L.layerGroup(); - - let newMap = []; - - useEffect(() => { - if (typeof window !== "undefined") { - console.log("Window height from config:", config.windowHeight); - } - }, []); - - // Funktionen zur Überwachung der Internetverbindung - const checkInternet = () => { - fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" }) - .then((response) => setOnline(response.ok)) - .catch(() => setOnline(false)); - }; - // Initialisierung der karte und hinzuügen der Layers - useEffect(() => { - if (mapRef.current && !map) { - newMap = L.map(mapRef.current, { - center: [53.111111, 8.4625], - zoom: 8, - layers: [ - TALAS, - ECI, - ULAF, - GSMModem, - CiscoRouter, - WAGO, - Siemens, - OTDR, - WDM, - GMA, - Sonstige, - TALASICL, - ], - zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung - contextmenu: true, - contextmenuItems: [ - { text: "Station hinzufügen", callback: showAddStationPopup }, - { - text: "Station öffnen (Tab)", - icon: "img/screen_new.png", - callback: newLink, - }, - { - text: "Station öffnen", - icon: "img/screen_same.png", - callback: sameLink, - }, - { - text: "Koordinaten", - icon: "img/screen_same.png", - callback: lata, - }, - "-", // Divider - { text: "Reinzoomen", callback: zoomIn }, - { text: "Rauszoomen", callback: zoomOut }, - { text: "Hier zentrieren", callback: centerHere }, - ], - }); - - L.tileLayer(online ? onlineTileLayer : offlineTileLayer, { - attribution: - '© OpenStreetMap contributors', - }).addTo(newMap); - - const newOms = new window.OverlappingMarkerSpiderfier(newMap, { - nearbyDistance: 20, //Radius um einen Marker, innerhalb dessen andere Marker gruppiert werden in Pixel - }); - - setMap(newMap); - setOms(newOms); - } - }, [mapRef, map]); // Abhängigkeiten prüfen - - // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs - /* useEffect(() => { - // Remove old markers - if (map) { - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); - - // Add new markers - locations.forEach((location) => { - const { latitude, longitude } = parsePoint(location.position); - const marker = L.marker([latitude, longitude], { - icon: L.icon({ - iconUrl: "/location.svg", - iconSize: [34, 34], - iconAnchor: [17, 34], - popupAnchor: [0, -34], - }), - draggable: true, - id: location.idPoi, - }); - - marker.bindPopup( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, closeButton: true } - ); - marker.bindTooltip( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, direction: "top", offset: [0, -30] } - ); - - marker.on("dragend", function (e) { - const newLat = e.target.getLatLng().lat; - const newLng = e.target.getLatLng().lng; - const markerId = e.target.options.id; - updateLocationInDatabase(markerId, newLat, newLng).then(() => { - onLocationUpdate(markerId, newLat, newLng); - }); - }); - - marker.addTo(map); - }); - } - }, [map, locations, onLocationUpdate]); */ - - //------------------------------------------ - function parsePoint(pointString) { - const match = pointString.match( - /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/ - ); - if (match) { - return { - longitude: parseFloat(match[1]), - latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)? - }; - } else { - // Handle the error or return a default/fallback value - console.error("Invalid POINT format:", pointString); - return null; // Oder eine sinnvolle Standardantwort - } - } - //---------------------------------- - //-----Kontextmenu---------------- - const newLink = (e) => { - try { - if (!e.relatedTarget || !e.relatedTarget.options) { - throw new Error("relatedTarget or options not defined"); - } - alert("Neues Fenster: " + e.relatedTarget.options.test); - window - .open(`../devices/${e.relatedTarget.options.test}`, "_blank") - .focus(); - } catch (error) { - console.error("Failed in newLink function:", error); - } - }; - - const sameLink = (e) => { - alert(e.relatedTarget.options.test); - window - .open("../devices/" + e.relatedTarget.options.test, "_parent") - .focus(); - }; - - const lata = (e) => { - alert("Breitengrad: " + e.latlng.lat); - }; - - const zoomIn = (e) => { - newMap.flyTo(e.latlng, 12); - }; - - const zoomOut = (e) => { - fly(); - }; - const centerHere = (e) => { - newMap.panTo(e.latlng); - }; - - const showCoordinates = (e) => { - alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng); - }; - const showData = (e) => {}; - const showTalas = (e) => { - map.addLayer(TALAS); - loadData(); - }; - const hideTalas = (e) => { - map.removeLayer(TALAS); - loadData(); - }; - const showGSM = (e) => { - map.addLayer(GMA); - loadData(); - }; - const hideGSM = (e) => { - map.removeLayer(GMA); - loadData(); - }; - //-----Kontextmenu----ende------------ - // Ensure this function is only called when map is initialized and available - const showAddStationPopup = (e) => { - if (!newMap) { - return; - } - - const popupContent = L.DomUtil.create("div"); - popupContent.innerHTML = ` -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
- `; - - L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(newMap); - - // Attach event listener here - L.DomEvent.on(popupContent, "submit", handleSubmit); - }; - - // Funktion zum Hinzufügen eines neuen Standorts - async function handleSubmit(event) { - event.preventDefault(); - const form = event.target; - const data = { - name: form.name.value, - type: form.type.value, - latitude: form.lat.value, - longitude: form.lng.value, - }; - - try { - const response = await fetch("/api/addLocation", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), - }); - - const result = await response.json(); - - if (response.ok) { - alert("Standort erfolgreich hinzugefügt!"); - form.reset(); // Formular zurücksetzen - // Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte - } else { - throw new Error( - result.error || "Ein unbekannter Fehler ist aufgetreten." - ); - } - } catch (error) { - console.error("Fehler beim Hinzufügen des Standorts:", error); - alert(error.message); - } - } - - function fly(stationValue) { - var x = 51.41321407879154; - var y = 7.739617925303934; - var zoom = 7; - - newMap.flyTo([x, y], zoom); - } - - function getIconPath(status, iconNumber, marker) { - let path = status - ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png` - : `TileMap/img/icons/marker-icon-${iconNumber}.png`; - - // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen - if ( - path.includes("critical") || - path.includes("major") || - path.includes("minor") || - path.includes("system") - ) { - // Setze Bouncing-Optionen - marker.setBouncingOptions({ - bounceHeight: 15, // Höhe des Bounces - contractHeight: 12, // Höhe des Einzugs beim Landen - bounceSpeed: 52, // Geschwindigkeit des Bounces - contractSpeed: 52, // Geschwindigkeit des Einzugs - shadowAngle: null, // Standard-Schattenwinkel - }); - // Check if the icon path includes 'critical' - if (path.includes("critical")) { - // marker.bounce(3); - } - } - - return path; - } - - //------------------------------------------ - //\talas5\TileMap\img\icons\icon1.png - // minor-marker-icon-23.png - - // Marker hinzufügen für GisStationsStaticDistrict - /* useEffect(() => { - // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind - if (!map || !oms) { - console.error("Map or OMS is not initialized"); - return; - } - - // Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden - oms.clearMarkers(); - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); - - // Neue Marker für jede Station hinzufügen - GisStationsStaticDistrict.forEach((station) => { - // Filter für Statusobjekte dieser spezifischen Station - const matchingStatuses = GisStationsStatusDistrict.filter( - (status) => status.IdLD === station.IdLD - ); - - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", // Default, wird geändert - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }).addTo(map); - - // Popup beim Überfahren mit der Maus öffnen - marker.on("mouseover", function (e) { - this.openPopup(); - }); - - // Popup schließen, wenn die Maus den Marker verlässt - marker.on("mouseout", function (e) { - this.closePopup(); - }); - - // String-Zusammenstellung für das Popup-Infofenster - let statusInfo = matchingStatuses - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - // Bestimmen des Icons basierend auf dem Status - let iconPath = getIconPath( - matchingStatuses[0]?.Na || "", - station.Icon, - marker - ); - - marker.setIcon( - L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }) - ); - // Check if the icon path includes 'critical' and initiate bouncing - if ( - iconPath.includes("critical") || - iconPath.includes("major") || - iconPath.includes("minor") || - iconPath.includes("system") - ) { - marker.setBouncingOptions({ - bounceHeight: 15, - contractHeight: 12, - bounceSpeed: 52, - contractSpeed: 52, - shadowAngle: null, - }); - marker.bounce(3); - } - // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht - if (station.LD_Name === "GMA Littwin (TEST)") { - marker.bindTooltip( - `
${station.Area_Name}
`, - { - permanent: true, - direction: "right", - opacity: 1, // Tooltip immer sichtbar - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } else { - marker.bindTooltip( - `
${station.LD_Name}
`, - { - permanent: false, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } - // Marker zu OMS und der Karte hinzufügen - oms.addMarker(marker); - marker.addTo(map).bindPopup(` - ${station.LD_Name}
- ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name})
- ${statusInfo}
- `); - let LocID = station.IdLocation; - - }); - - }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]); - - //------------------------------------------ */ - //------------------------------------------ */ - //useEffect zusammen von MySQL Daten bank und von APIs - useEffect(() => { - const fetchData = async () => { - try { - const responses = await Promise.all([ - fetch(mapGisStationsStaticDistrictUrl), - fetch(mapGisStationsStatusDistrictUrl), - // Andere relevante API-Anfragen - ]); - const data = await Promise.all(responses.map((res) => res.json())); - - if (data[0] && data[0].Points) { - setGisStationsStaticDistrict(data[0].Points); - } else { - console.error("Daten für GisStationsStaticDistrict nicht gefunden"); - setGisStationsStaticDistrict([]); - } - - if (data[1] && data[1].Statis) { - setGisStationsStatusDistrict(data[1].Statis); - } else { - console.error("Daten für GisStationsStatusDistrict nicht gefunden"); - setGisStationsStatusDistrict([]); - } - - // Weitere Datenverarbeitung... - } catch (error) { - console.error("Fehler beim Laden der Daten: ", error); - // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände - } - }; - - fetchData(); - }, []); - - useEffect(() => { - if (!map) return; - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); - - // Marker für lokale MySQL-Daten - locations.forEach((location) => { - const { latitude, longitude } = parsePoint(location.position); - const marker = L.marker([latitude, longitude], { - icon: L.icon({ - iconUrl: "/location.svg", - iconSize: [34, 34], - iconAnchor: [17, 34], - popupAnchor: [0, -34], - }), - draggable: true, - id: location.idPoi, - }); - - marker.bindPopup( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, closeButton: true } - ); - marker.bindTooltip( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, direction: "top", offset: [0, -30] } - ); - - marker.on("dragend", function (e) { - const newLat = e.target.getLatLng().lat; - const newLng = e.target.getLatLng().lng; - const markerId = e.target.options.id; - updateLocationInDatabase(markerId, newLat, newLng).then(() => { - onLocationUpdate(markerId, newLat, newLng); - }); - }); - - marker.addTo(map); - - /* if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) { - if (namesArray.includes("TALAS")) { - marker[GisStationsStatusDistrict.IdLD].addTo(TALAS); - console.log("TALAS system added"); - } - } */ - }); - - // Marker für GisStationsStaticDistrict - GisStationsStaticDistrict.forEach((station) => { - //console.log("station 222:", station); - // Filter für Statusobjekte dieser spezifischen Station - const matchingStatuses = GisStationsStatusDistrict.filter( - (status) => status.IdLD === station.IdLD - ); - - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", // Default, wird geändert - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }).addTo(map); - - // Popup beim Überfahren mit der Maus öffnen - marker.on("mouseover", function (e) { - this.openPopup(); - }); - - // Popup schließen, wenn die Maus den Marker verlässt - marker.on("mouseout", function (e) { - this.closePopup(); - }); - - // String-Zusammenstellung für das Popup-Infofenster - let statusInfo = matchingStatuses - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - // Bestimmen des Icons basierend auf dem Status - let iconPath = getIconPath( - matchingStatuses[0]?.Na || "", - station.Icon, - marker - ); - - marker.setIcon( - L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }) - ); - // Check if the icon path includes 'critical' and initiate bouncing - if ( - iconPath.includes("critical") || - iconPath.includes("major") || - iconPath.includes("minor") || - iconPath.includes("system") - ) { - marker.setBouncingOptions({ - bounceHeight: 15, - contractHeight: 12, - bounceSpeed: 52, - contractSpeed: 52, - shadowAngle: null, - }); - marker.bounce(3); - } - //------------------------------------------------------------------------------------------------------------------------- - //------------------------------------------------------------------------------------------------------------------------- - - // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht - if (station.LD_Name === "GMA Littwin (TEST)") { - marker - .bindTooltip( - `
${station.Area_Name}
`, - { - permanent: true, - direction: "right", - opacity: 1, // Tooltip immer sichtbar - offset: L.point({ x: 10, y: 0 }), - } - ) - .addTo(GMA); - } else { - marker - .bindTooltip( - `
${station.LD_Name}
`, - { - permanent: false, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ) - .addTo(GMA); - } - - //console.log("station.System:", station.System); - //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus - - //console.log("GisSystem:", GisSystemStatic); - //------------------------------------------------------------------------------------------------------------------------- - //------------------------------------------------------------------------------------------------------------------------- - // Marker zu OMS und der Karte hinzufügen - oms.addMarker(marker); - marker.addTo(map).bindPopup(` - ${station.LD_Name}
- ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name})
- ${statusInfo}
- `); - let LocID = station.IdLocation; - //console.log("station test :", station); - - //alle Layers anzeigen unter GMA sind alle - // console.log("TALAS Layers:", TALAS); - - //TALAS Layer entfernen - // map.removeLayer(layers.TALAS); - // wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker - /* if (station.LD_Name === "GMA Littwin (TEST)") { - map.removeLayer(marker); - } - // wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker - if (station.LD_Name === "CPL Bentheim") { - map.removeLayer(marker); - } */ - map.removeLayer(marker); - }); - }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich - - //GisStationsStatusDistrict - //const [talasSystem, setTalasSystem] = useState({}); - const [layerTALAS, setLayerTALAS] = useState([]); - - // GisSystemStatic Daten laden und Systemdaten speichern - // Systeminformationen aus GisSystemStatic aktualisieren--------------1 - useEffect(() => { - GisSystemStatic.forEach((system) => { - if (system.Name === "TALAS") { - setLayerTALAS((prev) => { - // Prüfen, ob der Eintrag bereits existiert, bevor Hinzufügung - const exists = prev.some((item) => item.IdSystem === system.IdSystem); - return exists ? prev : [...prev, system]; - }); - } - }); - }, [GisSystemStatic]); - - // Systeminformationen aus GisStationsStaticDistrict aktualisieren-------2 - useEffect(() => { - if (!map || !GisStationsStaticDistrict) return; - - // Clear existing layers to ensure no old markers persist - TALAS.clearLayers(); - - GisStationsStaticDistrict.forEach(station => { - if (parseInt(station.System) === 1) { - const icon = L.icon({ - iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`, - iconSize: [25, 41], - iconAnchor: [12, 41] - }); - - const marker = L.marker([station.X, station.Y], { icon }); - marker.addTo(TALAS); - - marker.bindPopup(` - ${station.LD_Name}
- ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name})
- `); - - // Debug events - marker.on('mouseover', () => marker.openPopup()); - marker.on('mouseout', () => marker.closePopup()); - } - }); - - TALAS.addTo(map); - }, [map, GisStationsStaticDistrict]); - - -//--------------------------------------------------------------------------------- -const [activeLayer, setActiveLayer] = useState(null); - -useEffect(() => { - if (!map) return; - - // Erstelle eine Funktion, um alle Layer zu entfernen - const removeLayers = () => { - [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => { - if (map.hasLayer(layer)) { - map.removeLayer(layer); - } - }); - }; - - // Entferne alle Layer zuerst - removeLayers(); - - // Füge nur den aktiven Layer hinzu, wenn er definiert ist - if (activeLayer && map.hasLayer(activeLayer) === false) { - activeLayer.addTo(map); - } -}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map - -useEffect(() => { - // Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind - if (GisStationsStaticDistrict.length > 0) { - setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird - } -}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict - - - // Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3 - useEffect(() => { - console.log("Verarbeitung der talasSystem-Daten:", layerTALAS); - // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen - }, [layerTALAS]); - - //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict); - - //------------------------------------------ - /* useEffect(() => { - if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length) - return; - - // Alte Marker löschen - map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); - - // Neuen Markern basierend auf den System IDs zuordnen - GisStationsStaticDistrict.forEach((station) => { - // Finden des entsprechenden System-Objekts - const system = GisSystemStatic.find((s) => s.IdSystem === station.System); - console.log("System idsystem:", system); - console.log("Station system:", station); - //station Object zu layerGroup hinzufügen - - if (system) { - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: "default-icon.png", - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41], - }), - }); - - // Marker dem entsprechenden Layer hinzufügen - if (layers[system.LayerName]) { - layers[system.LayerName].addLayer(marker); - } - //zeige alle Marker des Layers an - //console.log("Layer GMA:", TALAS); - - // Optional: Popup oder Tooltip hinzufügen - marker.bindPopup( - `Station: ${station.LD_Name}
System: ${system.Name}` - ); - } - }); - console.log("layerGroup GMA :", GMA._layers); - console.log("layer TALAS :", layers.GMA._layers); - }, [map, GisStationsStaticDistrict, GisSystemStatic]); */ - - //------------------------------------------ - /* useEffect(() => { - if (map) { - Object.keys(layerVisibility).forEach((layerName) => { - const layer = layers[layerName]; - if (layer) { - console.log( - `Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}` - ); - if (layerVisibility[layerName]) { - map.addLayer(layer); - } else { - map.removeLayer(layer); - } - } else { - console.error( - "Versuch, nicht definierten Layer zu manipulieren:", - layerName - ); - } - }); - } - }, [layerVisibility, map]); */ - - //------------------------------------------ */ - /* let uniqueIdLDsData = []; - let Tooltip = []; - - for (let index = 0; index < uniqueIdLDsData.length; index++) { - let element = uniqueIdLDsData[index].split(","); - let lat = element[0]; - let lng = element[1]; - let ID = element[2]; - let IdLD = element[3]; - let LocID = element[4]; - - Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker }) - .bindTooltip( - '
' + - '
---
' + - '
---
' + - '
---
' + - '
---
' + - '
---
' + - "
", - { - permanent: true, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ) - .openTooltip() - .addTo(GMA); - } */ - - //------------------------------------------ - - return ( - <> - -
- - ); -}; - -export default MapComponent; diff --git a/components/MapComponent.js b/components/MapComponent.js index 5200b4035..2774a5ef5 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -337,7 +337,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const zoomIn = (e) => { initMap.flyTo(e.latlng, 12); - console.log("ZoomIn koordinaten in MapComponent", e.latlng); + //console.log("ZoomIn koordinaten in MapComponent", e.latlng); }; const zoomOut = (e) => { @@ -1297,7 +1297,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Nutzt die Map, um den internen Namen zu bekommen const internalName = layerNames["Cisco Router"] || "CiscoRouter"; toggleLayer(mapLayersVisibility[internalName]); - console.log("internalName Cisco Router: ", internalName); + //console.log("internalName Cisco Router: ", internalName); }, [map, ciscoRouterMarkers, mapLayersVisibility]); //------------------------------------------ */ @@ -1409,7 +1409,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { if (!map || !talasiclMarkers) return; - console.log("talasiclMarkers", talasiclMarkers); + //console.log("talasiclMarkers", talasiclMarkers); const toggleLayer = (isVisible) => { if (isVisible) { talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added @@ -1422,7 +1422,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const internalName = layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers "; toggleLayer(mapLayersVisibility[internalName]); - console.log("internalName for TALAS ICL in MapComponent: ", internalName); + //console.log("internalName for TALAS ICL in MapComponent: ", internalName); }, [map, talasiclMarkers, mapLayersVisibility]); //------------------------------------------ */ diff --git a/config/config.js b/config/config.js index 147cefac6..81ec6e6e2 100644 --- a/config/config.js +++ b/config/config.js @@ -2,7 +2,6 @@ const mapVersion = "0.5.3"; // Die Version der verwendeten Karte const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird -const offlineData = false; // Schalter, um anzugeben, ob Daten offline verfügbar gemacht werden sollen const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden // Initialisieren von Variablen, die später im Browserkontext gesetzt werden @@ -14,13 +13,6 @@ let mapGisStationsStaticDistrictUrl, mapGisSystemStaticUrl, mapDataIconUrl; -//Offline Daten -/* let mapStaticOfflineURL, - mapStatusOfflineURL, - mapSystemOfflineURL, - mapIconsOfflineURL, - mapMeasuresOfflineURL; */ - // Prüfen, ob das Code im Browser ausgeführt wird if (typeof window !== "undefined") { // Diese Variablen werden nur im Browser-Kontext initialisiert @@ -36,14 +28,6 @@ if (typeof window !== "undefined") { mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; - - /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; - mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`; - mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`; - mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`; - mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ - - // URLs zu Offline-Daten, falls benötigt } // Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können @@ -51,7 +35,6 @@ export { mapVersion, standardSideMenu, fullSideMenu, - offlineData, serverURL, windowHeight, url_string, diff --git a/pages/api/[...path].js b/pages/api/[...path].js index 299b2253b..c03d25934 100644 --- a/pages/api/[...path].js +++ b/pages/api/[...path].js @@ -3,7 +3,6 @@ import { createProxyMiddleware } from "http-proxy-middleware"; export default createProxyMiddleware({ target: "http://10.10.0.13", // Ziel-URL des Proxys - //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys changeOrigin: true, pathRewrite: { "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert diff --git a/store/zoomOutState.js b/store/zoomOutState.js deleted file mode 100644 index 4d9893b4d..000000000 --- a/store/zoomOutState.js +++ /dev/null @@ -1,7 +0,0 @@ -// store/zoomOutState.js -import { atom } from "recoil"; - -export const zoomOutState = atom({ - key: "zoomOutState", // eindeutiger Key - default: 7, // Start-Zoomlevel -});