automatische environment für mockData in develop ,nach "npm run build" geht autoatisch zu production

components/DeviceData.jsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-const DeviceData = () => {
-  const [deviceData, setDeviceData] = useState("");
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Stelle sicher, dass die URL auf den richtigen Server zeigt (localhost:3000)
-        const response = await fetch(
-          "http://localhost:3000/api/fetchDeviceData"
-        );
-        if (!response.ok) {
-          throw new Error(`Fehler beim Abrufen der Daten: ${response.status}`);
-        }
-        const data = await response.json();
-        setDeviceData(data.content); // Die Daten aus der API-Antwort setzen
-      } catch (error) {
-        setError(error.message);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  return (
-    <div>
-      {error ? (
-        <p>Fehler: {error}</p>
-      ) : (
-        <div dangerouslySetInnerHTML={{ __html: deviceData }} />
-      )}
-    </div>
-  );
-};
-
-export default DeviceData;

components/Header.jsx

@@ -8,7 +8,6 @@ import SettingsModal from "./modales/SettingsModal";
 
 function Header() {
   const [isClient, setIsClient] = useState(false);
-
   const [stationsname, setStationsname] = useState("Lädt..."); // Platzhalter
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
@@ -26,13 +25,18 @@ function Header() {
   };
 
   const handleLogout = () => {
-    window.location.href = "/offline.html"; // Opens offline.html
+    window.location.href = "/offline.html"; // Öffnet offline.html
   };
 
   useEffect(() => {
     if (typeof window !== "undefined") {
+      console.log("Lade Window-Variablen...");
+
       loadWindowVariables()
         .then(() => {
+          // Überprüfe, ob die erwarteten Variablen verfügbar sind
+          console.log("Window-Variablen geladen:", window);
+
           if (window.ip) {
             setStationsname(window.deviceName || "Unbekannt");
             setCplStatus(window.hardware_version || "Unbekannt");
@@ -57,15 +61,17 @@ function Header() {
         "System.acp",
       ];
 
+      const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production"; // Fallback auf 'production'
+
       files.forEach((file) => {
         const script = document.createElement("script");
-        const environment = process.env.NODE_ENV;
+
         if (environment === "production") {
           script.src = `/CPL?/CPL/SERVICE/${file}`; // Produktions-Pfad
         } else {
-          script.src = `/CPL/CPL/SERVICE/${file}`; // Entwicklungs-Pfad
+          script.src = `/mockData/${file}`; // Entwicklungs-Pfad
         }
-        //script.src = `/CPL?/CPL/SERVICE/${file}`;
+
         script.async = true;
         script.onload = () => console.log(`${file} wurde erfolgreich geladen.`);
         script.onerror = (error) =>
@@ -75,7 +81,11 @@ function Header() {
     }
   }, [isClient]);
 
-  if (!isClient) return null; // Don't render the component until on the client side
+  useEffect(() => {
+    console.log("Environment:", process.env.NEXT_PUBLIC_NODE_ENV); // Logge die Umgebungsvariable
+  }, []);
+
+  if (!isClient) return null; // Rendere die Komponente nicht, bis sie clientseitig ausgeführt wird
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
@@ -94,7 +104,7 @@ 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">
-          <h2 className="text-base ">Stationsname</h2>
+          <h2 className="text-base">Stationsname</h2>
           <p className="text-base text-gray-600">{stationsname}</p>
         </div>
       </div>

components/Navigation.jsx

@@ -14,7 +14,7 @@ function Navigation() {
   }, [pathname]);
 
   const menuItems = [
-    { name: "Übersicht", path: "/dashboard.html" },
+    { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
     //{ name: "Zutrittskontrolle", path: "/access" },
     //{ name: "Ein- und Ausgänge", path: "/einausgaenge" },

components/modales/KueModal.jsx

@@ -114,7 +114,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
     // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
     if (Object.keys(changes).length > 0) {
-      let url = `https://${window.ip}:443/cpl?Service/kueDetail.HTML&slot=${slot}`;
+      let url = `/cpl?/SERVICE/kueDetail.HTML&slot=${slot}`;
 
       Object.keys(changes).forEach((paramKey) => {
         url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
@@ -142,7 +142,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   };
 
   const handleDisplayEinschalten = () => {
-    const url = `https://${window.ip}:443/cpl?Service/kueDetail.HTML&KSD${slot}=1`;
+    const url = `/CPL?/Service/kueDetail.HTML&KSD${slot}=1`;
     fetch(url, { method: "GET" })
       .then((response) => {
         if (response.ok) {

components/modules/Kue705FO.jsx

@@ -240,7 +240,7 @@ function Kue705FO({
   };
 
   // Überprüfe, ob ein Modul im Slot vorhanden ist
-  const isModulPresent = kueOnline[slotIndex] === 1;
+  const isModulPresent = kueOnline === 1; // Since you're passing the status directly now
 
   const handleButtonClick = (button) => {
     if (button === "Schleife") {