hosts_app/templates/local_defaults.html

{% extends "base.html" %}
{% block title %}Definiowanie wpisów z dynamicznymi zmiennymi{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <h3>Ustaw domyślne wpisy /etc/hosts</h3>
  </div>
  <div class="card-body">
    <form method="POST">
        <div class="row align-items-end">
          <div class="col-md-4">
            <label class="form-label">Adres IP</label>
            <input type="text" class="form-control" name="ip_address" placeholder="np. 127.0.0.1" required>
          </div>
          <div class="col-md-4">
            <label class="form-label">Hostname</label>
            <input type="text" class="form-control" name="hostname" placeholder="np. localhost" required>
          </div>
          <div class="col-md-4">
            <button type="submit" class="btn btn-primary w-100">Dodaj wpis</button>
          </div>
        </div>
    </form>
    <hr>

    <form id="bulkDeleteForm">
        <div class="mb-2">
          <button type="button" class="btn btn-danger btn-sm" id="deleteSelectedBtn" disabled>Usuń zaznaczone</button>
        </div>
      
        <table class="table table-striped mt-4">
          <thead>
            <tr>
              <th><input type="checkbox" id="selectAll"></th>
              <th>ID</th>
              <th>Adres IP</th>
              <th>Hostname</th>
              <th>Akcje</th>
            </tr>
          </thead>
          <tbody>
            {% for e in entries %}
            <tr>
              <td><input type="checkbox" class="entry-checkbox" value="{{ e.id }}"></td>
              <td>{{ e.id }}</td>
              <td class="ip-address">{{ e.ip_address }}</td>
              <td class="hostname">{{ e.hostname }}</td>
              <td>
                <button class="btn btn-warning btn-sm edit-btn" data-id="{{ e.id }}">Edytuj</button>
                <button class="btn btn-success btn-sm save-btn d-none" data-id="{{ e.id }}">Zapisz</button>
                <form method="POST" action="{{ url_for('delete_local_default', entry_id=e.id) }}" 
                      onsubmit="return confirm('Usunąć wpis?');" style="display:inline;">
                  <button class="btn btn-danger btn-sm">Usuń</button>
                </form>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="5">Brak zdefiniowanych wpisów.</td></tr>
            {% endfor %}
          </tbody>
        </table>
    </form>
  </div>
</div>

{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Logika edycji w tabeli
        document.querySelectorAll(".edit-btn").forEach(button => {
            button.addEventListener("click", function(event) {
                event.preventDefault();  // ✅ Zapobiega przeładowaniu strony
    
                let row = this.closest("tr");
                let entryId = this.getAttribute("data-id");
                let ipCell = row.querySelector(".ip-address");
                let hostnameCell = row.querySelector(".hostname");
                let saveButton = row.querySelector(".save-btn");
    
                // Jeśli pola edycji już istnieją, nie duplikuj ich
                if (ipCell.querySelector("input") || hostnameCell.querySelector("input")) {
                    return;
                }
    
                let ipInput = document.createElement("input");
                ipInput.type = "text";
                ipInput.className = "form-control form-control-sm";
                ipInput.value = ipCell.textContent.trim();
    
                let hostnameInput = document.createElement("input");
                hostnameInput.type = "text";
                hostnameInput.className = "form-control form-control-sm";
                hostnameInput.value = hostnameCell.textContent.trim();
    
                ipCell.textContent = "";
                hostnameCell.textContent = "";
                ipCell.appendChild(ipInput);
                hostnameCell.appendChild(hostnameInput);
    
                this.classList.add("d-none");
                saveButton.classList.remove("d-none");
    
                saveButton.addEventListener("click", function(event) {
                    event.preventDefault();  // ✅ Zapobiega przeładowaniu strony
    
                    let newIp = ipInput.value.trim();
                    let newHostname = hostnameInput.value.trim();
    
                    fetch(`/local-defaults/update/${entryId}`, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ ip_address: newIp, hostname: newHostname })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === "success") {
                            ipCell.textContent = newIp;
                            hostnameCell.textContent = newHostname;
    
                            button.classList.remove("d-none");
                            saveButton.classList.add("d-none");
                        } else {
                            alert("Błąd: " + data.message);
                        }
                    })
                    .catch(error => {
                        alert("Wystąpił błąd podczas zapisywania: " + error);
                    });
                }, { once: true });  // ✅ Zapobiega dodaniu wielu eventów do przycisku "Zapisz"
            });
        });
    
        // Logika zaznaczania i usuwania wpisów
        let deleteButton = document.getElementById("deleteSelectedBtn");
        let checkboxes = document.querySelectorAll(".entry-checkbox");
        let selectAllCheckbox = document.getElementById("selectAll");
    
        function updateDeleteButtonState() {
            let anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
            deleteButton.disabled = !anyChecked;
        }
    
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener("change", updateDeleteButtonState);
        });
    
        selectAllCheckbox.addEventListener("change", function() {
            let isChecked = this.checked;
            checkboxes.forEach(checkbox => checkbox.checked = isChecked);
            updateDeleteButtonState();
        });
    
        deleteButton.addEventListener("click", function() {
            let selectedIds = Array.from(checkboxes)
                                   .filter(checkbox => checkbox.checked)
                                   .map(checkbox => checkbox.value);
    
            if (selectedIds.length === 0) {
                alert("Nie zaznaczono żadnych wpisów do usunięcia.");
                return;
            }
    
            if (!confirm("Czy na pewno chcesz usunąć zaznaczone wpisy?")) {
                return;
            }
    
            fetch("/local-defaults/delete", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ entry_ids: selectedIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === "success") {
                    selectedIds.forEach(id => {
                        let row = document.querySelector(`input[value='${id}']`).closest("tr");
                        row.remove();
                    });
                    updateDeleteButtonState();
                } else {
                    alert("Błąd: " + data.message);
                }
            })
            .catch(error => {
                alert("Wystąpił błąd podczas usuwania: " + error);
            });
        });
    });
    </script>
    
{% endblock %}