Letzte 20 Meldungen von CPL in die Seite Dashboard.html anzeigen

app/dashboard/page.jsx

@@ -3,105 +3,55 @@ import React, { useEffect, useState } from "react";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import DeviceData from "../../components/DeviceData";
 
 function Dashboard() {
   const [deviceData, setDeviceData] = useState(null);
   const [digitalInputs, setDigitalInputs] = useState(null);
   const [cableMonitoring, setCableMonitoring] = useState(null);
+  const [cableDetails, setCableDetails] = useState(null);
+  const [startData, setStartData] = useState(null);
+  const [last20Messages, setLast20Messages] = useState(null); // State für die Meldungen
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    // Funktion zum Laden und Ausführen von JavaScript aus einer ACP-Datei
+    // Abrufen der last20Messages aus localStorage
-    const loadACPFile = async (url) => {
+    const messages = localStorage.getItem("last20Messages");
-      try {
+    if (messages) {
-        console.log(`Lade ACP-Datei: ${url}`);
+      setLast20Messages(messages);
+    }
 
-        // Fetch-Anfrage an das Backend mit CORS
+    // Andere Daten laden (falls benötigt)
-        const response = await fetch(url, {
+    // Hier kannst du deine ACP-Dateien laden, wie in deinem bestehenden Code gezeigt
-          method: "GET",
-          mode: "cors",
-        });
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        const result = await response.text();
-        console.log(`ACP-Datei geladen: ${url}`);
-
-        // Skript aus dem geladenen Text erstellen und einfügen
-        const scriptTag = document.createElement("script");
-        scriptTag.text = result;
-        document.body.appendChild(scriptTag);
-        return true;
-      } catch (error) {
-        console.error(`Fehler beim Laden der ACP-Datei (${url}):`, error);
-        return false;
-      }
-    };
-
-    // Funktion zum Abrufen der Gerätedaten und anderer Daten
-    const fetchDeviceData = async () => {
-      try {
-        console.log("Beginne mit dem Laden der Gerätedaten...");
-
-        // Gerätedaten von System.acp laden
-        const systemDataLoaded = await loadACPFile(
-          "http://localhost:3000/api/server?path=System.acp"
-        );
-        if (systemDataLoaded) {
-          console.log("Systemdaten geladen:", window.deviceName, window.ip);
-          setDeviceData({
-            deviceName: window.deviceName || "Unbekannt",
-            ip: window.ip || "Unbekannt",
-            mac1: window.mac1 || "Unbekannt",
-            mac2: window.mac2 || "Unbekannt",
-            subnet: window.subnet || "Unbekannt",
-            gateway: window.gateway || "Unbekannt",
-            datetime: window.datetime || "Unbekannt",
-          });
-        }
-
-        // Digitale Eingänge von de.acp laden
-        const digitalInputsLoaded = await loadACPFile(
-          "http://localhost:3000/api/server?path=de.acp"
-        );
-        if (digitalInputsLoaded) {
-          console.log("Digitale Eingänge geladen:", window.de);
-          setDigitalInputs({
-            inputs: window.de || [],
-            counters: window.counter || [],
-            flutters: window.flutter || [],
-          });
-        }
-
-        // Kabelüberwachungsdaten von kueConfig.acp laden
-        const cableMonitoringLoaded = await loadACPFile(
-          "http://localhost:3000/api/server?path=kueConfig.acp"
-        );
-        if (cableMonitoringLoaded) {
-          console.log("Kabelüberwachung geladen:", window.c_kue_adr);
-          setCableMonitoring({
-            cableAddress: window.c_kue_adr || [],
-            status: window.c_kue_status || [],
-          });
-        }
-
-        setLoading(false);
-      } catch (error) {
-        console.error("Fehler beim Abrufen der Gerätedaten:", error);
-        setError(error);
-        setLoading(false);
-      }
-    };
-
-    fetchDeviceData();
   }, []);
 
   return (
     <div className="bg-gray-100 flex flex-col min-h-screen p-8">
+      {/* Navigation zu ACP-Seiten */}
+      <div className="mb-4">
+        <a
+          href="/CPL?SYSTEM.ACP&OFF_1=1"
+          target="_parent"
+          style={{ fontFamily: "arial", marginRight: "10px" }}
+        >
+          System
+        </a>
+        <a
+          href="/CPL?DE.ACP&OFF_1=1"
+          target="_parent"
+          style={{ fontFamily: "arial", marginRight: "10px" }}
+        >
+          Digitale Eingänge
+        </a>
+        <a
+          href="/CPL?KUEconfig.ACP&OFF_1=1"
+          target="_parent"
+          style={{ fontFamily: "arial", marginRight: "10px" }}
+        >
+          Kabelüberwachungen
+        </a>
+      </div>
+
       {/* Letzte Meldungen */}
       <div className="flex justify-between items-center mb-4">
         <h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
@@ -116,19 +66,42 @@ function Dashboard() {
           <table className="min-w-full text-left">
             <thead className="bg-gray-200 text-sm font-semibold">
               <tr>
+                <th className="py-2 px-4">ID</th>
                 <th className="py-2 px-4">Zeitstempel</th>
                 <th className="py-2 px-4">Modul</th>
                 <th className="py-2 px-4">Meldung</th>
+                <th className="py-2 px-4">Status</th>
               </tr>
             </thead>
             <tbody className="text-sm">
-              {/* Beispiel-Daten */}
+              {last20Messages ? (
-              <tr>
+                // Aufteilung der Nachrichten und Mapping zu Zeilen
-                <td className="py-2 px-4">10.11.23 07:10:12</td>
+                last20Messages
-                <td className="py-2 px-4">KUE 04</td>
+                  .split("<tr>")
-                <td className="py-2 px-4">Isowert 2</td>
+                  .slice(1)
-              </tr>
+                  .map((row, index) => {
-              {/* Weitere Zeilen nach Bedarf */}
+                    const columns = row
+                      .replace("</tr>", "")
+                      .split("<td>")
+                      .slice(1)
+                      .map((col) => col.replace("</td>", ""));
+                    return (
+                      <tr key={index}>
+                        <td className="py-2 px-4">{columns[0]}</td>
+                        <td className="py-2 px-4">{columns[1]}</td>
+                        <td className="py-2 px-4">{columns[2]}</td>
+                        <td className="py-2 px-4">{columns[3]}</td>
+                        <td className="py-2 px-4">{columns[4]}</td>
+                      </tr>
+                    );
+                  })
+              ) : (
+                <tr>
+                  <td className="py-2 px-4" colSpan="5">
+                    Keine Meldungen verfügbar.
+                  </td>
+                </tr>
+              )}
             </tbody>
           </table>
         </div>

public/js/deviceScript.js

@@ -0,0 +1,133 @@
+// public/js/deviceScript.js (mit Platzhaltern)
+// Device-Daten
+var deviceName="<%=SAN01%>";
+var mac1="<%=SEM01%>";
+var mac2="<%=SEM02%>";
+var ip="<%=SEI01%>";
+var subnet="<%=SES01%>";
+var gateway="<%=SEG01%>";
+var datetime="<%=SCL01%>";
+
+// Digitale Eingänge
+var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];
+var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>];
+var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>];
+
+// Kabelüberwachung config kueConfig.acp
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>];
+
+// Kabelüberwachung Details kueDetail.acp
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>];
+var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>];
+var kueAlarm1=[<%=KIA80%>,<%=KIA81%>,<%=KIA82%>,<%=KIA83%>];
+var kueAlarm2=[<%=KRA80%>,<%=KRA81%>,<%=KRA82%>,<%=KRA83%>];
+
+var kueRes=[<%=KRM80%>,<%=KRM81%>,<%=KRM82%>,<%=KRM83%>];
+
+var kueCableBreak=[<%=KSC80%>,<%=KSC81%>,<%=KSC82%>,<%=KSC83%>];
+var kueGroundFault=[<%=KSG80%>,<%=KSG81%>,<%=KSG82%>,<%=KSG83%>];
+
+var kueLimit1=[<%=KIG80%>,<%=KIG81%>,<%=KIG82%>,<%=KIG83%>];
+var kueLimit2Low=[<%=KRG80%>,<%=KRG81%>,<%=KRG82%>,<%=KRG83%>];
+var kueLimit2High=[<%=KRH80%>,<%=KRH81%>,<%=KRH82%>,<%=KRH83%>];
+var kueDelay1=[<%=KID80%>,<%=KID81%>,<%=KID82%>,<%=KID83%>];
+var kueLoopInterval=[<%=KRI80%>,<%=KRI81%>,<%=KRI82%>,<%=KRI83%>];
+
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>];
+
+
+var tdrAtten=[<%=KTD80%>,<%=KTD81%>,<%=KTD82%>,<%=KTD83%>];
+var tdrPulse=[<%=KTP80%>,<%=KTP81%>,<%=KTP82%>,<%=KTP83%>];
+var tdrSpeed=[<%=KTS80%>,<%=KTS81%>,<%=KTS82%>,<%=KTS83%>];
+var tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>];
+var tdrTrigger=[<%=KTE80%>,<%=KTE81%>,<%=KTE82%>,<%=KTE83%>];
+var tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>];
+var tdrActive=[<%=KTX80%>,<%=KTX81%>,<%=KTX82%>,<%=KTX83%>];
+var kueOverflow=[<%=KIW80%>,<%=KIW81%>,<%=KIW82%>,<%=KIW83%>];
+var kue100V=[<%=KSS80%>,<%=KSS81%>,<%=KSS82%>,<%=KSS83%>];
+var kueResidence=[<%=KSN80%>,<%=KSN81%>,<%=KSN82%>,<%=KSN83%>];
+var tdrLastMeasurement=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>];
+var kueBooting=[<%=KSB80%>,<%=KSB81%>,<%=KSB82%>,<%=KSB83%>];
+
+// Funktionen zur Initialisierung und zum Anzeigen von Daten
+function displayDeviceInfo() {
+  console.log("Gerätename: " + deviceName);
+  console.log("IP-Adresse: " + ip);
+  console.log("MAC-Adresse: " + mac1 + ", " + mac2);
+}
+
+function initializeSystemPage() {
+  textMac1.value = mac1;
+  textMac2.value = mac2;
+  textIP.value = ip;
+  textSubnet.value = subnet;
+  textGateway.value = gateway;
+  textDateTime.value = datetime;
+  textName.value = deviceName;
+}
+
+function initializeDigitalInputsPage() {
+  zeileEinfuegen();
+  setTimeout(function () {
+    window.location.reload(1);
+  }, 5000);
+}
+
+function initializeCableMonitoringPage() {
+  tableInit();
+}
+
+function zeileEinfuegen() {
+  const tabelle = document.getElementById("tabelle");
+
+  for (var i = 0; i <= 31; i++) {
+    const reihe = tabelle.insertRow(-1);
+    let inhalt = "Eingang " + (i + 1), zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+
+    inhalt = de[i], zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+
+    inhalt = counter[i], zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+
+    inhalt = flutter[i], zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+  }
+
+  var rows = tabelle.getElementsByTagName("tr");
+  for (var i = 0; i < rows.length; i++) {
+    if (rows[i].cells[1].innerHTML == "1")
+      rows[i].cells[1].style.backgroundColor = "red";
+  }
+}
+
+function tableInit() {
+  const tabelle = document.getElementById("tabelle");
+
+  for (var i = 0; i <= 31; i++) {
+    const reihe = tabelle.insertRow(-1);
+    let inhalt = "KÜ " + (i + 1), zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+
+    inhalt = kueID[i], zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+
+    if (kueOnline[i] == "1") {
+      inhalt = kueIso[i], zelle = reihe.insertCell();
+      zelle.innerHTML = inhalt;
+    } else {
+      inhalt = "", zelle = reihe.insertCell();
+      zelle.innerHTML = inhalt;
+    }
+
+    inhalt = "<button name='detail' type='button' value='Details' onClick='goModul(" + i + ")'>Detail</button>", zelle = reihe.insertCell();
+    zelle.innerHTML = inhalt;
+  }
+}
+
+// Weitere Funktionen können hier hinzugefügt werden