refactor: Komponenten-Hooks strukturiert und in passende UI-Unterverzeichnisse verschoben

- useLineData.js → components/gisPolylines/tooltip/ - useLayerVisibility.js → components/mapLayersControlPanel/hooks/ - useAreaMarkersLayer.js → components/area/hooks/ - useDynamicDeviceLayers.js → components/devices/hooks/ - useDataUpdater.js & useMapComponentState.js → components/hooks/ 💡 Ziel: Alle UI-bezogenen Hooks an logische Stellen verschoben, um Wartbarkeit zu verbessern. 🔍 Vorteil: Schnellere Navigation bei UI-Fehlern oder Layout-Anpassungen.
2025-06-25 07:21:05 +02:00
parent 4070429193
commit 7c4fbc3988
11 changed files with 55 additions and 31 deletions
--- a/components/gisPolylines/tooltip/useLineData.js
+++ b/components/gisPolylines/tooltip/useLineData.js
@@ -0,0 +1,118 @@
+// hooks/useLineData.js //fix v1.0.8.1
+import { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { selectGisLinesStatusFromWebservice } from "@/redux/slices/webservice/gisLinesStatusSlice";
+import { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk";
+import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk";
+
+const useLineData = () => {
+  const dispatch = useDispatch();
+
+  const { data: statisData } = useSelector(selectGisLinesStatusFromWebservice);
+  const linesData = useSelector(state => state.gisLinesFromDatabase.data);
+  const [lineColors, setLineColors] = useState({});
+  const [tooltipContents, setTooltipContents] = useState({});
+
+  useEffect(() => {
+    dispatch(fetchGisLinesThunk());
+    dispatch(fetchGisLinesStatusThunk());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!statisData || !Array.isArray(statisData)) return;
+
+    const colorsByModule = {};
+    const newTooltipContents = {};
+    const valueMap = {};
+
+    const sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level);
+
+    sortedStatis.forEach(statis => {
+      const key = `${statis.IdLD}-${statis.Modul}`;
+      if (!valueMap[key]) {
+        valueMap[key] = {
+          messages: [],
+          messwert: undefined,
+          schleifenwert: undefined,
+        };
+      }
+
+      if (
+        statis.DpName.endsWith("_Messwert") &&
+        statis.Value !== "True" &&
+        !valueMap[key].messwert
+      ) {
+        valueMap[key].messwert = statis.Value;
+      }
+
+      if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
+        valueMap[key].schleifenwert = statis.Value;
+      }
+
+      if (statis.Message && statis.Message !== "?") {
+        valueMap[key].messages.push({
+          message: statis.Message,
+          prioColor:
+            statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
+        });
+      }
+    });
+
+    sortedStatis.forEach(statis => {
+      const key = `${statis.IdLD}-${statis.Modul}`;
+      const matchingLine = linesData.find(
+        item => item.idLD === statis.IdLD && item.idModul === statis.Modul
+      );
+
+      if (matchingLine) {
+        const values = valueMap[key];
+        const messageDisplay = values.messages
+          .map(
+            msg =>
+              `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`
+          )
+          .join("");
+
+        colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
+
+        newTooltipContents[key] = `
+          <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+            <span class="text-lg font-semibold text-gray-900">${
+              statis.ModulName || "Unknown"
+            }</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
+            <br>
+            <span class="text-md font-bold text-gray-800">Station: ${
+              matchingLine.name || "N/A"
+            }</span>
+            <br>
+            <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+              ${messageDisplay}
+            </div>
+            <br>
+            ${
+              values.messwert
+                ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>`
+                : ""
+            }
+            ${
+              values.schleifenwert
+                ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>`
+                : ""
+            }
+          </div>
+        `;
+      }
+    });
+
+    setLineColors(colorsByModule);
+    setTooltipContents(newTooltipContents);
+  }, [statisData, linesData]);
+
+  return { lineColors, tooltipContents };
+};
+
+export default useLineData;