From 172134a16fa95e73684cd734fb1419411e2aff5e Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 14 Nov 2024 09:32:56 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Hinzuf=C3=BCgen=20eines=2030-Sekunden-F?= =?UTF-8?q?ortschrittsbalkens=20f=C3=BCr=20CPL-Neustart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fortschrittsbalken integriert, der den Benutzer über den laufenden Neustartvorgang informiert. - CSS-basierten Fortschrittsbalken erstellt, der sich schrittweise über 30 Sekunden füllt. - Aktualisierung des Wartebildschirms mit der Nachricht "Bitte warten, CPL wird neu gestartet...". - Optimierung der Funktion zur korrekten Darstellung und Animation des Fortschrittsbalkens. --- .../settingsModal/handlers/handleReboot.js | 46 ++++++++++++------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/components/modales/settingsModal/handlers/handleReboot.js b/components/modales/settingsModal/handlers/handleReboot.js index 58ca489..681efe3 100644 --- a/components/modales/settingsModal/handlers/handleReboot.js +++ b/components/modales/settingsModal/handlers/handleReboot.js @@ -18,33 +18,46 @@ const handleReboot = async (newIp = null) => { background-color: #f4f4f9; color: #333; } - .loader { - border: 8px solid #f3f3f3; - border-top: 8px solid #3498db; - border-radius: 50%; - width: 60px; - height: 60px; - animation: spin 1s linear infinite; - margin-bottom: 20px; - } - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } - } .message { text-align: center; } + .progress-container { + width: 100%; + background-color: #ddd; + border-radius: 10px; + overflow: hidden; + margin-top: 20px; + } + .progress-bar { + height: 20px; + width: 0; + background-color: #3498db; + transition: width 0.3s; + }
-
-
Bitte warten, Ihre Anfrage wird bearbeitet...
+
Bitte warten, CPL wird neu gestartet...
+
+
+
`; document.documentElement.innerHTML = waitHTML; + + // JavaScript für die Progress-Bar-Animation nach dem Hinzufügen der HTML-Struktur + let progress = 0; + const progressBar = document.getElementById("progress-bar"); + const interval = setInterval(() => { + progress += 1; + progressBar.style.width = progress + "%"; + if (progress >= 100) { + clearInterval(interval); + } + }, 300); // 300ms x 100 = 30 Sekunden }; if ( @@ -52,14 +65,13 @@ const handleReboot = async (newIp = null) => { ) { showWaitPage(); - // Leite zur neuen IP oder zur ursprünglichen IP basierend auf der Umgebung weiter const baseRedirectURL = newIp ? `https://${newIp}` : window.location.origin; const redirectPath = process.env.NODE_ENV === "production" ? "/dashboard.html" : "/dashboard"; setTimeout(() => { window.location.href = `${baseRedirectURL}${redirectPath}`; - }, 33000); // Nach 33 Sekunden umleiten + }, 33000); const url = `${window.location.origin}/CPL?wait2reboot.html&BOOT=1`; console.log(url);