diff --git a/.env.local b/.env.local index 1240451ac..fe40331b3 100644 --- a/.env.local +++ b/.env.local @@ -4,7 +4,7 @@ DB_HOST=10.10.0.13 DB_USER=root DB_PASSWORD="root#$" -DB_NAME=talas_v5_lmz_2024 +DB_NAME=talas_v5 DB_PORT=3306 ######################### diff --git a/.gitignore b/.gitignore index d93ac0f76..cba64b18b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # Node modules -#/node_modules/ +/node_modules/ # .NET build output /.next/ @@ -26,3 +26,4 @@ trace # Ignore specific Next.js build files pages-manifest.json +nodeMap für 13 am 16.07.2024.zip diff --git a/components/MapComponent.js b/components/MapComponent.js index 771e0326e..42e0fca20 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -1,4 +1,4 @@ -// components/MapComponent.js +// components/MapComponent.js import React, { useEffect, useRef, useState, useCallback } from "react"; import L, { marker } from "leaflet"; import "leaflet/dist/leaflet.css"; @@ -44,9 +44,9 @@ import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js"; -//import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js"; +import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js"; import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js"; -import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer"; +//import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer"; import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js"; import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js"; @@ -139,7 +139,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern const [talasMarkers, setTalasMarkers] = useState([]); const [eciMarkers, setEciMarkers] = useState([]); - //const [gsmModemMarkers, setGsmModemMarkers] = useState([]); + const [gsmModemMarkers, setGsmModemMarkers] = useState([]); const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); const [wagoMarkers, setWagoMarkers] = useState([]); const [siemensMarkers, setSiemensMarkers] = useState([]); @@ -151,7 +151,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); const [ulafMarkers, setUlafMarkers] = useState([]); const [sonstigeMarkers, setSonstigeMarkers] = useState([]); - const [lteModemMarkers, setLteModemMarkers] = useState([]) + //const [lteModemMarkers, setLteModemMarkers] = useState([]); const [lineStatusData, setLineStatusData] = useState([]); const [linesData, setLinesData] = useState([]); @@ -256,6 +256,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, }; + /* +await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions); +await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); + await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); + await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions); + */ // Fetch GIS Stations Static District await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions); requestCount++; // Zähler erhöhen @@ -386,27 +392,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //console.log("priorityConfig in MapComponent2: ", priorityConfig); useEffect(() => { if (gisSystemStaticLoaded && map) { - /* - createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System - createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System - createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System - createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System - createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System - createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System - createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System - createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System - createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System - createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System - createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System - createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System - createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System - createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System - */ + createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System - //createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System - createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem + createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich + //createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System @@ -425,9 +416,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms); useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms); - //useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms); + useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms); useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms); - useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms); + //useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms); useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms); useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms); @@ -460,7 +451,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const allMarkers = [ ...talasMarkers, ...eciMarkers, - // ...gsmModemMarkers, + ...gsmModemMarkers, ...ciscoRouterMarkers, ...wagoMarkers, ...siemensMarkers, @@ -473,12 +464,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ...smsfunkmodemMarkers, ...sonstigeMarkers, ...ulafMarkers, - ...lteModemMarkers, + //...lteModemMarkers, ]; checkOverlappingMarkers(map, allMarkers, plusRoundIcon); } - }, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]); + }, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]); useEffect(() => { const fetchData = async () => { @@ -686,6 +677,91 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [map]); //-------------------------------------------- + useEffect(() => { + if (!map) return; // Stelle sicher, dass die Karte initialisiert ist + + const updateGmaData = async () => { + try { + const fetchOptions = { + method: "GET", + headers: { + Connection: "close", + }, + }; + + // Aktualisiere die Messdaten + await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); + await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); + + + + // Aktualisiere die Marker-Layer + useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); + + } catch (error) { + console.error("Fehler beim Aktualisieren der GMA-Daten:", error); + } + }; + + // Initialer Datenabruf + updateGmaData(); + + // Setze ein Intervall, um die Daten alle 5 Sekunden zu aktualisieren + const intervalId = setInterval(() => { + updateGmaData(); + }, 5000); + + // Cleanup-Funktion, um das Intervall zu entfernen, wenn die Komponente entladen wird + return () => clearInterval(intervalId); + }, [map, gmaMarkers, layers.MAP_LAYERS.GMA, oms, mapGisStationsMeasurementsUrl,mapGisStationsStatusDistrictUrl]); + + + //--------------------------------- + + const markerLayerRef = useRef(null); + useEffect(() => { + if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass alle Abhängigkeiten geladen sind + + // Initialisiere die LayerGroup, falls noch nicht vorhanden + if (!markerLayerRef.current) { + markerLayerRef.current = new L.LayerGroup().addTo(map); + } + + const updateMarkers = () => { + // Alte Marker entfernen + markerLayerRef.current.clearLayers(); + + // Neue Marker für jedes System erstellen +/* createAndSetDevices(11, (markers) => { + setGmaMarkers(markers); + markers.forEach((marker) => marker.addTo(markerLayerRef.current)); // Marker zur LayerGroup hinzufügen + }, GisSystemStatic, priorityConfig); + */ + createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); + // Füge hier weitere `createAndSetDevices`-Aufrufe für andere Systeme ein + }; + + // Initiales Update der Marker + updateMarkers(); + + // Setze ein Intervall, um die Marker alle 10 Sekunden zu aktualisieren + const intervalId = setInterval(() => { + updateMarkers(); + }, 10000); // 10 Sekunden + + // Aufräumen bei Komponentenentladung + return () => { + clearInterval(intervalId); + if (markerLayerRef.current) { + markerLayerRef.current.clearLayers(); + } + }; + }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); + + +//--------------------------------------- + +//----------------- return ( <> diff --git a/config/settings.js b/config/settings.js index e8c997cb0..c1397dace 100644 --- a/config/settings.js +++ b/config/settings.js @@ -1,5 +1,5 @@ // /config/settings.js // Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte -export const MAP_VERSION = "1.0.2"; +export const MAP_VERSION = "1.0.1"; //export const STANDARD_SIDE_MENU = true; //export const FULL_SIDE_MENU = false; diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index 976c797ee..6f26879b3 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/hooks/layers/useGmaMarkersLayer.js @@ -1,88 +1,79 @@ -import { useEffect } from "react"; +import { useEffect } from "react"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -const useGmaMarkersLayer = ( - map, - gmaMarkers, - GisStationsMeasurements, - GMA, - oms -) => { +const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => { useEffect(() => { - if (map && gmaMarkers.length) { - // Filtere die relevanten Messungen für Fahrbahnzustand - const gmaMeasurements = GisStationsMeasurements.filter( - (m) => m.Gr === "Fahrbahnzustand" + if (!map) return; + + // Entferne alte Marker + GMA.clearLayers(); + + // Hinzufügen neuer Marker + markers.forEach((marker) => { + // Finde die Messungen, die zu diesem Marker gehören + const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName); + + let measurements = {}; + let area_name = marker.options.areaName; + + relevantMeasurements.forEach((m) => { + measurements[m.Na] = m.Val; + }); + + // Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte + const lt = measurements["LT"] || "---"; + const fbt = measurements["FBT"] || "---"; + const gt = measurements["GT"] || "---"; + const rlf = measurements["RLF"] || "---"; + + console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`); + + // Tooltip für den Marker binden + marker.bindTooltip( + ` +
+
+ ${area_name} +
+
+ LT : ${lt} °C +
+
+ FBT : ${fbt} °C +
+
+ GT : ${gt} +
+
+ RLF : ${rlf} % +
+
+ `, + { + permanent: true, + direction: "auto", + offset: [20, 0], + } ); - gmaMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Finde die Messungen, die zu diesem Marker gehören - const relevantMeasurements = gmaMeasurements.filter( - (m) => m.Area_Name === marker.options.areaName - ); - - let measurements = {}; - let area_name = marker.options.areaName; - - relevantMeasurements.forEach((m) => { - measurements[m.Na] = m.Val; - }); - - // Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte - const lt = measurements["LT"] || "Datenlücke"; - const fbt = measurements["FBT"] || "nicht verfügbar"; - const gt = measurements["GT"] || "nicht verfügbar"; - const rlf = measurements["RLF"] || "nicht verfügbar"; - - // Log die aktuellen Messwerte für den Marker - /* - console.log( - `Marker at ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}` - ); - */ - // Tooltip für den Marker binden - marker.bindTooltip( - ` -
-
- ${area_name} -
-
- LT : ${lt} °C -
-
- FBT : ${fbt} °C -
-
- GT : ${gt} -
-
- RLF : ${rlf} % -
-
- `, - { - permanent: true, - direction: "auto", - offset: [20, 0], - } - ); - - // Ereignisse für das Öffnen und Schließen des Tooltips - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - addContextMenuToMarker(marker); + // Ereignisse für das Öffnen und Schließen des Tooltips + marker.on("mouseover", function () { + this.openPopup(); }); - map.addLayer(GMA); - } - }, [map, gmaMarkers, GisStationsMeasurements, GMA, oms]); + marker.on("mouseout", function () { + this.closePopup(); + }); + + // Kontextmenü hinzufügen + addContextMenuToMarker(marker); + + // Füge den Marker zur Layer-Gruppe hinzu + GMA.addLayer(marker); + oms.addMarker(marker); + }); + + map.addLayer(GMA); + }, [map, markers, GisStationsMeasurements, GMA, oms]); }; -export default useGmaMarkersLayer; +export default useMarkersLayer; diff --git a/public/Web.config.13 b/public/Web.config.13 new file mode 100644 index 000000000..6e9b0f62c --- /dev/null +++ b/public/Web.config.13 @@ -0,0 +1,152 @@ + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/Web.config.30 b/public/Web.config.30 new file mode 100644 index 000000000..543d70382 --- /dev/null +++ b/public/Web.config.30 @@ -0,0 +1,140 @@ + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index 5cb2b3dff..6674f3310 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -1,4 +1,4 @@ -// /utils/createAndSetDevices.js +// /utils/createAndSetDevices.js import circleIcon from "../components/gisPolylines/icons/CircleIcon"; import { saveLineData, redrawPolyline } from "./mapUtils"; import L from "leaflet"; @@ -36,6 +36,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow])); if (jsonResponse.Points && statusResponse.Statis) { + console.log("jsonResponse.Points: ", jsonResponse.Points); + console.log("statusResponse.Statis: ", statusResponse.Statis); const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => { const statis = statisMap.get(station.IdLD); @@ -62,14 +64,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste }); // Verwende das `contextmenu`-Ereignis für den Rechtsklick - /* marker.on("contextmenu", function (event) { - if (event && event.preventDefault) { - event.preventDefault(); // Verhindert das Standard-Kontextmenü - } - disablePolylineEvents(window.polylines); - this.openPopup(); - }); - */ + marker.on("contextmenu", function (event) { if (event && event.preventDefault) { event.preventDefault(); // Verhindert das Standard-Kontextmenü @@ -115,16 +110,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
${statusInfo}
`); - /* marker.bindPopup(` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
${statusInfo}
- ${BASE_URL}${station.Link} -
- `); */ + return marker; }); diff --git a/utils/mapUtils.js b/utils/mapUtils.js index ca7cfb2c7..56e344cdf 100644 --- a/utils/mapUtils.js +++ b/utils/mapUtils.js @@ -81,7 +81,7 @@ export const restoreMapSettings = (map) => { export const checkOverlappingMarkers = (map, markers, plusIcon) => { // Ensure markers is always an array if (!Array.isArray(markers)) { - //console.error("The `markers` argument is not an array:", markers); + console.error("The `markers` argument is not an array:", markers); return; } @@ -104,7 +104,8 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => { const plusMarker = L.marker(latLng, { icon: plusIcon }); plusMarker.addTo(map); - //console.log("Adding plus icon marker at", latLng); + console.log("Adding plus icon marker at", latLng); } } + console.log("overlappingGroups", overlappingGroups); };