last20Messages.acp als Script einbinden in dashboard/page.jsx und daten in der tabelle bekommen

app/dashboard/page.jsx

@@ -5,65 +5,66 @@ import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 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 [last20Messages, setLast20Messages] = useState([]); // State für die Meldungen als Array
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    // Funktion zum Laden der last20Messages von der Start.acp-Seite
-    const fetchStartACP = async () => {
+    // Funktion zum Laden und Einbinden der last20Messages.acp
+    const loadScript = (src) => {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = src;
+        script.async = true;
+        script.onload = () => {
+          // Prüfe, ob last20Messages im globalen Fensterobjekt existiert
+          if (window.last20Messages) {
+            const parsedMessages = parseMessages(window.last20Messages);
+            setLast20Messages(parsedMessages);
+            console.log(
+              "Meldungen direkt aus dem Skript geladen:",
+              parsedMessages
+            );
+          } else {
+            console.error("Konnte last20Messages nicht finden.");
+          }
+          resolve();
+        };
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    };
+
+    // Lade das Skript und aktualisiere den State
+    const fetchLast20Messages = async () => {
       try {
-        const response = await fetch("https://10.10.0.118/CPL?Start.acp", {
-          method: "GET",
-          mode: "cors",
-          credentials: "include", // Falls Authentifizierung erforderlich ist
-        });
-
-        if (!response.ok) {
-          throw new Error(
-            `Fehler beim Laden von Start.acp: ${response.status}`
-          );
-        }
-
-        const text = await response.text();
-
-        // Extrahiere die last20Messages aus dem HTML-Text von Start.acp
-        const match = text.match(/var last20Messages = `(.*?)`;/s);
-        if (match && match[1]) {
-          const messages = match[1];
-
-          // Speichere die Nachrichten in localStorage
-          localStorage.setItem("last20Messages", messages);
-          setLast20Messages(messages);
-
-          // Speichere die Nachrichten im window-Objekt
-          window.last20Messages = messages; // Hinzufügen zu window
-        } else {
-          console.error("Konnte last20Messages nicht finden.");
-        }
+        await loadScript("/CPL?last20Messages.acp");
       } catch (error) {
-        console.error("Fehler beim Abrufen der Start.acp-Datei:", error);
+        console.error(
+          "Fehler beim Laden des Skripts last20Messages.acp:",
+          error
+        );
       }
     };
 
-    // Lade last20Messages, wenn sie nicht im localStorage sind
-    const messages = localStorage.getItem("last20Messages");
-    if (messages) {
-      setLast20Messages(messages);
+    fetchLast20Messages();
 
-      // Speichere die Nachrichten im window-Objekt
-      window.last20Messages = messages; // Hinzufügen zu window
-    } else {
-      fetchStartACP();
-    }
-
-    // Andere Daten laden (falls benötigt)
-    // Hier kannst du deine ACP-Dateien laden, wie in deinem bestehenden Code gezeigt
+    // Funktion zum Parsen der Nachrichten
+    const parseMessages = (messages) => {
+      // Nachrichten in Zeilen aufteilen
+      const rows = messages.split("\n");
+      return rows.map((row) => {
+        // Passe die Längen hier basierend auf der Struktur in deinem Bild an
+        const columns = [
+          row.substring(0, 5), // ID
+          row.substring(5, 10), // Wert (z.B. Modulnummer)
+          row.substring(10, 34), // Zeitstempel
+          row.substring(34, 60), // Meldung
+          row.substring(60), // Status
+        ];
+        return columns;
+      });
+    };
   }, []);
 
   return (
@@ -108,34 +109,24 @@ function Dashboard() {
             <thead className="bg-gray-200 text-sm font-semibold">
               <tr>
                 <th className="py-2 px-4">ID</th>
+                <th className="py-2 px-4">Wert</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">
-              {last20Messages ? (
+              {last20Messages.length > 0 ? (
                 // 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>
-                    );
-                  })
+                last20Messages.map((columns, index) => (
+                  <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">