new css and functions
This commit is contained in:
Mateusz Gruszczyński
parent
f9215590ea
commit
a17423aaa1
@ -20,7 +20,7 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/* Stylizacja overlay dla system update */
|
||||
#system-update-overlay {
|
||||
#system-update-overlay, #reboot-progress-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -33,16 +33,16 @@
|
||||
text-align: center;
|
||||
padding-top: 200px;
|
||||
}
|
||||
#system-update-overlay h3 {
|
||||
#system-update-overlay h3, #reboot-progress-overlay h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#system-update-overlay .progress-container {
|
||||
.progress-container {
|
||||
width: 50%;
|
||||
margin: 20px auto;
|
||||
background: #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#system-update-overlay .progress-bar {
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 30px;
|
||||
background: #4caf50;
|
||||
@ -158,7 +158,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay dla system update -->
|
||||
<!-- Overlay dla system update (5 minut) -->
|
||||
<div id="system-update-overlay">
|
||||
<h3>Aktualizacja systemu rozpoczęta...</h3>
|
||||
<div class="progress-container">
|
||||
@ -167,7 +167,16 @@
|
||||
<p id="system-update-timer">300 sekund</p>
|
||||
</div>
|
||||
|
||||
<!-- Div dla firmware restart -->
|
||||
<!-- Overlay dla reboot progress (2 minuty) -->
|
||||
<div id="reboot-progress-overlay">
|
||||
<h3>Restart urządzenia...</h3>
|
||||
<div class="progress-container">
|
||||
<div id="reboot-progress-bar" class="progress-bar"></div>
|
||||
</div>
|
||||
<p id="reboot-timer">120 sekund</p>
|
||||
</div>
|
||||
|
||||
<!-- Div dla firmware restart (komunikat z przyciskiem restartu) -->
|
||||
<div id="firmware-restart-div" style="display:none; margin-top:20px;">
|
||||
<div class="alert alert-warning">
|
||||
Router wymaga ręcznego wykonania polecenia reboot.
|
||||
@ -178,47 +187,74 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// System update: Po kliknięciu w formularz system update wyświetl overlay z licznikiem
|
||||
// System update: Po kliknięciu w formularz system update
|
||||
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 timeLeft = 240;
|
||||
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;
|
||||
var percent = ((240 - timeLeft) / 240) * 100;
|
||||
progressBar.style.width = percent + '%';
|
||||
timerDisplay.textContent = timeLeft + ' sekund';
|
||||
if(timeLeft <= 0){
|
||||
clearInterval(interval);
|
||||
location.reload();
|
||||
// Po zakończeniu 5 minut wykonaj polecenie "Wymuś sprawdzenie"
|
||||
fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
|
||||
.then(function(response){
|
||||
location.reload();
|
||||
})
|
||||
.catch(function(error){ console.error('Błąd force check:', error); });
|
||||
}
|
||||
}, 1000);
|
||||
// Opcjonalnie wyślij formularz AJAX
|
||||
// Opcjonalnie wysyłamy formularz AJAX, aby rozpocząć aktualizację systemu
|
||||
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
|
||||
// Firmware update: Po kliknięciu w formularz firmware update
|
||||
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); });
|
||||
// Pokaż div z komunikatem o reboot i przyciskiem restartu
|
||||
document.getElementById('firmware-restart-div').style.display = 'block';
|
||||
});
|
||||
|
||||
// Restart urządzenia: Po kliknięciu przycisku restart wysyłamy żądanie POST do endpointu restart_device
|
||||
// Restart urządzenia: Po kliknięciu przycisku restart wysyłamy komendę reboot,
|
||||
// a następnie pokazujemy overlay z 2-minutowym paskiem postępu
|
||||
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();
|
||||
// Pokaż overlay dla reboot progress
|
||||
var rebootOverlay = document.getElementById('reboot-progress-overlay');
|
||||
rebootOverlay.style.display = 'block';
|
||||
var timeLeft = 90;
|
||||
var progressBar = document.getElementById('reboot-progress-bar');
|
||||
var timerDisplay = document.getElementById('reboot-timer');
|
||||
var interval = setInterval(function(){
|
||||
timeLeft--;
|
||||
var percent = ((90 - timeLeft) / 90) * 100;
|
||||
progressBar.style.width = percent + '%';
|
||||
timerDisplay.textContent = timeLeft + ' sekund';
|
||||
if(timeLeft <= 0){
|
||||
clearInterval(interval);
|
||||
// Po 2 minutach wykonaj polecenie "Wymuś sprawdzenie"
|
||||
fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
|
||||
.then(function(response){
|
||||
location.reload();
|
||||
})
|
||||
.catch(function(error){ console.error('Błąd force check:', error); });
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
alert('Błąd podczas wysyłania komendy reboot.');
|
||||
}
|
||||
|
||||
@ -9,8 +9,13 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="{{ url_for('update_selected_devices') }}">
|
||||
<button type="submit" class="btn btn-primary mb-3">Odśwież wybrane</button>
|
||||
<!-- 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>
|
||||
@ -39,16 +44,16 @@
|
||||
<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>
|
||||
{% 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-danger">Wymaga aktualizacji <small>(firmware)</small></span>
|
||||
<span class="badge bg-success">Aktualny</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="badge bg-success">Aktualny</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<small>
|
||||
@ -71,6 +76,25 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<!-- Overlay dla masowej aktualizacji systemu (5 minut) -->
|
||||
<div id="mass-system-update-overlay" style="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;">
|
||||
<h3>Masowa aktualizacja systemu rozpoczęta...</h3>
|
||||
<div style="width:50%; margin: 20px auto; background:#444; border-radius:5px;">
|
||||
<div id="mass-system-progress" style="width:0%; height:30px; background:#4caf50; border-radius:5px;"></div>
|
||||
</div>
|
||||
<p id="mass-system-timer">300 sekund</p>
|
||||
</div>
|
||||
|
||||
<!-- Overlay dla masowej aktualizacji firmware (2 minuty) -->
|
||||
<div id="mass-firmware-update-overlay" style="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;">
|
||||
<h3>Masowa aktualizacja firmware (reboot) rozpoczęta...</h3>
|
||||
<div style="width:50%; margin: 20px auto; background:#444; border-radius:5px;">
|
||||
<div id="mass-firmware-progress" style="width:0%; height:30px; background:#4caf50; border-radius:5px;"></div>
|
||||
</div>
|
||||
<p id="mass-firmware-timer">120 sekund</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Funkcja "Select all" – zaznacza lub odznacza wszystkie checkboxy
|
||||
document.getElementById('select-all').addEventListener('change', function() {
|
||||
@ -79,5 +103,108 @@
|
||||
checkbox.checked = this.checked;
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Funkcja masowej aktualizacji systemu
|
||||
document.getElementById('mass-system-update-btn').addEventListener('click', function() {
|
||||
var selectedDevices = getSelectedDeviceIds();
|
||||
if(selectedDevices.length === 0) {
|
||||
alert("Wybierz przynajmniej jedno urządzenie.");
|
||||
return;
|
||||
}
|
||||
// Dla każdego urządzenia wykonaj update systemu asynchronicznie
|
||||
selectedDevices.forEach(function(id) {
|
||||
fetch("{{ url_for('update_device', device_id=0) }}".replace("0", id), { 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 wykonaj force_check dla każdego wybranego urządzenia
|
||||
selectedDevices.forEach(function(id) {
|
||||
fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
|
||||
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
||||
});
|
||||
location.reload();
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Funkcja masowej aktualizacji firmware
|
||||
document.getElementById('mass-firmware-update-btn').addEventListener('click', function() {
|
||||
var selectedDevices = getSelectedDeviceIds();
|
||||
if(selectedDevices.length === 0) {
|
||||
alert("Wybierz przynajmniej jedno urządzenie.");
|
||||
return;
|
||||
}
|
||||
// Dla każdego urządzenia wykonaj update firmware asynchronicznie
|
||||
selectedDevices.forEach(function(id) {
|
||||
fetch("{{ url_for('update_firmware', device_id=0) }}".replace("0", id), { method: 'POST' })
|
||||
.catch(function(error){ console.error('Błąd aktualizacji firmware dla urządzenia ' + id, error); });
|
||||
});
|
||||
// Zapytaj użytkownika, czy chce zrestartować urządzenia
|
||||
if(confirm("Firmware update zakończony. Czy chcesz teraz zrestartować wszystkie wybrane urządzenia?")) {
|
||||
// Pokaż overlay z paskiem postępu dla reboot (2 minuty)
|
||||
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 2 minut wykonaj force_check dla każdego wybranego urządzenia
|
||||
selectedDevices.forEach(function(id) {
|
||||
fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
|
||||
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
||||
});
|
||||
location.reload();
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
alert("Restart został anulowany. Pamiętaj, że firmware update wymaga rebootu.");
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
}
|
||||
// Dla każdego wybranego urządzenia wykonaj force_check
|
||||
selectedDevices.forEach(function(id) {
|
||||
fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
|
||||
.catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
|
||||
});
|
||||
// Po krótkiej chwili przeładuj stronę
|
||||
setTimeout(function(){ location.reload(); }, 2000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -3,11 +3,7 @@
|
||||
{% block content %}
|
||||
<div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 80vh;">
|
||||
<div class="text-center">
|
||||
{% if session.get('dark_mode', True) %}
|
||||
<img src="https://mikrotik.com/logo/assets/logo-colors-white-E8duxH7y.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
|
||||
{% else %}
|
||||
<img src="https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
|
||||
{% endif %}
|
||||
<img id="logo-img" src="https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
|
||||
<h1 class="mt-3">Witamy w RouterOS Update</h1>
|
||||
<p class="lead">Zarządzaj aktualizacjami swoich urządzeń RouterOS w prosty sposób.</p>
|
||||
<div class="mt-4">
|
||||
@ -15,5 +11,58 @@
|
||||
<a href="{{ url_for('register') }}" class="btn btn-success btn-lg">Rejestracja</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
|
||||
function updatePrismTheme() {
|
||||
const prismLink = document.getElementById('prism-style');
|
||||
if (prismLink) {
|
||||
if (localStorage.getItem("darkMode") === "enabled") {
|
||||
prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css');
|
||||
} else {
|
||||
prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateTheme() {
|
||||
if (localStorage.getItem("darkMode") === "enabled") {
|
||||
document.body.classList.add("dark-mode");
|
||||
document.body.classList.remove("light-mode");
|
||||
darkModeToggle.checked = true;
|
||||
} else {
|
||||
document.body.classList.add("light-mode");
|
||||
document.body.classList.remove("dark-mode");
|
||||
darkModeToggle.checked = false;
|
||||
}
|
||||
updatePrismTheme();
|
||||
updateLogoImage();
|
||||
}
|
||||
|
||||
// Nowa funkcja: dynamicznie aktualizuje logo, jeśli element istnieje
|
||||
function updateLogoImage() {
|
||||
const logo = document.getElementById("logo-img");
|
||||
if (logo) {
|
||||
if (localStorage.getItem("darkMode") === "enabled") {
|
||||
logo.src = "https://mikrotik.com/logo/assets/logo-colors-white-E8duxH7y.svg";
|
||||
} else {
|
||||
logo.src = "https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
darkModeToggle.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
localStorage.setItem("darkMode", "enabled");
|
||||
} else {
|
||||
localStorage.setItem("darkMode", "disabled");
|
||||
}
|
||||
updateTheme();
|
||||
});
|
||||
updateTheme();
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user