diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 98f9a7b..7cdbc3b 100644 --- a/app/dashboard/page.jsx +++ b/app/dashboard/page.jsx @@ -3,105 +3,55 @@ import React, { useEffect, useState } from "react"; import "tailwindcss/tailwind.css"; import "@fontsource/roboto"; import "bootstrap-icons/font/bootstrap-icons.css"; -import DeviceData from "../../components/DeviceData"; 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 und Ausführen von JavaScript aus einer ACP-Datei - const loadACPFile = async (url) => { - try { - console.log(`Lade ACP-Datei: ${url}`); + // Abrufen der last20Messages aus localStorage + const messages = localStorage.getItem("last20Messages"); + if (messages) { + setLast20Messages(messages); + } - // Fetch-Anfrage an das Backend mit CORS - const response = await fetch(url, { - method: "GET", - mode: "cors", - }); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const result = await response.text(); - console.log(`ACP-Datei geladen: ${url}`); - - // Skript aus dem geladenen Text erstellen und einfügen - const scriptTag = document.createElement("script"); - scriptTag.text = result; - document.body.appendChild(scriptTag); - return true; - } catch (error) { - console.error(`Fehler beim Laden der ACP-Datei (${url}):`, error); - return false; - } - }; - - // Funktion zum Abrufen der Gerätedaten und anderer Daten - const fetchDeviceData = async () => { - try { - console.log("Beginne mit dem Laden der Gerätedaten..."); - - // Gerätedaten von System.acp laden - const systemDataLoaded = await loadACPFile( - "http://localhost:3000/api/server?path=System.acp" - ); - if (systemDataLoaded) { - console.log("Systemdaten geladen:", window.deviceName, window.ip); - setDeviceData({ - deviceName: window.deviceName || "Unbekannt", - ip: window.ip || "Unbekannt", - mac1: window.mac1 || "Unbekannt", - mac2: window.mac2 || "Unbekannt", - subnet: window.subnet || "Unbekannt", - gateway: window.gateway || "Unbekannt", - datetime: window.datetime || "Unbekannt", - }); - } - - // Digitale Eingänge von de.acp laden - const digitalInputsLoaded = await loadACPFile( - "http://localhost:3000/api/server?path=de.acp" - ); - if (digitalInputsLoaded) { - console.log("Digitale Eingänge geladen:", window.de); - setDigitalInputs({ - inputs: window.de || [], - counters: window.counter || [], - flutters: window.flutter || [], - }); - } - - // Kabelüberwachungsdaten von kueConfig.acp laden - const cableMonitoringLoaded = await loadACPFile( - "http://localhost:3000/api/server?path=kueConfig.acp" - ); - if (cableMonitoringLoaded) { - console.log("Kabelüberwachung geladen:", window.c_kue_adr); - setCableMonitoring({ - cableAddress: window.c_kue_adr || [], - status: window.c_kue_status || [], - }); - } - - setLoading(false); - } catch (error) { - console.error("Fehler beim Abrufen der Gerätedaten:", error); - setError(error); - setLoading(false); - } - }; - - fetchDeviceData(); + // 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

@@ -116,19 +66,42 @@ function Dashboard() { + + - {/* Beispiel-Daten */} - - - - - - {/* Weitere Zeilen nach Bedarf */} + {last20Messages ? ( + // Aufteilung der Nachrichten und Mapping zu Zeilen + last20Messages + .split("") + .slice(1) + .map((row, index) => { + const columns = row + .replace("", "") + .split("", "")); + return ( + + + + + + + + ); + }) + ) : ( + + + + )}
ID Zeitstempel Modul MeldungStatus
10.11.23 07:10:12KUE 04Isowert 2
") + .slice(1) + .map((col) => col.replace("
{columns[0]}{columns[1]}{columns[2]}{columns[3]}{columns[4]}
+ Keine Meldungen verfügbar. +
diff --git a/public/js/deviceScript.js b/public/js/deviceScript.js new file mode 100644 index 0000000..af3cc75 --- /dev/null +++ b/public/js/deviceScript.js @@ -0,0 +1,133 @@ +// public/js/deviceScript.js (mit Platzhaltern) +// Device-Daten +var deviceName="<%=SAN01%>"; +var mac1="<%=SEM01%>"; +var mac2="<%=SEM02%>"; +var ip="<%=SEI01%>"; +var subnet="<%=SES01%>"; +var gateway="<%=SEG01%>"; +var datetime="<%=SCL01%>"; + +// Digitale Eingänge +var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>]; +var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>]; +var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>]; + +// Kabelüberwachung config kueConfig.acp +var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>]; +var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>]; +var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>]; + +// Kabelüberwachung Details kueDetail.acp +var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>]; +var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>]; +var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>]; +var kueAlarm1=[<%=KIA80%>,<%=KIA81%>,<%=KIA82%>,<%=KIA83%>]; +var kueAlarm2=[<%=KRA80%>,<%=KRA81%>,<%=KRA82%>,<%=KRA83%>]; + +var kueRes=[<%=KRM80%>,<%=KRM81%>,<%=KRM82%>,<%=KRM83%>]; + +var kueCableBreak=[<%=KSC80%>,<%=KSC81%>,<%=KSC82%>,<%=KSC83%>]; +var kueGroundFault=[<%=KSG80%>,<%=KSG81%>,<%=KSG82%>,<%=KSG83%>]; + +var kueLimit1=[<%=KIG80%>,<%=KIG81%>,<%=KIG82%>,<%=KIG83%>]; +var kueLimit2Low=[<%=KRG80%>,<%=KRG81%>,<%=KRG82%>,<%=KRG83%>]; +var kueLimit2High=[<%=KRH80%>,<%=KRH81%>,<%=KRH82%>,<%=KRH83%>]; +var kueDelay1=[<%=KID80%>,<%=KID81%>,<%=KID82%>,<%=KID83%>]; +var kueLoopInterval=[<%=KRI80%>,<%=KRI81%>,<%=KRI82%>,<%=KRI83%>]; + +var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>]; +var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>]; + + +var tdrAtten=[<%=KTD80%>,<%=KTD81%>,<%=KTD82%>,<%=KTD83%>]; +var tdrPulse=[<%=KTP80%>,<%=KTP81%>,<%=KTP82%>,<%=KTP83%>]; +var tdrSpeed=[<%=KTS80%>,<%=KTS81%>,<%=KTS82%>,<%=KTS83%>]; +var tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>]; +var tdrTrigger=[<%=KTE80%>,<%=KTE81%>,<%=KTE82%>,<%=KTE83%>]; +var tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>]; +var tdrActive=[<%=KTX80%>,<%=KTX81%>,<%=KTX82%>,<%=KTX83%>]; +var kueOverflow=[<%=KIW80%>,<%=KIW81%>,<%=KIW82%>,<%=KIW83%>]; +var kue100V=[<%=KSS80%>,<%=KSS81%>,<%=KSS82%>,<%=KSS83%>]; +var kueResidence=[<%=KSN80%>,<%=KSN81%>,<%=KSN82%>,<%=KSN83%>]; +var tdrLastMeasurement=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>]; +var kueBooting=[<%=KSB80%>,<%=KSB81%>,<%=KSB82%>,<%=KSB83%>]; + +// Funktionen zur Initialisierung und zum Anzeigen von Daten +function displayDeviceInfo() { + console.log("Gerätename: " + deviceName); + console.log("IP-Adresse: " + ip); + console.log("MAC-Adresse: " + mac1 + ", " + mac2); +} + +function initializeSystemPage() { + textMac1.value = mac1; + textMac2.value = mac2; + textIP.value = ip; + textSubnet.value = subnet; + textGateway.value = gateway; + textDateTime.value = datetime; + textName.value = deviceName; +} + +function initializeDigitalInputsPage() { + zeileEinfuegen(); + setTimeout(function () { + window.location.reload(1); + }, 5000); +} + +function initializeCableMonitoringPage() { + tableInit(); +} + +function zeileEinfuegen() { + const tabelle = document.getElementById("tabelle"); + + for (var i = 0; i <= 31; i++) { + const reihe = tabelle.insertRow(-1); + let inhalt = "Eingang " + (i + 1), zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + + inhalt = de[i], zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + + inhalt = counter[i], zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + + inhalt = flutter[i], zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + } + + var rows = tabelle.getElementsByTagName("tr"); + for (var i = 0; i < rows.length; i++) { + if (rows[i].cells[1].innerHTML == "1") + rows[i].cells[1].style.backgroundColor = "red"; + } +} + +function tableInit() { + const tabelle = document.getElementById("tabelle"); + + for (var i = 0; i <= 31; i++) { + const reihe = tabelle.insertRow(-1); + let inhalt = "KÜ " + (i + 1), zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + + inhalt = kueID[i], zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + + if (kueOnline[i] == "1") { + inhalt = kueIso[i], zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + } else { + inhalt = "", zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + } + + inhalt = "", zelle = reihe.insertCell(); + zelle.innerHTML = inhalt; + } +} + +// Weitere Funktionen können hier hinzugefügt werden