From 1ea583d822e780f08ebf306832bd53ae806e83e1 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 30 Oct 2024 10:59:30 +0100 Subject: [PATCH] feat: Integration von IndexedDB zur Verwaltung von Dashboard-Daten MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Werte wie IP, Subnetz, Gateway, letzte 20 Meldungen und kueVersion aus IndexedDB geladen und im Dashboard angezeigt - Direktzugriff auf IndexedDB-Variable `getFromIndexedDB` implementiert, um Produktions-Importprobleme zu vermeiden - State-Handling und Lade-Intervall hinzugefügt, um Daten alle 10 Sekunden zu aktualisieren - Ersetzt window-basierte Variablen durch Daten aus IndexedDB für eine robustere und skalierbare Datenverwaltung --- pages/dashboard.js | 78 ++++++++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 34 deletions(-) diff --git a/pages/dashboard.js b/pages/dashboard.js index 82c1585..66ea4e9 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -4,7 +4,6 @@ import { useRouter } from "next/navigation"; import "tailwindcss/tailwind.css"; import "@fontsource/roboto"; import "bootstrap-icons/font/bootstrap-icons.css"; -import { loadWindowVariables } from "../utils/loadWindowVariables"; import CPLStatus from "../components/modulesStatus/CPLStatus"; import Access1Status from "../components/modulesStatus/Access1Status"; import Access2Status from "../components/modulesStatus/Access2Status"; @@ -16,6 +15,7 @@ import { Icon } from "@iconify/react"; function Dashboard() { const [last20Messages, setLast20Messages] = useState([]); const [kueOnline, setkueOnline] = useState([]); + const [kueVersion, setKueVersion] = useState([]); const [ip, setIp] = useState(""); const [subnet, setSubnet] = useState(""); const [gateway, setGateway] = useState(""); @@ -40,51 +40,63 @@ function Dashboard() { row.substring(row.length - 1), ]); }; - + //------------------------------------------------------------------ + //--------- 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 loadDataOnce = async () => { try { - await loadWindowVariables(); + // Daten aus IndexedDB laden + const last20MessagesData = await getFromIndexedDB("last20Messages"); + const ipData = await getFromIndexedDB("ip"); + const subnetData = await getFromIndexedDB("subnet"); + const gatewayData = await getFromIndexedDB("gateway"); + const appVersionData = await getFromIndexedDB("appVersion"); + const kueCableBreakData = await getFromIndexedDB("kueCableBreak"); + const kueOnlineData = await getFromIndexedDB("kueOnline"); + const kueVersionData = await getFromIndexedDB("kueVersion"); - // Werte direkt aus `window` zuweisen - setLast20Messages(parseMessages(window.last20Messages || "")); - setIp(window.ip || ""); - setSubnet(window.subnet || ""); - setGateway(window.gateway || ""); - setAppVersion(window.appVersion || ""); - - // Verarbeite `kueCableBreak` und `kueOnline` - const cableBreakArray = Array.isArray(window.kueCableBreak) - ? window.kueCableBreak.map((value, index) => - window.kueOnline[index] === 1 ? Number(value) : 0 - ) - : (window.kueCableBreak || "") - .split(",") - .map((value, index) => - window.kueOnline[index] === 1 ? Number(value) : 0 - ); - setKueCableBreak(cableBreakArray); - - const onlineArray = Array.isArray(window.kueOnline) - ? window.kueOnline.map(Number) - : []; - setkueOnline(onlineArray); + // Setze die States mit den geladenen Daten + setLast20Messages(parseMessages(last20MessagesData || "")); + setIp(ipData || ""); + setSubnet(subnetData || ""); + setGateway(gatewayData || ""); + setAppVersion(appVersionData || ""); + setKueCableBreak( + Array.isArray(kueCableBreakData) ? kueCableBreakData.map(Number) : [] + ); + setkueOnline( + Array.isArray(kueOnlineData) ? kueOnlineData.map(Number) : [] + ); + setKueVersion(Array.isArray(kueVersionData) ? kueVersionData : []); setLoading(false); } catch (error) { - console.error("Fehler beim Laden der Daten:", error); + console.error("Fehler beim Laden der Daten aus IndexedDB:", error); setError(error); setLoading(false); } }; - // Sofortiges Laden der Daten einmalig loadDataOnce(); - // Starten des Intervalls für regelmäßige Updates const intervalId = setInterval(loadDataOnce, 10000); - return () => clearInterval(intervalId); // Bereinigung des Intervalls bei Komponente unmount + return () => clearInterval(intervalId); }, []); - + //------------------------------------------------------------------ const handleModuleClick = (rackNumber) => { router.push(`/kabelueberwachung?rack=${rackNumber}`); }; @@ -102,9 +114,7 @@ function Dashboard() { {slots.map((version, index) => { const slotNumber = i * 8 + index + 1; const isSlotOnline = kueOnline[slotNumber - 1] === 1; - const moduleVersion = window.kueVersion - ? window.kueVersion[slotNumber - 1] - : version; + const moduleVersion = kueVersion[slotNumber - 1] || version; // Verwende kueVersion return (