CPLv4.0/components/modules/Kue705FO.jsx

import React, { useState } from "react";
import { Icon } from "@iconify/react"; // Für Iconify Icons

function Kue705FO({
  isolationswert, // Übergabeparameter für den Isolationswert
  schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
  modulName, // Übergabeparameter für den Modulnamen
  kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
  kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
  slotIndex, // Der Index des Slots, für den die Anzeige gilt
}) {
  const [activeButton, setActiveButton] = useState("Schleife");
  const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");

  const handleButtonClick = (button) => {
    if (button === "Schleife") {
      setActiveButton("Schleife");
      setDisplayText("Schleifenwiderstand [kOhm]");
    } else if (button === "TDR") {
      setActiveButton("TDR");
      setDisplayText("Entfernung [Km]");
    }
  };

  // Funktion für die Aktualisierung (TDR-Aufruf)
  const goTDR = () => {
    let slot = slotIndex + 1; // Slotnummer (index beginnt bei 0, also +1)

    // Bedingung: wenn der Slot größer als 32 ist, wird die Funktion beendet
    if (slot >= 32) {
      return;
    }

    // Bereite die Slot-Informationen vor
    let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
    const data = {
      [`KTT${slotFormat}`]: 1,
      slot: slot,
    };

    // Die Basis-URL von der Umgebungsvariable holen
    const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;

    // Sende die POST-Anfrage an den Server mit der Basis-URL
    fetch(`${apiUrl}/CPL?Service/KUEdetailTDR.ACP`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data), // Konvertiere die Daten in JSON-Format
    })
      .then((response) => {
        if (response.ok) {
          console.log("POST erfolgreich gesendet für Slot", slot);
          // Hier kannst du zusätzliche Logik hinzufügen, z. B. eine Erfolgsnachricht anzeigen
        } else {
          console.error("Fehler beim Senden der POST-Anfrage");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
      });
  };

  // Überprüfe, ob ein Modul im Slot vorhanden ist
  const isModulPresent = kueOnline[slotIndex] === 1;

  return (
    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
      {isModulPresent ? (
        <>
          {/* Hauptkörper - Linker Bereich */}
          <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
            {/* Header-Bereich mit Slotnummer und Zahnrad */}
            <div className="flex items-start justify-between h-[30px] ">
              {/* Slotnummer */}
              <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
                <span className="text-white text-[10px]">{slotIndex + 1}</span>
              </div>

              {/* KÜ705-FO Text */}
              <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>

              {/* Zahnrad-Icon */}
              <button
                onClick={() => console.log("Settings clicked")}
                className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
              >
                <span className="text-white text-[20px]">⚙</span>
              </button>
            </div>

            {/* Betrieb und Alarm Status */}
            <div className="flex flex-col mt-[10px] ml-[10px]">
              <div className="flex items-center">
                <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
                <span className="text-white text-[10px]">Betrieb</span>
              </div>
              <div className="flex items-center mt-1">
                <div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
                <span className="text-white text-[10px]">Alarm</span>
              </div>
            </div>

            {/* Isolationswert-Anzeige */}
            <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
              <div className="text-center">
                <span>{isolationswert || ">200"}</span>{" "}
                {/* Dynamischer Isolationswert */}
                <div className="text-[8px]">ISO MOhm</div>
              </div>
            </div>

            {/* Weiße Linien */}
            <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
            <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>

            {/* Modulname-Anzeige */}
            <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
              {modulName || "Test1"} {/* Dynamischer Modulname */}
            </div>

            {/* Version */}
            <div className="absolute bottom-1 right-1 text-black text-[8px]">
              {kueVersion} {/* Dynamische Version */}
            </div>
          </div>

          {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
          <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
            <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
              {displayText}
            </span>
            {/* Schleifenwiderstand Anzeige */}
            <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
              {/* Icon rechts oben */}
              <button
                onClick={goTDR} // Funktion beim Klick auf den Button aufrufen
                className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
              >
                <span className="text-white text-[18px]">⟳</span>
              </button>

              {/* Wertanzeige */}
              <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
                {/* Dynamischer Schleifenwiderstand */}
                <div className="top-[220px] left-[10px] text-black text-[10px]">
                  <p>{schleifenwiderstand || "0"} kOhm</p>
                </div>
              </div>
            </div>

            {/* Schleife und TDR Buttons nebeneinander */}
            <div className="flex mt-2 space-x-1">
              <button
                onClick={() => handleButtonClick("Schleife")}
                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
                  activeButton === "Schleife"
                    ? "bg-littwin-blue"
                    : "bg-gray-400"
                }`}
              >
                Schleife
              </button>
              <button
                onClick={() => handleButtonClick("TDR")}
                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
                  activeButton === "TDR" ? "bg-littwin-blue" : "bg-gray-400"
                }`}
              >
                TDR
              </button>
            </div>

            {/* Messkurve Button */}
            <button
              onClick={() => console.log("Messkurve clicked")}
              className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
            >
              Messkurve
            </button>
          </div>
        </>
      ) : (
        <div className="flex items-center justify-center h-full text-gray-500">
          <p>Kein Modul im Slot {slotIndex + 1}</p>
        </div>
      )}
    </div>
  );
}

export default Kue705FO;