Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
ISA
2025-06-25 07:21:05 +02:00
parent 4070429193
commit 7c4fbc3988
11 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
NEXT_PUBLIC_BASE_PATH=/talas5 NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.295 NEXT_PUBLIC_APP_VERSION=1.1.296

2
.env.production
View File

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.295 NEXT_PUBLIC_APP_VERSION=1.1.296

0
hooks/useAreaMarkersLayer.js → components/area/hooks/useAreaMarkersLayer.js
View File

4
hooks/useDynamicDeviceLayers.js → components/devices/hooks/useDynamicDeviceLayers.js
View File

@@ -1,8 +1,8 @@
// /hooks/layers/useDynamicDeviceLayers.js // /hooks/layers/useDynamicDeviceLayers.js
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import L from "leaflet"; import L from "leaflet";
import { createAndSetDevices } from "../utils/devices/createAndSetDevices"; import { createAndSetDevices } from "@/utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../utils/mapUtils"; import { checkOverlappingMarkers } from "@/utils/mapUtils";
import plusRoundIcon from "@/components/icons/devices/overlapping/PlusRoundIcon"; import plusRoundIcon from "@/components/icons/devices/overlapping/PlusRoundIcon";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js"; import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";

52
hooks/useLineData.js → components/gisPolylines/tooltip/useLineData.js
View File

@@ -1,15 +1,15 @@
// hooks/useLineData.js //fix v1.0.8.1 // hooks/useLineData.js //fix v1.0.8.1
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { selectGisLinesStatusFromWebservice } from "../redux/slices/webservice/gisLinesStatusSlice"; import { selectGisLinesStatusFromWebservice } from "@/redux/slices/webservice/gisLinesStatusSlice";
import { fetchGisLinesThunk } from "../redux/thunks/database/polylines/fetchGisLinesThunk"; import { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk";
import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk"; import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk";
const useLineData = () => { const useLineData = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data: statisData } = useSelector(selectGisLinesStatusFromWebservice); const { data: statisData } = useSelector(selectGisLinesStatusFromWebservice);
const linesData = useSelector((state) => state.gisLinesFromDatabase.data); const linesData = useSelector(state => state.gisLinesFromDatabase.data);
const [lineColors, setLineColors] = useState({}); const [lineColors, setLineColors] = useState({});
const [tooltipContents, setTooltipContents] = useState({}); const [tooltipContents, setTooltipContents] = useState({});
@@ -27,7 +27,7 @@ const useLineData = () => {
const sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level); const sortedStatis = [...statisData].sort((a, b) => a.Level - b.Level);
sortedStatis.forEach((statis) => { sortedStatis.forEach(statis => {
const key = `${statis.IdLD}-${statis.Modul}`; const key = `${statis.IdLD}-${statis.Modul}`;
if (!valueMap[key]) { if (!valueMap[key]) {
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; valueMap[key].messwert = statis.Value;
} }
@@ -48,37 +52,57 @@ const useLineData = () => {
if (statis.Message && statis.Message !== "?") { if (statis.Message && statis.Message !== "?") {
valueMap[key].messages.push({ valueMap[key].messages.push({
message: statis.Message, 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 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) { if (matchingLine) {
const values = valueMap[key]; 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"; colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
newTooltipContents[key] = ` newTooltipContents[key] = `
<div class="bg-white rounded-lg m-0 p-2 w-[210px]"> <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> <br>
<span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span> <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
<br> <br>
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span> <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
<br> <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> <br>
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;"> <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
${messageDisplay} ${messageDisplay}
</div> </div>
<br> <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> </div>
`; `;
} }

10
hooks/useDataUpdater.js → components/hooks/useDataUpdater.js
View File

@@ -4,11 +4,11 @@ import { useDispatch } from "react-redux";
// import type { AppDispatch } from "../redux/store"; // import type { AppDispatch } from "../redux/store";
// ✅ Thunks aus korrektem Pfad importieren // ✅ Thunks aus korrektem Pfad importieren
import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk"; import { fetchGisLinesStatusThunk } from "@/redux/thunks/webservice/fetchGisLinesStatusThunk";
import { fetchGisStationsMeasurementsThunk } from "../redux/thunks/webservice/fetchGisStationsMeasurementsThunk"; import { fetchGisStationsMeasurementsThunk } from "@/redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk"; import { fetchGisStationsStaticDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
import { fetchGisStationsStatusDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk"; import { fetchGisStationsStatusDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
import { fetchGisSystemStaticThunk } from "../redux/thunks/webservice/fetchGisSystemStaticThunk"; import { fetchGisSystemStaticThunk } from "@/redux/thunks/webservice/fetchGisSystemStaticThunk";
const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000"); const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");

0
hooks/useMapComponentState.js → components/hooks/useMapComponentState.js
View File

10
components/mainComponent/MapComponent.js
View File

@@ -13,11 +13,11 @@ import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js"; import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";
import addItemsToMapContextMenu from "@/components/contextmenu/useMapContextMenu.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 { setupPolylines } from "@/utils/polylines/setupPolylines.js";
import { setupPOIs } from "@/utils/setupPOIs.js"; import { setupPOIs } from "@/utils/setupPOIs.js";
import useLineData from "@/hooks/useLineData.js"; import useLineData from "@/components/gisPolylines/tooltip/useLineData.js";
import { useMapComponentState } from "@/hooks/useMapComponentState.js"; import { useMapComponentState } from "@/components/hooks/useMapComponentState.js";
import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js"; import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
//----------Ui Widgets---------------- //----------Ui Widgets----------------
import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js"; 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 { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk.js";
import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk"; 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 { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesForMemory";
import { cleanupMarkers } from "@/utils/common/cleanupMarkers"; import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
import { monitorHeapAndReload } from "@/utils/common/monitorMemory"; import { monitorHeapAndReload } from "@/utils/common/monitorMemory";

0
hooks/useLayerVisibility.js → components/mapLayersControlPanel/hooks/useLayerVisibility.js
View File

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.295", "version": "1.1.296",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.295", "version": "1.1.296",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.295", "version": "1.1.296",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",