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
-    const loadACPFile = async (url) => {
-      try {
-        console.log(`Lade ACP-Datei: ${url}`);
+    // Abrufen der last20Messages aus localStorage
+    const messages = localStorage.getItem("last20Messages");
+    if (messages) {
+      setLast20Messages(messages);
+    }
 
-        // Fetch-Anfrage an das Backend mit CORS
-        const response = await fetch(url, {
-          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();
+    // Andere Daten laden (falls benötigt)
+    // Hier kannst du deine ACP-Dateien laden, wie in deinem bestehenden Code gezeigt
   }, []);
 
   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 */}
-              <tr>
-                <td className="py-2 px-4">10.11.23 07:10:12</td>
-                <td className="py-2 px-4">KUE 04</td>
-                <td className="py-2 px-4">Isowert 2</td>
-              </tr>
-              {/* Weitere Zeilen nach Bedarf */}
+              {last20Messages ? (
+                // Aufteilung der Nachrichten und Mapping zu Zeilen
+                last20Messages
+                  .split("<tr>")
+                  .slice(1)
+                  .map((row, index) => {
+                    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>