Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header,Footer und dashboard bekommen Daten von IndexedDB statt von Window Objekt

Browse Source
This commit is contained in:
ISA
2024-10-31 14:01:09 +01:00
parent 2fd61c7f7c
commit f2143daa51
5 changed files with 90 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/Footer.jsx
View File

@@ -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");
}
};

31
components/Header.jsx
View File

@@ -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);