hosts_app/templates/new_edit_regex_host.html

{% extends "base.html" %}
{% block title %}{% if entry %}Edytuj Regex CIDR{% else %}Nowy Regex CIDR{% endif %} - /etc/hosts Manager{% endblock %}
{% block extra_css %}
  {{ super() }}
  <style>
    .tooltip-inner {
      max-width: 300px;
      text-align: left;
    }

    /* Tryb jasny */
    .regex-container, .example-container {
      background-color: var(--bg-light);
      color: var(--text-dark);
    }

    /* Tryb ciemny */
    @media (prefers-color-scheme: dark) {
      .regex-container, .example-container {
        background-color: var(--bg-dark);
        color: var(--text-light);
        border-color: var(--border-color);
      }
    }

  .icon-green {
    color: #28a745;
  }
  </style>
{% endblock %}
{% block content %}
<div class="card mb-4">
  <div class="card-header">
    <h2>{% if entry %}Edytuj Regex Host{% else %}Nowy Regex CIDR{% endif %}</h2>
  </div>
  <div class="card-body">
    <form method="POST">
      <div class="mb-3">
        <label for="cidr_range" class="form-label">CIDR/Sieć</label>
        <input type="text" class="form-control" id="cidr_range" name="cidr_range" value="{% if entry %}{{ entry.cidr_range }}{% endif %}" placeholder="np. 10.87.200.0/27" required>
      </div>
      <div class="mb-3">
        <label for="gateway_ip" class="form-label">Adres IP bramy sieci</label>
        <input type="text" class="form-control" id="gateway_ip" name="gateway_ip" value="{% if entry %}{{ entry.gateway_ip }}{% endif %}">
      </div>

      <div class="mb-3">
        <label for="gateway_hostname" class="form-label">Docelowy hostname bramy</label>
        <input type="text" class="form-control" id="gateway_hostname" name="gateway_hostname" value="{% if entry %}{{ entry.gateway_hostname }}{% endif %}">
      </div>
      <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="use_gateway_ip" name="use_gateway_ip" {% if entry and entry.use_gateway_ip %}checked{% endif %}>
        <label class="form-check-label" for="use_gateway_ip">Brama ma mieć swój hostname</label>
      </div>
      <div class="mb-3">
        <label for="domain_suffix" class="form-label">Domena</label>
        <input type="text" class="form-control" id="domain_suffix" name="domain_suffix" value="{% if entry %}{{ entry.domain_suffix }}{% else %}domain.com{% endif %}">
      </div>
      <div class="mb-3">
        <label for="host_prefix" class="form-label">Pefix hostów sieci</label>
        <input type="text" class="form-control" id="host_prefix" name="host_prefix" value="{% if entry %}{{ entry.host_prefix }}{% else %}ip{% endif %}">
      </div>

      <div class="mb-3">
        <label for="comment" class="form-label">Komentarz</label>
        <input type="text" class="form-control" id="comment" name="comment" value="{% if entry %}{{ entry.comment }}{% endif %}">
        <hr>
        <div class="mb-3">
          <label class="form-label"><i class="fas fa-code"></i> Podgląd generowanego Regex</label>
          <div class="regex-container p-3 border rounded">
            <code id="regexPreview"></code>
          </div>
        
          <label class="form-label mt-2"><i class="fas fa-terminal"></i> Przykładowe wygenerowane wpisy</label>
          <div class="example-container p-3 border rounded">
            <ul id="exampleEntries" class="list-unstyled mb-0"></ul>
          </div>
        </div>
        
      </div>
      <button type="submit" class="btn btn-primary">{% if entry %}Zapisz zmiany{% else %}Utwórz{% endif %}</button>
    </form>
  
  </div>
</div>
<div class="mt-3 text-center">
  <a href="{{ url_for('list_regex_hosts') }}" class="btn btn-secondary">Lista Regex Hosts</a>
</div>
{% endblock %}
{% block extra_js %}
{{ super() }}
<script>
document.addEventListener("DOMContentLoaded", function() {
    function updateRegexPreview() {
        let cidr = document.getElementById("cidr_range").value.trim();
        let gatewayIp = document.getElementById("gateway_ip").value.trim();
        let gatewayHostname = document.getElementById("gateway_hostname").value.trim();
        let domain = document.getElementById("domain_suffix").value.trim();
        let prefix = document.getElementById("host_prefix").value.trim();
        let useGateway = document.getElementById("use_gateway_ip").checked;

        let regexPreview = `<strong>Regex:</strong> <span class="icon-green">^${prefix}[0-9]+\\.${domain}$</span>`;
        document.getElementById("regexPreview").innerHTML = regexPreview;

        // Generowanie przykładowych wpisów
        let exampleList = document.getElementById("exampleEntries");
        exampleList.innerHTML = ""; // Wyczyść stare wpisy

        let exampleIps = generateExampleIps(cidr, 3); // Pobierz 3 pierwsze IP
        exampleIps.forEach((ip, index) => {
            let listItem = document.createElement("li");
            listItem.innerHTML = `<i class="fas fa-check-circle icon-green"></i> ${ip} ${prefix}${index + 1}.${domain}`;
            exampleList.appendChild(listItem);
        });

        // Dodaj wpis dla bramy (jeśli zaznaczona)
        if (useGateway && gatewayIp && gatewayHostname) {
            let listItem = document.createElement("li");
            listItem.innerHTML = `<i class="fas fa-network-wired icon-green"></i> ${gatewayIp} ${gatewayHostname}.${domain}`;
            exampleList.prepend(listItem);
        }
    }

    function generateExampleIps(cidr, count) {
        let ipList = [];
        if (!cidr.includes('/')) return ipList;

        let [baseIp, subnet] = cidr.split('/');
        let baseParts = baseIp.split('.').map(Number);

        // Generujemy kolejne adresy IP w zakresie
        for (let i = 1; i <= count; i++) {
            let newIp = [...baseParts];
            newIp[3] += i;  // Zwiększamy ostatni oktet
            ipList.push(newIp.join('.'));
        }
        return ipList;
    }

    // Nasłuchiwanie zmian w polach
    document.getElementById("cidr_range").addEventListener("input", updateRegexPreview);
    document.getElementById("gateway_ip").addEventListener("input", updateRegexPreview);
    document.getElementById("gateway_hostname").addEventListener("input", updateRegexPreview);
    document.getElementById("domain_suffix").addEventListener("input", updateRegexPreview);
    document.getElementById("host_prefix").addEventListener("input", updateRegexPreview);
    document.getElementById("use_gateway_ip").addEventListener("change", updateRegexPreview);

    // Inicjalne wygenerowanie regexu
    updateRegexPreview();
});
</script>
{% endblock %}