nodeMap/hooks/useLineData.js

// 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/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 [lineColors, setLineColors] = useState({});
  const [tooltipContents, setTooltipContents] = useState({});

  useEffect(() => {
    dispatch(fetchGisLinesThunk());
    dispatch(fetchGisLinesStatusThunk());
  }, [dispatch]);

  useEffect(() => {
    if (!statisData || !Array.isArray(statisData)) return;

    const colorsByModule = {};
    const newTooltipContents = {};
    const valueMap = {};

    const sortedStatis = [...statisData].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 = 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("");

        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>
        `;
      }
    });

    setLineColors(colorsByModule);
    setTooltipContents(newTooltipContents);
  }, [statisData, linesData]);

  return { lineColors, tooltipContents };
};

export default useLineData;