From ec364aac0c4d772a5b684aa0266c1cc3cb7409be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= <gru@macbook.net.r.local>
Date: Sun, 9 Mar 2025 14:57:26 +0100
Subject: [PATCH] NEW MODAL FIX OSTATECZNY1

---
 templates/server_list.html | 88 ++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/templates/server_list.html b/templates/server_list.html
index 77b2578..6bd4ab0 100644
--- a/templates/server_list.html
+++ b/templates/server_list.html
@@ -21,7 +21,7 @@
       <thead>
         <tr>
           <th>ID</th>
-          <th>Nazwa serwera</th>
+          <th>Nazwa hosta</th>
           <th>Użytkownik</th>
           <th>Port</th>
           <th>Typ</th>
@@ -137,15 +137,6 @@
   </div>
 </div>
 
-
-
-
-<div class="mt-3 text-center">
-  <a href="{{ url_for('add_server') }}" class="btn btn-secondary">Dodaj nowy serwer</a>
-  <a href="{{ url_for('import_servers') }}" class="btn btn-secondary">Importuj z CSV</a>
-  <a href="{{ url_for('export_servers_to_csv') }}" class="btn btn-secondary">Eksportuj do CSV</a>
-</div>
-
 <!-- Modal z informacjami -->
 <div class="modal fade" id="serverInfoModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
@@ -155,7 +146,7 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
-        <p><strong>Host:</strong> <span id="modal-hostname"></span></p>
+        <p><strong>Host:</strong> <span id="modal-hostname"></span> (<span id="modal-ip"></span>)</p>
         
         <label><strong>CPU:</strong></label>
         <div class="progress mb-3">
@@ -181,35 +172,56 @@
   </div>
 </div>
 
-{% endblock %}
 
+<div class="mt-3 text-center">
+  <a href="{{ url_for('add_server') }}" class="btn btn-secondary">Dodaj nowy serwer</a>
+  <a href="{{ url_for('import_servers') }}" class="btn btn-secondary">Importuj z CSV</a>
+  <a href="{{ url_for('export_servers_to_csv') }}" class="btn btn-secondary">Eksportuj do CSV</a>
+</div>
+{% endblock %}
 {% block extra_js %}
 <script>
-function secondsToDhms(seconds) {
-  seconds = Math.floor(seconds);
-  const d = Math.floor(seconds / (3600*24));
-  const h = Math.floor(seconds % (3600*24) / 3600);
-  const m = Math.floor(seconds % 3600 / 60);
-  const s = Math.floor(seconds % 60);
-  return `${d} dni, ${h} godz, ${m} min, ${s} sek`;
-}
-
-document.querySelectorAll('.test-daemon-btn').forEach(btn => {
-  btn.addEventListener('click', function() {
-    fetch(`/server-info/${this.dataset.hostId}`)
-      .then(res => res.json())
-      .then(data => {
-        if (data.error) return alert(`Błąd: ${data.error}`);
-        document.getElementById('modal-hostname').textContent = data.hostname;
-        document.getElementById('modal-ip').textContent = data.ip;
-        document.getElementById('modal-cpu').textContent = data.cpu;
-        document.getElementById('modal-mem').textContent = data.mem;
-        document.getElementById('modal-disk').textContent = data.disk;
-        document.getElementById('modal-uptime').textContent = secondsToDhms(data.uptime_seconds);
-        new bootstrap.Modal(document.getElementById('serverInfoModal')).show();
-      })
-      .catch(() => alert('Błąd podczas pobierania danych.'));
+  function secondsToDhms(seconds) {
+      seconds = Number(seconds);
+      const d = Math.floor(seconds / (3600*24));
+      const h = Math.floor(seconds % (3600*24) / 3600);
+      const m = Math.floor(seconds % 3600 / 60);
+      const s = Math.floor(seconds % 60);
+      return `${d} dni, ${h} godz, ${m} min, ${s} sek`;
+  }
+  
+  document.querySelectorAll('.test-daemon-btn').forEach(btn => {
+    btn.addEventListener('click', function() {
+      const hostId = this.dataset.hostId;
+      fetch(`/server-info/${hostId}`)
+        .then(res => res.json())
+        .then(data => {
+          if (data.error) {
+            alert(`Błąd: ${data.error}`);
+            return;
+          }
+          document.querySelector('#modal-hostname').textContent = data.hostname;
+          document.querySelector('#modal-ip').textContent = data.ip;
+          
+          const cpu = document.querySelector('#modal-cpu');
+          cpu.style.width = `${data.cpu}%`;
+          cpu.textContent = `${data.cpu}%`;
+  
+          const mem = document.querySelector('#modal-mem');
+          mem.style.width = `${data.mem}%`;
+          mem.textContent = `${data.mem}%`;
+  
+          const disk = document.querySelector('#modal-disk');
+          disk.style.width = `${data.disk}%`;
+          disk.textContent = `${data.disk}%`;
+  
+          document.querySelector('#modal-uptime').textContent = secondsToDhms(data.uptime_seconds);
+  
+          new bootstrap.Modal(document.getElementById('serverInfoModal')).show();
+        })
+        .catch(() => alert('Błąd podczas pobierania danych.'));
+    });
   });
-});
-</script>
+  </script>
+  
 {% endblock %}
\ No newline at end of file