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; background-color: #f4f4f9;
color: #333; 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 { .message {
text-align: center; 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> </style>
</head> </head>
<body> <body>
<div class="message"> <div class="message">
<div class="loader"></div> <p>Bitte warten, CPL wird neu gestartet...</p>
<p>Bitte warten, Ihre Anfrage wird bearbeitet...</p> <div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
</div> </div>
</body> </body>
</html> </html>
`; `;
document.documentElement.innerHTML = waitHTML; 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 ( if (
@@ -52,14 +65,13 @@ const handleReboot = async (newIp = null) => {
) { ) {
showWaitPage(); showWaitPage();
// Leite zur neuen IP oder zur ursprünglichen IP basierend auf der Umgebung weiter
const baseRedirectURL = newIp ? `https://${newIp}` : window.location.origin; const baseRedirectURL = newIp ? `https://${newIp}` : window.location.origin;
const redirectPath = const redirectPath =
process.env.NODE_ENV === "production" ? "/dashboard.html" : "/dashboard"; process.env.NODE_ENV === "production" ? "/dashboard.html" : "/dashboard";
setTimeout(() => { setTimeout(() => {
window.location.href = `${baseRedirectURL}${redirectPath}`; window.location.href = `${baseRedirectURL}${redirectPath}`;
}, 33000); // Nach 33 Sekunden umleiten }, 33000);
const url = `${window.location.origin}/CPL?wait2reboot.html&BOOT=1`; const url = `${window.location.origin}/CPL?wait2reboot.html&BOOT=1`;
console.log(url); console.log(url);