coin/vpn/templates/vpn/vpn.html

{% extends "base.html" %}

{% load subnets %}
{% block title %}Configuration du VPN {{ object.offersubscription.get_subscription_reference }} - {{ block.super }}{% endblock %}
{% block content %}
<div class="row">
    <h2>Configuration du VPN</h2>
    {% if form %}
        <form class="flatform" action="{{ object.get_absolute_url }}" method="post">{% csrf_token %}
        <p class="legend">Quand vous aurez terminé vos modifications, cliquez sur <input class="button" type="submit" value="Valider" /></p>
    {% endif %}
    {% for message in messages %}
        <div class="message eat-up{% if message.tags %} {{ message.tags }}{% endif %}">
            {{ message }}
        </div>
    {% endfor %}

    {% if form %}
        {% if form.non_field_errors or form.ipv4_endpoint.errors or form.ipv6_endpoint.errors %}
            <div class="alert-box alert nogap">
            {{ form.non_field_errors }}
            {{ form.ipv4_endpoint.errors }}
            {{ form.ipv6_endpoint.errors }}
            </div>
        {% endif %}
    {% endif %}
    <div class="large-6 columns">
        <div class="panel">
            <h3>Authentification</h3>
            <table class="full-width">
                <tr>
                    <td class="center"><span class="label">Identifiant</span></td>
                    <td>{{object.login}}</td>
                </tr>
                {% if object.password %}
                <tr>
                    <td class="center" colspan="2">
                        <a class="button tiny radius" id="passgen" href="{% url 'vpn:generate_password' object.pk %}"><i class="fa fa-refresh"></i>
 Générer un nouveau mot de passe</a>
                    </td>
                </tr>
                {% endif %}
                {% if object.crypto_link %}
                <tr>
                    <td class="center"><span class="label">Matériel cryptographique</span></td>
                    <td><a href="{{object.crypto_link}}">Télecharger (lien supprimé après ouverture)</a></td>
                </tr>
                {% endif %}
                <tr class="flatfield">
                    {% if form %}
                        <td class="center">{{ form.comment.label_tag }}</td>
                        <td>{{ form.comment }}</td>
                    {% else %}
                    <td class="center"><span class="label">Commentaire</span></td>
                        <td>{{ object.comment }}</td>
                        
                    {% endif %}
                </tr>
                <tr>
                    <td class="center boolviewer" colspan="2">
                    {% if form %}
                        <input type="checkbox" disabled="disabled"{% if object.activated %} checked="checked"{% endif %} />
                    {% endif %}
                        <span>Ce VPN est {{ object.activated|yesno:"activé,désactivé" }}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="large-6 columns">
        <div class="panel">
            <h3>Adresses IP</h3>
            <table class="full-width">
                {% if form %}
                    <tr class="flatfield">
                        <td class="center">{{ form.ipv4_endpoint.label_tag }}</td>
                        <td{% if form.non_field_errors or form.ipv4_endpoint.errors %} class="errored"{% endif %}>{{ form.ipv4_endpoint }}</td>
                    </tr>
                    <tr class="flatfield">
                        <td class="center">{{ form.ipv6_endpoint.label_tag }}</td>
                        <td{% if form.non_field_errors or form.ipv6_endpoint.errors %} class="errored"{% endif %}>{{ form.ipv6_endpoint }}</td>
                    </tr>
                {% else %}
                    <tr class="flatfield">
                        <td class="center"><span class="label">IPv4</span></td>
                        <td>{{ object.ipv4_endpoint }}</td>
                    </tr>
                    <tr class="flatfield">
                        <td class="center"><span class="label">IPv6</span></td>
                        <td>{{ object.ipv6_endpoint }}</td>
                    </tr>
                {% endif %}
                <tr>
                    <td class="center"><span class="label">Sous-réseaux</span></td>
                    <td>
                        {% for subnet in object.ip_subnet.all %}{{ subnet|prettify }}<br/>{% endfor %}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    {% if form %}
    <p class="formcontrol"><input class="button" type="submit" value="Valider" /></p>
    </form>
    {% endif %}
</div>

<div class="row" id="graph">
    <h3>Graphe de trafic sur
        <select id="graph_period">
            <option value="hourly">une heure</option>
            <option value="daily" selected>24 heures</option>
            <option value="weekly">7 jours</option>
            <option value="monthly">un mois</option>
            <option value="yearly">un an</option>
        </select> : <small class="pending_request"></small></h3>
    <img id="graph_trafic" src="{% url 'vpn:get_graph' vpn_id=object.pk %}" alt="Graphe de trafic {{ object.login }}" />
</div>

{% endblock %}

{% block extra_js %}
    <script>
        // Bouton génération du mot de passe
        $('#passgen').click(function(){
            if (!confirm("Ceci va effacer votre ancien mot de passe et en générer un nouveau. Continuer ?")) return false;

            parent_cell = $(this).parent();
            parent_cell.html('<span class="pending_request"><i class="fa fa-refresh fa-spin"></i> Génération en cours</span>');

            $.ajax({
                'url': $(this).attr('href')
            }).done(function(html) {
                //Remplace le tr parent par le contenu renvoyé (qui est deux tr successifs)
                parent_cell.parent().replaceWith(html);
            }).fail(function( jqXHR, textStatus ) {
                parent_cell.html('<span class="error">Échec de la requête : ' + textStatus + '</span>');
            });

            return false;
        });

        // Graphe de conso data
        $('#graph_period').change(function(){
            $('#graph .pending_request').html('<i class="fa fa-refresh fa-spin"></i>');
            base_url = "{% url 'vpn:get_graph' vpn_id=object.pk %}/";
            $('#graph_trafic').attr('src', base_url + $(this).val());
        });
        $('#graph_trafic').load(function() {
            $('#graph .pending_request').html('');
        });

    </script>
{% endblock extra_js %}