Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Hinzufügen eines 30-Sekunden-Fortschrittsbalkens für CPL-Neustart

Browse Source 
- 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.
This commit is contained in:
ISA
2024-11-14 09:32:56 +01:00
parent f46e72a2b5
commit 172134a16f
1 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/modales/settingsModal/handlers/handleReboot.js
View File

@@ -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;
}
</style>
</head>
<body>
<div class="message">
<div class="loader"></div>
<p>Bitte warten, Ihre Anfrage wird bearbeitet...</p>
<p>Bitte warten, CPL wird neu gestartet...</p>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
</div>
</body>
</html>
`;
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);