From 6f26e1b5034e657289836d1540a1ac4cd413112a Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 21 Oct 2024 12:25:16 +0200 Subject: [PATCH] IP kommt von window und nicht von.env.local, weil in CHIPTOOL kann die IP eingestellt werden --- app/dashboard/page.jsx | 57 ++++++++++++------- app/kabelueberwachung/page.jsx | 14 ++++- components/Header.jsx | 97 +++++++++++++++++---------------- components/modales/KueModal.jsx | 2 +- components/modules/Kue705FO.jsx | 13 +++++ 5 files changed, 111 insertions(+), 72 deletions(-) diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 07e212e..e27cdef 100644 --- a/app/dashboard/page.jsx +++ b/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) diff --git a/app/kabelueberwachung/page.jsx b/app/kabelueberwachung/page.jsx index d35211d..875d4be 100644 --- a/app/kabelueberwachung/page.jsx +++ b/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)) { diff --git a/components/Header.jsx b/components/Header.jsx index b28bf89..d2b8849 100644 --- a/components/Header.jsx +++ b/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 (
- {/* Logo - Vergrößert und verschoben */}
Logo
@@ -82,15 +89,11 @@ function Header() { {/* CPL Status und Stationsname */}
- {/* Text immer linksbündig */}

Stationsname

-

{stationsname}

+

{stationsname}

-
- {/* Temperatur und Icons */}
- {/* Settings Icon als Button */}
- {/* Logout Button */}
- {/* SettingsModal wird angezeigt, wenn showSettingsModal true ist */} {showSettingsModal && ( { + //------------------------------------------------- + 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) {