218 lines
8.1 KiB
JavaScript
218 lines
8.1 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
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
|
|
tdrLocation, // Wert für die TDR-Entfernung
|
|
}) {
|
|
const [activeButton, setActiveButton] = useState("Schleife");
|
|
const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
|
|
const [loading, setLoading] = useState(false);
|
|
const [currentDisplayValue, setCurrentDisplayValue] = useState(
|
|
schleifenwiderstand || "0"
|
|
); // Wert, der im unteren Display angezeigt wird
|
|
|
|
// Funktion zum Wechseln der Buttons und Anpassen des Anzeigewerts
|
|
const handleButtonClick = (button) => {
|
|
if (button === "Schleife") {
|
|
setActiveButton("Schleife");
|
|
setDisplayText("Schleifenwiderstand [kOhm]");
|
|
setCurrentDisplayValue(schleifenwiderstand || "0");
|
|
} else if (button === "TDR") {
|
|
setActiveButton("TDR");
|
|
setDisplayText("Entfernung [Km]");
|
|
setCurrentDisplayValue(tdrLocation || "0");
|
|
}
|
|
};
|
|
|
|
// Funktion für die TDR-Messung
|
|
const goTDR = () => {
|
|
let slot = slotIndex; // Verwende direkt slotIndex, da Slot 0 der erste Slot ist
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
|
|
|
setLoading(true); // Ladezustand setzen
|
|
fetch(
|
|
`${apiUrl}/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`,
|
|
{
|
|
method: "GET",
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
console.log("TDR erfolgreich gestartet für Slot", slot);
|
|
} else {
|
|
console.error("Fehler beim Senden der TDR-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
|
|
};
|
|
|
|
// Funktion für die Schleifenmessung
|
|
const goLoop = () => {
|
|
let slot = slotIndex; // Verwende direkt slotIndex
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
|
|
|
setLoading(true); // Ladezustand setzen
|
|
fetch(
|
|
`${apiUrl}/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`,
|
|
{
|
|
method: "GET",
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
|
|
} else {
|
|
console.error("Fehler beim Senden der Schleifen-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
|
|
};
|
|
|
|
// Überprüfe, ob ein Modul im Slot vorhanden ist
|
|
const isModulPresent = kueOnline[slotIndex] === 1;
|
|
|
|
// Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
|
|
const handleRefreshClick = () => {
|
|
if (activeButton === "Schleife") {
|
|
goLoop(); // Wenn Schleife aktiv ist, starte goLoop
|
|
} else if (activeButton === "TDR") {
|
|
goTDR(); // Wenn TDR aktiv ist, starte goTDR
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
|
|
{isModulPresent ? (
|
|
<>
|
|
<div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
|
|
<div className="flex items-start justify-between h-[30px] ">
|
|
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
|
|
<span className="text-white text-[10px]">{slotIndex}</span>
|
|
</div>
|
|
|
|
<h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<div className="text-[8px]">ISO MOhm</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
|
|
{modulName || "Test1"}
|
|
</div>
|
|
|
|
<div className="absolute bottom-1 right-1 text-black text-[8px]">
|
|
{kueVersion}
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{/* Unterer Bereich, der den dynamischen Wert anzeigt */}
|
|
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
|
|
<button
|
|
onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
|
|
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
|
|
disabled={loading} // Disable button while loading
|
|
>
|
|
<span className="text-white text-[18px]">⟳</span>
|
|
</button>
|
|
|
|
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
|
|
<div className="top-[220px] left-[10px] text-black text-[10px]">
|
|
<p>{currentDisplayValue}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons für Schleife und TDR */}
|
|
<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>
|
|
|
|
<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}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kue705FO;
|