diff --git a/components/modales/SettingsModal.jsx b/components/modales/SettingsModal.jsx index 8cab574..b11ea90 100644 --- a/components/modales/SettingsModal.jsx +++ b/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"); - const [mac1, setMac1] = useState("0 48 86 81 46 157"); - const [mac2, setMac2] = useState("0 48 86 81 46 158"); - const [ip, setIp] = useState("10.10.0.118"); - 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"); + // Redux-Werte abrufen + const deviceName_Redux = useSelector((state) => state.variables.deviceName); + const mac1_Redux = useSelector((state) => state.variables.mac1); + const mac2_Redux = useSelector((state) => state.variables.mac2); + const ip_Redux = useSelector((state) => state.variables.ip); + const subnet_Redux = useSelector((state) => state.variables.subnet); + const gateway_Redux = useSelector((state) => state.variables.gateway); + const datetime_Redux = useSelector((state) => state.variables.datetime); + const ntp1_Redux = useSelector((state) => state.variables.ntp1); + const ntp2_Redux = useSelector((state) => state.variables.ntp2); + const ntp3_Redux = useSelector((state) => state.variables.ntp3); + 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(() => { - // 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); - }, []); + // Effekt, um Redux-Werte beim Anzeigen des Modals in lokale State-Variablen zu setzen const handleReboot = () => { if ( @@ -108,8 +97,8 @@ function SettingModal({ showModal, onClose }) { if (ntp3 !== originalValues.ntp3) { changes.SNIP3 = ntp3; } - if (zeitzone !== originalValues.zeitzone) { - changes.SNTZ = zeitzone; + if (ntpTimezone !== originalValues.ntpTimezone) { + 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 ( <> setZeitzone(e.target.value)} + value={ntpTimezone} + onChange={(e) => setNtpTimezone(e.target.value)} />
diff --git a/pages/_error.js b/pages/_error.js new file mode 100644 index 0000000..8584b0a --- /dev/null +++ b/pages/_error.js @@ -0,0 +1,19 @@ +// pages/_error.js +import React from "react"; + +function Error({ statusCode }) { + return ( +

+ {statusCode + ? `An error ${statusCode} occurred on server` + : "An error occurred on client"} +

+ ); +} + +Error.getInitialProps = ({ res, err }) => { + const statusCode = res ? res.statusCode : err ? err.statusCode : 404; + return { statusCode }; +}; + +export default Error; diff --git a/store/store.js b/store/store.js index 6c23461..8157175 100644 --- a/store/store.js +++ b/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; diff --git a/store/variablesSlice.js b/store/variablesSlice.js index 0e0bce7..d529794 100644 --- a/store/variablesSlice.js +++ b/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,