CPLv4.0/pages/kabelueberwachung.js

"use client"; // app/kabelueberwachung/page.jsx
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Kue705FO from "../components/modules/Kue705FO";
import { loadWindowVariables } from "../utils/loadWindowVariables";

function Kabelueberwachung() {
  const router = useRouter();
  const [activeRack, setActiveRack] = useState(1); // Track the active rack
  const [kueIso, setKueIso] = useState([]); // State to store isolation values
  const [kueID, setKueID] = useState([]); // State to store the KUE names
  const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
  const [kueOnline, setKueOnline] = useState([]); // State to store the module status
  const [alarmStatus, setAlarmStatus] = useState([]); // State to store the alarm status

  // Verwende den useRouter Hook, um den Rack-Parameter zu extrahieren
  useEffect(() => {
    const query = new URLSearchParams(window.location.search);
    const rackParam = query.get("rack");

    if (rackParam) {
      setActiveRack(parseInt(rackParam)); // Setze das aktive Rack basierend auf dem URL-Parameter
    }
  }, [router.query]);

  // Load the external JavaScript file and fetch the isolation values
  useEffect(() => {
    const fetchData = () => {
      loadWindowVariables()
        .then(() => {
          if (window.kueIso && Array.isArray(window.kueIso)) {
            setKueIso(window.kueIso);
          }
          if (window.kueRes && Array.isArray(window.kueRes)) {
            setSchleifenwiderstand(window.kueRes);
          }
          if (window.kueOnline && Array.isArray(window.kueOnline)) {
            setKueOnline(window.kueOnline);
          }
          if (window.kueID && Array.isArray(window.kueID)) {
            setKueID(window.kueID);
          }
          updateAlarmStatus(); // Alarmstatus sofort aktualisieren
        })
        .catch((error) => {
          console.error("Fehler beim Laden der Variablen:", error);
        });
    };

    const updateAlarmStatus = () => {
      const updatedAlarmStatus = kueIso.map((_, index) => {
        return (
          (window.kueAlarm1 && window.kueAlarm1[index]) ||
          (window.kueAlarm2 && window.kueAlarm2[index]) ||
          (window.kueCableBreak && window.kueCableBreak[index]) ||
          (window.kueGroundFault && window.kueGroundFault[index])
        );
      });
      // console.log("Aktualisierter alarmStatus:", updatedAlarmStatus);
      setAlarmStatus(updatedAlarmStatus); // State für Alarmstatus aktualisieren
    };

    fetchData();
    const interval = setInterval(fetchData, 10000); // alle 5 Sekunden

    return () => clearInterval(interval);
  }, []);

  // Zuerst alle Werte der Arrays speichern
  const allModules = kueIso.map((iso, index) => ({
    isolationswert: iso,
    schleifenwiderstand: schleifenwiderstand[index],
    modulName: kueID[index] || "Unknown",
    kueOnlineStatus: kueOnline[index],
  }));

  // Dann die Module für jedes Rack in 8er-Gruppen aufteilen
  const racks = {
    rack1: allModules.slice(0, 8),
    rack2: allModules.slice(8, 16),
    rack3: allModules.slice(16, 24),
    rack4: allModules.slice(24, 32),
  };
  // Log the racks in the console for debugging
  /*   console.log("Rack 1:", racks.rack1);
  console.log("Rack 2:", racks.rack2);
  console.log("Rack 3:", racks.rack3);
  console.log("Rack 4:", racks.rack4); */

  // Function to handle rack change
  const changeRack = (rack) => {
    setActiveRack(rack);
  };

  useEffect(() => {
    const script = document.createElement("script");
    const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
    script.src =
      environment === "production"
        ? "CPL?/CPL/SERVICE/kueData.js"
        : "/CPLmockData/SERVICE/kueData.js";
    script.async = true;
    document.body.appendChild(script);

    // Cleanup function mit Überprüfung
    return () => {
      if (script.parentNode === document.body) {
        document.body.removeChild(script);
      }
    };
  }, []);

  //----------------------------------------------
  useEffect(() => {
    const fetchData = () => {
      const existingScript = document.querySelector(
        "script[src*='kueData.js']"
      );

      // Stelle sicher, dass das Element existiert und ein Kind von `document.body` ist, bevor du es entfernst
      if (existingScript && existingScript.parentNode === document.body) {
        document.body.removeChild(existingScript);
      }

      // Füge das Skript erneut hinzu
      const script = document.createElement("script");
      script.src =
        process.env.NODE_ENV === "production"
          ? "CPL?/CPL/SERVICE/kueData.js" // Produktionspfad
          : "/CPLmockData/SERVICE/kueData.js"; // Entwicklungs-Pfad für Mock-Daten
      script.async = true;

      script.onload = () => {
        // Aktualisiere die Variablen nach kurzer Verzögerung, um sicherzustellen, dass sie geladen sind
        setTimeout(() => {
          if (window.kueIso && Array.isArray(window.kueIso)) {
            setKueIso(window.kueIso);
          }
          if (window.kueRes && Array.isArray(window.kueRes)) {
            setSchleifenwiderstand(window.kueRes);
          }
          if (window.kueOnline && Array.isArray(window.kueOnline)) {
            setKueOnline(window.kueOnline);
          }
          if (window.kueID && Array.isArray(window.kueID)) {
            setKueID(window.kueID);
          }
          updateAlarmStatus(); // Aktualisiere den Alarmstatus
        }, 500); // 500 ms Verzögerung, um sicherzustellen, dass die Daten geladen sind
      };
      document.body.appendChild(script);
    };

    const updateAlarmStatus = () => {
      const updatedAlarmStatus = window.kueIso.map((_, index) => {
        return (
          (window.kueAlarm1 && window.kueAlarm1[index]) ||
          (window.kueAlarm2 && window.kueAlarm2[index]) ||
          (window.kueCableBreak && window.kueCableBreak[index]) ||
          (window.kueGroundFault && window.kueGroundFault[index])
        );
      });
      // console.log("Aktualisierter alarmStatus:", updatedAlarmStatus);
      setAlarmStatus(updatedAlarmStatus); // Setze den aktualisierten Alarmstatus
    };

    // Lade die Daten sofort und alle 5 Sekunden neu
    fetchData();
    const interval = setInterval(fetchData, 10000);

    return () => clearInterval(interval); // Bereinige das Intervall beim Entladen der Komponente
  }, []);

  //----------------------------------------------
  return (
    <div className="bg-gray-100 flex-1 p-6 text-black">
      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>

      <div className="mb-4">
        <button
          onClick={() => changeRack(1)}
          className={`mr-1 ${
            activeRack === 1
              ? "bg-littwin-blue text-white p-1 rounded-sm "
              : "bg-gray-300 p-1 text-sm"
          }`}
        >
          Rack 1
        </button>
        <button
          onClick={() => changeRack(2)}
          className={`mr-2 ${
            activeRack === 2
              ? "bg-littwin-blue text-white p-1 rounded-sm"
              : "bg-gray-300 p-1 text-sm"
          }`}
        >
          Rack 2
        </button>
        <button
          onClick={() => changeRack(3)}
          className={`mr-2 ${
            activeRack === 3
              ? "bg-littwin-blue text-white p-1 rounded-sm"
              : "bg-gray-300 p-1 text-sm"
          }`}
        >
          Rack 3
        </button>
        <button
          onClick={() => changeRack(4)}
          className={`mr-2 ${
            activeRack === 4
              ? "bg-littwin-blue text-white p-1 rounded-sm"
              : "bg-gray-300 p-1 text-sm"
          }`}
        >
          Rack 4
        </button>
      </div>

      <div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
        {racks[`rack${activeRack}`].map((slot, index) => {
          const slotIndex = index + (activeRack - 1) * 8;
          const alarmStatus =
            (window.kueAlarm1 && window.kueAlarm1[slotIndex]) ||
            (window.kueAlarm2 && window.kueAlarm2[slotIndex]) ||
            (window.kueCableBreak && window.kueCableBreak[slotIndex]) ||
            (window.kueGroundFault && window.kueGroundFault[slotIndex]);

          return (
            <div key={index} className="flex">
              <Kue705FO
                isolationswert={slot.isolationswert}
                schleifenwiderstand={slot.schleifenwiderstand}
                modulName={slot.modulName}
                kueOnline={slot.kueOnlineStatus}
                alarmStatus={alarmStatus} // Pass the calculated alarm status
                slotIndex={slotIndex}
              />
              {/*   
              console.log(`Module Data (Rack ${activeRack}, Slot ${index + 1}):`,slot);
              */}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Kabelueberwachung;