nodeMap/hooks/useLineData.js

// hooks/useLineData.js
import { useEffect, useState } from "react";
import { SERVER_URL } from "../config/urls";
import { useDispatch, useSelector } from "react-redux";

const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);
  const [lineColors, setLineColors] = useState({});
  const [tooltipContents, setTooltipContents] = useState({});

  useEffect(() => {
    let isCancelled = false;

    const fetchData = async () => {
      try {
        const response1 = await fetch(webserviceGisLinesStatusUrl);
        const data1 = await response1.json();

        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
        const data2 = await response2.json();

        const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
        const namesData = await response3.json();

        if (!isCancelled) {
          const colorsByModule = {};
          const newTooltipContents = {};
          const valueMap = {};

          const sortedStatis = [...data1.Statis].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 = data2.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 prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";

              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: ${namesData[matchingLine.idLD] || "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);
          setLineStatusData(data1.Statis);

          // Setze den Timeout für die Kontextmenü-Überwachung
          const countdownDuration = 30000; // 30 Sekunden für den Countdown
          setTimeout(() => {
            console.log("Setting contextMenuExpired to true");
            localStorage.setItem("contextMenuExpired", "true");
          }, countdownDuration);
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der Daten:", error);
        try {
          window.location.reload();
        } catch (reloadError) {
          console.error("Fehler beim Neuladen der Seite:", reloadError);
        }
      }
    };

    const scheduleNextFetch = () => {
      if (!isCancelled) {
        fetchData();
        setTimeout(scheduleNextFetch, 30000);
      }
    };

    fetchData();
    scheduleNextFetch();

    return () => {
      isCancelled = true;
      localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, wenn das Hook unmounted wird
    };
  }, [webserviceGisLinesStatusUrl, setLineStatusData]);

  return { lineColors, tooltipContents };
};

export default useLineData;