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/.env.development
+++ b/.env.development
@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.295
+NEXT_PUBLIC_APP_VERSION=1.1.296
--- a/.env.production
+++ b/.env.production
@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=

 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.295
+NEXT_PUBLIC_APP_VERSION=1.1.296
--- a/components/area/hooks/useAreaMarkersLayer.js
+++ b/components/area/hooks/useAreaMarkersLayer.js
--- a/components/devices/hooks/useDynamicDeviceLayers.js
+++ b/components/devices/hooks/useDynamicDeviceLayers.js
@@ -1,8 +1,8 @@
 // /hooks/layers/useDynamicDeviceLayers.js
 import { useEffect, useRef, useState } from "react";
 import L from "leaflet";
-import { createAndSetDevices } from "../utils/devices/createAndSetDevices";
-import { checkOverlappingMarkers } from "../utils/mapUtils";
+import { createAndSetDevices } from "@/utils/devices/createAndSetDevices";
+import { checkOverlappingMarkers } from "@/utils/mapUtils";
 import plusRoundIcon from "@/components/icons/devices/overlapping/PlusRoundIcon";
 import { useSelector } from "react-redux";
 import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";
--- a/components/gisPolylines/tooltip/useLineData.js
+++ b/components/gisPolylines/tooltip/useLineData.js
@@ -1,15 +1,15 @@
 // 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";
+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 linesData = useSelector(state => state.gisLinesFromDatabase.data);
  const [lineColors, setLineColors] = useState({});
  const [tooltipContents, setTooltipContents] = useState({});

@@ -27,7 +27,7 @@ const useLineData = () => {

    const sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level);

-    sortedStatis.forEach((statis) => {
+    sortedStatis.forEach(statis => {
      const key = `${statis.IdLD}-${statis.Modul}`;
      if (!valueMap[key]) {
        valueMap[key] = {
@@ -37,7 +37,11 @@ const useLineData = () => {
        };
      }

-      if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
+      if (
+        statis.DpName.endsWith("_Messwert") &&
+        statis.Value !== "True" &&
+        !valueMap[key].messwert
+      ) {
        valueMap[key].messwert = statis.Value;
      }

@@ -48,37 +52,57 @@ const useLineData = () => {
      if (statis.Message && statis.Message !== "?") {
        valueMap[key].messages.push({
          message: statis.Message,
-          prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
+          prioColor:
+            statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
        });
      }
    });

-    sortedStatis.forEach((statis) => {
+    sortedStatis.forEach(statis => {
      const key = `${statis.IdLD}-${statis.Modul}`;
-      const matchingLine = linesData.find((item) => item.idLD === statis.IdLD && item.idModul === 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("");
+        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>
+            <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>
+            <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>` : ""}
+            ${
+              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>
        `;
      }
--- a/components/hooks/useDataUpdater.js
+++ b/components/hooks/useDataUpdater.js
@@ -4,11 +4,11 @@ import { useDispatch } from "react-redux";
 // import type { AppDispatch } from "../redux/store";

 // ✅ Thunks aus korrektem Pfad importieren
-import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk";
-import { fetchGisStationsMeasurementsThunk } from "../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
-import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
-import { fetchGisStationsStatusDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
-import { fetchGisSystemStaticThunk } from "../redux/thunks/webservice/fetchGisSystemStaticThunk";
+import { fetchGisLinesStatusThunk } from "@/redux/thunks/webservice/fetchGisLinesStatusThunk";
+import { fetchGisStationsMeasurementsThunk } from "@/redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
+import { fetchGisStationsStaticDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
+import { fetchGisStationsStatusDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
+import { fetchGisSystemStaticThunk } from "@/redux/thunks/webservice/fetchGisSystemStaticThunk";

 const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");

--- a/components/hooks/useMapComponentState.js
+++ b/components/hooks/useMapComponentState.js
--- a/components/mainComponent/MapComponent.js
+++ b/components/mainComponent/MapComponent.js
@@ -13,11 +13,11 @@ import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
 import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";

 import addItemsToMapContextMenu from "@/components/contextmenu/useMapContextMenu.js";
-import useAreaMarkersLayer from "@/hooks/useAreaMarkersLayer.js";
+import useAreaMarkersLayer from "@/components/area/hooks/useAreaMarkersLayer.js";
 import { setupPolylines } from "@/utils/polylines/setupPolylines.js";
 import { setupPOIs } from "@/utils/setupPOIs.js";
-import useLineData from "@/hooks/useLineData.js";
-import { useMapComponentState } from "@/hooks/useMapComponentState.js";
+import useLineData from "@/components/gisPolylines/tooltip/useLineData.js";
+import { useMapComponentState } from "@/components/hooks/useMapComponentState.js";
 import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
 //----------Ui Widgets----------------
 import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
@@ -74,9 +74,9 @@ import { fetchPoiIconsDataThunk } from "@/redux/thunks/database/pois/fetchPoiIco
 import { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk.js";
 import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk";

-import useDynamicDeviceLayers from "@/hooks/useDynamicDeviceLayers.js";
+import useDynamicDeviceLayers from "@/components/devices/hooks/useDynamicDeviceLayers.js";

-import useDataUpdater from "@/hooks/useDataUpdater";
+import useDataUpdater from "@/components/hooks/useDataUpdater.js";
 import { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesForMemory";
 import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 import { monitorHeapAndReload } from "@/utils/common/monitorMemory";
--- a/components/mapLayersControlPanel/hooks/useLayerVisibility.js
+++ b/components/mapLayersControlPanel/hooks/useLayerVisibility.js
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "nodemap",
-  "version": "1.1.295",
+  "version": "1.1.296",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "nodemap",
-      "version": "1.1.295",
+      "version": "1.1.296",
      "dependencies": {
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "nodemap",
-  "version": "1.1.295",
+  "version": "1.1.296",
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",