FreedomBox/plinth/modules/networks/templates/connections_diagram.html

{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load static %}
{% load i18n %}

<style type="text/css">
  .connection-diagram {
      margin-top: 32px;
      margin-bottom: 32px;
  }

  .col-image {
      display: block;
      width: 100%;
  }

  .network-entity {
      max-width: 128px;
  }

  .network-type-icon {
      width: 24px;
      height: 24px;
  }

  .network-connection {
      height: 8px;
      margin-bottom: 12px;
  }

  .network-connection-vertical {
      width: 8px;
      margin-left: 60px;
  }

  .connection-list {
      margin-left: 24px;
  }

  .connection-list-heading {
      font-weight: bold;
  }
</style>

<div class="row connection-diagram">
  <div class="col-sm-2">
    <img src="{% static 'theme/img/network-internet.svg' %}"
         class="col-image network-entity" alt="{% trans "Internet" %}"/>
  </div>
  <div class="col-sm-3">
    <img src="{% static 'theme/img/network-spacing.svg' %}"
         class="col-image network-spacing hidden-xs"
         alt="{% trans "Spacing" %}"/>
    <img src="{% static 'theme/img/network-connection.svg' %}"
         class="col-image network-connection hidden-xs"
         alt="{% trans "Connection" %}"/>
    <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
         class="network-connection-vertical visible-xs-block"
         alt="{% trans "Connection" %}"/>
    <div class="connection-list">
      <p class="connection-list-heading">{% trans "External" %}</p>
      {% for connection in connections %}
        {% if connection.interface_name and connection.is_active and connection.zone == 'external' %}
          {% if connection.type == '802-3-ethernet' %}
            <img src="{% static 'theme/img/network-ethernet.svg' %}"
                 class="network-type-icon" alt="{% trans "Ethernet" %}"/>
          {% elif connection.type == '802-11-wireless' %}
            <img src="{% static 'theme/img/network-wireless.svg' %}"
                 class="network-type-icon" alt="{% trans "Wi-Fi" %}"/>
          {% endif %}
          <a href="{% url 'networks:show' connection.uuid %}"
             title="{% blocktrans %}Show connection {{ connection.name }}{% endblocktrans %}">
            {{ connection.name }} ({{ connection.interface_name }})</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="col-sm-2">
    <img src="{% static 'theme/img/network-freedombox.svg' %}"
         class="col-image network-entity" alt="{{ box_name }}"/>
  </div>
  <div class="col-sm-3">
    <img src="{% static 'theme/img/network-spacing.svg' %}"
         class="col-image network-spacing hidden-xs"
         alt="{% trans "Spacing" %}"/>
    <img src="{% static 'theme/img/network-connection.svg' %}"
         class="col-image network-connection hidden-xs"
         alt="{% trans "Connection" %}"/>
    <div class="connection-list">
      <p class="connection-list-heading">{% trans "Internal" %}</p>
      {% for connection in connections %}
        {% if connection.interface_name and connection.is_active and connection.zone == 'internal' %}
          <p>
            {% if connection.type == '802-3-ethernet' %}
              <img src="{% static 'theme/img/network-ethernet.svg' %}"
                   class="network-type-icon" alt="{% trans "Ethernet" %}"/>
            {% elif connection.type == '802-11-wireless' %}
              <img src="{% static 'theme/img/network-wireless.svg' %}"
                   class="network-type-icon" alt="{% trans "Wi-Fi" %}"/>
            {% endif %}
            <a href="{% url 'networks:show' connection.uuid %}"
               title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
              {{ connection.name }} ({{ connection.interface_name }})</a>
          </p>
        {% endif %}
      {% endfor %}
    </div>
    <img src="{% static 'theme/img/network-connection-vertical.svg' %}"
         class="network-connection-vertical visible-xs-block"
         alt="{% trans "Connection" %}"/>
  </div>
  <div class="col-sm-2">
    <img src="{% static 'theme/img/network-computer.svg' %}"
         class="col-image network-entity" alt="{% trans "Computer" %}"/>
  </div>
</div>