feat: Schleifen- und Isolationsfehler-Anzeige mit wechselndem Icon integriert

- Implementiert Schleifenfehler-Anzeige, die den Text zwischen "Schleifenfehler" und einem Warn-Icon wechselt, wenn der Fehler auftritt (kueAlarm2[slotIndex] === 1). - Isolationsfehler-Anzeige aktualisiert, die zwischen "Isolationsfehler" und einem Warn-Icon wechselt, wenn der Fehler auftritt (kueAlarm1[slotIndex] === 1). - Priorisierte Anzeige mit rot hervorgehobenem Text für alle Fehlerzustände.
2024-10-27 16:54:39 +01:00
parent 60aedd96ee
commit a97c093c16
2 changed files with 73 additions and 9 deletions
--- a/components/modules/Kue705FO.jsx
+++ b/components/modules/Kue705FO.jsx
@@ -24,6 +24,11 @@ function Kue705FO({
  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
  const [groundFaultDisplayText, setGroundFaultDisplayText] =
    useState("Erdschluss");
+  const [loopFaultDisplayText, setLoopFaultDisplayText] =
+    useState("Schleifenfehler");
+  const [isoFaultDisplayText, setIsoFaultDisplayText] =
+    useState("Isolationsfehler");
+
  const [loading, setLoading] = useState(false);
  const [currentDisplayValue, setCurrentDisplayValue] = useState(
    schleifenwiderstand || "0"
@@ -362,6 +367,51 @@ function Kue705FO({
    }
  }, [slotIndex, isolationswert]);

+  // Intervall für den Wechsel der Anzeige zwischen "Schleifenfehler" und dem Icon
+  useEffect(() => {
+    if (window.kueAlarm2[slotIndex] === 1) {
+      const intervalId = setInterval(() => {
+        setLoopFaultDisplayText((prevText) =>
+          prevText === "Schleifenfehler" ? (
+            <i
+              className="bi bi-exclamation-triangle"
+              style={{ fontSize: "24px" }}
+            ></i>
+          ) : (
+            "Schleifenfehler"
+          )
+        );
+      }, 2000);
+
+      return () => clearInterval(intervalId);
+    } else {
+      setLoopFaultDisplayText(isolationswert || ">200");
+    }
+  }, [slotIndex, isolationswert]);
+
+  // Intervall für den Wechsel der Anzeige zwischen "Isolationsfehler" und dem Icon
+  useEffect(() => {
+    if (window.kueAlarm1[slotIndex] === 1) {
+      const intervalId = setInterval(() => {
+        setIsoFaultDisplayText((prevText) =>
+          prevText === "Isolationsfehler" ? (
+            <i
+              className="bi bi-exclamation-triangle"
+              style={{ fontSize: "24px" }}
+            ></i>
+          ) : (
+            "Isolationsfehler"
+          )
+        );
+      }, 2000);
+
+      return () => clearInterval(intervalId);
+    } else {
+      setIsoFaultDisplayText(isolationswert || ">200");
+    }
+  }, [slotIndex, isolationswert]);
+  //------------------------------------------------
+
  return (
    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
      {isModulPresent ? (
@@ -405,14 +455,15 @@ function Kue705FO({
                <span className="text-white text-[10px]">Alarm</span>
              </div>
            </div>
-            {/* Anzeige für Isolationsfehler, Aderbruch oder Erdschluss */}
+            {/* Anzeige für Isolationsfehler, Aderbruch, Erdschluss oder Schleifenfehler */}
            <div className="relative mt-[50px] mx-auto bg-black text-white w-[100px] h-[40px] flex items-center justify-center text-[18px] z-10">
              <div className="text-center">
                <span
                  className={
                    window.kueCableBreak[slotIndex] === 1 ||
                    window.kueGroundFault[slotIndex] === 1 ||
-                    window.kueAlarm1[slotIndex] === 1
+                    window.kueAlarm1[slotIndex] === 1 ||
+                    window.kueAlarm2[slotIndex] === 1
                      ? "text-red-500 text-[14px]" // Rot und kleinere Schrift für Alarme
                      : ""
                  }
@@ -423,12 +474,15 @@ function Kue705FO({
                    : window.kueGroundFault[slotIndex] === 1
                    ? groundFaultDisplayText // Erdschluss-Anzeige
                    : window.kueAlarm1[slotIndex] === 1
-                    ? "Isolationsfehler" // Isolationsfehler-Anzeige
+                    ? isoFaultDisplayText // Isolationsfehler-Anzeige mit Icon
+                    : window.kueAlarm2[slotIndex] === 1
+                    ? loopFaultDisplayText // Schleifenfehler-Anzeige mit Icon
                    : isolationswert || ">200"}{" "}
                </span>
                {window.kueCableBreak[slotIndex] !== 1 &&
                  window.kueGroundFault[slotIndex] !== 1 &&
-                  window.kueAlarm1[slotIndex] !== 1 && (
+                  window.kueAlarm1[slotIndex] !== 1 &&
+                  window.kueAlarm2[slotIndex] !== 1 && (
                    <div className="text-[8px]">ISO MOhm</div>
                  )}
              </div>
--- a/public/CPLmockData/SERVICE/kueData.js
+++ b/public/CPLmockData/SERVICE/kueData.js
@@ -1,37 +1,45 @@
+//Modul vorhanden 1 = vorhanden, 0 = nicht vorhanden
 var kueOnline = [
-  1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1,
 ];
+//Isolationswerte in Display (isoDisplay) Einheit: MOhm
 var kueIso = [
  10.0, 10.0, 10.0, 10.5, 10.0, 10.0, 10.0, 10.0, 10.5, 10.0, 10.0, 10.0, 10.0,
  10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.5, 10.0, 10.0, 10.0, 10.0, 10.0,
  10.5, 10.0, 200.0, 200.0, 200.0, 200.0,
 ];
-var kueValid = [
-  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-  1, 1, 1, 1, 1, 1,
-];
+
+//Isolationsfehler 1 = Fehler, 0 = kein Fehler
 var kueAlarm1 = [
  1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1,
  0, 0, 0, 0, 0, 0,
 ];
+//Schleifenfehler 1 = Fehler, 0 = kein Fehler
 var kueAlarm2 = [
  1, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,
  0, 0, 0, 0, 0, 0,
 ];
+//Schleifenwiderstand in Display (resDisplay) Einheit: KOhm
 var kueRes = [
  0.0, 0.612, 0.0, 0.645, 0.822, 0.97, 0.0, 0.0, 1.452, 0.0, 0.734, 0.37, 0.566,
  0.0, 0.738, 0.684, 1.166, 0.595, 0.0, 1.651, 1.18, 1.387, 1.214, 0.0, 1.475,
  0.615, 0.494, 1.217, 65.0, 65.0, 65.0, 65.0,
 ];
+//Aderbruch 1 = Fehler, 0 = kein Fehler
 var kueCableBreak = [
  1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 1, 1, 1, 1,
 ];
+//Erdschluss 1 = Fehler, 0 = kein Fehler
 var kueGroundFault = [
  0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0,
 ];
+var kueValid = [
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+  1, 1, 1, 1, 1, 1,
+];
 var kueLimit1 = [
  10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0,
  10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0,
@@ -56,6 +64,7 @@ var kueLoopInterval = [
  6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6,
  6, 6, 6, 6, 6, 6,
 ];
+//Modulname in Komponente und auf der Anzeige
 var kueID = [
  "FTZ_2",
  "B23",
@@ -90,6 +99,7 @@ var kueID = [
  "Kabel 31",
  "Kabel 32",
 ];
+//kueName ist nicht relevant für Front-End
 var kueName = [
  "Kabel_2",
  "Petersfehn",