new css and functions

This commit is contained in:
Mateusz Gruszczyński
2025-02-27 00:02:29 +01:00
parent d5c8aedfd4
commit f9215590ea
6 changed files with 325 additions and 119 deletions

View File

@ -19,6 +19,35 @@
overflow-y: auto;
white-space: pre-wrap;
}
/* Stylizacja overlay dla system update */
#system-update-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1000;
color: white;
text-align: center;
padding-top: 200px;
}
#system-update-overlay h3 {
margin-bottom: 20px;
}
#system-update-overlay .progress-container {
width: 50%;
margin: 20px auto;
background: #444;
border-radius: 5px;
}
#system-update-overlay .progress-bar {
width: 0%;
height: 30px;
background: #4caf50;
border-radius: 5px;
}
</style>
{% endblock %}
{% block content %}
@ -48,7 +77,8 @@
</p>
<p>
<strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
<strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}
<strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}<br>
<strong>Upgrade Firmware:</strong> <b>{{ device.upgrade_firmware or 'N/A' }}</b>
</p>
<p>
<strong>Branch aktualizacji:</strong> {{ device.branch|capitalize }}
@ -115,10 +145,10 @@
<!-- Akcje urządzenia -->
<div class="mb-4">
<div class="d-flex flex-wrap gap-2">
<form method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
<form id="system-update-form" method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
<button type="submit" class="btn btn-warning">Aktualizuj system</button>
</form>
<form method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
<form id="firmware-update-form" method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
<button type="submit" class="btn btn-danger">Aktualizuj firmware</button>
</form>
<a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
@ -127,5 +157,74 @@
<a href="{{ url_for('devices') }}" class="btn btn-outline-secondary">Powrót do listy urządzeń</a>
</div>
</div>
<!-- Overlay dla system update -->
<div id="system-update-overlay">
<h3>Aktualizacja systemu rozpoczęta...</h3>
<div class="progress-container">
<div id="system-update-progress" class="progress-bar"></div>
</div>
<p id="system-update-timer">300 sekund</p>
</div>
<!-- Div dla firmware restart -->
<div id="firmware-restart-div" style="display:none; margin-top:20px;">
<div class="alert alert-warning">
Router wymaga ręcznego wykonania polecenia reboot.
</div>
<button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
</div>
</div>
<script>
// System update: Po kliknięciu w formularz system update wyświetl overlay z licznikiem
document.getElementById('system-update-form').addEventListener('submit', function(e) {
e.preventDefault(); // Zatrzymaj standardowe wysłanie formularza
var overlay = document.getElementById('system-update-overlay');
overlay.style.display = 'block';
var timeLeft = 300; // 300 sekund = 5 minut
var progressBar = document.getElementById('system-update-progress');
var timerDisplay = document.getElementById('system-update-timer');
var interval = setInterval(function(){
timeLeft--;
var percent = ((300 - timeLeft) / 300) * 100;
progressBar.style.width = percent + '%';
timerDisplay.textContent = timeLeft + ' sekund';
if(timeLeft <= 0){
clearInterval(interval);
location.reload();
}
}, 1000);
// Opcjonalnie wyślij formularz AJAX
fetch(this.action, { method: 'POST' })
.then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
.catch(function(error){ console.error('Błąd aktualizacji systemu:', error); });
});
// Firmware update: Po kliknięciu w formularz firmware update wyświetl dodatkowy div z przyciskiem restartu
document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
e.preventDefault(); // Zatrzymaj standardowe wysłanie formularza
fetch(this.action, { method: 'POST' })
.then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
.catch(function(error){ console.error('Błąd aktualizacji firmware:', error); });
document.getElementById('firmware-restart-div').style.display = 'block';
});
// Restart urządzenia: Po kliknięciu przycisku restart wysyłamy żądanie POST do endpointu restart_device
document.getElementById('restart-device-btn').addEventListener('click', function() {
fetch('{{ url_for("restart_device", device_id=device.id) }}', {
method: 'POST'
}).then(function(response){
if(response.ok){
alert('Komenda reboot wysłana.');
location.reload();
} else {
alert('Błąd podczas wysyłania komendy reboot.');
}
}).catch(function(error){
alert('Błąd: ' + error);
});
});
</script>
{% endblock %}