Wait Seite läft in localhoost

components/modales/KueModal.jsx

@@ -7,6 +7,15 @@ function KueModal({ showModal, onClose, slot }) {
   const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
     Array(32).fill(0)
   ); // Default 10.0 MOhm
+  const handleVerzögerungChange = (e) => {
+    let value = e.target.value;
+
+    // Wertebereich von 1 bis 999 überprüfen
+    if (value < 1) value = 1;
+    if (value > 999) value = 999;
+
+    e.target.value = value; // Setze den korrigierten Wert zurück in das Inputfeld
+  };
 
   useEffect(() => {
     // Initialisiere die Bezeichnungen basierend auf window.kueName
@@ -95,10 +104,10 @@ function KueModal({ showModal, onClose, slot }) {
               <th className="p-2 border text-sm text-center">
                 Isolationsgrenzwert
               </th>
+              <th className="p-2 border text-sm text-center">Verzögerung</th>
               <th className="p-2 border text-sm text-center">
                 Schleifengrenzwert
               </th>
-              <th className="p-2 border text-sm text-center">Filterzeit</th>
 
               {/* 
                      <th className="p-2 border text-sm text-center">TDR Aktiv</th>
@@ -127,6 +136,18 @@ function KueModal({ showModal, onClose, slot }) {
                 />{" "}
                 MOhm
               </td>
+              <td className="p-2 border text-center text-sm">
+                {/* Flexbox für Verzögerung */}
+                <div className="flex items-center justify-center">
+                  <input
+                    type="number"
+                    className="w-12 border rounded p-1 text-sm"
+                    defaultValue="420"
+                    onChange={handleVerzögerungChange}
+                  />
+                  <span className="ml-1">sek.</span>
+                </div>
+              </td>
               <td className="p-2 border text-center text-sm">
                 <input
                   type="number"
@@ -135,17 +156,7 @@ function KueModal({ showModal, onClose, slot }) {
                 />{" "}
                 kOhm
               </td>
-              <td className="p-2 border text-center text-sm">
-                {/* Flexbox für Filterzeit */}
-                <div className="flex items-center justify-center">
-                  <input
-                    type="number"
-                    className="w-12 border rounded p-1 text-sm"
-                    defaultValue="420"
-                  />
-                  <span className="ml-1">sek.</span>
-                </div>
-              </td>
+
               {/* 
                          <td className="p-2 border text-center">
                 <input type="checkbox" defaultChecked />

components/modales/SettingsModal.jsx

@@ -1,5 +1,6 @@
 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
 
 function SettingModal({ showModal, onClose }) {
@@ -15,6 +16,7 @@ function SettingModal({ showModal, onClose }) {
   const [ntp3, setNtp3] = useState("0.0.0.0");
   const [zeitzone, setZeitzone] = useState("2");
   const [activ, setActiv] = useState("1");
+  const [showRebootModal, setShowRebootModal] = useState(false);
 
   useEffect(() => {
     if (window.deviceName) setName(window.deviceName);
@@ -31,264 +33,291 @@ function SettingModal({ showModal, onClose }) {
     if (window.ntpActive) setActiv(window.ntpActive);
   }, []);
 
-  const handleSubmit = () => {
-    const url = `CPL?SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;
-
-    fetch(url)
-      .then((response) => {
-        if (response.ok) {
-          alert("Daten erfolgreich gesendet!");
-        } else {
-          alert("Fehler beim Senden der Daten!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden der Daten!");
-      });
-  };
-
   const handleReboot = () => {
-    const rebootUrl = `CPL?BOOT=1`;
-
-    fetch(rebootUrl)
-      .then((response) => {
-        if (response.ok) {
-          alert(
-            "Neustart Befehl erfolgreich gesendet! CPL wird neu gestartet."
-          );
-        } else {
-          alert("Fehler beim Senden des Neustart-Befehls!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden des Neustart-Befehls!");
+    if (
+      window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
+    ) {
+      fetch(`CPL?KUEdetail.ACP&BOOT=1`, { method: "GET" }).finally(() => {
+        window.location.href = `/wait`; //auf Client-Seite
       });
+    }
   };
 
   const handleClearDatabase = () => {
-    const clearDbUrl = `CPL?DEDB=1`;
+    if (
+      window.confirm("Sind Sie sicher, dass Sie die Datenbank leeren möchten?")
+    ) {
+      const clearDbUrl = `CPL?KUEdetail.ACP&DEDB=1`;
 
-    fetch(clearDbUrl)
-      .then((response) => {
-        if (response.ok) {
-          alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
-        } else {
+      fetch(clearDbUrl)
+        .then((response) => {
+          if (response.ok) {
+            alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
+          } else {
+            alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
+          }
+        })
+        .catch((error) => {
+          console.error("Fehler:", error);
           alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
-      });
+        });
+    }
+  };
+
+  const handleSubmit = () => {
+    if (window.confirm("Möchten Sie die Änderungen wirklich übernehmen?")) {
+      const url = `CPL?KUEdetail.ACP&SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;
+
+      fetch(url)
+        .then((response) => {
+          if (response.ok) {
+            alert("Daten erfolgreich gesendet!");
+          } else {
+            alert("Fehler beim Senden der Daten!");
+          }
+        })
+        .catch((error) => {
+          console.error("Fehler:", error);
+          alert("Fehler beim Senden der Daten!");
+        });
+    }
   };
 
   return (
-    <ReactModal
-      isOpen={showModal}
-      onRequestClose={onClose}
-      style={{
-        overlay: {
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          zIndex: 100,
-        },
-        content: {
-          top: "50%",
-          left: "50%",
-          right: "auto",
-          bottom: "auto",
-          marginRight: "-50%",
-          transform: "translate(-50%, -50%)",
-          width: "80%",
-          maxWidth: "800px",
-          padding: "20px",
-          borderRadius: "8px",
-          border: "none",
-          position: "relative",
-        },
-      }}
-    >
-      {/* Close Icon */}
-      <button
-        onClick={onClose}
+    <>
+      <ReactModal
+        isOpen={showModal}
+        onRequestClose={onClose}
         style={{
-          position: "absolute",
-          top: "10px",
-          right: "10px",
-          background: "transparent",
-          border: "none",
-          cursor: "pointer",
-          fontSize: "24px",
+          overlay: {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 100,
+          },
+          content: {
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)",
+            width: "80%",
+            maxWidth: "800px",
+            padding: "20px",
+            borderRadius: "8px",
+            border: "none",
+            position: "relative",
+          },
         }}
       >
-        <i className="bi bi-x-circle-fill"></i> {/* Bootstrap X Icon */}
-      </button>
+        {/* Modal-Inhalt */}
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "24px",
+          }}
+        >
+          <i className="bi bi-x-circle-fill"></i>
+        </button>
 
-      <div>
-        <h2 className="text-lg font-bold mb-4">System:</h2>
-        <form>
-          <div className="mb-4">
-            <label className="block text-sm font-medium">Name:</label>
-            <input
-              type="text"
-              className="border border-gray-300 rounded p-2 w-full"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-          </div>
+        {/* Weitere Inhalte wie Formular */}
+        <div>
+          <h2 className="text-lg font-bold mb-4">System:</h2>
+          <form>
+            <div className="mb-4">
+              <label className="block text-sm font-medium">Name:</label>
+              <input
+                type="text"
+                className="border border-gray-300 rounded p-2 w-full"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
 
-          <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium">
-                MAC Adresse 1:
-              </label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={mac1}
-                onChange={(e) => setMac1(e.target.value)}
-              />
+            <div className="mb-4 grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium">
+                  MAC Adresse 1:
+                </label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={mac1}
+                  onChange={(e) => setMac1(e.target.value)}
+                />
+              </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)}
+                />
+              </div>
             </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)}
