From a17423aaa129ab0c7a0bade6f6700c77760ecdee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Thu, 27 Feb 2025 00:29:52 +0100
Subject: [PATCH] new css and functions

---
 templates/device_detail.html |  64 +++++++++++----
 templates/devices.html       | 147 ++++++++++++++++++++++++++++++++---
 templates/index.html         |  61 +++++++++++++--
 3 files changed, 242 insertions(+), 30 deletions(-)

diff --git a/templates/device_detail.html b/templates/device_detail.html
index 5599fd3..1c11a77 100644
--- a/templates/device_detail.html
+++ b/templates/device_detail.html
@@ -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.');
       }
diff --git a/templates/devices.html b/templates/devices.html
index 8e6c893..28de2d4 100644
--- a/templates/devices.html
+++ b/templates/devices.html
@@ -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 %}
+
diff --git a/templates/index.html b/templates/index.html
index e1d616d..fcac1e1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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 %}