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

{% extends "app.html" %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load bootstrap %}
{% load i18n %}

{% block page_head %}
  <style type="text/css">
    .connection-status-label {
        display: inline-block;
        width: 5.5em;
        padding: 5px 0px;
        text-align: center;
        margin-right: 10px;
    }

    .connection-show-label {
        display: inline-block;
        width: 40%;
    }

    .connection-type-label {
        display: inline-block;
    }

    .list-group-item .btn {
        margin: -2px 0;
    }

    .form.pull-right {
        margin-right: 20px;
    }

    .form button {
        width: 7em;
    }
  </style>
{% endblock %}

{% block configuration %}
  <h3>{% trans "Connections" %}</h3>

  <div class="btn-toolbar">
    <a href="{% url 'networks:scan' %}" class="btn btn-default"
       role="button" title="{% trans 'Nearby Wi-Fi Networks' %}">
      <span class="fa fa-wifi" aria-hidden="true"></span>
      {% trans "Nearby Wi-Fi Networks" %}
    </a>
    <a href="{% url 'networks:add' %}" class="btn btn-default"
       role="button" title="{% trans 'Add Connection' %}">
      <span class="fa fa-plus" aria-hidden="true"></span>
      {% trans "Add Connection" %}
    </a>
  </div>

  <div class="list-group">
    {% for connection in connections %}
      <div class="list-group-item clearfix">
        <a href="{% url 'networks:delete' connection.uuid %}"
           class="btn btn-default btn-sm pull-right"
           role="button"
           title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
          <span class="fa fa-trash-o"
                aria-hidden="true"></span>
        </a>

        {% if connection.is_active %}
          <form class="form pull-right" method="post"
                action="{% url 'networks:deactivate' connection.uuid %}">
            {% csrf_token %}

            <button type="submit" class="btn btn-default btn-sm">
              {% trans "Deactivate" %}</button>
          </form>
        {% else %}
          <form class="form pull-right" method="post"
                action="{% url 'networks:activate' connection.uuid %}">
            {% csrf_token %}

            <button type="submit" class="btn btn-default btn-sm">
              {% trans "Activate" %}</button>
          </form>
        {% endif %}

        {% if connection.is_active %}
          <span class="label label-success connection-status-label">
            {% trans "Active" %}</span>
        {% else %}
          <span class="label label-warning connection-status-label">
            {% trans "Inactive" %}</span>
        {% endif %}

        <a class="connection-show-label"
           href="{% url 'networks:show' connection.uuid %}"
           title="Show connection {{ connection.name }}">
          {{ connection.name }}
        </a>

        <span class="connection-type-label">{{ connection.type_name }}</span>
      </div>
    {% endfor %}
  </div>

  {% include "connections_diagram.html" %}

  <h3>
    {% blocktrans trimmed %}
      {{ box_name }} Internet Connectivity
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans trimmed %}
      The following best describes how your {{ box_name }} is connected in your
      network. This information is used only to suggest necessary configuration
      actions.
    {% endblocktrans %}
  </p>

  <p>
    {% blocktrans trimmed %}
      Your {{ box_name }} gets its internet from your Router via WiFi or
      Ethernet cable. This is a typical home setup.
    {% endblocktrans %}
  </p>

  <div class="btn-toolbar">
    <a href="{% url 'networks:router_setup' %}" class="btn btn-default"
       role="button" title="{% trans 'Update...' %}">
      <span class="fa" aria-hidden="true"></span>
      {% trans 'Update...' %}
    </a>
  </div>

  <h3>
    {% blocktrans trimmed %}
      Your Internet Connection Type
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans trimmed %}
      The following best describes the type of Internet connection provided
			by your ISP. This information is only used to suggest you necessary
			configuration actions.
    {% endblocktrans %}
  </p>

  <div class="btn-toolbar">
    <a href="{% url 'networks:internet_connection_type_setup' %}" class="btn btn-default"
       role="button" title="{% trans 'Update...' %}">
      <span class="fa" aria-hidden="true"></span>
      {% trans 'Update...' %}
    </a>
  </div>

{% endblock %}