From 53e48a40761867e1b939097bcc82c42e45c69392 Mon Sep 17 00:00:00 2001
From: Mehdi Abaakouk <sileht@sileht.net>
Date: Fri, 20 Jan 2012 16:50:58 +0100
Subject: [PATCH] Improve UI

---
 lg.wsgi               |  2 +-
 static/style.css      | 30 +++++++++++++---
 templates/layout.html | 84 +++++++++++++++++++++++++------------------
 templates/route.html  |  2 +-
 4 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/lg.wsgi b/lg.wsgi
index 2faa6bf..0ee538e 100644
--- a/lg.wsgi
+++ b/lg.wsgi
@@ -1,5 +1,5 @@
 
 import sys
-sys.path.insert(0,"/var/www/lg.tetaneutral.net/")
+sys.path.insert(0,"/var/www/lg2.tetaneutral.net/")
 
 from lg import app as application
diff --git a/static/style.css b/static/style.css
index 4a525db..0123004 100644
--- a/static/style.css
+++ b/static/style.css
@@ -37,6 +37,7 @@ table {
 	height: 100%;
 	border-right: 1px solid #AFAFAF;
 	position:fixed;
+	font-size:11px;
 }
 #header h1{ 
 	text-align: center;
@@ -92,14 +93,23 @@ ul.proto li{
 
 select, input, { width: 100%;}
 input[type=text],textarea { width: 97%; font-size:10px; }
-
+input#submit { 
+	display:block ;
+	margin: 5px auto;	
+	width: 80px;
+}
+input#ipopup{
+	width: auto;
+}
 
 /* POPUP */
