From 8c05e618524d3cfc7354026b7772ba77c0686b3c Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 24 Sep 2024 20:16:35 +0200 Subject: [PATCH] Dashboard aktiv in navigtion beim ersten Aufruf --- app/dashboard/page.jsx | 136 ++++++++++++++++++++++++++++++++++---- components/DeviceData.jsx | 5 +- components/Navigation.jsx | 2 +- 3 files changed, 129 insertions(+), 14 deletions(-) diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 778540a..6d3af6d 100644 --- a/app/dashboard/page.jsx +++ b/app/dashboard/page.jsx @@ -7,28 +7,88 @@ import DeviceData from "../../components/DeviceData"; function Dashboard() { const [deviceData, setDeviceData] = useState(null); + const [digitalInputs, setDigitalInputs] = useState(null); + const [cableMonitoring, setCableMonitoring] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { - // Funktion zum Abrufen der Gerätedaten von der Start.acp-Seite - const fetchDeviceData = async () => { + // Funktion zum Laden und Ausführen von JavaScript aus einer ACP-Datei + const loadACPFile = async (url) => { try { - // Relativer Pfad zur Start.acp-Datei - const response = await fetch("/CPL?Start.ACP", { - mode: "no-cors", // CORS-Einschränkungen vermeiden + console.log(`Lade ACP-Datei: ${url}`); + + // Fetch-Anfrage an das Backend mit CORS + const response = await fetch(url, { + method: "GET", + mode: "cors", }); - // Überprüfen, ob die Anfrage erfolgreich war if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } - // Die Antwort als Text verarbeiten (da es sich um HTML handelt) 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 || [], + }); + } - // Daten in den Zustand setzen - setDeviceData(result); setLoading(false); } catch (error) { console.error("Fehler beim Abrufen der Gerätedaten:", error); @@ -52,11 +112,63 @@ function Dashboard() { {loading &&

Lade Gerätedaten...

} {error &&

Fehler: {error.message}

} + + {/* Gerätedaten anzeigen */} {deviceData && (
-

Ersetzte Daten aus Start.acp:

- {/* Die gerenderten Daten mit dangerouslySetInnerHTML anzeigen */} - 

+              
Gerätedaten

+              

+                Device Name: {deviceData.deviceName}
+              

+              

+                IP: {deviceData.ip}
+              

+              

+                MAC1: {deviceData.mac1}
+              

+              

+                MAC2: {deviceData.mac2}
+              

+              

+                Subnet: {deviceData.subnet}
+              

+              

+                Gateway: {deviceData.gateway}
+              

+              

+                Datetime: {deviceData.datetime}
+              

+            

+          )}
+
+          {/* Digitale Eingänge anzeigen */}
+          {digitalInputs && (
+            

+              
Digitale Eingänge

+              {digitalInputs.inputs.map((input, index) => (
+                

+                  

+                    Eingang {index + 1}: Zustand: {input} |
+                    Zähler: {digitalInputs.counters[index]} | Flatter:{" "}
+                    {digitalInputs.flutters[index]}
+                  

+                

+              ))}
+            

+          )}
+
+          {/* Kabelüberwachungsdaten anzeigen */}
+          {cableMonitoring && (
+            

+              
Kabelüberwachung

+              {cableMonitoring.cableAddress.map((address, index) => (
+                

+                  

+                    Kabel {index + 1}: Adresse: {address} |
+                    Status: {cableMonitoring.status[index]}
+                  

+                

+              ))}
             

           )}
         
diff --git a/components/DeviceData.jsx b/components/DeviceData.jsx
index 0c36ed1..5043288 100644
--- a/components/DeviceData.jsx
+++ b/components/DeviceData.jsx
@@ -7,7 +7,10 @@ const DeviceData = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch("/api/fetchDeviceData");
+        // Stelle sicher, dass die URL auf den richtigen Server zeigt (localhost:3000)
+        const response = await fetch(
+          "http://localhost:3000/api/fetchDeviceData"
+        );
         if (!response.ok) {
           throw new Error(`Fehler beim Abrufen der Daten: ${response.status}`);
         }
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index 32df77d..94c930a 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -14,7 +14,7 @@ function Navigation() {
   }, [pathname]);
 
   const menuItems = [
-    { name: "Übersicht", path: "/" },
+    { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
     { name: "Zutrittskontrolle", path: "/access" },
     { name: "Ein- und Ausgänge", path: "/einausgaenge" },