"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) => { // Ersetze die HTML-Tags durch Zeilenumbrüche und entferne alle und Tags messages = messages .replace(//g, "\n") .replace(/<\/?td>/g, "") .replace(/<\/tr>/g, "") .trim(); // 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, 29), // Zeitstempel , Millisekunden entfernt :000 row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen) row.substring(row.length - 1), // Status (letztes Zeichen) ]; return columns; }); }; }, []); return (

{/* Navigation zu ACP-Seiten */}

System Digitale Eingänge Kabelüberwachungen

{/* Letzte Meldungen */}

Letzten 20 Meldungen

{/* Meldungen Liste */}

{/* Meldung breiter machen */} {last20Messages.length > 0 ? ( // Aufteilung der Nachrichten und Mapping zu Zeilen last20Messages.map((columns, index) => ( {/* Meldung ohne letztes Zeichen anzeigen */} {/* Status anzeigen */} )) ) : ( )}