From 67c6e8a92e9de01e182fd6f87dace6df9bdd3b39 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:25:22 +0100
Subject: [PATCH] NEW MODAL informacje o serwerze

---
 templates/server_list.html | 299 ++++++++++++++-----------------------
 1 file changed, 112 insertions(+), 187 deletions(-)

diff --git a/templates/server_list.html b/templates/server_list.html
index 6bd4ab0..df52930 100644
--- a/templates/server_list.html
+++ b/templates/server_list.html
@@ -8,220 +8,145 @@
     max-width: 300px;
     text-align: left;
   }
+  .badge-status {
+    font-size: 0.85em;
+  }
+  .action-btns a,
+  .action-btns button {
+    margin-right: 3px;
+  }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="card">
-  <div class="card-header">
-    <h2>Lista serwerów</h2>
-  </div>
-  <div class="card-body table-responsive">
-    <table class="table table-striped align-middle">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Nazwa hosta</th>
-          <th>Użytkownik</th>
-          <th>Port</th>
-          <th>Typ</th>
-          <th>Uwierzytelnianie</th>
-          <th>Wybrany plik /etc/hosts</th>
-          <th>Auto Deploy</th>
-          <th>Auto Backup</th>
-          <th>Wyłącz CIDR/regex deploy</th>
-          <th>Akcje</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for h in hosts %}
-        <tr>
-          <td>{{ h.id }}</td>
-          <td data-bs-toggle="tooltip" data-bs-placement="top" title="{{ h.raw_ip }}">
-            {% if h.use_daemon and h.type == 'linux' and h.daemon_url %}
-              {{ h.resolved_daemon }}
-            {% else %}
-              {{ h.resolved_hostname }}
-            {% endif %}
-          </td>
-          
-           
-          <td>
-            {% if h.use_daemon and h.type == 'linux' %}
-              <em>—</em>
-            {% else %}
-              {{ h.username }}
-            {% endif %}
-          </td>
-          <td>
-            {% if h.use_daemon and h.type == 'linux' %}
-              <em>—</em>
-            {% else %}
-              {{ h.port }}
-            {% endif %}
-          </td>
-          <td>
-            {% if h.type == 'linux' %}
-              Linux{% if h.use_daemon %} (Demon){% endif %}
-            {% else %}
-              Mikrotik
-            {% endif %}
-          </td>
-          <td>
-            {% if h.use_daemon and h.type == 'linux' %}
-              <em>- używa Demona -</em>
-            {% else %}
-              {% if h.auth_method == 'password' %}
-                Hasło
-              {% elif h.auth_method == 'ssh_key' %}
-                Klucz SSH
-              {% elif h.auth_method == 'global_key' %}
-                Globalny klucz
+<div class="container py-4">
+  <div class="card shadow-sm">
+    <div class="card-header bg-primary text-white">
+      <h2 class="mb-0">Lista serwerów</h2>
+    </div>
+    <div class="card-body table-responsive">
+      <table class="table table-striped align-middle">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Nazwa hosta</th>
+            <th>Użytkownik</th>
+            <th>Port</th>
+            <th>Typ</th>
+            <th>Uwierzytelnianie</th>
+            <th>Plik /etc/hosts</th>
+            <th>Auto Deploy</th>
+            <th>Auto Backup</th>
+            <th>Wyłącz CIDR</th>
+            <th>Akcje</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for h in hosts %}
+          <tr>
+            <td>{{ h.id }}</td>
+            <td data-bs-toggle="tooltip" data-bs-placement="top" title="{{ h.raw_ip }}">
+              {% if h.use_daemon and h.type == 'linux' and h.daemon_url %}
+                {{ h.resolved_daemon }}
               {% else %}
-                {{ h.auth_method }}
+                {{ h.resolved_hostname }}
               {% endif %}
-            {% endif %}
-          </td>
-          <td>
-            {% if h.preferred_hostfile %}
-              {{ h.preferred_hostfile.title }}
-            {% else %}
-              (Default)
-            {% endif %}
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="auto_deploy">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.auto_deploy_enabled %}checked{% endif %}>
-            </form>
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="auto_backup">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.auto_backup_enabled %}checked{% endif %}>
-            </form>
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="disable_regex">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.disable_regex_deploy %}checked{% endif %}>
-            </form>
-            <td>
-              <div class="d-flex flex-wrap gap-1">
-                <a href="{{ url_for('edit_server', id=h.id) }}" class="btn btn-primary btn-sm">Edytuj</a>
-                
-                {% if h.use_daemon and h.type == 'linux' %}
-                <!-- Serwery z demonem – nowy sposób -->
-                <button class="btn btn-info btn-sm test-daemon-btn" data-host-id="{{ h.id }}">
-                  Testuj
-                </button>
-                {% else %}
-                <!-- Dotychczasowy sposób dla SSH/Mikrotik -->
-                <a href="{{ url_for('test_server_connection', id=h.id) }}" class="btn btn-info btn-sm">Testuj</a>
-                {% endif %}
-            
-                <a href="{{ url_for('server_backup', host_id=h.id) }}" class="btn btn-success btn-sm">Backup</a>
-                <form method="GET" action="{{ url_for('delete_server', id=h.id) }}" style="display:inline;">
-                  <button type="submit" class="btn btn-danger btn-sm">Usuń</button>
-                </form>
-              </div>
             </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-      
