Wait Seite läft in localhoost

.env.local

@@ -1,5 +1,5 @@
 #Next.js Webserver, bleibt localhost auf CPL bei production
 #NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
 #CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst
-#NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
+NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
-NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
+#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

app/wait/page.jsx

@@ -0,0 +1,26 @@
+"use client"; // app/wait/page.jsx
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { ClipLoader } from "react-spinners";
+
+export default function WaitPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Starte den Timer, um nach 20 Sekunden weiterzuleiten
+    const timer = setTimeout(() => {
+      router.push("/");
+    }, 20000); // 20 Sekunden warten
+
+    // Timer aufräumen, wenn die Komponente entladen wird
+    return () => clearTimeout(timer);
+  }, [router]);
+
+  return (
+    <div style={{ textAlign: "center", marginTop: "100px" }}>
+      <h1>Bitte warten...</h1>
+      <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
+      <p>Die Seite wird automatisch neu geladen.</p>
+    </div>
+  );
+}

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`;
+    if (
-
+      window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
-    fetch(rebootUrl)
+    ) {
-      .then((response) => {
+      fetch(`CPL?KUEdetail.ACP&BOOT=1`, { method: "GET" }).finally(() => {
-        if (response.ok) {
+        window.location.href = `/wait`; //auf Client-Seite
-          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!");
       });
+    }
   };
 
   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)
+      fetch(clearDbUrl)
-      .then((response) => {
+        .then((response) => {
-        if (response.ok) {
+          if (response.ok) {
-          alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
+            alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
-        } else {
+          } 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}
+      <ReactModal
-      onRequestClose={onClose}
+        isOpen={showModal}
-      style={{
+        onRequestClose={onClose}
-        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}
         style={{
-          position: "absolute",
+          overlay: {
-          top: "10px",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
-          right: "10px",
+            zIndex: 100,
-          background: "transparent",
+          },
-          border: "none",
+          content: {
-          cursor: "pointer",
+            top: "50%",
-          fontSize: "24px",
+            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 */}
+        {/* Modal-Inhalt */}
-      </button>
+        <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>
+        {/* Weitere Inhalte wie Formular */}
-        <h2 className="text-lg font-bold mb-4">System:</h2>
+        <div>
-        <form>
+          <h2 className="text-lg font-bold mb-4">System:</h2>
-          <div className="mb-4">
+          <form>
-            <label className="block text-sm font-medium">Name:</label>
+            <div className="mb-4">
-            <input
+              <label className="block text-sm font-medium">Name:</label>
-              type="text"
+              <input
-              className="border border-gray-300 rounded p-2 w-full"
+                type="text"
-              value={name}
+                className="border border-gray-300 rounded p-2 w-full"
-              onChange={(e) => setName(e.target.value)}
+                value={name}
-            />
+                onChange={(e) => setName(e.target.value)}
-          </div>
+              />
+            </div>
 
-          <div className="mb-4 grid grid-cols-2 gap-4">
+            <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
+              <div>
-              <label className="block text-sm font-medium">
+                <label className="block text-sm font-medium">
-                MAC Adresse 1:
+                  MAC Adresse 1:
-              </label>
+                </label>
-              <input
+                <input
-                type="text"
+                  type="text"
-                className="border border-gray-300 rounded p-2 w-full"
+                  className="border border-gray-300 rounded p-2 w-full"
-                value={mac1}
+                  value={mac1}
-                onChange={(e) => setMac1(e.target.value)}
+                  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 className="mb-4 grid grid-cols-2 gap-4">
-            <div>
+              <div>
-              <label className="block text-sm font-medium">IP:</label>
+                <label className="block text-sm font-medium">IP:</label>
-              <input
+                <input
-                type="text"
+                  type="text"
-                className="border border-gray-300 rounded p-2 w-full"
+                  className="border border-gray-300 rounded p-2 w-full"
-                value={ip}
+                  value={ip}
-                onChange={(e) => setIp(e.target.value)}
+                  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 className="mb-4 grid grid-cols-2 gap-4">
-            <div>
+              <div>
-              <label className="block text-sm font-medium">Gateway:</label>
+                <label className="block text-sm font-medium">Gateway:</label>
-              <input
+                <input
-                type="text"
+                  type="text"
-                className="border border-gray-300 rounded p-2 w-full"
+                  className="border border-gray-300 rounded p-2 w-full"
-                value={gateway}
+                  value={gateway}
-                onChange={(e) => setGateway(e.target.value)}
+                  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 */}
+            {/* SNTP Client */}
-          <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
+            <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
-          <div className="mb-4 grid grid-cols-2 gap-4">
+            <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
+              <div>
-              <label className="block text-sm font-medium">
+                <label className="block text-sm font-medium">
-                IP NTP Server 1:
+                  IP NTP Server 1:
-              </label>
+                </label>
-              <input
+                <input
-                type="text"
+                  type="text"
-                className="border border-gray-300 rounded p-2 w-full"
+                  className="border border-gray-300 rounded p-2 w-full"
-                value={ntp1}
+                  value={ntp1}
-                onChange={(e) => setNtp1(e.target.value)}
+                  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 */}
+            {/* Datenbank leeren und Neustart CPL */}
-          <div className="flex flex-col items-start justify-between mt-4 space-y-2">
+            <div className="flex flex-col items-start justify-between mt-4 space-y-2">
-            <button
+              <button
-              className="bg-orange-500 text-white px-4 py-2 rounded"
+                className="bg-orange-500 text-white px-4 py-2 rounded"
-              onClick={() => handleReboot()}
+                onClick={() => handleReboot()}
-            >
+              >
-              Neustart CPL
+                Neustart CPL
-            </button>
+              </button>
-          </div>
+            </div>
 
-          {/* Modal Footer */}
+            {/* Modal Footer */}
-          <div className="flex justify-between mt-4">
+            <div className="flex justify-between mt-4">
-            <button
+              <button
-              className="bg-red-500 text-white px-4 py-2 rounded"
+                className="bg-red-500 text-white px-4 py-2 rounded"
-              onClick={() => handleClearDatabase()}
+                onClick={() => handleClearDatabase()}
-            >
+              >
-              Datenbank leeren
+                Datenbank leeren
-            </button>
+              </button>
-            <button
+              <button
-              onClick={() => handleSubmit()}
+                onClick={() => handleSubmit()}
-              className="bg-blue-500 text-white px-4 py-2 rounded"
+                className="bg-blue-500 text-white px-4 py-2 rounded"
-            >
+              >
-              Übernehmen
+                Übernehmen
-            </button>
+              </button>
-          </div>
+            </div>
-        </form>
+          </form>
-      </div>
+        </div>
-    </ReactModal>
+      </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>
+    </>
   );
 }
 

package-lock.json

@@ -17,7 +17,8 @@
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18",
-        "react-modal": "^3.16.1"
+        "react-modal": "^3.16.1",
+        "react-spinners": "^0.14.1"
       },
       "devDependencies": {
         "postcss": "^8.4.47",
@@ -1468,6 +1469,15 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -19,7 +19,8 @@
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
-    "react-modal": "^3.16.1"
+    "react-modal": "^3.16.1",
+    "react-spinners": "^0.14.1"
   },
   "devDependencies": {
     "postcss": "^8.4.47",