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

app/dashboard/page.jsx

@@ -14,7 +14,8 @@ import { Icon } from "@iconify/react";
 
 function Dashboard() {
   //const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
-  const apiUrl = `https://${window.ip}:443`;
+  const [isClient, setIsClient] = useState(false);
+
   const [last20Messages, setLast20Messages] = useState([]);
   const [kueOnline, setkueOnline] = useState([]);
   const [ip, setIp] = useState("");
@@ -24,28 +25,42 @@ function Dashboard() {
   const [error, setError] = useState(null);
   const [kueCableBreak, setKueCableBreak] = useState([]);
   const [appVersion, setAppVersion] = useState("");
+  const [apiUrl, setApiUrl] = useState("");
+  /*   useEffect(() => {
+    setIsClient(true);
+    if (typeof window !== "undefined") {
+      setApiUrl(`https://${window.ip}:443`);
+    }
+  }, []); */
 
+  /*   if (!isClient) {
+    return null; // or a loading spinner
+  } */
+  //const apiUrl = `https://${ip}:443`;
   useEffect(() => {
-    loadWindowVariables(apiUrl)
-      .then(() => {
-        if (window.last20Messages) {
-          const parsedMessages = parseMessages(window.last20Messages);
-          setLast20Messages(parsedMessages);
-          setIp(window.ip);
-          setSubnet(window.subnet);
-          setGateway(window.gateway);
-          setAppVersion(window.appVersion);
-        } else {
-          console.error("Konnte last20Messages nicht finden.");
-          setError("Konnte last20Messages nicht finden.");
-        }
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error("Fehler beim Laden des Skripts:", error);
-        setError(error);
-        setLoading(false);
-      });
+    if (typeof window !== "undefined") {
+      loadWindowVariables(apiUrl)
+        .then(() => {
+          if (window.last20Messages) {
+            const parsedMessages = parseMessages(window.last20Messages);
+            setLast20Messages(parsedMessages);
+            setIp(window.ip);
+            setSubnet(window.subnet);
+            setGateway(window.gateway);
+            setAppVersion(window.appVersion);
+            setApiUrl(`https://${window.ip}:443`);
+          } else {
+            console.error("Konnte last20Messages nicht finden.");
+            setError("Konnte last20Messages nicht finden.");
+          }
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Fehler beim Laden des Skripts:", error);
+          setError(error);
+          setLoading(false);
+        });
+    }
   }, [apiUrl]);
   useEffect(() => {
     loadWindowVariables(apiUrl)

app/kabelueberwachung/page.jsx

@@ -4,7 +4,9 @@ import Kue705FO from "../../components/modules/Kue705FO";
 
 function Kabelueberwachung() {
   //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 [activeRack, setActiveRack] = useState(1); // Track the active rack
   const [kueIso, setKueIso] = useState([]); // State to store isolation values
   const [kueName, setKueName] = useState([]); // State to store the KUE names
@@ -16,7 +18,15 @@ function Kabelueberwachung() {
   const changeRack = (rack) => {
     setActiveRack(rack);
   };
-
+  useEffect(() => {
+    setIsClient(true);
+    if (typeof window !== "undefined") {
+      setApiUrl(`https://${window.ip}:443`);
+    }
+  }, []);
+  /*   if (!isClient) {
+    return null; // or a loading spinner 
+  }*/
   // Load the external JavaScript file and fetch the isolation values
   useEffect(() => {
     if (window.kueIso && Array.isArray(window.kueIso)) {

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}

components/modales/KueModal.jsx

@@ -1,4 +1,4 @@
-// components/modales/KueModal.jsx
+"use client"; // components/modales/KueModal.jsx
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 

components/modules/Kue705FO.jsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect } from "react";
 import ReactModal from "react-modal";
 import Chart from "chart.js/auto";
@@ -107,6 +108,18 @@ function Kue705FO({
 
   // Funktion für die TDR-Messung
   const goTDR = () => {
+    //-------------------------------------------------
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+      // This will only run in the client/browser, not on the server
+      setIsClient(true);
+    }, []);
+
+    if (!isClient) {
+      return null; // or a loading spinner
+    }
+    //-------------------------------------------------
     let slot = slotIndex;
 
     if (slot >= 32) {