3D-Druck/Filaman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 128 Wiki Activity

feat: implement WebSocket for update progress and enhance update response handling

Browse Source
This commit is contained in:
Manuel Weiser
2025-02-22 18:12:27 +01:00
parent fe7b57fe0e
commit 4135073623
2 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
html/upgrade.html
View File

@@ -155,17 +155,29 @@
const progressContainer = document.querySelector('.progress-container');
const status = document.querySelector('.status');
// WebSocket für Update-Progress
const ws = new WebSocket('ws://' + window.location.host + '/ws');
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === "updateProgress") {
progress.style.width = data.progress + '%';
progress.textContent = data.progress + '%';
}
} catch (e) {
console.error('WebSocket message error:', e);
}
};
function handleUpdate(e) {
e.preventDefault();
const form = e.target;
const file = form.update.files[0];
const updateType = form.dataset.type;
if (!file) {
alert('Please select a file.');
return;
}
// Validate file name pattern
if (updateType === 'firmware' && !file.name.startsWith('upgrade_filaman_firmware_')) {
alert('Please select a valid firmware file (upgrade_filaman_firmware_*.bin)');
@@ -179,56 +191,54 @@
progressContainer.style.display = 'block';
status.style.display = 'none';
status.className = 'status';
// Reset progress bar
progress.style.width = '0%';
progress.textContent = '0%';
// Disable both forms during update
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = true);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/update', true);
xhr.onload = function() {
try {
let response = this.responseText;
if (xhr.status === 200) {
try {
const jsonResponse = JSON.parse(response);
// Zeige finale Nachricht
status.textContent = jsonResponse.message || "Update complete";
status.classList.add(jsonResponse.success ? 'success' : 'error');
status.style.display = 'block';
if (jsonResponse.success) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
status.textContent = "Update successful! Restarting device... The page will reload in 30 seconds.";
status.classList.add('success');
status.style.display = 'block';
// Setze Progress auf 100%
progress.style.width = '100%';
progress.textContent = '100%';
// Automatischer Neustart nach erfolgreicher Aktualisierung
status.textContent = "Update successful! Restarting device... The page will reload in 30 seconds.";
// Automatischer Redirect nach 30 Sekunden
setTimeout(() => {
window.location.href = '/';
}, 30000);
} else {
status.textContent = response.message || "Update failed";
status.classList.add('error');
status.style.display = 'block';
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);
}
} catch (e) {
console.error('JSON parse error:', e);
status.textContent = 'Update failed: Invalid response from server';
status.textContent = "Error: Invalid server response";
status.classList.add('error');
status.style.display = 'block';
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);
}
} catch (error) {
status.textContent = 'Error: ' + error.message;
} else {
status.textContent = "Update failed with status: " + xhr.status;
status.classList.add('error');
status.style.display = 'block';
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);
}
};
xhr.onerror = function() {
status.textContent = 'Update failed: Network error';
status.textContent = "Network error during update";
status.classList.add('error');
status.style.display = 'block';
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);