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,146 +13,48 @@ function Dashboard() {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    // Funktion zum Laden von Skripten
+    loadWindowVariables(apiUrl)
-    const loadScript = (src) => {
+      .then(() => {
-      return new Promise((resolve, reject) => {
+        // Jetzt sind die Variablen im window-Objekt verfügbar
-        const script = document.createElement("script");
+        if (window.last20Messages) {
-        script.src = `${apiUrl}/CPL?${src}`;
+          const parsedMessages = parseMessages(window.last20Messages);
-        script.async = true;
+          setLast20Messages(parsedMessages);
-        script.onload = () => {
+        } else {
-          resolve();
+          console.error("Konnte last20Messages nicht finden.");
-        };
+          setError("Konnte last20Messages nicht finden.");
-        script.onerror = (error) => {
+        }
-          reject(error);
+        setLoading(false);
-        };
+      })
-        document.head.appendChild(script);
+      .catch((error) => {
-      });
-    };
-
-    // 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]);
 
+  // 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;
+    });
+  };
+
   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
+    // Lade die Variablen vom Server und setze sie in `window`
-    fetch(`${apiUrl}/CPL?last20Messages.acp`, {
+    loadWindowVariables(apiUrl)
-      mode: "cors",
+      .then(() => {
-    })
+        // Greife auf die geladenen Variablen im `window`-Objekt zu
-      .then((response) => {
+        setStationsname(window.deviceName || "Unbekannt");
-        if (!response.ok) {
+        setCplStatus(window.hardware_version || "Unbekannt");
-          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(() => {
-          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);
+      });
+  });
+}