"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 [last20Messages, setLast20Messages] = useState([]); // State für die Meldungen als Array const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // 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 { await loadScript("/CPL?last20Messages.acp"); } catch (error) { console.error( "Fehler beim Laden des Skripts last20Messages.acp:", error ); } }; fetchLast20Messages(); // 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 (

{/* Navigation zu ACP-Seiten */}

System Digitale Eingänge Kabelüberwachungen

{/* Letzte Meldungen */}