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">