hosts_app/templates/server_list.html

{% extends "base.html" %}
{% block title %}Lista serwerów - /etc/hosts Manager{% endblock %}

{% block extra_css %}
{{ super() }}
<style>
  .tooltip-inner {
    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="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.resolved_hostname }}
              {% endif %}
            </td>
            <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' %}

{% endblock %}

{% block extra_js %}
<script>
  function secondsToDhms(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.querySelector('#modal-hostname').textContent = data.hostname;
          document.querySelector('#modal-ip').textContent = data.ip;
          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>
{% endblock %}