fix: ensure deviceName and kueVersion are correctly loaded from IndexedDB in production

- Added direct implementation of `getFromIndexedDB` in Header.jsx to avoid import issues
- Increased polling interval to 10 seconds to prevent timing issues in data fetching
- Added console logs to verify data loading process and debug potential undefined values

This resolves issues where deviceName and kueVersion were showing as "Unbekannt" in production due to IndexedDB timing differences.

components/Header.jsx

@@ -3,21 +3,43 @@ 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";
+import { getFromIndexedDB } from "../utils/indexedDB";
 
 function Header() {
   const [stationsname, setStationsname] = useState("Lädt...");
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
+
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
-  //--------------------------------------------------------------------
+  //------------------------------------------------------------------
+  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...");
+
         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");
@@ -26,17 +48,16 @@ function Header() {
       }
     };
 
-    loadData(); // Lädt die Daten aus IndexedDB bei Initialisierung
+    loadData();
 
-    // Optional: Polling-Interval für regelmäßiges Aktualisieren (wenn nötig)
     const interval = setInterval(() => {
       loadData();
-    }, 5000); // Alle 5 Sekunden wird loadData neu geladen
+    }, 5000);
 
-    return () => clearInterval(interval); // Bereinigen, wenn die Komponente entladen wird
+    return () => clearInterval(interval);
   }, []);
-  //--------------------------------------------------------------------------------
 
+  //------------------------------------------------------------------
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
       <div className="absolute left-32 top-32 transform -translate-y-1/2">