wireguard_webadmin/templates/firewall/firewall_rule_list.html

{% extends 'base.html' %}

{% block page_custom_head %}
<style>
    .first-line-container {
        display: flex;
        align-items: center; /* Centraliza os itens verticalmente */
        width: 100%;
      }
      
      .more-link {
        margin-left: auto; /* Empurra o link para a direita */
        text-decoration: none;
      }
      
      .more-text {
        display: none;
        width: 100%;
      }

      .fw_automatic_rule {
        display: none;
      }
      
</style>
{% endblock%}

{% block content %}

<div class="card card-primary card-outline">
    <div class="card-body">
        {% include "firewall/firewall_nav_tabs.html" %}
        <div class="tab-content" id="custom-content-below-tabContent">
            <div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                <table class="table table-striped table-hover">
                    <thead>
                        <th>#</th>
                        <th><i class="fas fa-info-circle"></i></th>
                        <th>In</th>
                        <th>Out</th>
                        <th>Source</th>
                        <th>Destination</th>
                        <th>Protocol</th>
                        <th>Port</th>
                        <th>State</th>
                        <th>Action</th>
                        <th><i class="far fa-edit"></i></th>
                    </thead>
                    <tbody>
                            <tr class="fw_automatic_rule">  
                              <td>-</td>
                              <td><i class="fas fa-info-circle" title="Automatic rule: Allow established/related traffic"></i></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td>all</td>
                              <td></td>
                              <td>Related<br>
                                  Established
                              </td>
                              <td>ACCEPT</td>
                              <td></td>
                            </tr>

                        {% for rule in port_forward_list %}
                            {% if rule.add_forward_rule and current_chain == 'forward' %}
                                <tr class="fw_automatic_rule">  
                                  <td>-</td>
                                  <td><i class="fas fa-info-circle" title="Port forward automatic rule. {{ rule.description|default_if_none:'' }}"></i></td>
                                  <td>{{ firewall_settings.wan_interface }}</td>
                                  <td>wg{{ rule.wireguard_instance.instance_id }}</td>
                                  <td></td>
                                  <td>
                                    {% if rule.ip_address %}
                                      {{ rule.ip_address }}
                                    {% elif rule.peer %}
                                      {{ rule.peer }}
                                    {% endif %}
                                  </td>
                                  <td>{{ rule.get_protocol_display }}</td>
                                  <td>{{ rule.port }}</td>
                                  <td></td>
                                  <td>ACCEPT</td>
                                  <td></td>
                                </tr>
                            {% elif rule.masquerade_source and current_chain == 'postrouting' %}
                              <tr class="fw_automatic_rule">  
                                <td>-</td>
                                <td><i class="fas fa-info-circle" title="Port forward automatic rule. {{ rule.description|default_if_none:'' }}"></i></td>
                                <td></td>
                                <td>wg{{ rule.wireguard_instance.instance_id }}</td>
                                <td></td>
                                <td>
                                  {% if rule.ip_address %}
                                    {{ rule.ip_address }}
                                  {% elif rule.peer %}
                                    {{ rule.peer }}
                                  {% endif %}
                                </td>
                                <td>{{ rule.get_protocol_display }}</td>
                                <td>{{ rule.port }}</td>
                                <td></td>
                                <td>MASQUERADE</td>
                                <td></td>
                              </tr>
                            {% endif %}


                        {% endfor %}

                        {% for rule in firewall_rule_list %}
                            
                            <tr>
                                <td style="width: 1%; white-space: nowrap;">{{ rule.sort_order }}</td>
                                <td style="width: 1%; white-space: nowrap;">{% if rule.description %}<i class="fas fa-info-circle" title="{{ rule.description }}"></i>{% endif %}</td>
                                <td>{{ rule.in_interface|default_if_none:'' }}</td>
                                <td>{{ rule.out_interface|default_if_none:'' }}</td>
                                <td>
                                    {% if rule.source_ip %}{% if rule.not_source %}<span title="Not source">!</span> {% endif %}{{ rule.source_ip }}/{{ rule.source_netmask }}<br>{% endif%}
                                    {% for peer in rule.source_peer.all %}{% if rule.not_source %}<span title="Not source">!</span> {% endif %}{{ peer }}{% if rule.source_peer_include_networks %} <span title="Include peer networks">+</span>{% endif %}<br>{% endfor %}
                
                                </td>
                                <td>
                                    {% if rule.destination_ip %}{% if rule.not_destination %}<span title="Not destination">!</span> {% endif %}{{ rule.destination_ip }}/{{ rule.destination_netmask }}<br>{% endif%}
                                    {% for peer in rule.destination_peer.all %}{% if rule.not_destination %}<span title="Not destination">!</span> {% endif %}{{ peer }}{% if rule.destination_peer_include_networks %} <span title="Include peer networks">+</span>{% endif %}<br>{% endfor %}
                                </td>
                
                                <td>{{ rule.get_protocol_display|default_if_none:'all' }}</td>
                                <td>{{ rule.destination_port|default_if_none:'' }}</td>
                                <td>
                                    {% if rule.state_new %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}New<br>{% endif %}
                                    {% if rule.state_related %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}Related<br>{% endif %}
                                    {% if rule.state_established %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}Established<br>{% endif %}
                                    {% if rule.state_invalid %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}Invalid<br>{% endif %}
                                    {% if rule.state_untracked %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}Untracked<br>{% endif %}
                                </td>
                                <td>{{ rule.get_rule_action_display }}</td>
                                {% comment%}
                                <td>{{ rule. }}</td>
                                {% endcomment %}
                                <td style="width: 1%; white-space: nowrap;">
                                    <a href="/firewall/manage_firewall_rule/?uuid={{ rule.uuid }}" ><i class="far fa-edit"></i></a>
                                </td>
                            </tr>
                        {% endfor %}
                
                        {% if current_chain == 'forward' %}
                        {% for wireguard_instance in wireguard_instances %}
                            <tr class="fw_automatic_rule">
                              <td>-</td>
                              <td><i class="fas fa-info-circle" title="Automatic Rule: Firewall Settings Peer to Peer traffic"></i></td>
                              <td>wg{{ wireguard_instance.instance_id }}</td>
                              <td>wg{{ wireguard_instance.instance_id }}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                  {% if firewall_settings.allow_peer_to_peer %}
                                    ACCEPT
                                  {% else %}
                                    REJECT
                                  {% endif %}
                                </td>
                                <td></td>
                            </tr>
                        {% endfor %}

                        <tr class="fw_automatic_rule">
                          <td>-</td>
                          <td><i class="fas fa-info-circle" title="Automatic Rule: Firewall Settings Instance to Instance"></i></td>
                          <td>wg+</td>
                          <td>wg+</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{% if firewall_settings.allow_instance_to_instance %}ACCEPT{% else %}REJECT{% endif %}</td>
                            <td></td>
                        </tr>
                        {% endif %}

                    </tbody>
                </table>
                
                <a href="/firewall/manage_firewall_rule/?chain={{ current_chain }}" class='btn btn-primary'>Create Firewall Rule</a>
                <a href="/firewall/firewall_settings/?chain={{ current_chain }}" class='btn btn-outline-primary'>Firewall Settings</a>
                <a class='btn btn-outline-primary' onclick=$('.fw_automatic_rule').slideToggle();>Display automatic rules</a>
            </div>
        </div>
    </div>
</div>







{% endblock %}

{% block custom_page_scripts %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('td').forEach(function(td) {
          let brCount = (td.innerHTML.match(/<br>/g) || []).length;
      
          if (brCount >= 2) {
            let contentParts = td.innerHTML.split('<br>');
            // Mantém a estrutura do contêiner com o texto e o link "More"
            let firstLineContainer = `<div class="first-line-container">${contentParts[0]}<a href="#" class="more-link">more</a></div>`;
      
            td.innerHTML = firstLineContainer +
                           '<span class="more-text" style="display: none;">' +
                           contentParts.slice(1).join('<br>') + '</span>';
          }
        });
      
        document.querySelectorAll('.more-link').forEach(function(link) {
          link.addEventListener('click', function(e) {
            e.preventDefault(); // Impede a ação padrão do link
            let moreText = this.parentNode.nextElementSibling; // Seleciona o span corretamente
            if (moreText.style.display === "none") {
              moreText.style.display = "inline";
              this.textContent = "less";
            } else {
              moreText.style.display = "none";
              this.textContent = "more";
            }
          });
        });
      });
</script>

{% endblock %}