diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 0a31a30..a4c1e25 100644 --- a/app/dashboard/page.jsx +++ b/app/dashboard/page.jsx @@ -5,19 +5,19 @@ import "@fontsource/roboto"; import "bootstrap-icons/font/bootstrap-icons.css"; function Dashboard() { - const [last20Messages, setLast20Messages] = useState([]); // State für die Meldungen als Array + const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; + const [last20Messages, setLast20Messages] = useState([]); 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.src = `${apiUrl}/CPL?${src}`; script.async = true; script.onload = () => { - // Prüfe, ob last20Messages im globalen Fensterobjekt existiert + // Prüfen, ob last20Messages im globalen Fensterobjekt existiert if (window.last20Messages) { const parsedMessages = parseMessages(window.last20Messages); setLast20Messages(parsedMessages); @@ -30,7 +30,10 @@ function Dashboard() { } resolve(); }; - script.onerror = reject; + script.onerror = (error) => { + console.error("Fehler beim Laden des Skripts:", error); + reject(error); + }; document.head.appendChild(script); }); }; @@ -38,30 +41,28 @@ function Dashboard() { // Lade das Skript und aktualisiere den State const fetchLast20Messages = async () => { try { - await loadScript("/CPL?last20Messages.acp"); + await loadScript("last20Messages.acp"); } catch (error) { console.error( "Fehler beim Laden des Skripts last20Messages.acp:", error ); + setError(error); + setLoading(false); } }; 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) @@ -72,7 +73,7 @@ function Dashboard() { return columns; }); }; - }, []); + }, [apiUrl]); return (
@@ -81,21 +82,21 @@ function Dashboard() { System Digitale Eingänge Kabelüberwachungen @@ -103,43 +104,54 @@ function Dashboard() { {/* 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 */} - + + + + + + )) ) : ( - @@ -149,39 +161,39 @@ function Dashboard() { {/* Sidebar mit Informationen */} -
+
{/* Versionsinformationen */} -
-

+
+

Versionsinformationen

-

+

Applikationsversion: 5.1.1.8 C-24-KA

-

+

Webserverversion: 5.3.4.1

{/* Beispiel für Geräteanzeige */} -
-

Geräte Status

- {/* Hier könntest du die Daten von "deviceData" verwenden */} -

Server: Online

-

Access 1: Online

- {/* Weitere Geräteinformationen */} +
+

+ Geräte Status +

+

Server: Online

+

Access 1: Online

{/* Footer Informationen */} -
+
IP Address

IP-Adresse

-

192.168.10.147

+

192.168.10.147

@@ -192,21 +204,21 @@ function Dashboard() { />

Subnet-Maske

-

255.255.255.0

+

255.255.255.0

gateway

Gateway

-

192.168.10.1

+

192.168.10.1

IEC

IEC-Adresse

-

223

+

223

diff --git a/mock.js b/mock.js new file mode 100644 index 0000000..910c354 --- /dev/null +++ b/mock.js @@ -0,0 +1,383 @@ +// Letzten 20 Meldungen +"<%=SAM01%>"; //Platzhaalter Start.acp +var last20Messages = `
`; +("Stand: 25.09.24 11:10:11 Uhr"); +("Stand: <%=SCL01%>"); //Platzhaler +// System Platzhalter System.acp +var deviceName="<%=SAN01%>"; +var mac1="<%=SEM01%>"; +var mac2="<%=SEM02%>"; +var ip="<%=SEI01%>"; +var subnet="<%=SES01%>"; +var gateway="<%=SEG01%>"; +var datetime="<%=SCL01%>"; +// system Anwort System.acp +var deviceName = "CPLV4_ISM"; +var mac1 = "0 48 86 81 46 157"; +var mac2 = "0 48 86 81 46 158"; +var ip = "10.10.0.118"; +var subnet = "255.255.255.0"; +var gateway = "10.10.0.1"; +var datetime = "09.01.00 04:05:24 Uhr"; + +//Digitale Eingänge Platzhalter de.acp +var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>]; +var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>]; +var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>]; + +//Digitale Eingänge Anwort de.acp +var de = [ + 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var counter = [ + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, +]; +var flutter = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; + +{ + /* + System
+Digitale Eingänge
+Kabelüberwachungen +*/ +} + +//Kabelüberwachung Konfiguration kueConfig.acp Platzhalter +var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>]; +var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>]; +var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>]; + +//Kabelüberwachung Konfiguration kueConfig.acp Antwort +var kueOnline = [ + 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueID = [ + "FTZ324234", + "B23", + "", + "", + "", + "", + "", + "", + "12344", + "", + "", + "", + "", + "", + "", + "H56-77", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", +]; +var kueName = [ + "Nicola", + "Chantal", + "", + "", + "", + "", + "Melanie", + "", + "Merle", + "", + "", + "", + "", + "", + "", + "Daniela", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", +]; +var kueIso = [ + 200.0, 200.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 16.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, +]; + +//Kabelüberwachung Detail je Kabel (Einzel und nicht für alle Kabel) für ein Slot (Modul) Platzhalter 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%>]; + +//Kabelüberwachung Detail je Kabel (Einzel und nicht für alle Kabel) für ein Slot (Modul) Anwort kueDetail.acp +var kueOnline = [ + 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueIso = [ + 200.0, 200.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 16.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, +]; +var kueValid = [ + 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueAlarm1 = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueAlarm2 = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; + +var kueRes = [ + 0.129, 65.0, 0.0, 0.0, 0.0, 0.0, 2.258, 0.0, 4.782, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, +]; + +var kueCableBreak = [ + 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueGroundFault = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; + +var kueLimit1 = [ + 10.0, 10.0, 0.0, 0.0, 0.0, 0.0, 10.0, 0.0, 10.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, +]; +var kueLimit2Low = [ + 0.1, 0.1, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, +]; +var kueLimit2High = [ + 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, +]; +var kueDelay1 = [ + 420, 420, 0, 0, 0, 0, 420, 0, 420, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; +var kueLoopInterval = [ + 6, 6, 0, 0, 0, 0, 6, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; + +var kueID = [ + "FTZ324234", + "B23", + "", + "", + "", + "", + "", + "", + "12344", + "", + "", + "", + "", + "", + "", + "H56-77", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", +]; +var kueName = [ + "Nicola", + "Chantal", + "", + "", + "", + "", + "Melanie", + "", + "Merle", + "", + "", + "", + "", + "", + "", + "Daniela", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", +]; +var kueVersion = [ + 419, 419, 0, 0, 0, 0, 419, 0, 419, 0, 0, 0, 0, 0, 0, 1100, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; + +var tdrAtten = [ + 2.0, 2.0, 0.0, 0.0, 0.0, 0.0, 2.0, 0.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 0.0, +]; +var tdrPulse = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var tdrSpeed = [ + 120, 100, 0, 0, 0, 0, 100, 0, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; +var tdrAmp = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var tdrTrigger = [ + 80, 80, 0, 0, 0, 0, 80, 0, 80, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, +]; +var tdrLocation = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var tdrActive = [ + 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueOverflow = [ + 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kue100V = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var kueResidence = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +]; +var tdrLastMeasurement = [ + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", + "?", +]; +var kueBooting = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, +];
IDWertZeitstempelMeldungStatus + ID + + Modul + + Zeitstempel + + Meldung + + Status +
{columns[0]}{columns[1]}{columns[2]}{columns[3]}{columns[4]}
{columns[0]}{columns[1]}{columns[2]}{columns[3]}{columns[4]}
+ Keine Meldungen verfügbar.
00985025012024-09-18 07:40:39:000Modul 16 Isofehler gehend0
00984025012024-09-18 07:40:35:000Modul 16 Isofehler kommend1
00983024002024-09-18 07:39:17:000Modul 15 Aderbruch kommend1
00982010002024-09-18 07:38:49:000Modul 01 Aderbruch kommend1
00981001082024-09-18 07:38:44:000Dig. Eingang 09 kommend1
00980001012024-09-18 07:38:44:000Dig. Eingang 02 kommend1
00979001002024-09-18 07:38:44:000Dig. Eingang 01 kommend1
00978025012024-09-17 16:40:55:000Modul 16 Isofehler gehend0
00977025012024-09-17 16:40:51:000Modul 16 Isofehler kommend1
00976025012024-09-17 16:25:55:000Modul 16 Isofehler gehend0
00975025012024-09-17 16:25:51:000Modul 16 Isofehler kommend1
00974025012024-09-17 16:10:57:000Modul 16 Isofehler gehend0
00973025012024-09-17 16:10:53:000Modul 16 Isofehler kommend1
00972001272024-09-17 16:05:51:000Dig. Eingang 28 gehend0
00971001262024-09-17 16:05:51:000Dig. Eingang 27 gehend0
00970001252024-09-17 16:05:51:000Dig. Eingang 26 gehend0
00969001242024-09-17 16:05:51:000Dig. Eingang 25 gehend0
00968001232024-09-17 16:05:50:000Dig. Eingang 24 gehend0
00967001222024-09-17 16:05:50:000Dig. Eingang 23 gehend0
00966001212024-09-17 16:05:50:000Dig. Eingang 22 gehend0