"use client"; import React, { useEffect, useState } from "react"; import "tailwindcss/tailwind.css"; 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 [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // Funktion zum Laden der last20Messages von der Start.acp-Seite const fetchStartACP = 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."); } } catch (error) { console.error("Fehler beim Abrufen der Start.acp-Datei:", error); } }; // Lade last20Messages, wenn sie nicht im localStorage sind const messages = localStorage.getItem("last20Messages"); if (messages) { setLast20Messages(messages); // 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 }, []); return (

{/* Navigation zu ACP-Seiten */}

System Digitale Eingänge Kabelüberwachungen

{/* Letzte Meldungen */}

Letzten 20 Meldungen

{/* Meldungen Liste */}

{last20Messages ? ( // Aufteilung der Nachrichten und Mapping zu Zeilen last20Messages .split("") .slice(1) .map((row, index) => { const columns = row .replace("", "") .split("", "")); return ( ); }) ) : ( )}