2025-02-21 14:35:12 +01:00
|
|
|
<!-- head --><!DOCTYPE html>
|
2025-02-18 12:28:47 +01:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-02-21 14:35:12 +01:00
|
|
|
<title>FilaMan - Filament Management Tool</title>
|
|
|
|
|
<link rel="icon" type="image/png" href="/favicon.ico">
|
2025-02-18 12:28:47 +01:00
|
|
|
<link rel="stylesheet" href="style.css">
|
2025-02-21 11:53:59 +01:00
|
|
|
<script>
|
|
|
|
|
fetch('/api/version')
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
const versionSpan = document.querySelector('.version');
|
|
|
|
|
if (versionSpan) {
|
|
|
|
|
versionSpan.textContent = 'v' + data.version;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error fetching version:', error));
|
|
|
|
|
</script>
|
2025-02-18 12:28:47 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="navbar">
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 2rem;">
|
|
|
|
|
<img src="/logo.png" alt="FilaMan Logo" class="logo">
|
|
|
|
|
<div class="logo-text">
|
2025-02-21 11:53:59 +01:00
|
|
|
<h1>FilaMan<span class="version"></span></h1>
|
2025-02-22 17:36:02 +01:00
|
|
|
<h4>Filament Management Tool</h4>
|
2025-02-18 12:28:47 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<nav style="display: flex; gap: 1rem;">
|
|
|
|
|
<a href="/">Start</a>
|
|
|
|
|
<a href="/waage">Scale</a>
|
|
|
|
|
<a href="/spoolman">Spoolman/Bambu</a>
|
|
|
|
|
<a href="/about">About</a>
|
|
|
|
|
<a href="/upgrade">Upgrade</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="status-container">
|
|
|
|
|
<div class="status-item">
|
|
|
|
|
<span class="status-dot" id="bambuDot"></span>B
|
|
|
|
|
</div>
|
|
|
|
|
<div class="status-item">
|
|
|
|
|
<span class="status-dot" id="spoolmanDot"></span>S
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ram-status" id="ramStatus"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-02-21 11:53:59 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
2025-02-18 12:28:47 +01:00
|
|
|
|
|
|
|
|
<!-- head -->
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
2025-02-21 14:35:12 +01:00
|
|
|
<h1>Firmware Upgrade</h1>
|
|
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
<div class="warning">
|
2025-02-21 10:35:52 +01:00
|
|
|
<strong>Warning:</strong> Do not power off the device during update.
|
2025-02-18 12:28:47 +01:00
|
|
|
</div>
|
|
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
<div class="update-options">
|
|
|
|
|
<div class="update-section">
|
|
|
|
|
<h2>Firmware Update</h2>
|
|
|
|
|
<p>Upload a new firmware file (filaman_*.bin)</p>
|
|
|
|
|
<div class="update-form">
|
|
|
|
|
<form id="firmwareForm" enctype='multipart/form-data' data-type="firmware">
|
|
|
|
|
<input type='file' name='update' accept='.bin' required>
|
|
|
|
|
<input type='submit' value='Start Firmware Update'>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
<div class="update-section">
|
|
|
|
|
<h2>Webpage Update</h2>
|
|
|
|
|
<p>Upload a new webpage file (webpage_*.bin)</p>
|
|
|
|
|
<div class="update-form">
|
|
|
|
|
<form id="webpageForm" enctype='multipart/form-data' data-type="webpage">
|
|
|
|
|
<input type='file' name='update' accept='.bin' required>
|
|
|
|
|
<input type='submit' value='Start Webpage Update'>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-02-18 12:28:47 +01:00
|
|
|
</div>
|
2025-02-21 10:35:52 +01:00
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
<div class="progress-container" style="display: none;">
|
2025-02-21 13:52:27 +01:00
|
|
|
<div class="progress-bar">0%</div>
|
2025-02-18 12:28:47 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="status"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
<style>
|
|
|
|
|
.update-options {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
margin: 2rem 0;
|
|
|
|
|
}
|
|
|
|
|
.update-section {
|
|
|
|
|
flex: 1;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
.update-section h2 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
.update-section p {
|
|
|
|
|
color: #666;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
2025-02-21 13:52:27 +01:00
|
|
|
.progress-container {
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.progress-bar {
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 20px;
|
|
|
|
|
background: #4CAF50;
|
|
|
|
|
transition: width 0.3s ease-in-out;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.status {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.status.success {
|
|
|
|
|
background: #e8f5e9;
|
|
|
|
|
color: #2e7d32;
|
|
|
|
|
}
|
|
|
|
|
.status.error {
|
|
|
|
|
background: #ffebee;
|
|
|
|
|
color: #c62828;
|
|
|
|
|
}
|
|
|
|
|
.warning {
|
|
|
|
|
background: #fff3e0;
|
|
|
|
|
color: #e65100;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
2025-02-21 11:57:19 +01:00
|
|
|
</style>
|
|
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
<script>
|
2025-02-18 14:18:14 +01:00
|
|
|
// Hide status indicators during update
|
|
|
|
|
const statusContainer = document.querySelector('.status-container');
|
|
|
|
|
if (statusContainer) {
|
|
|
|
|
statusContainer.style.display = 'none';
|
2025-02-21 09:24:54 +01:00
|
|
|
}
|
|
|
|
|
|
2025-02-21 13:52:27 +01:00
|
|
|
const progress = document.querySelector('.progress-bar');
|
|
|
|
|
const progressContainer = document.querySelector('.progress-container');
|
|
|
|
|
const status = document.querySelector('.status');
|
|
|
|
|
|
2025-02-22 18:12:27 +01:00
|
|
|
// WebSocket für Update-Progress
|
|
|
|
|
const ws = new WebSocket('ws://' + window.location.host + '/ws');
|
2025-02-22 18:49:45 +01:00
|
|
|
let updateInProgress = false;
|
|
|
|
|
|
2025-02-22 18:12:27 +01:00
|
|
|
ws.onmessage = function(event) {
|
|
|
|
|
try {
|
|
|
|
|
const data = JSON.parse(event.data);
|
2025-02-22 18:49:45 +01:00
|
|
|
if (data.type === "updateProgress" && updateInProgress) {
|
2025-02-22 18:19:21 +01:00
|
|
|
progressContainer.style.display = 'block';
|
2025-02-22 18:49:45 +01:00
|
|
|
|
|
|
|
|
// Setze den Fortschritt nur wenn er größer ist als der aktuelle
|
|
|
|
|
const currentProgress = parseInt(progress.textContent);
|
|
|
|
|
const newProgress = parseInt(data.progress);
|
|
|
|
|
if (isNaN(currentProgress) || newProgress > currentProgress) {
|
|
|
|
|
progress.style.width = data.progress + '%';
|
|
|
|
|
progress.textContent = data.progress + '%';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Zeige verschiedene Status-Nachrichten
|
|
|
|
|
if (data.status === "finalizing") {
|
|
|
|
|
status.textContent = "Finalizing update...";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
} else if (data.status === "complete" || data.status === "success") {
|
|
|
|
|
status.textContent = "Update successful! Device is restarting... Page will reload in 30 seconds.";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
// Versuche die WebSocket-Verbindung sauber zu schließen
|
|
|
|
|
try {
|
|
|
|
|
ws.close();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log('WebSocket already closed');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
}
|
2025-02-22 18:12:27 +01:00
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error('WebSocket message error:', e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2025-02-22 18:19:21 +01:00
|
|
|
ws.onclose = function() {
|
2025-02-22 18:49:45 +01:00
|
|
|
// Wenn das Update läuft und der Fortschritt hoch ist, zeige Success
|
|
|
|
|
if (updateInProgress) {
|
|
|
|
|
const currentProgress = parseInt(progress.textContent);
|
|
|
|
|
if (!isNaN(currentProgress) && currentProgress >= 90) {
|
|
|
|
|
status.textContent = "Update appears successful! Device is restarting... Page will reload in 30 seconds.";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
} else {
|
|
|
|
|
status.textContent = "Connection lost. Please wait 30 seconds and check if the update was successful...";
|
|
|
|
|
status.classList.add('warning');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
}
|
2025-02-22 18:19:21 +01:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
function handleUpdate(e) {
|
2025-02-18 12:28:47 +01:00
|
|
|
e.preventDefault();
|
2025-02-21 13:52:27 +01:00
|
|
|
const form = e.target;
|
2025-02-18 12:28:47 +01:00
|
|
|
const file = form.update.files[0];
|
2025-02-21 11:57:19 +01:00
|
|
|
const updateType = form.dataset.type;
|
2025-02-18 14:18:14 +01:00
|
|
|
if (!file) {
|
2025-02-21 11:57:19 +01:00
|
|
|
alert('Please select a file.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2025-02-22 18:49:45 +01:00
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
// Validate file name pattern
|
2025-02-22 09:38:14 +01:00
|
|
|
if (updateType === 'firmware' && !file.name.startsWith('upgrade_filaman_firmware_')) {
|
|
|
|
|
alert('Please select a valid firmware file (upgrade_filaman_firmware_*.bin)');
|
2025-02-21 11:57:19 +01:00
|
|
|
return;
|
|
|
|
|
}
|
2025-02-22 09:38:14 +01:00
|
|
|
if (updateType === 'webpage' && !file.name.startsWith('upgrade_filaman_website_')) {
|
|
|
|
|
alert('Please select a valid webpage file (upgrade_filaman_website_*.bin)');
|
2025-02-21 09:24:54 +01:00
|
|
|
return;
|
|
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-22 18:49:45 +01:00
|
|
|
updateInProgress = true;
|
2025-02-18 12:28:47 +01:00
|
|
|
progressContainer.style.display = 'block';
|
|
|
|
|
status.style.display = 'none';
|
|
|
|
|
status.className = 'status';
|
2025-02-21 13:52:27 +01:00
|
|
|
progress.style.width = '0%';
|
|
|
|
|
progress.textContent = '0%';
|
2025-02-22 18:49:45 +01:00
|
|
|
|
2025-02-21 11:57:19 +01:00
|
|
|
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = true);
|
2025-02-21 09:24:54 +01:00
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.open('POST', '/update', true);
|
2025-02-22 18:12:27 +01:00
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
xhr.onload = function() {
|
2025-02-22 18:12:27 +01:00
|
|
|
if (xhr.status === 200) {
|
2025-02-18 12:28:47 +01:00
|
|
|
try {
|
2025-02-22 18:12:27 +01:00
|
|
|
const response = JSON.parse(xhr.responseText);
|
|
|
|
|
if (response.success) {
|
2025-02-22 18:49:45 +01:00
|
|
|
if (progress.textContent !== '100%') {
|
|
|
|
|
progress.style.width = '100%';
|
|
|
|
|
progress.textContent = '100%';
|
|
|
|
|
}
|
|
|
|
|
status.textContent = "Update successful! Device is restarting... Page will reload in 30 seconds.";
|
2025-02-22 18:12:27 +01:00
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
2025-02-22 14:04:34 +01:00
|
|
|
setTimeout(() => {
|
2025-02-22 17:53:51 +01:00
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
2025-02-22 14:04:34 +01:00
|
|
|
} else {
|
2025-02-22 18:49:45 +01:00
|
|
|
updateInProgress = false;
|
2025-02-22 18:12:27 +01:00
|
|
|
status.textContent = response.message || "Update failed";
|
|
|
|
|
status.classList.add('error');
|
|
|
|
|
status.style.display = 'block';
|
2025-02-22 14:04:34 +01:00
|
|
|
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);
|
2025-02-18 12:28:47 +01:00
|
|
|
}
|
|
|
|
|
} catch (e) {
|
2025-02-22 18:49:45 +01:00
|
|
|
if (progress.textContent === '100%') {
|
|
|
|
|
// Wenn 100% erreicht wurden, nehmen wir an, dass das Update erfolgreich war
|
|
|
|
|
status.textContent = "Update appears successful! Device is restarting... Page will reload in 30 seconds.";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
} else {
|
|
|
|
|
handleUpdateError("Invalid server response");
|
|
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
}
|
2025-02-22 18:12:27 +01:00
|
|
|
} else {
|
2025-02-22 18:49:45 +01:00
|
|
|
if (progress.textContent === '100%') {
|
|
|
|
|
// Bei 100% Fortschritt gehen wir von einem erfolgreichen Update aus
|
|
|
|
|
status.textContent = "Update appears successful! Device is restarting... Page will reload in 30 seconds.";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
} else {
|
|
|
|
|
handleUpdateError("Server error: " + xhr.status);
|
|
|
|
|
}
|
2025-02-21 10:35:52 +01:00
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
};
|
2025-02-22 18:12:27 +01:00
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
xhr.onerror = function() {
|
2025-02-22 18:49:45 +01:00
|
|
|
if (progress.textContent === '100%') {
|
|
|
|
|
// Bei 100% Fortschritt gehen wir von einem erfolgreichen Update aus
|
|
|
|
|
status.textContent = "Update appears successful! Device is restarting... Page will reload in 30 seconds.";
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 30000);
|
|
|
|
|
} else {
|
|
|
|
|
handleUpdateError("Network error during update");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function handleUpdateError(message) {
|
|
|
|
|
updateInProgress = false;
|
|
|
|
|
status.textContent = message;
|
2025-02-18 12:28:47 +01:00
|
|
|
status.classList.add('error');
|
|
|
|
|
status.style.display = 'block';
|
2025-02-21 11:57:19 +01:00
|
|
|
document.querySelectorAll('form input[type=submit]').forEach(btn => btn.disabled = false);
|
2025-02-22 18:49:45 +01:00
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-21 13:52:27 +01:00
|
|
|
const formData = new FormData();
|
|
|
|
|
formData.append('update', file);
|
2025-02-18 12:28:47 +01:00
|
|
|
xhr.send(formData);
|
2025-02-21 11:57:19 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById('firmwareForm').addEventListener('submit', handleUpdate);
|
|
|
|
|
document.getElementById('webpageForm').addEventListener('submit', handleUpdate);
|
2025-02-18 12:28:47 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