-.jqifade{
+.jqifade,
+.popupfade{
 	position: absolute;
 	background-color: #aaaaaa;
 }
-div.jqi{
+div.jqi,
+div.popup{
 	width: 600px;
 	position: absolute;
 	background-color: #ffffff;
@@ -111,10 +121,15 @@ div.jqi{
 	-webkit-border-radius: 10px;
 	padding: 7px;
 }
+div.popup{
+	width : 400px;
+}
+div.popup .popupcontainer,
 div.jqi .jqicontainer{
 	font-weight: bold;
 }
-div.jqi .jqiclose{
+div.jqi .jqiclose,
+div.popup .popupclose{
 	position: absolute;
 	top: 4px; right: -2px;
 	width: 18px;
@@ -122,18 +137,22 @@ div.jqi .jqiclose{
 	color: #bbbbbb;
 	font-weight: bold;
 }
+div.popup .popupmessage,
 div.jqi .jqimessage{
 	padding: 10px;
 	color: #444444;
 	height: 400px;
 	overflow: auto;
 }
+div.popup .popupmessage{ height:auto;}
+div.popup .popupbuttons,
 div.jqi .jqibuttons{
 	text-align: right;
 	padding: 5px 0 5px 0;
 	border: solid 1px #eeeeee;
 	background-color: #f4f4f4;
 }
+div.popup button,
 div.jqi button{
 	padding: 3px 10px;
 	margin: 0 10px;
@@ -143,12 +162,15 @@ div.jqi button{
 	font-weight: bold;
 	font-size: 12px;
 }
+div.popup button:hover,
 div.jqi button:hover{
 	background-color: #728A8C;
 }
+div.popup button.popupdefaultbutton,
 div.jqi button.jqidefaultbutton{
 	background-color: #BF5E26;
 }
+.popupwarning .popup .popupbuttons,
 .jqiwarning .jqi .jqibuttons{
 	background-color: #BF5E26;
 }
diff --git a/templates/layout.html b/templates/layout.html
index c5a92dc..356f4d0 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -15,48 +15,69 @@ $( function() {
 		});
 
 		previous_req_type = "{{session.req_type}}".replace("_detail","")
-		function update_view(){
-			$("#request_args").hide()
-			$("#submit").hide()
-
+		function update_view(nopopup){
 			next_req_type = $("#req_type").val().replace("_detail","")
 			if (previous_req_type != next_req_type) {
 				$("#request_args").val("")
 			}
 			previous_req_type = next_req_type
-			
+			if (nopopup) {
+				$("#submit").click()
+				return 
+			}
 			switch(next_req_type)
 			{
 				case "summary":
 					$("#submit").click()
 					break;
 				default:
-					$("#submit").show()
-					$("#request_args").show()
-					if ($("#request_args").val()) {
-						$("#submit").click()
-					} else {
-						$("#request_args").focus()
-					}
+					txt = $("#" + $("#req_type").val() ).html().replace("...", '<input type="text" id="ipopup" name="ipopup" value="' + $("#request_args").val() + '">')
+					
+					$.prompt(txt, 
+						{ 
+						prefix: 'popup',
+						callback: function(v,m,f){
+							if ( f != undefined){
+								$("#request_args").val(f.ipopup)
+								$("#submit").click()
+							}
+						}
+					});
+
+					$("#ipopup").keyup(function(event) {
+						if (event.which == 13) {
+							event.preventDefault();
+							$("#request_args").val($("#ipopup").val())
+							$("#submit").click() 
+						}
+					});
+
+					$("#ipopup").focus()
 					break;
 			}
-
-
 		}
 
 		$("ul li").click(function(){
 			// set hiddent field with class value
 			p = $(this).parent() // lu
 			c = p.attr("class")
-
+			
 			$("#"+c).val($(this).attr("id"))
 
 			$("ul."+p.attr("class") + " li").removeClass('selected')
 			$(this).addClass('selected')
 
-			update_view()
+			switch(c){
+				case "hosts":
+				case "proto":
+					update_view(true);
+					break;
+				default:
+					update_view(false);
+					break;
+			}
 		});
-		update_view()
+		//update_view(true)
 			
 		$("ul.proto li#{{session.proto}}").addClass('selected')
 		$("ul.hosts li[id='{{session.hosts}}']").addClass('selected')
@@ -66,13 +87,6 @@ $( function() {
 		$("ul.hosts li[id='{{session.hosts}}']").addClass('current')
 		$("ul.req_type li#{{session.req_type}}").addClass('current')
 
-		$("#request_args").keyup(function(event) {
-			if (event.which == 13) {
-				event.preventDefault();
-				$("#submit").click() 
-			}
-		});
-
 		$("#submit").click( function(){
 			switch ($("#req_type").val())
 			{
@@ -109,18 +123,18 @@ $( function() {
 			{% endfor %}
 		</ul>
 		<ul class="req_type">
-			<li id="summary">summary</li>
-			<li id="detail">detail</li>
-			<li id="prefix">prefix</li>
-			<li id="prefix_detail">prefix (detail)</li>
-			<li id="where">where net ~ [ ... ]</li>
-			<li id="where_detail">where net ~ [ ... ] (detail)</li>
+			<li id="summary">show protocols</li>
+			<li id="detail">show protocols ... all</li>
+			<li id="prefix">show route for ...</li>
+			<li id="prefix_detail">show route for ... all</li>
+			<li id="where">show route where net ~ [ ... ]</li>
+			<li id="where_detail">show route where net ~ [ ... ] all</li>
 		</ul>
-		<br />
-		<!--textarea type="text" id="request_args" style="display:none">{{session.request_args}}</textarea-->
-		<input type="text" id="request_args" style="display:none" value="{{session.request_args}}" />
-		<br />
-		<input type="button" id="submit" value="submit" />
+		{% if session.request_args %}
+		<p>... = {{session.request_args}}</p>
+		{% endif %}
+		<input type="hidden" id="request_args" style="display:none" value="{{session.request_args}}" />
+		<input type="button" id="submit" value="submit" style="display:none" />
 	</form>
 	</div>
 	<div id="content">
diff --git a/templates/route.html b/templates/route.html
index 9989493..cc11f3e 100644
--- a/templates/route.html
+++ b/templates/route.html
@@ -4,7 +4,7 @@
 <div class="detail">
 <h2>{{host}}/{{session.proto}}: {{command}}</h2>
 {% if session.request_args != expression %}
-DNS: <a href="/whois/{{session.request_args}}" class="whois">{{session.request_args}}</a> => <a href="/whois/{{ expression|replace("/32","") }}" class="whois">{{expression|replace("/32","")}}</a>
+DNS: <a href="/whois/{{session.request_args}}" class="whois">{{session.request_args}}</a> => <a href="/whois/{{ expression|replace("/32","")|replace("/128","") }}" class="whois">{{expression|replace("/32","")|replace("/128","")}}</a>
 {% endif %}
 <pre>
 {{ detail[host]|safe }}