feat: IndexedDB-Daten in SettingsModal integriert und initialisiert
- 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.
This commit is contained in:
ISA
@@ -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 () => {
|
||||
|
||||
@@ -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
|
||||
/>
|
||||
</div>
|
||||
{/* MAC Adresse 2 */}
|
||||
{/*
|
||||
|
||||
<div>
|
||||
|
||||
<label className="block text-sm font-medium">
|
||||
MAC Adresse 2:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={mac2}
|
||||
onChange={(e) => setMac2(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
<div className="mb-4 grid grid-cols-2 gap-4">
|
||||
|
||||
Reference in New Issue
Block a user