-    </table>
-  </div>
-</div>
-
-<!-- Modal z informacjami -->
-<div class="modal fade" id="serverInfoModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Informacje o serwerze</h5>
-        <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> (<span id="modal-ip"></span>)</p>
-        
-        <label><strong>CPU:</strong></label>
-        <div class="progress mb-3">
-          <div id="modal-cpu" class="progress-bar" role="progressbar"></div>
-        </div>
-
-        <label><strong>Pamięć:</strong></label>
-        <div class="progress mb-3">
-          <div id="modal-mem" class="progress-bar bg-warning" role="progressbar"></div>
-        </div>
-
-        <label><strong>Dysk:</strong></label>
-        <div class="progress mb-3">
-          <div id="modal-disk" class="progress-bar bg-success" role="progressbar"></div>
-        </div>
-
-        <p><strong>Czas działania:</strong> <span id="modal-uptime"></span></p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
-      </div>
+            <td>{{ '-' if h.use_daemon and h.type == 'linux' else h.username }}</td>
+            <td>{{ '-' if h.use_daemon and h.type == 'linux' else h.port }}</td>
+            <td>
+              <span class="badge badge-status bg-secondary">{{ 'Linux (Demon)' if h.use_daemon else h.type.capitalize() }}</span>
+            </td>
+            <td>{{ '- używa Demona -' if h.use_daemon else h.auth_method|capitalize }}</td>
+            <td>{{ h.preferred_hostfile.title if h.preferred_hostfile else '(Default)' }}</td>
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
+                <input type="hidden" name="setting" value="auto_deploy">
+                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_deploy_enabled %}checked{% endif %}>
+              </form>
+            </td>
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
+                <input type="hidden" name="setting" value="auto_backup">
+                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_backup_enabled %}checked{% endif %}>
+              </form>
+            </td>
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
+                <input type="hidden" name="setting" value="disable_regex">
+                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.disable_regex_deploy %}checked{% endif %}>
+              </form>
+            </td>
+            <td class="action-btns">
+              <a href="{{ url_for('edit_server', id=h.id) }}" class="btn btn-sm btn-outline-primary" title="Edytuj">
+                <i class="fa fa-edit"></i>
+              </a>
+              {% if h.use_daemon and h.type == 'linux' %}
+                <button class="btn btn-sm btn-outline-info test-daemon-btn" data-host-id="{{ h.id }}" title="Testuj">
+                  <i class="fa fa-server"></i>
+                </button>
+              {% else %}
+                <a href="{{ url_for('test_server_connection', id=h.id) }}" class="btn btn-sm btn-outline-info" title="Testuj">
+                  <i class="fa fa-server"></i>
+                </a>
+              {% endif %}
+              <a href="{{ url_for('server_backup', host_id=h.id) }}" class="btn btn-sm btn-outline-success" title="Backup">
+                <i class="fa fa-download"></i>
+              </a>
+              <form method="GET" action="{{ url_for('delete_server', id=h.id) }}" class="d-inline">
+                <button class="btn btn-sm btn-outline-danger" title="Usuń">
+                  <i class="fa fa-trash"></i>
+                </button>
+              </form>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
     </div>
   </div>
+
+  <div class="text-center my-4">
+    <a href="{{ url_for('add_server') }}" class="btn btn-primary">Dodaj nowy serwer</a>
+    <a href="{{ url_for('import_servers') }}" class="btn btn-outline-secondary">Importuj z CSV</a>
+    <a href="{{ url_for('export_servers_to_csv') }}" class="btn btn-outline-secondary">Eksportuj do CSV</a>
+  </div>
 </div>
 
+<!-- Modal pozostaje bez zmian -->
+{% include 'server_info_modal.html' %}
 
-<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 = 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`;
+    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}`)
+      fetch(`/server-info/${this.dataset.hostId}`)
         .then(res => res.json())
         .then(data => {
-          if (data.error) {
-            alert(`Błąd: ${data.error}`);
-            return;
-          }
+          if (data.error) return alert(`Błąd: ${data.error}`);
           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-cpu').style.width = data.cpu + '%';
+          document.querySelector('#modal-cpu').textContent = data.cpu + '%';
+          document.querySelector('#modal-mem').style.width = data.mem + '%';
+          document.querySelector('#modal-mem').textContent = data.mem + '%';
+          document.querySelector('#modal-disk').style.width = data.disk + '%';
+          document.querySelector('#modal-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