Tooltip wird angezeigt

2025-05-29 13:20:37 +02:00
parent af82ca32c5
commit 534f8f062b
4 changed files with 81 additions and 98 deletions
--- 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 = `
-      <div class="bg-white rounded-lg">
-        <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
-        <span class="text-md font-bold text-gray-800">${station.Device}</span><br>
-        <span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
-        <span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
-        <div class="mt-2">
-          ${statusDistrictData
-            .filter((status) => status.IdLD === station.IdLD)
-            .reverse()
-            .map(
-              (status) => `
+      let popupContent = `
+        <div class="bg-white rounded-lg">
+          <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
+          <span class="text-md font-bold text-gray-800">${station.Device}</span><br>
+          <span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
+          <span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
+          <div class="mt-2">
+            ${statusDistrictData
+              .filter((status) => status.IdLD === station.IdLD)
+              .reverse()
+              .map(
+                (status) => `
                <div class="flex items-center my-1">
                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
-                </div>
-              `
-            )
-            .join("")}
-        </div>
-      </div>
-    `;
+                </div>`
+              )
+              .join("")}
+          </div>`;
+
+      if (station.System === 11 && messung) {
+        popupContent += `
+          <div class="mt-2 text-xs text-blue-800 bg-blue-100 p-2 rounded">
+            🌡️ Temperatur: ${messung.Temp} °C<br>
+            💧 Feuchte: ${messung.Humidity} %<br>
+            ⚡ Spannung: ${messung.U} V
+          </div>`;
+      }
+
+      popupContent += `</div>`;
      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);
  }
 };