Browse Source

Travail d'Elzen sur l'interface du VPN

Baptiste Jonglez 10 years ago
parent
commit
c154a98067

+ 38 - 0
coin/static/css/illyse.css

@@ -197,6 +197,44 @@ span.italic {
     content: "⚠ ";
     font-weight: bold;
 }
+.flatfield input {
+	margin-bottom: 0;
+	border: 0 none transparent;
+	background-color: transparent;
+	text-overflow: ellipsis;
+	box-shadow: none;
+	font-size: 1.1em;
+	color: #222222;
+}
+.flatfield input::-moz-placeholder {
+	font-style: italic;
+}
+.flatfield input:-ms-input-placeholder {
+	font-style: italic;
+}
+.flatfield input::-webkit-input-placeholder {
+	font-style: italic;
+}
+.flatfield input:focus {
+	background-color: #FFFFFF;
+	border: 1px solid #C0C0C0;
+}
+
+h3.graphtitle select {
+	display: inline;
+	background-color: transparent;
+	border: 0 none transparent;
+	font-family: inherit;
+	box-shadow: none;
+	font-size: 0.9em;
+	width: auto;
+	margin: 0;
+	padding: 0;
+}
+h3.graphtitle select option {
+	font-size: 0.6em;
+}
+
 a.cfglink:before {
 	content: "⎘ ";
 }

BIN
coin/static/img/coin.ajax.gif


+ 45 - 0
coin/static/js/illyse.js

@@ -0,0 +1,45 @@
+window.onload = function() {
+	var field = document.getElementById("passgen");
+	if (field != undefined) field.onclick = function() {
+		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);
+	}
+};

+ 1 - 0
coin/templates/base.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="{% static "css/illyse.css" %}" />
     <link rel="stylesheet" href="{% static "css/offcanvas.css" %}">
     <script src="{% static "js/vendor/modernizr.js" %}"></script>
+    <script src="{% static "js/illyse.js" %}"></script>
     <link rel="icon" type="image/png" href="{% static "img/coinitem.png" %}"/>
     <link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}" />
   </head>

+ 1 - 1
coin/vpn/templates/vpn/password.html

@@ -1,7 +1,7 @@
 {% extends "vpn/vpn.html" %}
 
 {% block password %}
-                <tr>
+                <tr id="password">
                     <td class="center"><span class="label">Mot de passe</span></td>
                     <td><span class="pass">{{ password }}</span></td>
                 </tr>

+ 18 - 14
coin/vpn/templates/vpn/vpn.html

@@ -14,13 +14,13 @@
                 </tr>{% block password %}
                 <tr>
                     <td class="center" colspan="2">
-                        <a class="button" href="{% url 'vpn:generate_password' object.pk %}">Générer un nouveau mot de passe</a>
+                        <a class="button" id="passgen" href="{% url 'vpn:generate_password' object.pk %}">Générer un nouveau mot de passe</a>
                     </td>
                 </tr>
-                {% endblock %}{% if object.comment %}<tr>
-                    {% if object.comment|length < 24 %}<td class="center"><span class="label">Commentaire</span></td>
-                    <td>{% else %}<td colspan="2">{% endif %}{{object.comment}}</td>
-                </tr>{% endif %}
+                {% endblock %}<tr class="flatfield">
+                    <td class="center"><span class="label">Commentaire</span></td>
+                    <td><input type="text" value="{{object.comment}}" /></td>
+                </tr>
                 <tr>
                     <td class="center boolviewer" colspan="2">
                         <input type="checkbox" disabled="disabled"{% if object.activated %} checked="checked"{% endif %} />
@@ -35,6 +35,14 @@
         <div class="panel">
             <h3>Adresses IP</h3>
             <table class="full-width">
+                <tr class="flatfield">
+                    <td class="center"><span class="label">Sortie IPv4</span></td>
+                    <td><input type="text" name="endpoint4" {% if object.ipv4_endpoint %}value="{{ object.ipv4_endpoint }}" {% endif %} placeholder="Aucune adresse"/></td>
+                </tr>
+                <tr class="flatfield">
+                    <td class="center"><span class="label">Sortie IPv6</span></td>
+                    <td><input type="text" name="endpoint6" {% if object.ipv6_endpoint %}value="{{ object.ipv6_endpoint }}" {% endif %} placeholder="Aucune adresse"/></td>
+                </tr>
                 <tr>
                     <td class="center"><span class="label">Sous-réseaux</span></td>
                     <td>
@@ -43,18 +51,14 @@
                         </ul>{% else %}<span class="italic">Aucune adresse</span>{% endif %}
                     </td>
                 </tr>
-                <tr>
-                    <td class="center"><span class="label">Sorties</span></td>
-                    <td>
-                        {% if object.ipv4_endpoint or object.ipv6_endpoint %}<ul>
-                            {% if object.ipv4_endpoint %}<li>{{ object.ipv4_endpoint }}</li>{% endif %}
-                            {% if object.ipv6_endpoint %}<li>{{ object.ipv6_endpoint }}</li>{% endif %}
-                        </ul>{% else %}<span class="italic">Aucune adresse</span>{% endif %}
-                    </td>
-                </tr>
             </table>
         </div>
     </div>
 </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>
+
 {% endblock %}