feat: Umgebungsspezifisches Laden von Datenquellen implementiert

- Alle fetch-Services (TDM, TDR, analoge/digitale Eingänge/Ausgänge, SystemSettings usw.) angepasst,
  um `NEXT_PUBLIC_NODE_ENV` zu verwenden.
- Entwicklungsumgebung lädt Daten aus /CPLmockData/...
- Produktionsumgebung verwendet echte Endpunkte mit /CPL?/CPL/...
- .env.production und .env.development korrekt berücksichtigt
- loadWindowVariables, WindowVariablesInitializer und verwandte Dateien bereinigt
- Mockdaten erscheinen nicht mehr versehentlich in Produktionsumgebung

components/WindowVariablesInitializer.tsx

@@ -11,10 +11,13 @@ const WindowVariablesInitializer = () => {
   useEffect(() => {
     const loadScriptsAndInitialize = async () => {
       try {
-        // Beispielhafter Ladevorgang eines Skripts
+        const isDevelopment = window.location.hostname === "localhost";
-        await loadScript("/CPLmockData/SERVICE/de.js");
+        const scriptPath = isDevelopment
+          ? "/CPLmockData/SERVICE/de.js"
+          : "/CPL/SERVICE/de.js";
+
+        await loadScript(scriptPath);
 
-        // Zugriff auf window-Variablen nach dem Laden der Skripte
         const winDeState = window.win_de_state || [];
         const winDeLabel = window.win_de_label || [];
 
@@ -26,7 +29,6 @@ const WindowVariablesInitializer = () => {
           })
         );
 
-        // Dispatch der Aktion zum Setzen der Inputs
         dispatch(setInputs(initialInputs));
       } catch (error) {
         console.error(

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -3,13 +3,23 @@
 
 import React, { useEffect, useRef, useMemo } from "react";
 import { RootState } from "../../../../../../redux/store";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { AppDispatch } from "../../../../../../redux/store";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 import { getColor } from "../../../../../../utils/colors";
 import TDRChartActionBar from "./TDRChartActionBar";
+import { fetchAllTDRChartData } from "../../../../../../redux/thunks/fetchAllTDRChartThunk";
+import { fetchAllTDRReferenceChartThunk } from "../../../../../../redux/thunks/fetchAllTDRReferenceChartThunk";
 
 const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
+  const dispatch = useDispatch<AppDispatch>();
+
+  useEffect(() => {
+    dispatch(fetchAllTDRChartData());
+    dispatch(fetchAllTDRReferenceChartThunk());
+  }, [dispatch]);
+  //---------------------------------
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
@@ -179,6 +189,8 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
       }
     });
   }, [JSON.stringify(tdrChartData), selectedSlot, selectedChartType]);
+
+  
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
       <TDRChartActionBar />

components/main/kabelueberwachung/kue705FO/KueModal.tsx

@@ -2,7 +2,6 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { setVariables } from "../../../../redux/slices/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 import handleSave, { OriginalValues } from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.174";
+const webVersion = "1.6.175";
 export default webVersion;

hooks/einausgaenge/useDigitalInputsData.ts

