IP kommt von window und nicht von.env.local, weil in CHIPTOOL kann die IP eingestellt werden

components/Header.jsx

@@ -7,12 +7,16 @@ import { loadWindowVariables } from "../utils/loadWindowVariables"; // Importier
 import SettingsModal from "./modales/SettingsModal";
 
 function Header() {
-  // const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
-  const apiUrl = `https://${window.ip}:443`;
+  const [isClient, setIsClient] = useState(false);
+  const [apiUrl, setApiUrl] = useState("");
   const [stationsname, setStationsname] = useState("Lädt..."); // Platzhalter
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const handleSettingsClick = () => {
     setShowSettingsModal(true); // Öffne das Modal
   };
@@ -22,58 +26,61 @@ function Header() {
   };
 
   const handleLogout = () => {
-    // Öffnet die Seite offline.html im selben Fenster
-    window.location.href = "/offline.html";
+    window.location.href = "/offline.html"; // Opens offline.html
   };
 
   useEffect(() => {
-    // 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 Laden der Variablen:", error);
-      });
-  }, [apiUrl]);
-
-  const files = [
-    "de.acp",
-    "kueConfig.acp",
-    "kueData.js",
-    "kueDetailTdr.acp",
-    "Start.acp",
-    "System.acp",
-  ]; // Manuelle Liste der Dateien, die du einbinden möchtest
+    if (typeof window !== "undefined") {
+      loadWindowVariables(apiUrl)
+        .then(() => {
+          if (window.ip) {
+            setApiUrl(`https://${window.ip}:443`);
+            setStationsname(window.deviceName || "Unbekannt");
+            setCplStatus(window.hardware_version || "Unbekannt");
+          } else {
+            console.error("window.ip ist nicht verfügbar.");
+          }
+        })
+        .catch((error) => {
+          console.error("Fehler beim Laden der Variablen:", error);
+        });
+    }
+  }, [isClient]);
 
   useEffect(() => {
-    // Fetch each file in the files array
-    files.forEach((file) => {
-      const script = document.createElement("script");
-      script.src = `/CPL?/CPL/SERVICE/${file}`; // Lade die Datei aus dem public Verzeichnis
-      script.async = true;
-      script.onload = () => {
-        console.log(`${file} wurde erfolgreich geladen.`);
-      };
-      script.onerror = (error) => {
-        console.error(`Fehler beim Laden von ${file}:`, error);
-      };
-      document.head.appendChild(script); // Füge das Skript in den Head ein
-    });
-  }, []);
+    if (isClient) {
+      const files = [
+        "de.acp",
+        "kueConfig.acp",
+        "kueData.js",
+        "kueDetailTdr.acp",
+        "Start.acp",
+        "System.acp",
+      ];
+
+      files.forEach((file) => {
+        const script = document.createElement("script");
+        script.src = `/CPL?/CPL/SERVICE/${file}`;
+        script.async = true;
+        script.onload = () => console.log(`${file} wurde erfolgreich geladen.`);
+        script.onerror = (error) =>
+          console.error(`Fehler beim Laden von ${file}:`, error);
+        document.head.appendChild(script);
+      });
+    }
+  }, [isClient]);
+
+  if (!isClient) return null; // Don't render the component until on the client side
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
-      {/* Logo - Vergrößert und verschoben */}
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
         <Image
-          src="/images/Logo.png" // Angepasster Pfad
+          src="/images/Logo.png"
           alt="Logo"
           width={80}
           height={80}
-          style={{ width: "auto", height: "auto" }} // Stellt sicher, dass das Seitenverhältnis korrekt bleibt
+          style={{ width: "auto", height: "auto" }}
           priority={false}
         />
       </div>
@@ -82,15 +89,11 @@ function Header() {
       {/* CPL Status und Stationsname */}
       <div className="flex items-start space-x-4 w-full">
         <div className="flex flex-col text-left pl-8">
-          {/* Text immer linksbündig */}
           <h2 className="text-base ">Stationsname</h2>
-          <p className="text-base  text-gray-600">{stationsname}</p>
+          <p className="text-base text-gray-600">{stationsname}</p>
         </div>
       </div>
-      <div className="flex items-start space-x-4 w-full"></div>
-      {/* Temperatur und Icons */}
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
-        {/* Settings Icon als Button */}
         <div className="flex items-center justify-end w-full">
           <button
             onClick={handleSettingsClick}
@@ -99,7 +102,6 @@ function Header() {
             <i className="bi bi-gear"></i>
           </button>
         </div>
-        {/* Logout Button */}
         <div className="flex items-center justify-end w-full">
           <button
             onClick={handleLogout}
@@ -109,7 +111,6 @@ function Header() {
           </button>
         </div>
       </div>
-      {/* SettingsModal wird angezeigt, wenn showSettingsModal true ist */}
       {showSettingsModal && (
         <SettingsModal
           showModal={showSettingsModal}