diff --git a/config/appVersion.js b/config/appVersion.js index 91991be9e..236fc6adf 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.207"; +export const APP_VERSION = "1.1.208"; diff --git a/hooks/layers/useDynamicDeviceLayers.js b/hooks/layers/useDynamicDeviceLayers.js index 021568a62..ca83a85d8 100644 --- a/hooks/layers/useDynamicDeviceLayers.js +++ b/hooks/layers/useDynamicDeviceLayers.js @@ -1,3 +1,4 @@ +// /hooks/layers/useDynamicDeviceLayers.js import { useEffect, useRef, useState } from "react"; import L from "leaflet"; import { createAndSetDevices } from "../../utils/devices/createAndSetDevices"; diff --git a/hooks/useCreateAndSetDevices.js b/hooks/useCreateAndSetDevices.js index a7f797a68..2bd9ec3b4 100644 --- a/hooks/useCreateAndSetDevices.js +++ b/hooks/useCreateAndSetDevices.js @@ -1,14 +1,22 @@ // /hooks/useCreateAndSetDevices.js import { useEffect } from "react"; -import { createAndSetDevices } from "../utils/createAndSetDevices"; import { useSelector } from "react-redux"; +import { createAndSetDevices } from "../utils/createAndSetDevices"; +import { selectGisStationsMeasurements } from "../redux/slices/webservice/gisStationsMeasurementsSlice"; const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled); + const measurements = useSelector(selectGisStationsMeasurements); // ✅ NEU useEffect(() => { - createAndSetDevices(systemId, setMarkersFunction, GisSystemStatic, priorityConfig, polylineEventsDisabled); - }, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, polylineEventsDisabled]); + createAndSetDevices( + systemId, + setMarkersFunction, + GisSystemStatic, + priorityConfig, + measurements // ✅ NEU + ); + }, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, polylineEventsDisabled, measurements]); }; export default useCreateAndSetDevices; diff --git a/utils/devices/createAndSetDevices.js b/utils/devices/createAndSetDevices.js index 091ae9fa4..6aa6a7e7f 100644 --- a/utils/devices/createAndSetDevices.js +++ b/utils/devices/createAndSetDevices.js @@ -6,6 +6,7 @@ import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js"; import { setSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js"; import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js"; import { selectGisStationsStatusDistrict } from "../../redux/slices/webservice/gisStationsStatusDistrictSlice.js"; +import { selectGisStationsMeasurements } from "../../redux/slices/webservice/gisStationsMeasurementsSlice.js"; // ✅ const determinePriority = (iconPath, priorityConfig) => { for (let priority of priorityConfig) { @@ -16,33 +17,31 @@ const determinePriority = (iconPath, priorityConfig) => { return 5; }; -export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { +export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig, measurements) => { const mode = process.env.NEXT_PUBLIC_API_PORT_MODE; const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""; + try { const state = store.getState(); - const staticDistrictData = selectGisStationsStaticDistrict(state); // { Points: [...] } - const statusDistrictData = selectGisStationsStatusDistrict(state); // [ ... ] + const staticDistrictData = selectGisStationsStaticDistrict(state); + const statusDistrictData = selectGisStationsStatusDistrict(state); + const measurementData = measurements ?? selectGisStationsMeasurements(state); - if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) { - console.error("❌ Redux enthält keine gültigen Geräte-/Statusdaten!", { - staticDistrictData, - statusDistrictData, - }); - return; - } + if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) return; const statisMap = new Map(statusDistrictData.map((s) => [s.IdLD, s])); - - const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => { - store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active })); - return { idLD: station.IdLD, active: station.Active }; + const measurementsMap = new Map(); + measurementData?.forEach((m) => { + if (!measurementsMap.has(m.IdLD)) { + measurementsMap.set(m.IdLD, m); + } }); const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1); const markersData = activeStations.map((station) => { const statis = statisMap.get(station.IdLD); + const messung = measurementsMap.get(station.IdLD); const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`; const priority = determinePriority(iconPath, priorityConfig); @@ -57,102 +56,77 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste }), areaName: station.Area_Name, link: station.Link, - zIndexOffset: zIndexOffset, + zIndexOffset, deviceName: station.Device, - idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert + idDevice: station.IdLD, }); - const popupContent = ` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
- ${statusDistrictData - .filter((status) => status.IdLD === station.IdLD) - .reverse() - .map( - (status) => ` + let popupContent = ` +
+ ${station.LD_Name} + ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
+ ${statusDistrictData + .filter((status) => status.IdLD === station.IdLD) + .reverse() + .map( + (status) => `
${status.Me} (${status.Na}) -
- ` - ) - .join("")} -
-
- `; +
` + ) + .join("")} +
`; + + if (station.System === 11 && messung) { + popupContent += ` +
+ 🌡️ Temperatur: ${messung.Temp} °C
+ 💧 Feuchte: ${messung.Humidity} %
+ ⚡ Spannung: ${messung.U} V +
`; + } + + popupContent += ``; marker.bindPopup(popupContent); + // ✅ Permanenter Tooltip über dem Marker + if (station.System === 11 && messung) { + const tooltipText = `🌡 ${messung.Temp ?? "-"}°C | 💧 ${messung.Humidity ?? "-"}% | ⚡ ${messung.U ?? "-"}V`; + marker.bindTooltip(tooltipText, { + permanent: true, + direction: "top", + offset: [0, -40], + className: "gma-tooltip", + }); + } + marker.on("mouseover", () => { store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name })); marker.openPopup(); }); - let contextMenuItemIds = new Set(); - const addDeviceContextMenu = (map, marker) => { - if (map && map.contextmenu) { - if (contextMenuItemIds.size > 0) { - contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id)); - contextMenuItemIds.clear(); - } - - const separator = map.contextmenu.addItem({ separator: true }); - - const mode = process.env.NEXT_PUBLIC_API_PORT_MODE; - const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/` : `${window.location.origin}${basePath}/`; - - const detailsItem = map.contextmenu.addItem({ - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: () => { - const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`; - window.open(link, "_blank"); - }, - }); - - contextMenuItemIds.add(detailsItem); - contextMenuItemIds.add(separator); - } - }; - - let contextMenuCreated = false; - marker.on("contextmenu", (event) => { event.originalEvent?.preventDefault(); marker.openPopup(); - - if (!contextMenuCreated) { - contextMenuCreated = true; - - marker.bindContextMenu({ - contextmenu: true, - contextmenuWidth: 160, - contextmenuItems: [ - { separator: true }, - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: () => { - const link = `${window.location.origin}${basePath}/cpl.aspx?ver=35&kue=24&id=${station.IdLD}`; - window.open(link, "_blank"); - }, + marker.bindContextMenu({ + contextmenu: true, + contextmenuWidth: 160, + contextmenuItems: [ + { separator: true }, + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: () => { + const link = `${window.location.origin}${basePath}/cpl.aspx?ver=35&kue=24&id=${station.IdLD}`; + window.open(link, "_blank"); }, - ], - }); - } - }); - - map.on("click", () => { - if (map.contextmenu && contextMenuItemIds.size > 0) { - contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id)); - contextMenuItemIds.clear(); - if (window.oms && typeof window.oms.addMarker === "function") { - window.oms.addMarker(marker); - } - } + }, + ], + }); }); if (typeof marker.bounce === "function" && statis) { @@ -164,6 +138,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste setMarkersFunction(markersData); } catch (error) { - console.error("❌ Fehler in createAndSetDevices.js (Redux-Version):", error.message, error.stack); + console.error("❌ Fehler in createAndSetDevices.js:", error.message, error.stack); } };