279 lines
10 KiB
JavaScript
279 lines
10 KiB
JavaScript
"use client"; // app/dashboard/page.jsx
|
|
import React, { useEffect, useState } from "react";
|
|
import "tailwindcss/tailwind.css";
|
|
import "@fontsource/roboto";
|
|
import "bootstrap-icons/font/bootstrap-icons.css";
|
|
|
|
function Dashboard() {
|
|
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 von Skripten
|
|
const loadScript = (src) => {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement("script");
|
|
script.src = `${apiUrl}/CPL?${src}`;
|
|
script.async = true;
|
|
script.onload = () => {
|
|
resolve();
|
|
};
|
|
script.onerror = (error) => {
|
|
reject(error);
|
|
};
|
|
document.head.appendChild(script);
|
|
});
|
|
};
|
|
|
|
// Lade alle Skripte nacheinander und zeige die Daten an
|
|
const loadAllScripts = async () => {
|
|
try {
|
|
// Lade nur das `last20Messages.acp` Skript, das alle Variablen enthält
|
|
await loadScript("last20Messages.acp");
|
|
|
|
// Warte eine kurze Zeit, um sicherzustellen, dass alle Daten verfügbar sind
|
|
setTimeout(() => {
|
|
// Prüfen, ob alle Variablen verfügbar sind und in die Konsole ausgeben
|
|
if (window.last20Messages) {
|
|
console.log("Systemvariablen geladen:", {
|
|
// last20Messages.acp
|
|
last20Messages: window.last20Messages,
|
|
// System.acp Variablen
|
|
deviceName: window.deviceName,
|
|
mac1: window.mac1,
|
|
mac2: window.mac2,
|
|
ip: window.ip,
|
|
subnet: window.subnet,
|
|
gateway: window.gateway,
|
|
datetime: window.datetime,
|
|
// de.acp Variablen
|
|
de: window.de,
|
|
counter: window.counter,
|
|
flutter: window.flutter,
|
|
// kueConfig.acp Variablen
|
|
kueOnline: window.kueOnline,
|
|
kueID: window.kueID,
|
|
kueIso: window.kueIso,
|
|
// kuedetail.acp Variablen
|
|
kueValid: window.kueValid,
|
|
kueAlarm1: window.kueAlarm1,
|
|
kueAlarm2: window.kueAlarm2,
|
|
kueRes: window.kueRes,
|
|
kueCableBreak: window.kueCableBreak,
|
|
kueGroundFault: window.kueGroundFault,
|
|
kueLimit1: window.kueLimit1,
|
|
kueLimit2Low: window.kueLimit2Low,
|
|
kueLimit2High: window.kueLimit2High,
|
|
kueDelay1: window.kueDelay1,
|
|
kueLoopInterval: window.kueLoopInterval,
|
|
kueVersion: window.kueVersion,
|
|
tdrAtten: window.tdrAtten,
|
|
tdrPulse: window.tdrPulse,
|
|
tdrSpeed: window.tdrSpeed,
|
|
tdrAmp: window.tdrAmp,
|
|
tdrTrigger: window.tdrTrigger,
|
|
tdrLocation: window.tdrLocation,
|
|
tdrActive: window.tdrActive,
|
|
kueOverflow: window.kueOverflow,
|
|
kue100V: window.kue100V,
|
|
kueResidence: window.kueResidence,
|
|
tdrLastMeasurement: window.tdrLastMeasurement,
|
|
kueBooting: window.kueBooting,
|
|
});
|
|
|
|
// Letzte Meldungen analysieren und in den State setzen
|
|
const parsedMessages = parseMessages(window.last20Messages);
|
|
setLast20Messages(parsedMessages);
|
|
} else {
|
|
console.error("Konnte last20Messages nicht finden.");
|
|
setError("Konnte last20Messages nicht finden.");
|
|
}
|
|
|
|
setLoading(false);
|
|
}, 500); // 500 ms Verzögerung, um sicherzustellen, dass alle Daten geladen sind
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Skripts:", error);
|
|
setError(error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadAllScripts();
|
|
|
|
// Nachrichten parsen
|
|
const parseMessages = (messages) => {
|
|
messages = messages
|
|
.replace(/<tr>/g, "\n")
|
|
.replace(/<\/?td>/g, "")
|
|
.replace(/<\/tr>/g, "")
|
|
.trim();
|
|
|
|
const rows = messages.split("\n");
|
|
return rows.map((row) => {
|
|
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;
|
|
});
|
|
};
|
|
}, [apiUrl]);
|
|
|
|
return (
|
|
<div className="bg-gray-100 flex flex-col min-h-screen p-8">
|
|
{/* Navigation zu ACP-Seiten */}
|
|
<div className="mb-4">
|
|
<a
|
|
href="/CPL?SYSTEM.ACP&OFF_1=1"
|
|
target="_parent"
|
|
className="text-gray-700 mr-4 hover:text-blue-500"
|
|
>
|
|
System
|
|
</a>
|
|
<a
|
|
href="/CPL?DE.ACP&OFF_1=1"
|
|
target="_parent"
|
|
className="text-gray-700 mr-4 hover:text-blue-500"
|
|
>
|
|
Digitale Eingänge
|
|
</a>
|
|
<a
|
|
href="/CPL?KUEconfig.ACP&OFF_1=1"
|
|
target="_parent"
|
|
className="text-gray-700 hover:text-blue-500"
|
|
>
|
|
Kabelüberwachungen
|
|
</a>
|
|
</div>
|
|
|
|
{/* Letzte Meldungen */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h1 className="text-xl font-bold text-gray-700">
|
|
Letzten 20 Meldungen
|
|
</h1>
|
|
<button className="text-red-500 hover:text-red-600">
|
|
<i className="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8">
|
|
{/* Meldungen Liste */}
|
|
<div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-2/3">
|
|
<table className="min-w-full border border-gray-200 text-left">
|
|
<thead className="bg-gray-100 border-b border-gray-300">
|
|
<tr>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
ID
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Modul
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Zeitstempel
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium w-2/3">
|
|
Meldung
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-sm text-gray-600">
|
|
{last20Messages.length > 0 ? (
|
|
last20Messages.map((columns, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-b border-gray-200 hover:bg-gray-50"
|
|
>
|
|
<td className="py-3 px-4">{columns[0]}</td>
|
|
<td className="py-3 px-4">{columns[1]}</td>
|
|
<td className="py-3 px-4">{columns[2]}</td>
|
|
<td className="py-3 px-4 w-2/3">{columns[3]}</td>
|
|
<td className="py-3 px-4">{columns[4]}</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className="py-3 px-4 text-center" colSpan="5">
|
|
Keine Meldungen verfügbar.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Sidebar mit Informationen */}
|
|
<div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
|
|
{/* Versionsinformationen */}
|
|
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-700 mb-2">
|
|
Versionsinformationen
|
|
</h2>
|
|
<p className="text-sm text-gray-600">
|
|
<span className="font-bold">Applikationsversion: </span> 5.1.1.8
|
|
C-24-KA
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
<span className="font-bold">Webserverversion: </span> 5.3.4.1
|
|
</p>
|
|
</div>
|
|
|
|
{/* Beispiel für Geräteanzeige */}
|
|
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-700 mb-2">
|
|
Geräte Status
|
|
</h2>
|
|
<p className="text-sm text-gray-600">Server: Online</p>
|
|
<p className="text-sm text-gray-600">Access 1: Online</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Informationen */}
|
|
<div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow-md border border-gray-200">
|
|
<div className="flex items-center space-x-4">
|
|
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
|
|
<div>
|
|
<p className="text-xs text-gray-500">IP-Adresse</p>
|
|
<p className="text-sm font-medium text-gray-700">192.168.10.147</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<img
|
|
src="/images/subnet-mask.svg"
|
|
alt="subnet mask"
|
|
className="w-6 h-6"
|
|
/>
|
|
<div>
|
|
<p className="text-xs text-gray-500">Subnet-Maske</p>
|
|
<p className="text-sm font-medium text-gray-700">255.255.255.0</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
|
|
<div>
|
|
<p className="text-xs text-gray-500">Gateway</p>
|
|
<p className="text-sm font-medium text-gray-700">192.168.10.1</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
|
|
<div>
|
|
<p className="text-xs text-gray-500">IEC-Adresse</p>
|
|
<p className="text-sm font-medium text-gray-700">223</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|