Header,Footer und dashboard bekommen Daten von IndexedDB statt von Window Objekt

components/Footer.jsx

@@ -1,14 +1,7 @@
-"use client"; // Wichtig, um sicherzustellen, dass der Code nur auf dem Client ausgeführt wird
+"use client"; // app/Footer.jsx
 import React, { useEffect, useState, useRef } from "react";
 import { Icon } from "@iconify/react";
-
-// indexDB-Funktionen nur im Browser importieren
-let storePDF, getPDF;
-if (typeof window !== "undefined") {
-  const indexedDBModule = require("../utils/indexedDB");
-  storePDF = indexedDBModule.storePDF;
-  getPDF = indexedDBModule.getPDF;
-}
+import { storePDF, getPDF } from "../utils/indexedDB"; // Korrekte Importe für die PDF-Funktionen
 
 function Footer() {
   const [pdfName, setPdfName] = useState("");
@@ -35,7 +28,6 @@ function Footer() {
   ];
 
   useEffect(() => {
-    if (typeof window !== "undefined" && getPDF && storePDF) {
     async function loadAndStorePDFs() {
       try {
         for (const fileName of pdfFiles) {
@@ -52,12 +44,12 @@ function Footer() {
       }
     }
 
+    if (typeof window !== "undefined") {
       loadAndStorePDFs();
     }
-  }, [getPDF, storePDF]);
+  }, []);
 
   const loadPDF = async (fileName) => {
-    if (typeof window !== "undefined" && getPDF) {
     const storedPdf = await getPDF(fileName);
     if (storedPdf) {
       const pdfUrl = URL.createObjectURL(storedPdf);
@@ -67,7 +59,6 @@ function Footer() {
     } else {
       console.error("PDF nicht in IndexedDB gefunden");
     }
-    }
   };
 
   // Close slider when clicking outside

components/Header.jsx

@@ -1,9 +1,9 @@
-"use client"; // components/header.jsx
+"use client"; // components/Header.jsx
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SettingsModal from "./modales/SettingsModal";
-//import { getFromIndexedDB } from "../utils/indexedDB";
+import { getFromIndexedDB, initializeDatabase } from "../utils/indexedDB"; // Importiere initializeDatabase
 
 function Header() {
   const [stationsname, setStationsname] = useState("Lädt...");
@@ -13,43 +13,26 @@ function Header() {
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
-  //------------------------------------------------------------------
-  //---------  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 loadData = async () => {
       try {
-        //console.log("Lade Daten aus IndexedDB...");
-
+        // Versuche die Daten zu laden
         const deviceName = await getFromIndexedDB("deviceName");
-        //console.log("DeviceName geladen:", deviceName); // Sollte den geladenen Wert zeigen
-
         const hardwareVersion = await getFromIndexedDB("kueVersion");
-        //console.log("HardwareVersion geladen:", hardwareVersion); // Sollte den geladenen Wert zeigen
 
         setStationsname(deviceName || "Unbekannt");
         setCplStatus(hardwareVersion || "Unbekannt");
       } catch (error) {
         console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
+
+        // Initialisiere die Datenbankstruktur, falls sie fehlt
+        await initializeDatabase();
       }
     };
 
     loadData();
-
     const interval = setInterval(() => {
       loadData();
     }, 5000);

pages/_app.js

@@ -9,10 +9,19 @@ import "../styles/globals.css";
 function MyApp({ Component, pageProps }) {
   useEffect(() => {
     if (typeof window !== "undefined") {
+      const initializeDatabase = async () => {
+        try {
+          await loadWindowVariables();
+          console.log("IndexedDB initialisiert.");
+        } catch (error) {
+          console.error("Fehler bei der Initialisierung der IndexedDB:", error);
+        }
+      };
+
+      initializeDatabase();
       setInterval(() => {
         loadWindowVariables();
       }, 10000);
-      loadWindowVariables();
     }
   }, []);
 

utils/indexedDB.js

@@ -1,9 +1,9 @@
-import { openDB } from "idb"; // utils/indexedDB.js
+import { openDB, deleteDB } from "idb";
 
-// Überprüfe, ob `window` verfügbar ist, um zu bestimmen, ob der Code im Browser läuft
-const dbPromise =
-  typeof window !== "undefined"
-    ? openDB("my-pdf-store", 2, {
+// Exportiere die Funktion initializeDatabase
+export async function initializeDatabase() {
+  try {
+    const db = await openDB("CPLDatabase", 1, {
       upgrade(db) {
         if (!db.objectStoreNames.contains("pdfs")) {
           db.createObjectStore("pdfs");
@@ -15,51 +15,35 @@ const dbPromise =
           db.createObjectStore("cplVariables");
         }
       },
-      })
-    : null;
-
-// Store PDF
-export async function storePDF(name, file) {
-  if (!dbPromise) return;
-  const db = await dbPromise;
-  await db.put("pdfs", file, name);
-}
-
-export async function getPDF(name) {
-  if (!dbPromise) return null;
-  const db = await dbPromise;
-  return await db.get("pdfs", name);
-}
-
-// Store page
-export async function storePage(name, file) {
-  if (!dbPromise) return;
-  const db = await dbPromise;
-  const transaction = db.transaction("pages", "readwrite");
-  const store = transaction.objectStore("pages");
-  await store.put(file, name);
-  await transaction.done;
-}
-
-export async function getPage(name) {
-  if (!dbPromise) return null;
-  const db = await dbPromise;
-  return await db.get("pages", name);
-}
-
-// Store and retrieve data for CPL variables
-
-export async function storeCPLVariable(key, value) {
-  if (!dbPromise) return;
-  const db = await dbPromise;
-  const transaction = db.transaction("cplVariables", "readwrite");
-  const store = transaction.objectStore("cplVariables");
-  await store.put(value, key);
-  await transaction.done;
+    });
+    return db;
+  } catch (error) {
+    if (error.name === "VersionError") {
+      console.warn(
+        "Versionskonflikt erkannt. Lösche und erstelle die Datenbank neu."
+      );
+      await deleteDB("CPLDatabase");
+      return initializeDatabase();
+    } else {
+      console.error("Fehler beim Öffnen der Datenbank:", error);
+      throw error;
+    }
+  }
 }
 
+// Exportiere die Funktion getFromIndexedDB
 export async function getFromIndexedDB(key) {
-  if (!dbPromise) return null;
-  const db = await dbPromise;
+  const db = await initializeDatabase();
   return await db.get("cplVariables", key);
 }
+
+// Beispiel weitere Funktion für PDF-Speicherung
+export async function storePDF(name, file) {
+  const db = await initializeDatabase();
+  await db.put("pdfs", file, name);
+}
+// Funktion zum Abrufen von PDF-Dateien aus der IndexedDB
+export async function getPDF(name) {
+  const db = await initializeDatabase();
+  return await db.get("pdfs", name);
+}

utils/loadWindowVariables.js

@@ -1,4 +1,5 @@
 // utils/loadWindowVariables.js
+import { initializeDatabase } from "./indexedDB"; // Importiere initializeDatabase
 
 export async function loadWindowVariables() {
   return new Promise((resolve, reject) => {
@@ -55,25 +56,11 @@ export async function loadWindowVariables() {
     };
 
     const saveToIndexedDB = async (key, value) => {
-      const request = indexedDB.open("CPLDatabase", 1);
-      request.onupgradeneeded = () => {
-        const db = request.result;
-        if (!db.objectStoreNames.contains("cplVariables")) {
-          db.createObjectStore("cplVariables");
-        }
-      };
-
-      return new Promise((resolve, reject) => {
-        request.onsuccess = () => {
-          const db = request.result;
+      const db = await initializeDatabase();
       const tx = db.transaction("cplVariables", "readwrite");
       const store = tx.objectStore("cplVariables");
-          store.put(value, key);
-          tx.oncomplete = resolve;
-          tx.onerror = reject;
-        };
-        request.onerror = reject;
-      });
+      await store.put(value, key);
+      return tx.done;
     };
 
     const saveVariables = async () => {
@@ -88,7 +75,6 @@ export async function loadWindowVariables() {
 
     const scripts = ["de.js", "kueData.js", "Start.js", "System.js"];
 
-    // Lade die Skripte nacheinander
     scripts
       .reduce((promise, script) => {
         return promise.then(() => loadScript(script));