feat: Meldung für Events darstellen (Kalibrierung, TDR ud Schleifenmessung)

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.705
+NEXT_PUBLIC_APP_VERSION=1.6.706
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.705
+NEXT_PUBLIC_APP_VERSION=1.6.706
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.706] – 2025-08-13
+
+- Events Schleifenmessung, TDR-Messung und Abgleich in public/CPL/kueData.js eingefügt um später zu lesen und entsprechend  ' Bitte Warten' Meldung zu erstellen für den User
+
+---
 ## [1.6.705] – 2025-08-13
 
 - Daten von  CPL bekommen DIA0- DIA2 ISO und RSL

components/common/DeviceEventsBridge.tsx

@@ -0,0 +1,55 @@
+"use client";
+import React from "react";
+import { useAppDispatch } from "@/redux/store";
+import { setEvents } from "@/redux/slices/deviceEventsSlice";
+
+declare global {
+  interface Window {
+    loopMeasurementEvent?: number[];
+    tdrMeasurementEvent?: number[];
+    alignmentEvent?: number[];
+  }
+}
+
+const POLL_MS = 2000; // poll every 2 seconds
+
+export default function DeviceEventsBridge() {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    let lastSig = "";
+    const readAndDispatch = () => {
+      const ksx = Array.isArray(window.loopMeasurementEvent)
+        ? window.loopMeasurementEvent
+        : undefined;
+      const ksy = Array.isArray(window.tdrMeasurementEvent)
+        ? window.tdrMeasurementEvent
+        : undefined;
+      const ksz = Array.isArray(window.alignmentEvent)
+        ? window.alignmentEvent
+        : undefined;
+      // Build a stable signature of first 32 values per array
+      const to32 = (a?: number[]) => {
+        const out: number[] = [];
+        if (Array.isArray(a)) {
+          for (let i = 0; i < 32; i++) out.push(a[i] ? 1 : 0);
+        } else {
+          for (let i = 0; i < 32; i++) out.push(0);
+        }
+        return out;
+      };
+      const sig = `${to32(ksx).join("")}|${to32(ksy).join("")}|${to32(ksz).join(
+        ""
+      )}`;
+      if (sig !== lastSig) {
+        lastSig = sig;
+        dispatch(setEvents({ ksx, ksy, ksz }));
+      }
+    };
+    readAndDispatch();
+    const id = setInterval(readAndDispatch, POLL_MS);
+    return () => clearInterval(id);
+  }, [dispatch]);
+
+  return null;
+}

components/common/GlobalActivityOverlay.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import { useAppSelector } from "@/redux/store";
+
+export default function GlobalActivityOverlay() {
+  const anyLoop = useAppSelector((s) => s.deviceEvents.anyLoopActive);
+  const anyTdr = useAppSelector((s) => s.deviceEvents.anyTdrActive);
+  const anyAlign = useAppSelector((s) => s.deviceEvents.anyAlignmentActive);
+
+  const active = anyLoop || anyTdr || anyAlign;
+  if (!active) return null;
+
+  const messages: string[] = [];
+  if (anyLoop) messages.push("Schleifenmessung läuft…");
+  if (anyTdr) messages.push("TDR-Messung läuft…");
+  if (anyAlign) messages.push("Abgleich läuft…");
+
+  return (
+    <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-white/70 backdrop-blur-sm">
+      <div className="p-4 rounded-md shadow bg-white border border-gray-200">
+        <div className="font-semibold mb-2">Bitte warten…</div>
+        <div className="text-sm text-gray-700">{messages.join(" · ")}</div>
+      </div>
+    </div>
+  );
+}

mocks/device-cgi-simulator/SERVICE/kabelueberwachungMockData.js

@@ -257,3 +257,19 @@ var win_fallSensors = [
   { id: "KVZ3", status: 1 },
   { id: "KVZ4", status: 1 },
 ];
+
+// Event Schleifenmessung KSX
+var loopMeasurementEvent = [
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0,
+];
+//Event TDR-Messung
+var tdrMeasurementEvent = [
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0,
+];
+//Event Abgleich
+var alignmentEvent = [
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0,
+];

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.705",
+  "version": "1.6.706",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.705",
+      "version": "1.6.706",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.705",
+  "version": "1.6.706",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/_app.tsx

@@ -11,6 +11,9 @@ import Header from "@/components/header/Header";
 import Navigation from "@/components/navigation/Navigation";
 import Footer from "@/components/footer/Footer";
 import { store } from "@/redux/store";
+import Script from "next/script";
+import DeviceEventsBridge from "@/components/common/DeviceEventsBridge";
+import GlobalActivityOverlay from "@/components/common/GlobalActivityOverlay";
 
 // Thunks importieren
 import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
@@ -40,7 +43,18 @@ import "@/styles/globals.css";
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Provider store={store}>
+      {/* Load global data: dev -> API mock JS; prod -> real device JS from public */}
+      {process.env.NODE_ENV === "development" ? (
+        <Script
+          src="/api/cpl/kabelueberwachungAPIHandler"
+          strategy="afterInteractive"
+        />
+      ) : (
+        <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
+      )}
       <AppContent Component={Component} pageProps={pageProps} />
