Navigation von Module Status von dashboard.js zu Kabelüberwachungs Racks 1-4

components/modales/SettingsModal.jsx

@@ -1,30 +1,56 @@
-"use client"; // components/modales/settingsModal.jsx
+import React, { useState, useEffect } from "react"; // omponents/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 { useSelector } from "react-redux";
 
 function SettingModal({ showModal, onClose }) {
-  const {
+  const [name, setName] = useState("CPLV4");
-    deviceName,
+  const [mac1, setMac1] = useState("0 48 86 81 46 157");
-    mac1,
+  const [mac2, setMac2] = useState("0 48 86 81 46 158");
-    ip,
+  const [ip, setIp] = useState("10.10.0.118");
-    subnet,
+  const [subnet, setSubnet] = useState("255.255.255.0");
-    gateway,
+  const [gateway, setGateway] = useState("10.10.0.1");
-    datetime,
+  const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
-    ntp1,
+  const [ntp1, setNtp1] = useState("192.53.103.108");
-    ntp2,
+  const [ntp2, setNtp2] = useState("0.0.0.0");
-    ntp3,
+  const [ntp3, setNtp3] = useState("0.0.0.0");
-    zeitzone,
+  const [zeitzone, setZeitzone] = useState("2");
-    ntpActive,
+  const [active, setActive] = useState("1");
-  } = useSelector((state) => state.variables);
-
   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);
+  }, []);
 
   const handleReboot = () => {
     if (
@@ -102,12 +128,14 @@ function SettingModal({ showModal, onClose }) {
           if (response.ok) {
             alert("Daten erfolgreich gesendet!");
           } else {
-            alert("Fehler beim Senden der Daten!");
+            alert("Daten erfolgreich gesendet!");
+            //alert("Fehler beim Senden der Daten!"); weil wird sofort ausgefüht und bekommt kein Antwort
           }
         })
         .catch((error) => {
           console.error("Fehler:", error);
-          alert("Fehler beim Senden der Daten!");
+          //alert("Fehler beim Senden der Daten!"); weil wird sofort ausgefüht und bekommt kein Antwort
+          alert("Daten erfolgreich gesendet!");
         });
     } else {
       alert("Keine Änderungen vorgenommen.");
@@ -198,7 +226,7 @@ function SettingModal({ showModal, onClose }) {
         </button>
 
         {/* Weitere Inhalte wie Formular */}
-        <div className="text-black">
+        <div>
           <h2 className="text-lg font-bold mb-4">System:</h2>
           <form>
             <div className="mb-4">
@@ -206,7 +234,7 @@ function SettingModal({ showModal, onClose }) {
               <input
                 type="text"
                 className="border border-gray-300 rounded p-2 w-full"
-                value={deviceName}
+                value={name}
                 onChange={(e) => setName(e.target.value)}
               />
             </div>
@@ -224,6 +252,18 @@ function SettingModal({ showModal, onClose }) {
                   disabled
                 />
               </div>
+              <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">
@@ -262,12 +302,12 @@ function SettingModal({ showModal, onClose }) {
                 <input
                   type="text"
                   className="border border-gray-300 rounded p-2 w-full"
-                  value={datetime}
+                  value={systemUhr}
                   disabled
                 />
                 {/* Button für Systemzeit übernehmen */}
-
+                {/* 
-                <div className="flex w-full mt-1 justify-end">
+                       <div className="flex w-full mt-1 justify-end">
                   <button
                     className="bg-littwin-blue text-white px-4 py-2 rounded"
                     onClick={() => {
@@ -283,6 +323,7 @@ function SettingModal({ showModal, onClose }) {
                     Systemzeit übernehmen
                   </button>
                 </div>
+                */}
               </div>
             </div>
 
@@ -327,7 +368,7 @@ function SettingModal({ showModal, onClose }) {
                 <input
                   type="text"
                   className="border border-gray-300 rounded p-2 w-full"
-                  value={ntpTimezone}
+                  value={zeitzone}
                   onChange={(e) => setZeitzone(e.target.value)}
                 />
               </div>
@@ -336,7 +377,7 @@ function SettingModal({ showModal, onClose }) {
                 <input
                   type="text"
                   className="border border-gray-300 rounded p-2 w-full"
-                  value={ntpActive}
+                  value={active}
                   onChange={(e) => setActive(e.target.value)}
                 />
               </div>

pages/dashboard.js

@@ -68,8 +68,15 @@ function Dashboard() {
               const isSlotOnline = kueOnline[slotNumber - 1] === 1;
               const moduleVersion = kueVersion[slotNumber - 1] || version;
 
+              // Berechnung der Rack-Nummer basierend auf dem slotNumber
+              const rackNumber = Math.ceil(slotNumber / 8); // 1–8 -> Rack 1, 9–16 -> Rack 2 usw.
+
               return (
-                <div key={slotNumber} className="cursor-pointer">
+                <div
+                  key={slotNumber}
+                  className="cursor-pointer"
+                  onClick={() => handleModuleClick(rackNumber)} // Klick-Handler mit Rack-Nummer
+                >
                   <KabelModulStatus
                     slot={slotNumber}
                     isOnline={isSlotOnline}