diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx index 9f90b9d..7440d9d 100644 --- a/components/modules/Kue705FO.jsx +++ b/components/modules/Kue705FO.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import ReactModal from "react-modal"; import Chart from "chart.js/auto"; +import { useSelector } from "react-redux"; import KueModal from "../modales/KueModal"; import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons @@ -35,107 +36,110 @@ function Kue705FO({ 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 [showChartModal, setShowChartModal] = useState(false); + const [chartData, setChartData] = useState(null); - const handleOpenModal = () => { - setShowModal(true); - }; + // Redux-Variablen abrufen + const { + kuePSTmMinus96V, + kueCableBreak, + kueGroundFault, + kueAlarm1, + kueAlarm2, + kueOverflow, + kueVersion: reduxKueVersion, + tdrActive, + } = useSelector((state) => state.variables); - const handleCloseModal = () => { - setShowModal(false); - }; + const handleOpenModal = () => setShowModal(true); + const handleCloseModal = () => setShowModal(false); - // Funktion zum Anzeigen des Chart-Modals const handleOpenChartModal = () => { setShowChartModal(true); if (activeButton === "TDR") { - loadTDRChartData(); // Lade TDR-Daten, wenn der TDR-Button aktiv ist + loadTDRChartData(); } else { - loadLoopChartData(); // Andernfalls lade die Schleifenmessdaten + loadLoopChartData(); + } + }; + const handleButtonClick = (button) => { + if (button === "Schleife") { + setActiveButton("Schleife"); + setloopTitleText("Schleifenwiderstand [kOhm]"); + setCurrentDisplayValue(schleifenwiderstand || "0"); + } else if (button === "TDR") { + setActiveButton("TDR"); + setloopTitleText("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 } }; - const handleCloseChartModal = () => { - setShowChartModal(false); - }; - const environment = process.env.NODE_ENV || "production"; - let fileData; - // Daten laden und den TDR-Chart erstellen + const handleCloseChartModal = () => setShowChartModal(false); + const loadTDRChartData = () => { const slot = slotIndex; - //const fileData = `../cpl?lastTDR/slot${slot}.json`; // TDR-Daten je nach Slot laden - if (environment === "production") { - fileData = `/CPL?/CPL/lastTDR/slot${slot}.json`; // Produktions-Pfad - } else { - fileData = `/CPLmockData/lastTDR/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung - } + const environment = process.env.NODE_ENV || "production"; + const fileData = + environment === "production" + ? `/CPL?/CPL/lastTDR/slot${slot}.json` + : `/CPLmockData/lastTDR/slot${slot}.json`; fetch(fileData) .then((response) => response.json()) .then((data) => { - setChartData(data); // Daten setzen - createTDRChart(data); // Chart für TDR-Messung erstellen + setChartData(data); + createTDRChart(data); }) - .catch((error) => { - console.error("Fehler beim Laden der TDR-Messkurvendaten:", error); - }); + .catch((error) => + console.error("Fehler beim Laden der TDR-Messkurvendaten:", error) + ); }; - // Daten laden und den Schleifenmessungs-Chart erstellen const loadLoopChartData = () => { const slot = slotIndex; - //const fileData = `../cpl?4000values/slot${slot}.json`; // Schleifenmessdaten je nach Slot laden - if (environment === "production") { - fileData = `/CPL?/CPL/4000values/slot${slot}.json`; // Produktions-Pfad - } else { - fileData = `/CPLmockData/4000values/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung - } + const environment = process.env.NODE_ENV || "production"; + const fileData = + environment === "production" + ? `/CPL?/CPL/4000values/slot${slot}.json` + : `/CPLmockData/4000values/slot${slot}.json`; fetch(fileData) .then((response) => response.json()) .then((data) => { - setChartData(data); // Daten setzen - createChart(data, "Schleifenmesskurve"); // Chart für Schleifenmessung erstellen + setChartData(data); + createChart(data, "Schleifenmesskurve"); }) - .catch((error) => { - console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error); - }); + .catch((error) => + console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error) + ); }; - // Funktion zum Erstellen des Charts - // 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); - }; - // Ausgabe der Chart-Daten in der Konsole mit Slot-Informationen - console.log(`Chart-Daten für Slot ${slotIndex + 1}:`, data); new Chart(ctx, { type: "line", data: { - labels: data.map((row) => formatToGermanDate(row.t)).reverse(), // Zeitwerte ins deutsche Format umwandeln und umkehren + labels: data + .map((row) => new Date(row.t).toLocaleString("de-DE")) + .reverse(), datasets: [ { - label: "Isolationswiderstand (MOhm)", // Einheit hinzugefügt + label: "Isolationswiderstand (MOhm)", data: data.map((row) => row.m).reverse(), borderColor: "#00AEEF", fill: false, yAxisID: "y", }, { - label: "Schleifenwiderstand (kOhm)", // Einheit hinzugefügt + label: "Schleifenwiderstand (kOhm)", data: data.map((row) => row.n).reverse(), borderColor: "black", fill: false, @@ -148,272 +152,82 @@ function Kue705FO({ y: { type: "linear", position: "left", - title: { - display: true, - text: "MOhm", // Einheit für linke Achse hinzugefügt - }, + title: { display: true, text: "MOhm" }, }, y1: { type: "linear", position: "right", - title: { - display: true, - text: "kOhm", // Einheit für rechte Achse hinzugefügt - }, + title: { display: true, text: "kOhm" }, }, }, }, }); }; - // Funktion zum Erstellen des TDR-Charts - const createTDRChart = (dataTDR) => { - const ctx = document.getElementById("myChart").getContext("2d"); - console.log(`TDR-Daten für Slot ${slotIndex + 1}:`, dataTDR); - new Chart(ctx, { - type: "line", - data: { - labels: dataTDR.map((row) => row.t), // Entfernung oder Zeit auf der x-Achse - datasets: [ - { - label: "Pegel", - data: dataTDR.map((row) => row.m), // Nur Pegel auf der y-Achse - borderColor: "#00AEEF", - borderWidth: 1, - pointBorderWidth: 0, - pointStyle: false, - fill: false, - }, - ], - }, - options: { - scales: { - y: { - type: "linear", - position: "left", - }, - }, - }, - }); - }; - - // 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}`; - - setLoading(true); - alert(`TDR wird für Slot ${slot + 1} gestartet...`); - fetch(`/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`, { - method: "GET", - }) - .then((response) => { - if (response.ok) { - alert(`TDR erfolgreich gestartet für Slot ${slot + 1}`); - console.log("TDR erfolgreich gestartet für Slot", slot + 1); - } 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}`; - - setLoading(true); // Setze den Ladezustand auf true - alert(`Schleifenmessung wird für Slot ${slot} gestartet...`); - - fetch(`/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 === 1; // Since you're passing the status directly now - - const handleButtonClick = (button) => { - if (button === "Schleife") { - setActiveButton("Schleife"); - setloopTitleText("Schleifenwiderstand [kOhm]"); - setCurrentDisplayValue(schleifenwiderstand || "0"); - } else if (button === "TDR") { - setActiveButton("TDR"); - setloopTitleText("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 - } - }; - useEffect(() => { - setCurrentModulName(modulName); - }, [modulName]); - - useEffect(() => { - setCurrentDisplayValue(schleifenwiderstand); - }, [schleifenwiderstand]); useEffect(() => { const updateAlarmStatus = () => { const alarmStatus = - (window.kueAlarm1 && window.kueAlarm1[slotIndex]) || - (window.kueAlarm2 && window.kueAlarm2[slotIndex]) || - (window.kueCableBreak && window.kueCableBreak[slotIndex]) || - (window.kueGroundFault && window.kueGroundFault[slotIndex]); + (kueAlarm1 && kueAlarm1[slotIndex]) || + (kueAlarm2 && kueAlarm2[slotIndex]) || + (kueCableBreak && kueCableBreak[slotIndex]) || + (kueGroundFault && kueGroundFault[slotIndex]); - setCurrentAlarmStatus(alarmStatus); // Aktualisiere den Alarmstatus + setCurrentAlarmStatus(alarmStatus); }; - // Aktualisierung sofort und alle 5 Sekunden updateAlarmStatus(); const interval = setInterval(updateAlarmStatus, 10000); + return () => clearInterval(interval); + }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]); - return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente - }, [slotIndex]); - //------------------------------------------------ - - // Dynamischer Abruf des kueVersion-Werts für jeden Slot in Intervallen - useEffect(() => { - const intervalId = setInterval(() => { - if (window.kueVersion && window.kueVersion[slotIndex]) { - setKueVersion("V" + window.kueVersion[slotIndex] / 100); - } - }, 10000); // 10000 ms = 10 Sekunden - - // Bereinigung der Intervalle beim Entfernen der Komponente - return () => clearInterval(intervalId); - }, [slotIndex]); - - //------------------------------------------------- - //------------------------------------------------- - // Priority: Aderbruch - Erdschluss - Isolationsfehler - Schleifenfehler - Overflow (>200 MOhm) - Messwert - // Prioritätsprüfung in updateDisplay useEffect(() => { const updateDisplay = () => { - if ( - !window.kuePSTmMinus96V || - !window.kueCableBreak || - !window.kueGroundFault || - !window.kueAlarm1 || - !window.kueAlarm2 || - !window.kueOverflow - ) { - // console.log("Warten auf window Variablen..."); - setTimeout(updateDisplay, 1000); // Warte 1 Sekunde und versuche es erneut - return; - } - - /* console.log( - "Alle window-Variablen sind verfügbar. Beginne mit den Prioritätsprüfungen..." - ); */ - - // PST-M Ausfall - if (window.kuePSTmMinus96V[slotIndex] === 1) { + if (kuePSTmMinus96V?.[slotIndex] === 1) { setCurrentDisplayValue("PST-M prüfen"); return; } - // Aderbruch - if (window.kueCableBreak[slotIndex] === 1) { - // console.log("Aderbruch erkannt für Slot", slotIndex); + if (kueCableBreak?.[slotIndex] === 1) { setCurrentDisplayValue(isoDisplayText); return; } - // Erdschluss - else if (window.kueGroundFault[slotIndex] === 1) { - // console.log("Erdschluss erkannt für Slot", slotIndex); + if (kueGroundFault?.[slotIndex] === 1) { setCurrentDisplayValue(groundFaultDisplayText); return; } - // Isolationsfehler - else if (window.kueAlarm1[slotIndex] === 1) { - // console.log("Isolationsfehler erkannt für Slot", slotIndex); + if (kueAlarm1?.[slotIndex] === 1) { setCurrentDisplayValue(isoFaultDisplayText); return; } - // Schleifenfehler - else if (window.kueAlarm2[slotIndex] === 1) { - // console.log("Schleifenfehler erkannt für Slot", slotIndex); + if (kueAlarm2?.[slotIndex] === 1) { setCurrentDisplayValue(loopFaultDisplayText); return; } - // Overflow (>200 MOhm) - else if (window.kueOverflow[slotIndex] === 1) { - /* console.log( - "Overflow erkannt für Slot", - slotIndex, - "- Anzeige: '>200'" - ); */ + if (kueOverflow?.[slotIndex] === 1) { setCurrentDisplayValue(isoGreaterThan200); return; } - // Kein Fehler - else { - /* console.log( - "Kein Fehler erkannt, zeige Standardisolationswert an für Slot", - slotIndex - ); */ - setCurrentDisplayValue(isolationswert); // Nur Isolationswert ohne ">200" als Fallback - } + setCurrentDisplayValue(isolationswert); }; - updateDisplay(); // Initialer Aufruf - const interval = setInterval(updateDisplay, 5000); // Regelmäßige Überprüfung + updateDisplay(); + const interval = setInterval(updateDisplay, 5000); + return () => clearInterval(interval); + }, [ + slotIndex, + isolationswert, + kuePSTmMinus96V, + kueCableBreak, + kueGroundFault, + kueAlarm1, + kueAlarm2, + kueOverflow, + ]); - return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente - }, [slotIndex, isolationswert]); - - //------------------------------------------------- + useEffect(() => { + if (reduxKueVersion?.[slotIndex]) { + setKueVersion("V" + reduxKueVersion[slotIndex] / 100); + } + }, [slotIndex, reduxKueVersion]); return (