|
@@ -74,15 +74,23 @@
|
|
|
</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;
|
|
|
|
|
@@ -92,7 +100,7 @@
|
|
|
$.ajax({
|
|
|
'url': $(this).attr('href')
|
|
|
}).done(function(html) {
|
|
|
- //Remplace le tr par le contenu renvoyé (qui est deux tr successifs)
|
|
|
+ //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>');
|
|
@@ -100,5 +108,16 @@
|
|
|
|
|
|
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 %}
|