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 React, { useEffect, useState, useRef } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { storePDF, getPDF } from "../utils/indexedDB"; // Korrekte Importe für die PDF-Funktionen
// indexDB-Funktionen nur im Browser importieren
let storePDF, getPDF;
if (typeof window !== "undefined") {
const indexedDBModule = require("../utils/indexedDB");
storePDF = indexedDBModule.storePDF;
getPDF = indexedDBModule.getPDF;
}
function Footer() { function Footer() {
const [pdfName, setPdfName] = useState(""); const [pdfName, setPdfName] = useState("");
@@ -35,38 +28,36 @@ function Footer() {
]; ];
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined" && getPDF && storePDF) { async function loadAndStorePDFs() {
async function loadAndStorePDFs() { try {
try { for (const fileName of pdfFiles) {
for (const fileName of pdfFiles) { const storedPdf = await getPDF(fileName);
const storedPdf = await getPDF(fileName); if (!storedPdf) {
if (!storedPdf) { const response = await fetch(`/doku/${fileName}`);
const response = await fetch(`/doku/${fileName}`); const pdfBlob = await response.blob();
const pdfBlob = await response.blob(); await storePDF(fileName, pdfBlob);
await storePDF(fileName, pdfBlob); console.log(`${fileName} in IndexedDB gespeichert.`);
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(); loadAndStorePDFs();
} }
}, [getPDF, storePDF]); }, []);
const loadPDF = async (fileName) => { const loadPDF = async (fileName) => {
if (typeof window !== "undefined" && getPDF) { const storedPdf = await getPDF(fileName);
const storedPdf = await getPDF(fileName); if (storedPdf) {
if (storedPdf) { const pdfUrl = URL.createObjectURL(storedPdf);
const pdfUrl = URL.createObjectURL(storedPdf); window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab
window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab setPdfName(fileName);
setPdfName(fileName); setShowSlider(false);
setShowSlider(false); } else {
} else { console.error("PDF nicht in IndexedDB gefunden");
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 React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import "bootstrap-icons/font/bootstrap-icons.css"; import "bootstrap-icons/font/bootstrap-icons.css";
import SettingsModal from "./modales/SettingsModal"; import SettingsModal from "./modales/SettingsModal";
//import { getFromIndexedDB } from "../utils/indexedDB"; import { getFromIndexedDB, initializeDatabase } from "../utils/indexedDB"; // Importiere initializeDatabase
function Header() { function Header() {
const [stationsname, setStationsname] = useState("Lädt..."); const [stationsname, setStationsname] = useState("Lädt...");
@@ -13,43 +13,26 @@ function Header() {
const handleSettingsClick = () => setShowSettingsModal(true); const handleSettingsClick = () => setShowSettingsModal(true);
const handleCloseSettingsModal = () => setShowSettingsModal(false); const handleCloseSettingsModal = () => setShowSettingsModal(false);
const handleLogout = () => (window.location.href = "/offline.html"); 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(() => { useEffect(() => {
const loadData = async () => { const loadData = async () => {
try { try {
//console.log("Lade Daten aus IndexedDB..."); // Versuche die Daten zu laden
const deviceName = await getFromIndexedDB("deviceName"); const deviceName = await getFromIndexedDB("deviceName");
//console.log("DeviceName geladen:", deviceName); // Sollte den geladenen Wert zeigen
const hardwareVersion = await getFromIndexedDB("kueVersion"); const hardwareVersion = await getFromIndexedDB("kueVersion");
//console.log("HardwareVersion geladen:", hardwareVersion); // Sollte den geladenen Wert zeigen
setStationsname(deviceName || "Unbekannt"); setStationsname(deviceName || "Unbekannt");
setCplStatus(hardwareVersion || "Unbekannt"); setCplStatus(hardwareVersion || "Unbekannt");
} catch (error) { } catch (error) {
console.error("Fehler beim Laden der Daten aus IndexedDB:", error); console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
// Initialisiere die Datenbankstruktur, falls sie fehlt
await initializeDatabase();
} }
}; };
loadData(); loadData();
const interval = setInterval(() => { const interval = setInterval(() => {
loadData(); loadData();
}, 5000); }, 5000);

11
pages/_app.js
View File

@@ -9,10 +9,19 @@ import "../styles/globals.css";
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { 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(() => { setInterval(() => {
loadWindowVariables(); loadWindowVariables();
}, 10000); }, 10000);
loadWindowVariables();
} }
}, []); }, []);

102
utils/indexedDB.js
View File

@@ -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 // Exportiere die Funktion initializeDatabase
const dbPromise = export async function initializeDatabase() {
typeof window !== "undefined" try {
? openDB("my-pdf-store", 2, { const db = await openDB("CPLDatabase", 1, {
upgrade(db) { upgrade(db) {
if (!db.objectStoreNames.contains("pdfs")) { if (!db.objectStoreNames.contains("pdfs")) {
db.createObjectStore("pdfs"); db.createObjectStore("pdfs");
} }
if (!db.objectStoreNames.contains("pages")) { if (!db.objectStoreNames.contains("pages")) {
db.createObjectStore("pages"); db.createObjectStore("pages");
} }
if (!db.objectStoreNames.contains("cplVariables")) { if (!db.objectStoreNames.contains("cplVariables")) {
db.createObjectStore("cplVariables"); db.createObjectStore("cplVariables");
} }
}, },
}) });
: null; return db;
} catch (error) {
// Store PDF if (error.name === "VersionError") {
export async function storePDF(name, file) { console.warn(
if (!dbPromise) return; "Versionskonflikt erkannt. Lösche und erstelle die Datenbank neu."
const db = await dbPromise; );
await db.put("pdfs", file, name); await deleteDB("CPLDatabase");
} return initializeDatabase();
} else {
export async function getPDF(name) { console.error("Fehler beim Öffnen der Datenbank:", error);
if (!dbPromise) return null; throw error;
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 getFromIndexedDB
export async function getFromIndexedDB(key) { export async function getFromIndexedDB(key) {
if (!dbPromise) return null; const db = await initializeDatabase();
const db = await dbPromise;
return await db.get("cplVariables", key); 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);
}

26
utils/loadWindowVariables.js
View File

@@ -1,4 +1,5 @@
// utils/loadWindowVariables.js // utils/loadWindowVariables.js
import { initializeDatabase } from "./indexedDB"; // Importiere initializeDatabase
export async function loadWindowVariables() { export async function loadWindowVariables() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -55,25 +56,11 @@ export async function loadWindowVariables() {
}; };
const saveToIndexedDB = async (key, value) => { const saveToIndexedDB = async (key, value) => {
const request = indexedDB.open("CPLDatabase", 1); const db = await initializeDatabase();
request.onupgradeneeded = () => { const tx = db.transaction("cplVariables", "readwrite");
const db = request.result; const store = tx.objectStore("cplVariables");
if (!db.objectStoreNames.contains("cplVariables")) { await store.put(value, key);
db.createObjectStore("cplVariables"); return tx.done;
}
};
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 saveVariables = async () => { const saveVariables = async () => {
@@ -88,7 +75,6 @@ export async function loadWindowVariables() {
const scripts = ["de.js", "kueData.js", "Start.js", "System.js"]; const scripts = ["de.js", "kueData.js", "Start.js", "System.js"];
// Lade die Skripte nacheinander
scripts scripts
.reduce((promise, script) => { .reduce((promise, script) => {
return promise.then(() => loadScript(script)); return promise.then(() => loadScript(script));