284 lines
11 KiB
HTML
284 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Moje urządzenia - RouterOS Update{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
/* Stylizacja progress bara zgodnie z device_detail.html */
|
|
.progress-container {
|
|
width: 50%;
|
|
margin: 20px auto;
|
|
background: #444;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 0%;
|
|
height: 30px;
|
|
background: #4caf50;
|
|
border-radius: 5px;
|
|
transition: width 0.5s linear;
|
|
}
|
|
|
|
#mass-system-update-overlay, #mass-firmware-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;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
|
|
|
|
{% block content %}
|
|
<h2>Moje urządzenia</h2>
|
|
<div class="row mb-3">
|
|
<div class="col text-end">
|
|
<button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('add_device') }}'">
|
|
Dodaj nowe urządzenie
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Formularz z przyciskami masowych operacji -->
|
|
<form id="mass-update-form">
|
|
<div class="mb-3">
|
|
<button type="button" id="mass-system-update-btn" class="btn btn-warning">Aktualizuj system (masowo)</button>
|
|
<button type="button" id="mass-firmware-update-btn" class="btn btn-danger">Aktualizuj firmware (masowo)</button>
|
|
<button type="submit" class="btn btn-primary">Odśwież wybrane</button>
|
|
</div>
|
|
<table class="table table-bordered table-hover">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th><input type="checkbox" id="select-all"></th>
|
|
<th>Nazwa / Adres IP</th>
|
|
<th>Ostatnie sprawdzenie</th>
|
|
<th>Status</th>
|
|
<th>System / Firmware</th>
|
|
<th>Akcje</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for device in devices %}
|
|
<tr>
|
|
<td>
|
|
<input type="checkbox" name="selected_devices" value="{{ device.id }}">
|
|
</td>
|
|
<td>
|
|
{% if device.name %}
|
|
{{ device.name }} |
|
|
<code><small class="text-muted">{{ device.ip }}</small></code>
|
|
{% else %}
|
|
{{ device.ip }}
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}</td>
|
|
<td>
|
|
{% if device.update_required or (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
|
|
{% if device.update_required and (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
|
|
<span class="badge bg-danger">Wymaga aktualizacji <small>(system i firmware)</small></span>
|
|
{% elif device.update_required %}
|
|
<span class="badge bg-danger">Wymaga aktualizacji <small>(system)</small></span>
|
|
{% else %}
|
|
<span class="badge bg-danger">Wymaga aktualizacji <small>(firmware)</small></span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="badge bg-success">Aktualny</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<small>
|
|
<strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
|
|
<strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}<br>
|
|
<strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
|
|
</small>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-info btn-sm" onclick="window.location.href='{{ url_for('device_detail', device_id=device.id) }}'">Szczegóły</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='{{ url_for('force_check', device_id=device.id) }}'">Wymuś sprawdzenie</button>
|
|
<button type="button" class="btn btn-warning btn-sm" onclick="window.location.href='{{ url_for('edit_device', device_id=device.id) }}'">Edytuj</button>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="text-center">Brak dodanych urządzeń.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
|
|
<!-- Overlay dla masowej aktualizacji systemu -->
|
|
<div id="mass-system-update-overlay">
|
|
<h3>Aktualizacja systemu rozpoczęta...</h3>
|
|
<div class="progress-container">
|
|
<div id="mass-system-progress" class="progress-bar"></div>
|
|
</div>
|
|
<p id="mass-system-timer">300 sekund</p>
|
|
</div>
|
|
|
|
<!-- Overlay dla restartu po aktualizacji firmware -->
|
|
<div id="mass-firmware-update-overlay">
|
|
<h3>Restart urządzeń po aktualizacji firmware...</h3>
|
|
<div class="progress-container">
|
|
<div id="mass-firmware-progress" class="progress-bar"></div>
|
|
</div>
|
|
<p id="mass-firmware-timer">120 sekund</p>
|
|
</div>
|
|
|
|
<!-- Dynamiczny prompt dla masowego restartu firmware -->
|
|
<div id="mass-firmware-reboot-prompt" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1100; color:white; text-align:center; padding-top:200px;">
|
|
<h3>Firmware update zakończony.</h3>
|
|
<p>Czy chcesz zrestartować wszystkie wybrane urządzenia?</p>
|
|
<button id="mass-firmware-reboot-btn" class="btn btn-danger">Restart urządzeń</button>
|
|
<button id="mass-firmware-cancel-btn" class="btn btn-secondary ms-2">Anuluj</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Dodajemy event listenery raz, aby uniknąć wielokrotnego przypisywania
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('select-all').addEventListener('change', function() {
|
|
var checkboxes = document.querySelectorAll('input[name="selected_devices"]');
|
|
for (var checkbox of checkboxes) {
|
|
checkbox.checked = this.checked;
|
|
}
|
|
});
|
|
|
|
document.getElementById('mass-firmware-reboot-btn').addEventListener('click', onMassFirmwareReboot);
|
|
document.getElementById('mass-firmware-cancel-btn').addEventListener('click', function() {
|
|
alert("Restart został anulowany. Pamiętaj, że firmware update wymaga rebootu.");
|
|
document.getElementById('mass-firmware-reboot-prompt').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
// Pobierz zaznaczone urządzenia
|
|
function getSelectedDeviceIds() {
|
|
var selected = [];
|
|
var checkboxes = document.querySelectorAll('input[name="selected_devices"]:checked');
|
|
checkboxes.forEach(function(cb) {
|
|
selected.push(cb.value);
|
|
});
|
|
return selected;
|
|
}
|
|
|
|
// Masowa aktualizacja systemu
|
|
document.getElementById('mass-system-update-btn').addEventListener('click', function() {
|
|
var selectedDevices = getSelectedDeviceIds();
|
|
if(selectedDevices.length === 0) {
|
|
alert("Wybierz przynajmniej jedno urządzenie.");
|
|
return;
|
|
}
|
|
// Wysyłamy update systemu dla każdego urządzenia asynchronicznie
|
|
selectedDevices.forEach(function(id) {
|
|
fetch(`/device/${id}/update`, { method: 'POST' })
|
|
.catch(function(error){ console.error('Błąd aktualizacji systemu dla urządzenia ' + id, error); });
|
|
});
|
|
// Pokaż overlay z paskiem postępu (5 minut)
|
|
var overlay = document.getElementById('mass-system-update-overlay');
|
|
overlay.style.display = 'block';
|
|
var timeLeft = 300; // 300 sekund
|
|
var progressBar = document.getElementById('mass-system-progress');
|
|
var timerDisplay = document.getElementById('mass-system-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);
|
|
// Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
|
|
selectedDevices.forEach(function(id) {
|
|
fetch(`/device/${id}/force_check`, { method: 'GET' })
|
|
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
|
});
|
|
location.reload();
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// Masowa aktualizacja firmware
|
|
document.getElementById('mass-firmware-update-btn').addEventListener('click', function() {
|
|
var selectedDevices = getSelectedDeviceIds();
|
|
if(selectedDevices.length === 0) {
|
|
alert("Wybierz przynajmniej jedno urządzenie.");
|
|
return;
|
|
}
|
|
// Wysyłamy update firmware dla każdego urządzenia asynchronicznie
|
|
selectedDevices.forEach(function(id) {
|
|
fetch(`/device/${id}/update_firmware`, { method: 'POST' })
|
|
.catch(function(error){ console.error('Błąd aktualizacji firmware dla urządzenia ' + id, error); });
|
|
});
|
|
// Wyświetlamy dynamiczny prompt restartu
|
|
document.getElementById('mass-firmware-reboot-prompt').style.display = 'block';
|
|
});
|
|
|
|
// Funkcja sekwencyjnego wysyłania reboot (z opóźnieniem)
|
|
function sendRebootSequentially(devices, index = 0) {
|
|
if (index >= devices.length) return Promise.resolve();
|
|
return fetch(`/device/${devices[index]}/restart`, { method: 'POST' })
|
|
.catch(function(error) {
|
|
console.error('Błąd wysyłania reboot dla urządzenia ' + devices[index], error);
|
|
})
|
|
.then(function() {
|
|
// Opóźnienie 500 ms przed kolejnym rebootem
|
|
return new Promise(resolve => setTimeout(resolve, 500));
|
|
})
|
|
.then(function() {
|
|
return sendRebootSequentially(devices, index + 1);
|
|
});
|
|
}
|
|
|
|
// Obsługa przycisku restartu w prompt dla masowego firmware update
|
|
function onMassFirmwareReboot() {
|
|
document.getElementById('mass-firmware-reboot-prompt').style.display = 'none';
|
|
var selectedDevices = getSelectedDeviceIds();
|
|
// Wysyłamy rebooty sekwencyjnie
|
|
sendRebootSequentially(selectedDevices)
|
|
.then(function() {
|
|
// Po wysłaniu reboot dla wszystkich urządzeń, pokazujemy overlay z 2-minutowym paskiem postępu
|
|
var overlay = document.getElementById('mass-firmware-update-overlay');
|
|
overlay.style.display = 'block';
|
|
var timeLeft = 120; // 120 sekund
|
|
var progressBar = document.getElementById('mass-firmware-progress');
|
|
var timerDisplay = document.getElementById('mass-firmware-timer');
|
|
var interval = setInterval(function(){
|
|
timeLeft--;
|
|
var percent = ((120 - timeLeft) / 120) * 100;
|
|
progressBar.style.width = percent + '%';
|
|
timerDisplay.textContent = timeLeft + ' sekund';
|
|
if(timeLeft <= 0){
|
|
clearInterval(interval);
|
|
// Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
|
|
selectedDevices.forEach(function(id) {
|
|
fetch(`/device/${id}/force_check`, { method: 'GET' })
|
|
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
|
});
|
|
location.reload();
|
|
}
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// Obsługa standardowego przycisku "Odśwież wybrane"
|
|
document.getElementById('mass-update-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var selectedDevices = getSelectedDeviceIds();
|
|
if(selectedDevices.length === 0) {
|
|
alert("Wybierz przynajmniej jedno urządzenie.");
|
|
return;
|
|
}
|
|
selectedDevices.forEach(function(id) {
|
|
fetch(`/device/${id}/force_check`, { method: 'GET' })
|
|
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
|
});
|
|
setTimeout(function(){ location.reload(); }, 2000);
|
|
});
|
|
</script>
|
|
{% endblock %} |