From c5cf6964a22a3a43f722520b490a0ee251dfbd42 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 17 Oct 2024 12:14:56 +0200 Subject: [PATCH] =?UTF-8?q?Wait=20Seite=20l=C3=A4ft=20in=20localhoost?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 4 +- app/wait/page.jsx | 26 ++ components/modales/KueModal.jsx | 35 +- components/modales/SettingsModal.jsx | 497 ++++++++++++++------------- package-lock.json | 12 +- package.json | 3 +- 6 files changed, 327 insertions(+), 250 deletions(-) create mode 100644 app/wait/page.jsx diff --git a/.env.local b/.env.local index 8d91490..57dd31e 100644 --- a/.env.local +++ b/.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=http://localhost:3000 +NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443 +#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 diff --git a/app/wait/page.jsx b/app/wait/page.jsx new file mode 100644 index 0000000..8a06c5c --- /dev/null +++ b/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 ( +
+

Bitte warten...

+ {/* Spinner */} +

Die Seite wird automatisch neu geladen.

+
+ ); +} diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx index 3a697c6..7977ceb 100644 --- a/components/modales/KueModal.jsx +++ b/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 }) { Isolationsgrenzwert + Verzögerung Schleifengrenzwert - Filterzeit {/* TDR Aktiv @@ -127,6 +136,18 @@ function KueModal({ showModal, onClose, slot }) { />{" "} MOhm + + {/* Flexbox für Verzögerung */} +
+ + sek. +
+ {" "} kOhm - - {/* Flexbox für Filterzeit */} -
- - sek. -
- + {/* diff --git a/components/modales/SettingsModal.jsx b/components/modales/SettingsModal.jsx index b25ee34..d8da15e 100644 --- a/components/modales/SettingsModal.jsx +++ b/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 ( - - {/* Close Icon */} - + {/* Modal-Inhalt */} + -
-

System:

-
-
- - setName(e.target.value)} - /> -
+ {/* Weitere Inhalte wie Formular */} +
+

System:

+ +
+ + setName(e.target.value)} + /> +
-
-
- - setMac1(e.target.value)} - /> +
+
+ + setMac1(e.target.value)} + /> +
+
+ + setMac2(e.target.value)} + /> +
-
- - setMac2(e.target.value)} - /> -
-
-
-
- - setIp(e.target.value)} - /> +
+
+ + setIp(e.target.value)} + /> +
+
+ + setSubnet(e.target.value)} + /> +
-
- - setSubnet(e.target.value)} - /> -
-
-
-
- - setGateway(e.target.value)} - /> +
+
+ + setGateway(e.target.value)} + /> +
+
+ + +
-
- - -
-
- {/* SNTP Client */} -

SNTP Client:

-
-
- - setNtp1(e.target.value)} - /> + {/* SNTP Client */} +

SNTP Client:

+
+
+ + setNtp1(e.target.value)} + /> +
+
+ + setNtp2(e.target.value)} + /> +
+
+ + setNtp3(e.target.value)} + /> +
+
+ + setZeitzone(e.target.value)} + /> +
+
+ + setActiv(e.target.value)} + /> +
-
- - setNtp2(e.target.value)} - /> -
-
- - setNtp3(e.target.value)} - /> -
-
- - setZeitzone(e.target.value)} - /> -
-
- - setActiv(e.target.value)} - /> -
-
- {/* Datenbank leeren und Neustart CPL */} -
- -
+ {/* Datenbank leeren und Neustart CPL */} +
+ +
- {/* Modal Footer */} -
- - -
- -
- + {/* Modal Footer */} +
+ + +
+ +
+ + + {/* Reboot Modal */} + +

CPL wird neu gestartet...

+ {/* Spinner */} +

Bitte warten Sie 5 Sekunden...

+ + ); } diff --git a/package-lock.json b/package-lock.json index 767d25e..12c2bf0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4f147e9..d1891c3 100644 --- a/package.json +++ b/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",