From babef0e86f75920120c878ac4d6759237cad95ce Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 30 Oct 2024 10:41:14 +0100 Subject: [PATCH] feat: IndexedDB-Daten in SettingsModal integriert und initialisiert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Datenwerte wie deviceName, macAddress, IP usw. aus IndexedDB abgerufen und in den State geladen, um dynamische Aktualisierungen zu ermöglichen. - Direktimplementierung von getFromIndexedDB im Component Code, um Produktionsimport-Probleme zu umgehen. - Originalwerte beim ersten Laden gespeichert, um spätere Änderungen zu überprüfen und zu übertragen. - Verbesserte Benutzerführung mit Zustandskontrollen und gezieltem Datenabruf bei Komponenten-Mount. --- components/Header.jsx | 5 +- components/modales/SettingsModal.jsx | 89 ++++++++++++++++++---------- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/components/Header.jsx b/components/Header.jsx index 69d45fc..2f7f107 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -3,7 +3,7 @@ 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 } from "../utils/indexedDB"; function Header() { const [stationsname, setStationsname] = useState("Lädt..."); @@ -14,7 +14,7 @@ function Header() { const handleCloseSettingsModal = () => setShowSettingsModal(false); const handleLogout = () => (window.location.href = "/offline.html"); //------------------------------------------------------------------ - //--------- Direkte Implementierung von `getFromIndexedDB` in Header.jsx hinzugefügt, um Importprobleme zu vermeiden in Produktionsumgebung ----- + //--------- 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); @@ -29,7 +29,6 @@ function Header() { request.onerror = () => reject(request.error); }); } - //------------------------------------------------------------------ useEffect(() => { const loadData = async () => { diff --git a/components/modales/SettingsModal.jsx b/components/modales/SettingsModal.jsx index 19cd219..803e733 100644 --- a/components/modales/SettingsModal.jsx +++ b/components/modales/SettingsModal.jsx @@ -1,12 +1,13 @@ -import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx +"use client"; // components/modales/settingsModal.jsx +import React, { useState, useEffect } from "react"; import ReactModal from "react-modal"; import { ClipLoader } from "react-spinners"; import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons +//import { getFromIndexedDB } from "../utils/indexedDB"; function SettingModal({ showModal, onClose }) { const [name, setName] = useState("CPLV4"); const [mac1, setMac1] = useState("0 48 86 81 46 157"); - const [mac2, setMac2] = useState("0 48 86 81 46 158"); const [ip, setIp] = useState(""); const [subnet, setSubnet] = useState("255.255.255.0"); const [gateway, setGateway] = useState("10.10.0.1"); @@ -19,12 +20,30 @@ function SettingModal({ showModal, onClose }) { const [showRebootModal, setShowRebootModal] = useState(false); // Originalwerte speichern const [originalValues, setOriginalValues] = useState({}); + + //------------------------------------------------------------------ + //--------- 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(() => { // Initialisiere die Originalwerte beim ersten Laden des Modals const initialValues = { name, mac1, - mac2, + ip, subnet, gateway, @@ -37,20 +56,43 @@ function SettingModal({ showModal, onClose }) { }; setOriginalValues(initialValues); }, [showModal]); + //------------------------------------------------------------------ useEffect(() => { - if (window.deviceName) setName(window.deviceName); - if (window.mac1) setMac1(window.mac1); - if (window.mac2) setMac2(window.mac2); - if (window.ip) setIp(window.ip); - if (window.subnet) setSubnet(window.subnet); - if (window.gateway) setGateway(window.gateway); - if (window.datetime) setSystemUhr(window.datetime); - if (window.ntpServer1Ip) setNtp1(window.ntpServer1Ip); - if (window.ntpServer2Ip) setNtp2(window.ntpServer2Ip); - if (window.ntpServer3Ip) setNtp3(window.ntpServer3Ip); - if (window.ntpTimezone) setZeitzone(window.ntpTimezone); - if (window.ntpActive) setActive(window.ntpActive); + const loadData = async () => { + try { + const deviceName = await getFromIndexedDB("deviceName"); + const macAddress1 = await getFromIndexedDB("mac1"); + const ipAddress = await getFromIndexedDB("ip"); + const subnetMask = await getFromIndexedDB("subnet"); + const gatewayAddress = await getFromIndexedDB("gateway"); + const systemClock = await getFromIndexedDB("datetime"); + const ntpServer1 = await getFromIndexedDB("ntpServer1Ip"); + const ntpServer2 = await getFromIndexedDB("ntpServer2Ip"); + const ntpServer3 = await getFromIndexedDB("ntpServer3Ip"); + const timezone = await getFromIndexedDB("ntpTimezone"); + const ntpActiveStatus = await getFromIndexedDB("ntpActive"); + + // Setze die Werte in den State, falls sie aus IndexedDB geladen wurden + if (deviceName) setName(deviceName); + if (macAddress1) setMac1(macAddress1); + if (ipAddress) setIp(ipAddress); + if (subnetMask) setSubnet(subnetMask); + if (gatewayAddress) setGateway(gatewayAddress); + if (systemClock) setSystemUhr(systemClock); + if (ntpServer1) setNtp1(ntpServer1); + if (ntpServer2) setNtp2(ntpServer2); + if (ntpServer3) setNtp3(ntpServer3); + if (timezone) setZeitzone(timezone); + if (ntpActiveStatus) setActive(ntpActiveStatus); + } catch (error) { + console.error("Fehler beim Laden der Daten aus IndexedDB:", error); + } + }; + + // Lade die Daten aus IndexedDB beim ersten Laden der Komponente + loadData(); }, []); + //------------------------------------------------------------------ const handleReboot = () => { if ( @@ -250,23 +292,6 @@ function SettingModal({ showModal, onClose }) { disabled /> - {/* MAC Adresse 2 */} - {/* - -
- - - setMac2(e.target.value)} - disabled - /> -
- */}