+      {/* Bridge window events -> Redux (works across all pages) */}
+      <DeviceEventsBridge />
     </Provider>
   );
 }
@@ -146,6 +160,7 @@ function AppContent({
           )}
           <Component {...pageProps} />
           <ToastContainer position="top-right" autoClose={3000} />
+          <GlobalActivityOverlay />
         </main>
       </div>
       <Footer />

pages/api/cpl/kabelueberwachungAPIHandler.ts

@@ -18,6 +18,9 @@ export default async function handler(
 
   try {
     const data = await fs.readFile(filePath, "utf-8");
+    res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+    // Prevent caching during development
+    res.setHeader("Cache-Control", "no-store, max-age=0");
     res.status(200).send(data);
   } catch (error) {
     console.error(

public/CPL/SERVICE/kueData.js

@@ -32,11 +32,11 @@ var win_tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>]; //Verstärkung der
 var win_tdrLast=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>];//Zeitpunkt der letzten TDR Messung
 var win_tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>];//Entfernung Bruchstelle Einheit Meter
 // Event Schleifenmessung KSX 
-var loopMeasurementEvent=[<%=KSX80%>, <%=KSX81%>, <%=KSX82%>, <%=KSX83%>];//Wiederholungsrate der Messung
+var loopMeasurementEvent=[<%=KSX80%>, <%=KSX81%>, <%=KSX82%>, <%=KSX83%>];
 //Event TDR-Messung
-var tdrMeasurementEvent=[<%=KSY80%>, <%=KSY81%>, <%=KSY82%>, <%=KSY83%>];//Wiederholungsrate der Messung
+var tdrMeasurementEvent=[<%=KSY80%>, <%=KSY81%>, <%=KSY82%>, <%=KSY83%>];
 //Event Abgleich
-var alignmentEvent=[<%=KSZ80%>, <%=KSZ81%>, <%=KSZ82%>, <%=KSZ83%>];//Wiederholungsrate der Messung
+var alignmentEvent=[<%=KSZ80%>, <%=KSZ81%>, <%=KSZ82%>, <%=KSZ83%>];
 
 //---------------------------------------------------
 

redux/slices/deviceEventsSlice.ts

@@ -0,0 +1,58 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface DeviceEventsState {
+  ksx: number[]; // 32 Slots: Schleifenmessung aktiv
+  ksy: number[]; // 32 Slots: TDR-Messung aktiv
+  ksz: number[]; // 32 Slots: Abgleich aktiv
+  anyLoopActive: boolean;
+  anyTdrActive: boolean;
+  anyAlignmentActive: boolean;
+}
+
+const ZERO32 = Array.from({ length: 32 }, () => 0);
+
+const initialState: DeviceEventsState = {
+  ksx: ZERO32.slice(),
+  ksy: ZERO32.slice(),
+  ksz: ZERO32.slice(),
+  anyLoopActive: false,
+  anyTdrActive: false,
+  anyAlignmentActive: false,
+};
+
+export const deviceEventsSlice = createSlice({
+  name: "deviceEvents",
+  initialState,
+  reducers: {
+    setEvents(
+      state,
+      action: PayloadAction<{ ksx?: number[]; ksy?: number[]; ksz?: number[] }>
+    ) {
+      const to32 = (arr?: number[]) => {
+        if (!Array.isArray(arr)) return ZERO32.slice();
+        const a = arr
+          .slice(0, 32)
+          .map((v) => (typeof v === "number" && v ? 1 : 0));
+        while (a.length < 32) a.push(0);
+        return a;
+      };
+      state.ksx = to32(action.payload.ksx);
+      state.ksy = to32(action.payload.ksy);
+      state.ksz = to32(action.payload.ksz);
+      state.anyLoopActive = state.ksx.some((v) => v === 1);
+      state.anyTdrActive = state.ksy.some((v) => v === 1);
+      state.anyAlignmentActive = state.ksz.some((v) => v === 1);
+    },
+    resetEvents(state) {
+      state.ksx = ZERO32.slice();
+      state.ksy = ZERO32.slice();
+      state.ksz = ZERO32.slice();
+      state.anyLoopActive = false;
+      state.anyTdrActive = false;
+      state.anyAlignmentActive = false;
+    },
+  },
+});
+
+export const { setEvents, resetEvents } = deviceEventsSlice.actions;
+export default deviceEventsSlice.reducer;

redux/store.ts

@@ -39,6 +39,7 @@ import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
 import systemChartReducer from "./slices/systemChartSlice";
 import analogInputsUiReducer from "./slices/analogInputs/analogInputsUiSlice";
 import dateRangePickerReducer from "./slices/dateRangePickerSlice";
+import deviceEventsReducer from "./slices/deviceEventsSlice";
 
 const rootReducer = combineReducers({
   systemspannung5Vplus: systemspannung5VplusReducer,
@@ -78,6 +79,7 @@ const rootReducer = combineReducers({
   selectedAnalogInput: selectedAnalogInputReducer,
   analogInputsUi: analogInputsUiReducer,
   dateRangePicker: dateRangePickerReducer,
+  deviceEvents: deviceEventsReducer,
 });
 // ⬆️ Alle deine Imports und combineReducers bleiben so wie du sie geschrieben hast ...