diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 7d4820e..4827259 100644 --- a/app/dashboard/page.jsx +++ b/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() { ID + Wert Zeitstempel - Modul Meldung Status - {last20Messages ? ( + {last20Messages.length > 0 ? ( // Aufteilung der Nachrichten und Mapping zu Zeilen - last20Messages - .split("") - .slice(1) - .map((row, index) => { - const columns = row - .replace("", "") - .split("") - .slice(1) - .map((col) => col.replace("", "")); - return ( - - {columns[0]} - {columns[1]} - {columns[2]} - {columns[3]} - {columns[4]} - - ); - }) + last20Messages.map((columns, index) => ( + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + )) ) : (