Replace legacy JS coe by jquery in vpn conf

coin/static/css/illyse.css

@@ -201,7 +201,7 @@ span.italic {
     font-weight: bold;
 }
 
-h3.graphtitle select {
+#graph h3 select {
 	display: inline;
 	background-color: transparent;
 	border: 0 none transparent;
@@ -212,7 +212,7 @@ h3.graphtitle select {
 	margin: 0;
 	padding: 0;
 }
-h3.graphtitle select option {
+#graph h3 select option {
 	font-size: 0.6em;
 }
 

coin/static/js/illyse.js

@@ -1,53 +1,3 @@
-// TODO : Move it to VPN template only. We havn't to load this code at each page loa
-// TODO : jQueryfy it
-window.onload = function() {
-	//var field = document.getElementById("passgen");
-	//if (field != undefined) field.onclick = function() {
-		//if (!confirm("Ceci va effacer votre ancien mot de passe et en générer un nouveau. Continuer ?")) return false;
-		//var cell = field.parentNode;
-		//cell.removeChild(field);
-		//cell.appendChild(document.createElement("img"));
-		//cell.lastChild.src = "/static/img/coin.ajax.gif";
-		//cell.appendChild(document.createTextNode(" Génération en cours…"));
-		//var xhr = new XMLHttpRequest();
-		//xhr.onreadystatechange = function() {
-			//if (xhr.readyState != 4) return;
-			//var table = cell.parentNode.parentNode;
-			//if (xhr.responseXML == null)
-				//var pass = (new DOMParser().parseFromString(xhr.responseText, "text/html")).getElementById("password");
-			//else var pass = xhr.responseXML.getElementById("password");
-			//table.insertBefore(pass.cloneNode(true), cell.parentNode);
-			//do pass = pass.nextSibling; while (pass.nodeType == 3);
-			//table.insertBefore(pass.cloneNode(true), cell.parentNode);
-			//table.removeChild(cell.parentNode);
-		//};
-		//xhr.open("GET", field.href, false);
-		//xhr.send(null);
-		//return false;
-	//};
-
-	var field = document.getElementById("trafic_zoom");
-	if (field != undefined) {
-		var select = document.createElement("select");
-		var options = {"hourly": "une heure", "daily": "24 heures", "weekly": "7 jours", "monthly": "un mois", "yearly": "un an"};
-		for (var i in options) {
-			var opt = document.createElement("option");
-			opt.appendChild(document.createTextNode(options[i]));
-			opt.value = i;
-			select.appendChild(opt);
-		}
-		select.childNodes[1].selected = "selected";
-		var graph = document.getElementById("trafic_graph");
-		var href = graph.src+"/";
-		select.onchange = function() {
-			graph.src = href+select.value;
-		};
-		field.parentNode.insertBefore(select, field);
-		field.parentNode.removeChild(field);
-	}
-};
-
-
 $(function() {
     // Make URL parameters accessibles everywere by $.urlParam('my_param')
     $.urlParam = function(name){

coin/vpn/templates/vpn/vpn.html

@@ -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 %}