refactor: Tooltip-HTML-Generierung aus useLineData ausgelagert

- 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

.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.296
+NEXT_PUBLIC_APP_VERSION=1.1.297

.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.296
+NEXT_PUBLIC_APP_VERSION=1.1.297

components/gisPolylines/tooltip/generateLineTooltipContent.js

@@ -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>
+  `;
+}

components/gisPolylines/tooltip/useLineData.js

@@ -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] = `
+        newTooltipContents[key] = generateLineTooltipContent(statis, matchingLine, values);
-          <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>
-        `;
       }
     });
 

package-lock.json

@@ -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",

package.json

@@ -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",