Systemeinstellung Redux

components/modales/SettingsModal.jsx

@@ -2,55 +2,44 @@ import React, { useState, useEffect } from "react"; // omponents/modales/setting
 import ReactModal from "react-modal";
 import { ClipLoader } from "react-spinners";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { useSelector } from "react-redux";
+
+// Definiere das App-Element für ReactModal
+ReactModal.setAppElement("#__next");
 
 function SettingModal({ showModal, onClose }) {
-  const [name, setName] = useState("CPLV4");
+  // Redux-Werte abrufen
-  const [mac1, setMac1] = useState("0 48 86 81 46 157");
+  const deviceName_Redux = useSelector((state) => state.variables.deviceName);
-  const [mac2, setMac2] = useState("0 48 86 81 46 158");
+  const mac1_Redux = useSelector((state) => state.variables.mac1);
-  const [ip, setIp] = useState("10.10.0.118");
+  const mac2_Redux = useSelector((state) => state.variables.mac2);
-  const [subnet, setSubnet] = useState("255.255.255.0");
+  const ip_Redux = useSelector((state) => state.variables.ip);
-  const [gateway, setGateway] = useState("10.10.0.1");
+  const subnet_Redux = useSelector((state) => state.variables.subnet);
-  const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
+  const gateway_Redux = useSelector((state) => state.variables.gateway);
-  const [ntp1, setNtp1] = useState("192.53.103.108");
+  const datetime_Redux = useSelector((state) => state.variables.datetime);
-  const [ntp2, setNtp2] = useState("0.0.0.0");
+  const ntp1_Redux = useSelector((state) => state.variables.ntp1);
-  const [ntp3, setNtp3] = useState("0.0.0.0");
+  const ntp2_Redux = useSelector((state) => state.variables.ntp2);
-  const [zeitzone, setZeitzone] = useState("2");
+  const ntp3_Redux = useSelector((state) => state.variables.ntp3);
-  const [active, setActive] = useState("1");
+  const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
+  const active_Redux = useSelector((state) => state.variables.ntpActive);
+
+  // Lokale State-Variablen zum Bearbeiten
+  const [name, setName] = useState(deviceName_Redux || "");
+  const [mac1, setMac1] = useState(mac1_Redux || "");
+  const [mac2, setMac2] = useState(mac2_Redux || "");
+  const [ip, setIp] = useState(ip_Redux || "");
+  const [subnet, setSubnet] = useState(subnet_Redux || "");
+  const [gateway, setGateway] = useState(gateway_Redux || "");
+  const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
+  const [ntp1, setNtp1] = useState(ntp1_Redux || "");
+  const [ntp2, setNtp2] = useState(ntp2_Redux || "");
+  const [ntp3, setNtp3] = useState(ntp3_Redux || "");
+  const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
+  const [active, setActive] = useState(active_Redux || "");
+
   const [showRebootModal, setShowRebootModal] = useState(false);
   // Originalwerte speichern
   const [originalValues, setOriginalValues] = useState({});
-  useEffect(() => {
+  // Effekt, um Redux-Werte beim Anzeigen des Modals in lokale State-Variablen zu setzen
-    // Initialisiere die Originalwerte beim ersten Laden des Modals
-    const initialValues = {
-      name,
-      mac1,
-      mac2,
-      ip,
-      subnet,
-      gateway,
-      systemUhr,
-      ntp1,
-      ntp2,
-      ntp3,
-      zeitzone,
-      active,
-    };
-    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 handleReboot = () => {
     if (
@@ -108,8 +97,8 @@ function SettingModal({ showModal, onClose }) {
     if (ntp3 !== originalValues.ntp3) {
       changes.SNIP3 = ntp3;
     }
-    if (zeitzone !== originalValues.zeitzone) {
+    if (ntpTimezone !== originalValues.ntpTimezone) {
-      changes.SNTZ = zeitzone;
+      changes.SNTZ = ntpTimezone;
     }
     if (active !== originalValues.active) {
       changes.SNAC = active;
@@ -182,7 +171,63 @@ function SettingModal({ showModal, onClose }) {
         alert("Fehler beim Setzen von Datum und Uhrzeit!");
       });
   };
+  //---------------------------------------------------
+  useEffect(() => {
+    if (showModal) {
+      setName(deviceName_Redux || "");
+      setMac1(mac1_Redux || "");
+      setMac2(mac2_Redux || "");
+      setIp(ip_Redux || "");
+      setSubnet(subnet_Redux || "");
+      setGateway(gateway_Redux || "");
+      setSystemUhr(datetime_Redux || "");
+      setNtp1(ntp1_Redux || "");
+      setNtp2(ntp2_Redux || "");
+      setNtp3(ntp3_Redux || "");
+      setNtpTimezone(ntpTimezone_Redux || "");
+      setActive(active_Redux || "");
+    }
+  }, [
+    showModal,
+    deviceName_Redux,
+    mac1_Redux,
+    mac2_Redux,
+    ip_Redux,
+    subnet_Redux,
+    gateway_Redux,
+    datetime_Redux,
+    ntp1_Redux,
+    ntp2_Redux,
+    ntp3_Redux,
+    ntpTimezone_Redux,
+    active_Redux,
+  ]);
+  //---------------------------------------------------
+  useEffect(() => {
+    setOriginalValues({
+      name: deviceName_Redux,
+      ip: ip_Redux,
+      subnet: subnet_Redux,
+      gateway: gateway_Redux,
+      ntp1: ntp1_Redux,
+      ntp2: ntp2_Redux,
+      ntp3: ntp3_Redux,
+      ntpTimezone: ntpTimezone_Redux,
+      active: active_Redux,
+    });
+  }, [
+    deviceName_Redux,
+    ip_Redux,
+    subnet_Redux,
+    gateway_Redux,
+    ntp1_Redux,
+    ntp2_Redux,
+    ntp3_Redux,
+    ntpTimezone_Redux,
+    active_Redux,
+  ]);
 
+  //---------------------------------------------------
   return (
     <>
       <ReactModal
@@ -368,8 +413,8 @@ 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)}
+                  onChange={(e) => setNtpTimezone(e.target.value)}
                 />
               </div>
               <div>

pages/_error.js

@@ -0,0 +1,19 @@
+// pages/_error.js
+import React from "react";
+
+function Error({ statusCode }) {
+  return (
+    <p>
+      {statusCode
+        ? `An error ${statusCode} occurred on server`
+        : "An error occurred on client"}
+    </p>
+  );
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+export default Error;

store/store.js

@@ -6,7 +6,7 @@ const store = configureStore({
   reducer: {
     variables: variablesReducer,
   },
-  devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung
+  //devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung
 });
 
 export default store;

store/variablesSlice.js

@@ -13,6 +13,8 @@ const initialState = {
   ntp1: null,
   ntp2: null,
   ntp3: null,
+  zeitzone: null,
+  ntpActive: null,
   de: null,
   counter: null,
   flutter: null,