feat: Integration von IndexedDB zur Verwaltung von Dashboard-Daten

- Werte wie IP, Subnetz, Gateway, letzte 20 Meldungen und kueVersion aus IndexedDB geladen und im Dashboard angezeigt
- Direktzugriff auf IndexedDB-Variable `getFromIndexedDB` implementiert, um Produktions-Importprobleme zu vermeiden
- State-Handling und Lade-Intervall hinzugefügt, um Daten alle 10 Sekunden zu aktualisieren
- Ersetzt window-basierte Variablen durch Daten aus IndexedDB für eine robustere und skalierbare Datenverwaltung

pages/dashboard.js

@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import { loadWindowVariables } from "../utils/loadWindowVariables";
 import CPLStatus from "../components/modulesStatus/CPLStatus";
 import Access1Status from "../components/modulesStatus/Access1Status";
 import Access2Status from "../components/modulesStatus/Access2Status";
@@ -16,6 +15,7 @@ import { Icon } from "@iconify/react";
 function Dashboard() {
   const [last20Messages, setLast20Messages] = useState([]);
   const [kueOnline, setkueOnline] = useState([]);
+  const [kueVersion, setKueVersion] = useState([]);
   const [ip, setIp] = useState("");
   const [subnet, setSubnet] = useState("");
   const [gateway, setGateway] = useState("");
@@ -40,51 +40,63 @@ function Dashboard() {
       row.substring(row.length - 1),
     ]);
   };
-
+  //------------------------------------------------------------------
+  //---------  Direkte Implementierung von `getFromIndexedDB` , um Importprobleme zu vermeiden in Produktionsumgebung -----
+  async function getFromIndexedDB(key) {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open("CPLDatabase", 1);
+      request.onsuccess = () => {
+        const db = request.result;
+        const transaction = db.transaction("cplVariables", "readonly");
+        const store = transaction.objectStore("cplVariables");
+        const getRequest = store.get(key);
+        getRequest.onsuccess = () => resolve(getRequest.result);
+        getRequest.onerror = () => reject(getRequest.error);
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+  //------------------------------------------------------------------
   useEffect(() => {
     const loadDataOnce = async () => {
       try {
-        await loadWindowVariables();
+        // Daten aus IndexedDB laden
+        const last20MessagesData = await getFromIndexedDB("last20Messages");
+        const ipData = await getFromIndexedDB("ip");
+        const subnetData = await getFromIndexedDB("subnet");
+        const gatewayData = await getFromIndexedDB("gateway");
+        const appVersionData = await getFromIndexedDB("appVersion");
+        const kueCableBreakData = await getFromIndexedDB("kueCableBreak");
+        const kueOnlineData = await getFromIndexedDB("kueOnline");
+        const kueVersionData = await getFromIndexedDB("kueVersion");
 
-        // Werte direkt aus `window` zuweisen
+        // Setze die States mit den geladenen Daten
-        setLast20Messages(parseMessages(window.last20Messages || ""));
+        setLast20Messages(parseMessages(last20MessagesData || ""));
-        setIp(window.ip || "");
+        setIp(ipData || "");
-        setSubnet(window.subnet || "");
+        setSubnet(subnetData || "");
-        setGateway(window.gateway || "");
+        setGateway(gatewayData || "");
-        setAppVersion(window.appVersion || "");
+        setAppVersion(appVersionData || "");
-
+        setKueCableBreak(
-        // Verarbeite `kueCableBreak` und `kueOnline`
+          Array.isArray(kueCableBreakData) ? kueCableBreakData.map(Number) : []
-        const cableBreakArray = Array.isArray(window.kueCableBreak)
+        );
-          ? window.kueCableBreak.map((value, index) =>
+        setkueOnline(
-              window.kueOnline[index] === 1 ? Number(value) : 0
+          Array.isArray(kueOnlineData) ? kueOnlineData.map(Number) : []
-            )
+        );
-          : (window.kueCableBreak || "")
+        setKueVersion(Array.isArray(kueVersionData) ? kueVersionData : []);
-              .split(",")
-              .map((value, index) =>
-                window.kueOnline[index] === 1 ? Number(value) : 0
-              );
-        setKueCableBreak(cableBreakArray);
-
-        const onlineArray = Array.isArray(window.kueOnline)
-          ? window.kueOnline.map(Number)
-          : [];
-        setkueOnline(onlineArray);
         setLoading(false);
       } catch (error) {
-        console.error("Fehler beim Laden der Daten:", error);
+        console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
         setError(error);
         setLoading(false);
       }
     };
 
-    // Sofortiges Laden der Daten einmalig
     loadDataOnce();
 
-    // Starten des Intervalls für regelmäßige Updates
     const intervalId = setInterval(loadDataOnce, 10000);
-    return () => clearInterval(intervalId); // Bereinigung des Intervalls bei Komponente unmount
+    return () => clearInterval(intervalId);
   }, []);
-
+  //------------------------------------------------------------------
   const handleModuleClick = (rackNumber) => {
     router.push(`/kabelueberwachung?rack=${rackNumber}`);
   };
@@ -102,9 +114,7 @@ function Dashboard() {
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
               const isSlotOnline = kueOnline[slotNumber - 1] === 1;
-              const moduleVersion = window.kueVersion
+              const moduleVersion = kueVersion[slotNumber - 1] || version; // Verwende kueVersion
-                ? window.kueVersion[slotNumber - 1]
-                : version;
 
               return (
                 <div