Dashboard aktiv in navigtion beim ersten Aufruf

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() {
           </div>
           {loading && <p>Lade Gerätedaten...</p>}
           {error && <p className="text-red-500">Fehler: {error.message}</p>}
+
+          {/* Gerätedaten anzeigen */}
           {deviceData && (
             <div>
-              <h2>Ersetzte Daten aus Start.acp:</h2>
-              {/* Die gerenderten Daten mit dangerouslySetInnerHTML anzeigen */}
-              <pre dangerouslySetInnerHTML={{ __html: deviceData }}></pre>
+              <h2>Gerätedaten</h2>
+              <p>
+                <strong>Device Name:</strong> {deviceData.deviceName}
+              </p>
+              <p>
+                <strong>IP:</strong> {deviceData.ip}
+              </p>
+              <p>
+                <strong>MAC1:</strong> {deviceData.mac1}
+              </p>
+              <p>
+                <strong>MAC2:</strong> {deviceData.mac2}
+              </p>
+              <p>
+                <strong>Subnet:</strong> {deviceData.subnet}
+              </p>
+              <p>
+                <strong>Gateway:</strong> {deviceData.gateway}
+              </p>
+              <p>
+                <strong>Datetime:</strong> {deviceData.datetime}
+              </p>
+            </div>
+          )}
+
+          {/* Digitale Eingänge anzeigen */}
+          {digitalInputs && (
+            <div>
+              <h2>Digitale Eingänge</h2>
+              {digitalInputs.inputs.map((input, index) => (
+                <div key={index}>
+                  <p>
+                    <strong>Eingang {index + 1}:</strong> Zustand: {input} |
+                    Zähler: {digitalInputs.counters[index]} | Flatter:{" "}
+                    {digitalInputs.flutters[index]}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Kabelüberwachungsdaten anzeigen */}
+          {cableMonitoring && (
+            <div>
+              <h2>Kabelüberwachung</h2>
+              {cableMonitoring.cableAddress.map((address, index) => (
+                <div key={index}>
+                  <p>
+                    <strong>Kabel {index + 1}:</strong> Adresse: {address} |
+                    Status: {cableMonitoring.status[index]}
+                  </p>
+                </div>
+              ))}
             </div>
           )}
         </main>

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}`);
         }

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" },