"use client"; import React, { useState, useEffect } from "react"; import ReactModal from "react-modal"; import Chart from "chart.js/auto"; import KueModal from "../modales/KueModal"; import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons function Kue705FO({ isolationswert, schleifenwiderstand, modulName, kueVersion = "V4.19", kueOnline, slotIndex, tdrLocation, }) { const [currentModulName, setCurrentModulName] = useState(modulName); const [activeButton, setActiveButton] = useState("Schleife"); const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]"); const [loading, setLoading] = useState(false); const [currentDisplayValue, setCurrentDisplayValue] = useState( schleifenwiderstand || "0" ); const [showModal, setShowModal] = useState(false); const [showChartModal, setShowChartModal] = useState(false); // Modal für die Messkurve const [chartData, setChartData] = useState(null); // State für die geladene Chart-Daten const handleOpenModal = () => { setShowModal(true); }; const handleCloseModal = () => { setShowModal(false); }; // Funktion zum Anzeigen des Chart-Modals const handleOpenChartModal = () => { setShowChartModal(true); loadChartData(); // Lade die Daten, wenn das Modal geöffnet wird }; const handleCloseChartModal = () => { setShowChartModal(false); }; // Daten laden und den Chart erstellen const loadChartData = () => { const slot = slotIndex; const fileData = `../cpl?4000values/slot${slot}.json`; // Je nach Slot wird die entsprechende Datei geladen fetch(fileData) .then((response) => response.json()) .then((data) => { setChartData(data); // Daten setzen createChart(data); console.log("Messkurvendaten geladen:", data); }) .catch((error) => { console.error("Fehler beim Laden der Messkurvendaten:", error); }); }; // Funktion zum Erstellen des Charts const createChart = (data) => { const ctx = document.getElementById("myChart").getContext("2d"); // Funktion zur Umwandlung des Datums in das deutsche Format const formatToGermanDate = (timestamp) => { const date = new Date(timestamp); return new Intl.DateTimeFormat("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", }).format(date); }; new Chart(ctx, { type: "line", data: { labels: data.map((row) => formatToGermanDate(row.t)).reverse(), // Zeitwerte ins deutsche Format umwandeln und umkehren datasets: [ { label: "Isolationswiderstand", data: data.map((row) => row.m).reverse(), borderColor: "#00AEEF", fill: false, yAxisID: "y", }, { label: "Schleifenwiderstand", data: data.map((row) => row.n).reverse(), borderColor: "black", fill: false, yAxisID: "y1", }, ], }, options: { scales: { y: { type: "linear", position: "left", }, y1: { type: "linear", position: "right", }, }, }, }); }; // Funktion für die TDR-Messung const goTDR = () => { //------------------------------------------------- const [isClient, setIsClient] = useState(false); useEffect(() => { // This will only run in the client/browser, not on the server setIsClient(true); }, []); if (!isClient) { return null; // or a loading spinner } //------------------------------------------------- let slot = slotIndex; if (slot >= 32) { return; } let slotFormat = slot < 10 ? `0${slot}` : `${slot}`; //const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; const apiUrl = `https://${window.ip}:443`; setLoading(true); 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)); }; // Funktion für die Schleifenmessung const goLoop = () => { let slot = slotIndex; if (slot >= 32) { return; } let slotFormat = slot < 10 ? `0${slot}` : `${slot}`; const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; setLoading(true); // Setze den Ladezustand auf true alert(`Schleifenmessung wird für Slot ${slot} gestartet...`); fetch( `${apiUrl}/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`, { method: "GET", } ) .then((response) => { if (response.ok) { alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot}`); console.log("Schleifenmessung erfolgreich gestartet für Slot", slot); } else { alert("Fehler beim Starten der Schleifenmessung."); console.error("Fehler beim Senden der Schleifen-Anfrage"); } }) .catch((error) => { alert("Ein Fehler ist aufgetreten."); console.error("Fehler:", error); }) .finally(() => setLoading(false)); // Ladezustand zurücksetzen }; const handleModulNameChange = (newName) => { setCurrentModulName(newName); }; // Überprüfe, ob ein Modul im Slot vorhanden ist const isModulPresent = kueOnline[slotIndex] === 1; 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"); } }; // 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 (
{isModulPresent ? ( <>
{slotIndex + 1}

KÜ705-FO

Betrieb
Alarm
{isolationswert || ">200"}
ISO MOhm
{currentModulName || "Test1"}
{kueVersion}
{displayText}

{currentDisplayValue}

{/* Modal für Messkurve */} {showChartModal && (

Messkurve Slot {slotIndex + 1}

 )} ) : (

Kein Modul im Slot {slotIndex + 1}

)}
); } export default Kue705FO;