feat: Externalize script loading logic to improve code modularity and reusability

- Moved the logic for loading window variables from the server into a new utility function `loadWindowVariables.js`.
- Updated `Header` and `Dashboard` components to use the new utility function for fetching and setting window variables.
- Improved code readability and maintainability by centralizing the script loading process.

app/dashboard/page.jsx

@@ -1,8 +1,10 @@
-"use client"; // app/dashboard/page.jsx
+// app/dashboard/page.jsx
+"use client";
 import React, { useEffect, useState } from "react";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
+import { loadWindowVariables } from "../../utils/loadWindowVariables"; // Importiere die Funktion
 
 function Dashboard() {
   const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -11,96 +13,24 @@ function Dashboard() {
   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
+    loadWindowVariables(apiUrl)
+      .then(() => {
+        // Jetzt sind die Variablen im window-Objekt verfügbar
         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) {
+      })
+      .catch((error) => {
         console.error("Fehler beim Laden des Skripts:", error);
         setError(error);
         setLoading(false);
-      }
-    };
-
-    loadAllScripts();
+      });
+  }, [apiUrl]);
 
   // Nachrichten parsen
   const parseMessages = (messages) => {
@@ -122,35 +52,9 @@ function Dashboard() {
       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">

components/Header.jsx

@@ -1,7 +1,9 @@
-"use client"; // components/Header.jsx
+// components/Header.jsx
+"use client";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";
+import { loadWindowVariables } from "../utils/loadWindowVariables"; // Importiere die Funktion
 
 function Header() {
   const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -9,43 +11,17 @@ function Header() {
   const [cplStatus, setCplStatus] = useState("Lädt...");
 
   useEffect(() => {
-    // API-Aufruf, um die Daten vom Server zu holen
-    fetch(`${apiUrl}/CPL?last20Messages.acp`, {
-      mode: "cors",
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Fehler beim Abrufen der Daten");
-        }
-        return response.text(); // Holen des gesamten Textinhalts
-      })
-      .then((data) => {
-        console.log("Fetched data:", data); // Logge die empfangenen Daten
-
-        // Überprüfen, ob das Skript bereits vorhanden ist
-        const scriptId = "server-script";
-        let script = document.getElementById(scriptId);
-        if (script) {
-          // Wenn das Skript bereits vorhanden ist, entfernen wir es
-          document.body.removeChild(script);
-        }
-
-        // Erstelle und füge das neue Skript hinzu
-        script = document.createElement("script");
-        script.id = scriptId;
-        script.innerHTML = data;
-        document.body.appendChild(script);
-
-        // Nach dem Anhängen des Skripts haben wir Zugriff auf die definierten Variablen
-        setTimeout(() => {
+    // Lade die Variablen vom Server und setze sie in `window`
+    loadWindowVariables(apiUrl)
+      .then(() => {
+        // Greife auf die geladenen Variablen im `window`-Objekt zu
         setStationsname(window.deviceName || "Unbekannt");
         setCplStatus(window.hardware_version || "Unbekannt");
-        }, 100); // 100ms Verzögerung, um sicherzustellen, dass die Variablen geladen sind.
       })
       .catch((error) => {
-        console.error("Fehler beim Abrufen der Daten:", error);
+        console.error("Fehler beim Laden der Variablen:", error);
       });
-  }, []);
+  }, [apiUrl]);
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4 relative">

utils/loadWindowVariables.js

@@ -0,0 +1,81 @@
+// utils/loadWindowVariables.js
+
+export async function loadWindowVariables(apiUrl) {
+  return new Promise((resolve, reject) => {
+    // Funktion zum Laden eines Skripts und Setzen der `window`-Variablen
+    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 das Skript, das alle Variablen enthält
+    loadScript("last20Messages.acp")
+      .then(() => {
+        // Prüfen, ob alle Variablen verfügbar sind und sie 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,
+          });
+
+          resolve();
+        } else {
+          reject(new Error("Konnte last20Messages nicht finden."));
+        }
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}