|
@@ -11,14 +11,14 @@
|
|
|
{{ message }}
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
-
|
|
|
+
|
|
|
{% 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 %}
|
|
|
-
|
|
|
+
|
|
|
<div class="large-6 columns">
|
|
|
<div class="panel">
|
|
|
<h3>Statut</h3>
|
|
@@ -26,14 +26,14 @@
|
|
|
<tr>
|
|
|
<td class="center"><span class="label">Identifiant</span></td>
|
|
|
<td>{{object.login}}</td>
|
|
|
- </tr>{% block password %}
|
|
|
+ </tr>
|
|
|
<tr>
|
|
|
<td class="center" colspan="2">
|
|
|
- <a class="button radius tiny" id="passgen" href="{% url 'vpn:generate_password' object.pk %}"><i class="fa fa-refresh"></i>
|
|
|
+ <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>
|
|
|
- {% endblock %}<tr class="flatfield">
|
|
|
+ <tr class="flatfield">
|
|
|
<td class="center">{{ form.comment.label_tag }}</td>
|
|
|
<td>{{ form.comment }}</td>
|
|
|
</tr>
|
|
@@ -72,9 +72,50 @@
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
-<div class="row">
|
|
|
- <h3 class="graphtitle">Graphe de trafic sur <span id="trafic_zoom">24 heures</span> :</h3>
|
|
|
- <img id="trafic_graph" src="{% url 'vpn:get_graph' vpn_id=object.pk %}" alt="Graphe de trafic {{ object.login }}" />
|
|
|
+<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 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 js %}
|