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

settingsModal von redux lesen

Browse Source
This commit is contained in:
ISA
2024-11-01 08:22:21 +01:00
parent 5c5f816744
commit 5b34428f0a
3 changed files with 28 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/modales/SettingsModal.jsx
View File

@@ -3,95 +3,27 @@ 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";
import { useSelector } from "react-redux";
function SettingModal({ showModal, onClose }) {
const [name, setName] = useState("CPLV4");
const [mac1, setMac1] = useState("0 48 86 81 46 157");
const [ip, setIp] = useState("");
const [subnet, setSubnet] = useState("255.255.255.0");
const [gateway, setGateway] = useState("10.10.0.1");
const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
const [ntp1, setNtp1] = useState("192.53.103.108");
const [ntp2, setNtp2] = useState("0.0.0.0");
const [ntp3, setNtp3] = useState("0.0.0.0");
const [zeitzone, setZeitzone] = useState("2");
const [active, setActive] = useState("1");
const {
deviceName,
mac1,
ip,
subnet,
gateway,
datetime,
ntp1,
ntp2,
ntp3,
zeitzone,
ntpActive,
} = useSelector((state) => state.variables);
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,
ip,
subnet,
gateway,
systemUhr,
ntp1,
ntp2,
ntp3,
zeitzone,
active,
};
setOriginalValues(initialValues);
}, [showModal]);
//------------------------------------------------------------------
useEffect(() => {
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 = () => {
@@ -274,7 +206,7 @@ function SettingModal({ showModal, onClose }) {
<input
type="text"
className="border border-gray-300 rounded p-2 w-full"
value={name}
value={deviceName}
onChange={(e) => setName(e.target.value)}
/>
</div>
@@ -330,7 +262,7 @@ function SettingModal({ showModal, onClose }) {
<input
type="text"
className="border border-gray-300 rounded p-2 w-full"
value={systemUhr}
value={datetime}
disabled
/>
{/* Button für Systemzeit übernehmen */}
@@ -395,7 +327,7 @@ function SettingModal({ showModal, onClose }) {
<input
type="text"
className="border border-gray-300 rounded p-2 w-full"
value={zeitzone}
value={ntpTimezone}
onChange={(e) => setZeitzone(e.target.value)}
/>
</div>
@@ -404,7 +336,7 @@ function SettingModal({ showModal, onClose }) {
<input
type="text"
className="border border-gray-300 rounded p-2 w-full"
value={active}
value={ntpActive}
onChange={(e) => setActive(e.target.value)}
/>
</div>

3
store/variablesSlice.js
View File

@@ -10,6 +10,9 @@ const initialState = {
subnet: null,
gateway: null,
datetime: null,
ntp1: null,
ntp2: null,
ntp3: null,
de: null,
counter: null,
flutter: null,

6
utils/loadWindowVariables.js
View File

@@ -10,6 +10,12 @@ export async function loadWindowVariables() {
"subnet",
"gateway",
"datetime",
"ntp1",
"ntp2",
"ntp3",
"systemZeit",
"ntpTimezone",
"ntpActive",
"de",
"counter",
"flutter",