-              />
-            </div>
-          </div>
 
-          <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium">IP:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={ip}
-                onChange={(e) => setIp(e.target.value)}
-              />
+            <div className="mb-4 grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium">IP:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={ip}
+                  onChange={(e) => setIp(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">Subnet:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={subnet}
+                  onChange={(e) => setSubnet(e.target.value)}
+                />
+              </div>
             </div>
-            <div>
-              <label className="block text-sm font-medium">Subnet:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={subnet}
-                onChange={(e) => setSubnet(e.target.value)}
-              />
-            </div>
-          </div>
 
-          <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium">Gateway:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={gateway}
-                onChange={(e) => setGateway(e.target.value)}
-              />
+            <div className="mb-4 grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium">Gateway:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={gateway}
+                  onChange={(e) => setGateway(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">Systemuhr:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={systemUhr}
+                  disabled
+                />
+              </div>
             </div>
-            <div>
-              <label className="block text-sm font-medium">Systemuhr:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={systemUhr}
-                disabled
-              />
-            </div>
-          </div>
 
-          {/* SNTP Client */}
-          <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
-          <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium">
-                IP NTP Server 1:
-              </label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={ntp1}
-                onChange={(e) => setNtp1(e.target.value)}
-              />
+            {/* SNTP Client */}
+            <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
+            <div className="mb-4 grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium">
+                  IP NTP Server 1:
+                </label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={ntp1}
+                  onChange={(e) => setNtp1(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">
+                  IP NTP Server 2:
+                </label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={ntp2}
+                  onChange={(e) => setNtp2(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">
+                  IP NTP Server 3:
+                </label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={ntp3}
+                  onChange={(e) => setNtp3(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">Zeitzone:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={zeitzone}
+                  onChange={(e) => setZeitzone(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium">Activ:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={activ}
+                  onChange={(e) => setActiv(e.target.value)}
+                />
+              </div>
             </div>
-            <div>
-              <label className="block text-sm font-medium">
-                IP NTP Server 2:
-              </label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={ntp2}
-                onChange={(e) => setNtp2(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium">
-                IP NTP Server 3:
-              </label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={ntp3}
-                onChange={(e) => setNtp3(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium">Zeitzone:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={zeitzone}
-                onChange={(e) => setZeitzone(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium">Activ:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={activ}
-                onChange={(e) => setActiv(e.target.value)}
-              />
-            </div>
-          </div>
 
-          {/* Datenbank leeren und Neustart CPL */}
-          <div className="flex flex-col items-start justify-between mt-4 space-y-2">
-            <button
-              className="bg-orange-500 text-white px-4 py-2 rounded"
-              onClick={() => handleReboot()}
-            >
-              Neustart CPL
-            </button>
-          </div>
+            {/* Datenbank leeren und Neustart CPL */}
+            <div className="flex flex-col items-start justify-between mt-4 space-y-2">
+              <button
+                className="bg-orange-500 text-white px-4 py-2 rounded"
+                onClick={() => handleReboot()}
+              >
+                Neustart CPL
+              </button>
+            </div>
 
-          {/* Modal Footer */}
-          <div className="flex justify-between mt-4">
-            <button
-              className="bg-red-500 text-white px-4 py-2 rounded"
-              onClick={() => handleClearDatabase()}
-            >
-              Datenbank leeren
-            </button>
-            <button
-              onClick={() => handleSubmit()}
-              className="bg-blue-500 text-white px-4 py-2 rounded"
-            >
-              Übernehmen
-            </button>
-          </div>
-        </form>
-      </div>
-    </ReactModal>
+            {/* Modal Footer */}
+            <div className="flex justify-between mt-4">
+              <button
+                className="bg-red-500 text-white px-4 py-2 rounded"
+                onClick={() => handleClearDatabase()}
+              >
+                Datenbank leeren
+              </button>
+              <button
+                onClick={() => handleSubmit()}
+                className="bg-blue-500 text-white px-4 py-2 rounded"
+              >
+                Übernehmen
+              </button>
+            </div>
+          </form>
+        </div>
+      </ReactModal>
+
+      {/* Reboot Modal */}
+      <ReactModal
+        isOpen={showRebootModal}
+        ariaHideApp={false}
+        style={{
+          overlay: {
+            backgroundColor: "rgba(0, 0, 0, 0.75)",
+            zIndex: 200,
+          },
+          content: {
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)",
+            width: "400px",
+            textAlign: "center",
+            padding: "20px",
+          },
+        }}
+      >
+        <h3>CPL wird neu gestartet...</h3>
+        <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
+        <p>Bitte warten Sie 5 Sekunden...</p>
+      </ReactModal>
+    </>
   );
 }