feat: Benachrichtigung hinzugefügt, wenn Sitzung abgelaufen ist oder Verbindung unterbrochen wurde

- Zustand `sessionExpired` im `_app.js` hinzugefügt, um den Ablauf der Sitzung oder Verbindungsprobleme zu überwachen.
- Intervall in `loadWindowVariables` angepasst, um die Verbindung alle 10 Sekunden zu überprüfen.
- Warnmeldung angezeigt, wenn die Sitzung abgelaufen ist oder die Verbindung unterbrochen wurde.
- Benutzer wird informiert, wenn eine erneute Anmeldung oder ein Neuladen der Seite erforderlich ist.

components/modales/KueModal.jsx

@@ -1,10 +1,12 @@
 "use client"; // components/modales/KueModal.jsx
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { updateValues } from "../../store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
+  const dispatch = useDispatch();
   const [ids, setIds] = useState(Array(32).fill("---"));
   const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
   const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
@@ -114,23 +116,25 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
             alert("Daten erfolgreich gespeichert!");
             onModulNameChange(ids[slot]);
 
-            // Aktualisieren der originalValues und lokalen State-Werte nach dem Speichern
+            // Aktualisiere Redux-Store mit neuen Werten
-            setOriginalValues({
+            dispatch(
-              ids: [...ids],
+              updateValues({
-              bezeichnungen: [...bezeichnungen],
+                ids: [...ids],
-              isolationsgrenzwerte: [...isolationsgrenzwerte],
+                bezeichnungen: [...bezeichnungen],
-              verzoegerung: [...verzoegerung],
+                isolationsgrenzwerte: [...isolationsgrenzwerte],
-              untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+                verzoegerung: [...verzoegerung],
-              obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+                untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
-              schleifenintervall: [...schleifenintervall],
+                obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
-            });
+                schleifenintervall: [...schleifenintervall],
+              })
+            );
           } else {
             alert("Fehler beim Speichern der Daten!");
           }
         })
         .catch((error) => {
           console.error("Fehler:", error);
-          alert("Fehler beim Senden der Daten!");
+          //alert("Fehler beim Senden der Daten!");
         });
     } else {
       alert("Keine Änderungen vorgenommen.");

pages/_app.js

@@ -1,5 +1,5 @@
 // _app.js
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { loadWindowVariables } from "../utils/loadWindowVariables";
 import Header from "../components/Header";
 import Navigation from "../components/Navigation";
@@ -10,19 +10,28 @@ import { setVariables } from "../store/variablesSlice";
 import store from "../store/store";
 
 function MyApp({ Component, pageProps }) {
+  const [sessionExpired, setSessionExpired] = useState(false);
+
   useEffect(() => {
     const loadAndStoreVariables = async () => {
-      const variables = await loadWindowVariables();
+      try {
-      store.dispatch(setVariables(variables));
+        const variables = await loadWindowVariables();
+        if (!variables) throw new Error("Sitzungsfehler"); // Fehler werfen, wenn keine Variablen geladen werden
+        store.dispatch(setVariables(variables));
+        setSessionExpired(false); // Sitzung ist aktiv
+      } catch (error) {
+        console.error("Fehler beim Laden der Sitzung:", error);
+        setSessionExpired(true); // Sitzung ist abgelaufen oder fehlgeschlagen
+      }
     };
 
     if (typeof window !== "undefined") {
-      loadAndStoreVariables(); // Initial load
+      loadAndStoreVariables(); // Initiales Laden
 
-      // Interval for updating the Redux store every 10 seconds
+      // Intervall zum Aktualisieren des Redux-Stores alle 10 Sekunden
       const intervalId = setInterval(loadAndStoreVariables, 10000);
 
-      // Cleanup interval when component unmounts
+      // Bereinigen des Intervalls, wenn die Komponente unmountet wird
       return () => clearInterval(intervalId);
     }
   }, []);
@@ -34,6 +43,12 @@ function MyApp({ Component, pageProps }) {
         <div className="flex flex-grow w-full">
           <Navigation className="w-1/5" />
           <main className="flex-1 p-4">
+            {sessionExpired && (
+              <div className="bg-red-500 text-white p-4 text-center">
+                Ihre Sitzung ist abgelaufen oder die Verbindung ist
+                unterbrochen. Bitte laden Sie die Seite neu.
+              </div>
+            )}
             <Component {...pageProps} />
           </main>
         </div>

store/variablesSlice.js

@@ -60,5 +60,6 @@ const variablesSlice = createSlice({
   },
 });
 
-export const { setVariable, setVariables } = variablesSlice.actions;
+export const { setVariable, setVariables, updateValues } =
+  variablesSlice.actions;
 export default variablesSlice.reducer;