Header mit indexedDB

components/Header.jsx

@@ -1,35 +1,41 @@
-"use client";
+"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 { storeCPLVariable, getFromIndexedDB } from "../utils/indexedDB";
 
 function Header() {
   const [stationsname, setStationsname] = useState("Lädt...");
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
-
-  // Flag außerhalb der Funktion, um die Werte nur einmal zu setzen
-  let variablesLogged = false;
-  useEffect(() => {
-    const checkVariablesLoaded = async () => {
-      if (window.deviceName) {
-        setStationsname(window.deviceName);
-      } else {
-        // Falls die Variablen noch nicht geladen sind, erneut prüfen nach 3000 ms
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-        checkVariablesLoaded(); // Erneut aufrufen, wenn noch nicht geladen
-      }
-    };
-
-    checkVariablesLoaded(); // Startet die erste Überprüfung
-
-    // Kein Cleanup erforderlich, da `setTimeout` nur bei Bedarf ausgeführt wird
-  }, []);
-
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
+  //--------------------------------------------------------------------
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const deviceName = await getFromIndexedDB("deviceName");
+        const hardwareVersion = await getFromIndexedDB("kueVersion");
+
+        setStationsname(deviceName || "Unbekannt");
+        setCplStatus(hardwareVersion || "Unbekannt");
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
+      }
+    };
+
+    loadData(); // Lädt die Daten aus IndexedDB bei Initialisierung
+
+    // Optional: Polling-Interval für regelmäßiges Aktualisieren (wenn nötig)
+    const interval = setInterval(() => {
+      loadData();
+    }, 5000); // Alle 5 Sekunden wird loadData neu geladen
+
+    return () => clearInterval(interval); // Bereinigen, wenn die Komponente entladen wird
+  }, []);
+  //--------------------------------------------------------------------------------
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">

utils/indexedDB.js

@@ -1,33 +1,40 @@
 import { openDB } from "idb"; // utils/indexedDB.js
 
-const dbPromise = openDB("my-pdf-store", 2, {
+// Überprüfe, ob `window` verfügbar ist, um zu bestimmen, ob der Code im Browser läuft
-  upgrade(db) {
+const dbPromise =
-    // Überprüfe und erstelle den Object Store für PDFs
+  typeof window !== "undefined"
-    if (!db.objectStoreNames.contains("pdfs")) {
+    ? openDB("my-pdf-store", 2, {
-      db.createObjectStore("pdfs");
+        upgrade(db) {
-    }
+          if (!db.objectStoreNames.contains("pdfs")) {
-    // Überprüfe und erstelle den Object Store für Seiten (pages)
+            db.createObjectStore("pdfs");
-    if (!db.objectStoreNames.contains("pages")) {
+          }
-      db.createObjectStore("pages"); // Korrekte Erstellung des "pages" Object Stores
+          if (!db.objectStoreNames.contains("pages")) {
-    }
+            db.createObjectStore("pages");
-  },
+          }
-});
+          if (!db.objectStoreNames.contains("cplVariables")) {
+            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;
-  // Überprüfe, ob der Object Store "pages" existiert
   const transaction = db.transaction("pages", "readwrite");
   const store = transaction.objectStore("pages");
   await store.put(file, name);
@@ -35,6 +42,24 @@ export async function storePage(name, file) {
 }
 
 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;
+}
+
+export async function getFromIndexedDB(key) {
+  if (!dbPromise) return null;
+  const db = await dbPromise;
+  return await db.get("cplVariables", key);
+}