diff --git a/components/Footer.jsx b/components/Footer.jsx index 22756f2..c2dfe86 100644 --- a/components/Footer.jsx +++ b/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,38 +28,36 @@ function Footer() { ]; useEffect(() => { - if (typeof window !== "undefined" && getPDF && storePDF) { - async function loadAndStorePDFs() { - try { - for (const fileName of pdfFiles) { - const storedPdf = await getPDF(fileName); - if (!storedPdf) { - const response = await fetch(`/doku/${fileName}`); - const pdfBlob = await response.blob(); - await storePDF(fileName, pdfBlob); - console.log(`${fileName} in IndexedDB gespeichert.`); - } + async function loadAndStorePDFs() { + try { + for (const fileName of pdfFiles) { + const storedPdf = await getPDF(fileName); + if (!storedPdf) { + const response = await fetch(`/doku/${fileName}`); + const pdfBlob = await response.blob(); + await storePDF(fileName, pdfBlob); + console.log(`${fileName} in IndexedDB gespeichert.`); } - } catch (error) { - console.error("Fehler beim Laden oder Speichern der PDFs:", error); } + } catch (error) { + console.error("Fehler beim Laden oder Speichern der PDFs:", error); } + } + 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); - window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab - setPdfName(fileName); - setShowSlider(false); - } else { - console.error("PDF nicht in IndexedDB gefunden"); - } + const storedPdf = await getPDF(fileName); + if (storedPdf) { + const pdfUrl = URL.createObjectURL(storedPdf); + window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab + setPdfName(fileName); + setShowSlider(false); + } else { + console.error("PDF nicht in IndexedDB gefunden"); } }; diff --git a/components/Header.jsx b/components/Header.jsx index 2f7f107..2f4e816 100644 --- a/components/Header.jsx +++ b/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); diff --git a/pages/_app.js b/pages/_app.js index 8cdce14..817a44d 100644 --- a/pages/_app.js +++ b/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(); } }, []); diff --git a/utils/indexedDB.js b/utils/indexedDB.js index 9bb4f35..4ce7a4e 100644 --- a/utils/indexedDB.js +++ b/utils/indexedDB.js @@ -1,65 +1,49 @@ -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, { - upgrade(db) { - if (!db.objectStoreNames.contains("pdfs")) { - db.createObjectStore("pdfs"); - } - 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; - 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; +// 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"); + } + if (!db.objectStoreNames.contains("pages")) { + db.createObjectStore("pages"); + } + if (!db.objectStoreNames.contains("cplVariables")) { + db.createObjectStore("cplVariables"); + } + }, + }); + 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); +} diff --git a/utils/loadWindowVariables.js b/utils/loadWindowVariables.js index e375fc5..5e9927a 100644 --- a/utils/loadWindowVariables.js +++ b/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 tx = db.transaction("cplVariables", "readwrite"); - const store = tx.objectStore("cplVariables"); - store.put(value, key); - tx.oncomplete = resolve; - tx.onerror = reject; - }; - request.onerror = reject; - }); + const db = await initializeDatabase(); + const tx = db.transaction("cplVariables", "readwrite"); + const store = tx.objectStore("cplVariables"); + 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));