@@ -10,7 +10,7 @@ export function useDigitalInputData() {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    const isDevelopment = process.env.NODE_ENV === "development";
+    const isDevelopment = window.location.hostname === "localhost";
     const script = document.createElement("script");
 
     script.src = isDevelopment

hooks/einausgaenge/useDigitalOutputsData.ts

@@ -19,17 +19,13 @@ export function useDigitalOutputs() {
   const isLoading = digitalOutputs.length === 0;
 
   useEffect(() => {
-    console.log("Lade da.js für digitale Ausgänge...");
+    const isDev = window.location.hostname === "localhost";
 
     const script = document.createElement("script");
-    script.src = "/CPLmockData/SERVICE/da.js";
+    script.src = isDev ? "/CPLmockData/SERVICE/da.js" : "/CPL/SERVICE/da.js";
     script.async = true;
 
     script.onload = () => {
-      console.log("Skript geladen. Überprüfe window-Variablen:");
-      console.log("win_da_state:", window.win_da_state);
-      console.log("win_da_bezeichnung:", window.win_da_bezeichnung);
-
       const da = window.win_da_state;
       const bezeichnungen = window.win_da_bezeichnung;
 
@@ -46,7 +42,6 @@ export function useDigitalOutputs() {
           })
         );
 
-        console.log("Dispatching setDigitalOutputs mit Werten:", outputs);
         dispatch(setDigitalOutputs(outputs));
       } else {
         console.error("Digitale Ausgänge konnten nicht geladen werden.", {

pages/_app.tsx

@@ -4,7 +4,7 @@
 import { useEffect, useState } from "react";
 import { Provider } from "react-redux";
 import store, { useAppDispatch } from "../redux/store";
-import { checkSession } from "../utils/checkSession";
+import { loadWindowVariables } from "../utils/loadWindowVariables";
 import Header from "../components/header/Header";
 import Navigation from "../components/navigation/Navigation";
 import Footer from "../components/footer/Footer";
@@ -23,16 +23,28 @@ function MyApp({ Component, pageProps }: AppProps) {
 function AppContent({ Component, pageProps }: AppProps) {
   const dispatch = useAppDispatch();
   const [sessionExpired, setSessionExpired] = useState(false);
+
   useEffect(() => {
-    const sessionChecker = async () => {
+    const loadAndStoreVariables = async () => {
-      const ok = await checkSession();
+      try {
-      setSessionExpired(!ok);
+        const variables = await loadWindowVariables();
+        if (!variables) throw new Error("Sitzungsfehler");
+
+        //console.log("✅ Window-Variablen geladen:", variables);
+
+        const { ...restVariables } = variables;
+
+        setSessionExpired(false);
+      } catch (error) {
+        console.error("❌ Fehler beim Laden der Sitzung:", error);
+        setSessionExpired(true);
+      }
     };
 
     if (typeof window !== "undefined") {
-      sessionChecker();
+      loadAndStoreVariables();
 
-      const intervalId = setInterval(sessionChecker, 10000);
+      const intervalId = setInterval(loadAndStoreVariables, 10000);
       return () => clearInterval(intervalId);
     }
   }, []);

pages/kabelueberwachung.tsx

@@ -5,10 +5,6 @@ import Kue705FO from "../components/main/kabelueberwachung/kue705FO/Kue705FO";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch } from "../redux/store"; // Adjust the path to your Redux store file
 import { RootState } from "../redux/store"; // Adjust the path to your Redux store file
-import { fetchAllTDRChartData } from "../redux/thunks/fetchAllTDRChartThunk";
-import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk";
-import { fetchLoopChartDataThunk } from "../redux/thunks/fetchLoopChartDataThunk";
-import { fetchAllTDMData } from "../redux/thunks/fetchAllTDMThunk";
 
 function Kabelueberwachung() {
   const dispatch: AppDispatch = useDispatch();
@@ -36,15 +32,8 @@ function Kabelueberwachung() {
   const tdrData = useSelector((state) => state.tdrChart.data);
   const loading = useSelector((state) => state.tdrChart.loading);
   const error = useSelector((state) => state.tdrChart.error);
+  //----------------------------------------------------------------
 
-  // Beim Laden der Seite TDR-Daten abrufen
-  useEffect(() => {
-    if (!tdrData || tdrData.length === 0) {
-      // console.log("TDR-Daten abrufen...");
-      dispatch(fetchAllTDRChartData());
-      dispatch(fetchAllTDRReferenceChartThunk());
-    }
-  }, [dispatch, tdrData]);
   //----------------------------------------------------------------
   // Alarmstatus basierend auf Redux-Variablen berechnen
   const updateAlarmStatus = () => {
@@ -122,35 +111,11 @@ function Kabelueberwachung() {
     error: loopError,
   } = useSelector((state: RootState) => state.loopChart);
 
-  // Daten für alle Kombinationen laden (z. B. Slot 1 als Beispiel)
-  useEffect(() => {
-    ["DIA0", "DIA1", "DIA2"].forEach((mode) => {
-      [3, 4].forEach((type) => {
-        dispatch(
-          fetchLoopChartDataThunk({
-            mode: mode as "DIA0" | "DIA1" | "DIA2",
-            type,
-            slotNumber: 1,
-            vonDatum: "2025-03-20",
-            bisDatum: "2025-03-23",
-          })
-        );
-      });
-    });
-  }, [dispatch]);
-
   // Zugriff z. B. auf Schleifenwiderstand von DIA1
   const dia1Schleifen = loopData["DIA1"]?.[4];
   const dia0Iso = loopData["DIA0"]?.[3];
 
   //------------------------------------------------------------
-  const tdmData = useSelector((state) => state.tdmChart.data);
-
-  useEffect(() => {
-    if (!tdmData || tdmData.length === 0) {
-      dispatch(fetchAllTDMData());
-    }
-  }, [dispatch, tdmData]);
 
   //----------------------------------------------------------------
   return (

services/fetchAllTDMData.ts

@@ -3,12 +3,12 @@
 export const fetchAllTDMDataFromServer = async (): Promise<any[]> => {
   if (typeof window === "undefined") return [];
 
-  const isDev = window.location.hostname === "localhost";
+  const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development";
 
   const slotRequests = Array.from({ length: 32 }, (_, i) => {
     const url = isDev
-      ? `/CPLmockData/TDM/slot${i}.json` // ✅ korrekt für DEV (Dateien im public-Ordner)
+      ? `/CPLmockData/TDM/slot${i}.json` // ✅ Entwicklung: aus public-Ordner
-      : `${window.location.origin}/CPL?Service/empty.acp&TDM=${i}`; // ✅ korrekt für PROD
+      : `${window.location.origin}/CPL?Service/empty.acp&TDM=${i}`; // ✅ Produktion
 
     return fetch(url)
       .then((res) => (res.ok ? res.json() : null))

services/fetchAllTDRChartData.ts

@@ -1,16 +1,12 @@
 // /services/fetchAllTDRChartData.ts
 
-const getTDRBasePath = () => {
+export const fetchAllTDRChartDataFromServer = async (): Promise<any[]> => {
-  if (typeof window !== "undefined") {
+  const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development";
-    return window.location.hostname === "localhost"
+
+  const basePath = isDev
     ? "/CPLmockData/LastTDR/jsonDatei"
     : "/CPL?/CPL/LastTDR";
-  }
-  return "";
-};
 
-export const fetchAllTDRChartDataFromServer = async (): Promise<any[]> => {
-  const basePath = getTDRBasePath();
   const fileNames = Array.from({ length: 32 }, (_, i) => `slot${i}.json`);
 
   const fetchPromises = fileNames.map(async (fileName) => {
@@ -20,7 +16,7 @@ export const fetchAllTDRChartDataFromServer = async (): Promise<any[]> => {
         throw new Error(`Fehler bei ${fileName}: ${response.statusText}`);
       return await response.json();
     } catch (error) {
-      console.error(`Fehler beim Laden von ${fileName}:`, error);
+      console.error(`❌ Fehler beim Laden von ${fileName}:`, error);
       return null;
     }
   });

services/fetchAllTDRReferenceChartData.ts

@@ -2,7 +2,8 @@
 
 const getTDRReferenceBasePath = () => {
   if (typeof window !== "undefined") {
-    return window.location.hostname === "localhost"
+    const env = process.env.NEXT_PUBLIC_NODE_ENV;
+    return env === "development"
       ? "/CPLMockData/tdr-reference-curves"
       : "/CPL?/CPL/tdr-reference-curves";
   }

services/fetchAnalogeEingaenge.ts

@@ -1,42 +1,50 @@
-// ✅ Service: /services/fetchAnalogeEingaenge.ts
+// services/fetchAnalogeEingaenge.ts
 
-export const fetchAnalogeEingaenge = async () => {
+export const fetchAnalogeEingaenge = async (): Promise<Record<
+  string,
+  any
+> | null> => {
   try {
     if (typeof window === "undefined") return null;
 
-    // ✅ Pfad je nach Umgebung
+    // Umgebungserkennung: localhost = Entwicklung, alles andere = Produktion
-    const scriptSrc =
+    const isDevelopment = process.env.NEXT_PUBLIC_NODE_ENV === "development";
-      process.env.NODE_ENV === "production"
-        ? "/CPL?/CPL/SERVICE/ae.js"
-        : "/CPLmockData/SERVICE/ae.js";
 
+    // Skriptpfad abhängig von der Umgebung
+    const scriptSrc = isDevelopment
+      ? "/CPLmockData/SERVICE/ae.js"
+      : "/CPL?/CPL/SERVICE/ae.js";
+
+    // Skript dynamisch laden
     await new Promise<void>((resolve, reject) => {
       const script = document.createElement("script");
       script.src = scriptSrc;
       script.async = true;
       script.onload = () => resolve();
-      script.onerror = () => reject("❌ Fehler beim Laden von ae.js");
+      script.onerror = () => reject(`❌ Fehler beim Laden von ${scriptSrc}`);
       document.body.appendChild(script);
     });
 
-    const formattedData: Record<string, any> = {};
+    // Analoge Eingänge parsen (1 bis 8)
+    const result: Record<string, any> = {};
     for (let i = 1; i <= 8; i++) {
       const varName = `win_analogeEingaenge${i}`;
-      const raw = (window as any)[varName];
+      const data = (window as any)[varName];
-      if (raw && Array.isArray(raw)) {
+
-        formattedData[varName] = {
+      if (Array.isArray(data)) {
-          id: raw[0],
+        result[varName] = {
-          value: raw[1],
+          id: data[0],
-          name: raw[2],
+          value: data[1],
-          uW: raw[3] === 1,
+          name: data[2],
-          uG: raw[4] === 1,
+          untererWarnwert: data[3] === 1,
-          oW: raw[5] === 1,
+          untererGrenzwert: data[4] === 1,
-          oG: raw[6] === 1,
+          obererWarnwert: data[5] === 1,
+          obererGrenzwert: data[6] === 1,
         };
       }
     }
 
-    return formattedData;
+    return result;
   } catch (error) {
     console.error("❌ Fehler beim Laden der analogen Eingänge:", error);
     return null;

services/fetchDigitalOutputs.ts

@@ -5,7 +5,7 @@ export const fetchDigitalOutputs = async () => {
 
   // ✅ da.js nur bei Bedarf nachladen (Pfad abhängig von Umgebung)
   const scriptSrc =
-    process.env.NODE_ENV === "production"
+    process.env.NEXT_PUBLIC_NODE_ENV === "production"
       ? "/CPL?/CPL/SERVICE/da.js"
       : "/CPLmockData/SERVICE/da.js";
 

services/fetchDigitaleEingaenge.ts

@@ -6,7 +6,7 @@ export const fetchDigitaleEingaenge = async () => {
 
     // ✅ de.js nur bei Bedarf nachladen (Pfad abhängig von Umgebung)
     const scriptSrc =
-      process.env.NODE_ENV === "production"
+      process.env.NEXT_PUBLIC_NODE_ENV === "production"
         ? "/CPL?/CPL/SERVICE/de.js"
         : "/CPLmockData/SERVICE/de.js";
 

services/fetchKueData.ts

@@ -1,13 +1,21 @@
 // ✅ Service: /services/fetchKueData.ts
 
+const devScriptPath = "/CPLmockData/SERVICE/kueData.js";
+const prodScriptPath = "/CPL?/CPL/SERVICE/kueData.js";
+
 export const fetchKueData = async () => {
   try {
     if (typeof window === "undefined") return null;
 
+    const scriptPath =
+      process.env.NEXT_PUBLIC_NODE_ENV === "production"
+        ? prodScriptPath
+        : devScriptPath;
+
     // ✅ Nur bei Bedarf nachladen
     await new Promise<void>((resolve, reject) => {
       const script = document.createElement("script");
-      script.src = "/CPLmockData/SERVICE/kueData.js"; // In Produktion ggf. /CPL/SERVICE/kueData.js
+      script.src = scriptPath;
       script.async = true;
       script.onload = () => resolve();
       script.onerror = () => reject("❌ Fehler beim Laden von kueData.js");
@@ -42,7 +50,7 @@ export const fetchKueData = async () => {
       tdrLocation: win.win_tdrLocation || [],
       tdrActive: win.win_tdrActive || [],
       tdrLast: win.win_tdrLast || [],
-      tdrOverflow: win.win_kueOverflow || [],
+      tdrOverflow: win.win_kueOverflow || [], // ggf. abgleichen, ob tdrOverflow separat existiert
     };
   } catch (error) {
     console.error("❌ Fehler beim Laden der KÜE-Daten:", error);

services/fetchLast20Messages.ts

@@ -7,7 +7,7 @@ export const fetchLast20MessagesFromWindow = async (): Promise<
 
   // ✅ Start.js nur bei Bedarf nachladen (Pfad abhängig von Umgebung)
   const scriptSrc =
-    process.env.NODE_ENV === "production"
+    process.env.NEXT_PUBLIC_NODE_ENV === "production"
       ? "/CPL?/CPL/SERVICE/Start.js"
       : "/CPLmockData/SERVICE/Start.js";
 

services/fetchLoopChartData.ts

@@ -22,7 +22,7 @@ const getApiUrl = (
       ? "schleifenwiderstand"
       : "unbekannterTyp";
 
-  return process.env.NODE_ENV === "development"
+  return process.env.NEXT_PUBLIC_NODE_ENV === "development"
     ? `/CPLmockData/kuesChartData/slot${slotNumber}/${typeFolder}/${mode}.json`
     : `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
         vonDatum

services/fetchOpcUaSettings.ts

@@ -6,7 +6,7 @@ export const fetchOpcUaSettings = async () => {
 
     // ✅ opcua.js nur bei Bedarf nachladen (Pfad abhängig von Umgebung)
     const scriptSrc =
-      process.env.NODE_ENV === "production"
+      process.env.NEXT_PUBLIC_NODE_ENV === "production"
         ? "/CPL?/CPL/SERVICE/opcua.js"
         : "/CPLmockData/SERVICE/opcua.js";
 

services/fetchSystemSettings.ts

@@ -1,15 +1,20 @@
 // /services/fetchSystemSettings.ts
-
 export const fetchSystemSettings = async () => {
   try {
     if (typeof window === "undefined") return null;
 
+    const isDev = process.env.NODE_ENV === "development";
+    const scriptSrc =
+      process.env.NEXT_PUBLIC_NODE_ENV === "development"
+        ? "/CPLmockData/SERVICE/system.js"
+        : "/CPL?/CPL/SERVICE/system.js";
+
     await new Promise<void>((resolve, reject) => {
       const script = document.createElement("script");
-      script.src = "/CPLmockData/SERVICE/System.js"; // ggf. anpassen
+      script.src = scriptSrc;
       script.async = true;
       script.onload = () => resolve();
-      script.onerror = () => reject("❌ Fehler beim Laden von System.js");
+      script.onerror = () => reject("❌ Fehler beim Laden von system.js");
       document.body.appendChild(script);
     });
 
@@ -40,7 +45,7 @@ export const fetchSystemSettings = async () => {
       ntp3: win_ntp3,
       ntpTimezone: win_ntpTimezone,
       ntpActive: win_ntpActive === "1",
-      appVersion: win_appVersion, // ✅ jetzt korrekt
+      appVersion: win_appVersion,
     };
   } catch (error) {
     console.error("❌ Fehler beim Laden der Systemdaten:", error);

services/fetchTDRChartDataById.ts

@@ -3,7 +3,7 @@
 export const fetchTDRChartDataById = async (
   id: number
 ): Promise<any[] | null> => {
-  const isDev = process.env.NODE_ENV === "development";
+  const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development";
 
   const url = isDev
     ? `http://localhost:3000/CPLmockData/Last100TDR/kue_01/id/${id}.json`

utils/loadWindowVariables.ts

@@ -0,0 +1,63 @@
+// /utils/loadWindowVariables.ts
+
+// ✅ Interface für `window`-Objekt zur TypeScript-Sicherheit
+interface CustomWindow extends Window {
+  [key: string]: any;
+}
+
+// ✅ Hauptfunktion zum Laden von `window`-Variablen
+export async function loadWindowVariables(): Promise<Record<string, any>> {
+  return new Promise((resolve, reject) => {
+    const requiredVars: string[] = [
+      "win_kueID", // z. B. für die Anzeige der Modulnamen
+      "win_deviceName", // z. B. für die Kopfzeile/Übersicht
+      "win_de_state",
+      "win_de_label",
+    ];
+
+    const scripts: string[] = ["system.js"];
+
+    // ✅ Erkenne Umgebung anhand von `window.location.hostname`
+    const isDev = window.location.hostname === "localhost";
+
+    const loadScript = (src: string): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = isDev
+          ? `/CPLmockData/SERVICE/${src}` // Entwicklungsumgebung
+          : `/CPL?/CPL/SERVICE/${src}`; // Produktionsumgebung
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error(`Script load error: ${src}`));
+        document.head.appendChild(script);
+      });
+    };
+
+    // ✅ Lade alle Skripte nacheinander
+    scripts
+      .reduce(
+        (promise, script) => promise.then(() => loadScript(script)),
+        Promise.resolve()
+      )
+      .then(() => {
+        const win = window as unknown as CustomWindow;
+
+        // ✅ Erstelle ein Objekt mit allen geladenen Variablen
+        const variablesObj: Record<string, any> = requiredVars.reduce(
+          (acc, variable) => {
+            if (win[variable] !== undefined) {
+              acc[variable.replace("win_", "")] = win[variable];
+            }
+            return acc;
+          },
+          {}
+        );
+
+        resolve(variablesObj);
+      })
+      .catch((error) => {
+        console.error("❌ Fehler beim Laden eines Skripts:", error);
+        reject(error);
+      });
+  });
+}