From 766c2dc69e8a262d2299f86b7bc82c6e942c6c15 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 30 Oct 2024 10:03:27 +0100
Subject: [PATCH] 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 | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/components/Header.jsx b/components/Header.jsx
index a98c54b..b9263c8 100644
--- a/components/Header.jsx
+++ b/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">