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

refactor: Tooltip-HTML-Generierung aus useLineData ausgelagert

Browse Source 
- Funktion `generateLineTooltipContent` aus `useLineData.js` extrahiert
- Neue Datei: `components/gisPolylines/tooltip/generateLineTooltipContent.js`
- Trennung von Logik (Hook) und Darstellung (Tooltip-HTML)
- Verbesserte Lesbarkeit und Wiederverwendbarkeit der Tooltip-Generierung
This commit is contained in:
ISA
2025-06-25 07:49:52 +02:00
parent 7c4fbc3988
commit 89403164c6
7 changed files with 43 additions and 42 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
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.296
NEXT_PUBLIC_APP_VERSION=1.1.297

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=
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.296
NEXT_PUBLIC_APP_VERSION=1.1.297

35
components/gisPolylines/tooltip/generateLineTooltipContent.js Normal file
View File

@@ -0,0 +1,35 @@
export function generateLineTooltipContent(statis, matchingLine, values) {
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("");
return `
<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>
`;
}

40
components/gisPolylines/tooltip/useLineData.js
View File

@@ -1,9 +1,10 @@
// hooks/useLineData.js //fix v1.0.8.1
// /components/gisPolylines/tooltip/useLineData.js
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 { generateLineTooltipContent } from "./generateLineTooltipContent";
const useLineData = () => {
const dispatch = useDispatch();
@@ -66,45 +67,10 @@ const useLineData = () => {
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>
`;
newTooltipContents[key] = generateLineTooltipContent(statis, matchingLine, values);
}
});

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

4
package-lock.json generated
View File

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

2
package.json
View File

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