settingsModal von redux lesen

components/modales/SettingsModal.jsx

@@ -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 {
-  const [mac1, setMac1] = useState("0 48 86 81 46 157");
+    deviceName,
-  const [ip, setIp] = useState("");
+    mac1,
-  const [subnet, setSubnet] = useState("255.255.255.0");
+    ip,
-  const [gateway, setGateway] = useState("10.10.0.1");
+    subnet,
-  const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
+    gateway,
-  const [ntp1, setNtp1] = useState("192.53.103.108");
+    datetime,
-  const [ntp2, setNtp2] = useState("0.0.0.0");
+    ntp1,
-  const [ntp3, setNtp3] = useState("0.0.0.0");
+    ntp2,
-  const [zeitzone, setZeitzone] = useState("2");
+    ntp3,
-  const [active, setActive] = useState("1");
+    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>

store/variablesSlice.js

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

utils/loadWindowVariables.js

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