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.

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(() => {
-          setStationsname(window.deviceName || "Unbekannt");
-          setCplStatus(window.hardware_version || "Unbekannt");
-        }, 100); // 100ms Verzögerung, um sicherzustellen, dass die Variablen geladen sind.
+    // 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");
       })
       .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">