new searchbar completed, fix little things

mhils · Jul 3, 2013 · e814c2a · e814c2a
1 parent 52f1949
commit e814c2a
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 87 deletions.
diff --git a/gui/HoneyProxy/css/general.less b/gui/HoneyProxy/css/general.less
@@ -15,18 +15,6 @@
 	vertical-align: middle;
 }
 
-.label-large {
-	line-height: 20px;
-	font-size: 14px;
-	font-weight: normal;
-	border-radius: 4px;
-}
-
-//Bootstrap bug fix
-.input-append > .btn-group > .btn:first-child {
-	border-radius: 0px;
-}
-
 #appLayout {
 	height: 100%;
 	width: 100%;

diff --git a/gui/HoneyProxy/css/honeyproxy.css b/gui/HoneyProxy/css/honeyproxy.css
diff --git a/gui/HoneyProxy/css/honeyproxy.less b/gui/HoneyProxy/css/honeyproxy.less
@@ -10,4 +10,5 @@
 @import "grid.less";
 @import "header.less";
 @import "detail-pane.less";
-@import "reports.less";
+@import "reports.less";
+@import "searchbar.less";
diff --git a/gui/HoneyProxy/css/searchbar.less b/gui/HoneyProxy/css/searchbar.less
@@ -0,0 +1,20 @@
+.searchbar {
+	padding-top: 10px;
+
+	.query button {
+		padding-left: 6px;
+		padding-right: 6px;
+		width: 26px;
+	}
+	.query {
+		transition: opacity 0.2s;
+		text-align: center;
+		&.empty:not(.always-visible) {
+			opacity: 0.3;
+
+			&:hover {
+				opacity: 0.7;
+			};
+		}
+	}
+}
diff --git a/gui/HoneyProxy/util/Observer.js b/gui/HoneyProxy/util/Observer.js
@@ -27,8 +27,12 @@ define(["dojo/_base/declare"], function(declare) {
 
 
 
-  Observer.observe = function(obj, observer) {
+  Observer.observe = function(obj, observer, ownable) {
     obj._observe.push(observer);
+    if(ownable)
+      return {"remove": function(){
+        Observer.unobserve(obj,observer);
+      }};
   };
   Observer.unobserve = function(obj, observer) {
     var index = obj._observe.indexOf(observer);

diff --git a/gui/HoneyProxy/util/_ReactiveTemplatedWidget.js b/gui/HoneyProxy/util/_ReactiveTemplatedWidget.js
@@ -38,6 +38,15 @@ define([
     },
     "on": function(type, node, value) {
       eventListenerBinding.call(this, value[0], node, value[1]);
+    },
+    "toggleClass": function(type, node, value) {
+      value = value.slice();
+      while(value.length > 0){
+        var className = value.shift();
+        var show = !!value.shift();
+        (show ? node.classList.add : node.classList.remove).call(node.classList,className);
+      }
+
     }
   };
 
@@ -120,7 +129,7 @@ define([
     this.own(evt_handle, asp_handle);
   };
 
-  ["click", "load", "change"].forEach(function(event) {
+  ["click", "load", "change","input","submit","blur"].forEach(function(event) {
     default_bindings[event] = eventListenerBinding;
   });
 

diff --git a/gui/HoneyProxy/views/Searchbar.js b/gui/HoneyProxy/views/Searchbar.js
@@ -1,23 +1,36 @@
 define(["dojo/_base/declare",
+		"../util/Observer",
 		"../util/_ReactiveTemplatedWidget",
-		"jquery",
-		"bootstrap/dropdown",
-		"dojo/on",
 		"dojo/text!./templates/Searchbar.html",
 		"dojo/text!./templates/Searchbar-filterbutton.html"
 ], function(
 	declare,
+	Observer,
 	_ReactiveTemplatedWidget,
-	$,
-	dropdown,
-	on,
 	template,
 	templateButton) {
 
 	var FilterButton = declare([_ReactiveTemplatedWidget], {
 		templateString: templateButton,
-		onClick: function(){
-			console.log(this,arguments);
+		empty: true,
+		value: function() {
+			return this.inputNode.value.trim();
+		},
+		onSubmit: function(event) {
+			event.preventDefault();
+			if (this.query !== this.value()) {
+				this.query = this.value();
+				this.notify({name: "query"});
+				this.onBlur();
+			}
+		},
+		onInput: function() {
+			this.empty = (this.value() === "");
+			this.updateBindings();
+		},
+		onBlur: function() {
+			this.highlightSubmit = (this.value() !== this.query);
+			this.updateBindings();
 		}
 	});
 
@@ -26,19 +39,72 @@ define(["dojo/_base/declare",
 		type: {
 			isfilter: true
 		},
-		constructor: function(){
-			this.queries = [new FilterButton({model: {query: "foo", color: "red", isfilter: false}}),new FilterButton({model: {query: "bar", isfilter: true}})]
+		constructor: function() {
+			this.filters = [];
+			this.colors = ["#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
+					"#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
+			];
 		},
-		postCreate: function(){
+		postCreate: function() {
 			this.inherited(arguments);
-			//$(this.searchDropdown).
+			this.addFilter({
+				filter: true,
+				fixed: true,
+				alwaysVisible: true
+			});
+			this.addFilter({
+				color: this.colors.shift(),
+				fixed: true,
+				alwaysVisible: true
+			});
 		},
-		dropdownClick: function(event){
-			this.type = JSON.parse(event.target.dataset.props);
-			this.refresh();
+		addFilter: function(options) {
+			var self = this;
+			var filter = new FilterButton(options);
+			this.own(Observer.observe(filter, function(records) {
+				if (records.name === "query")
+					self.onSubmit(filter);
+			},true));
+			this.filters.push(filter);
+			this.filtersNode.style.opacity = 0;
+			this.filtersNode.appendChild(filter.domNode);
+			this.filtersNode.style.opacity = 1;
+			this.updateBindings();
 		},
-		addClick: function(event){
+		removeFilter: function(filter) {
+			this.colors.unshift(filter.color);
+			filter.destroyRecursive(false);
+			this.filters.splice(this.filters.indexOf(filter), 1);
+			this.updateBindings();
+		},
+		onSubmit: function(filter) {
+			var last = this.filters[this.filters.length - 1];
+			var secondToLast = this.filters[this.filters.length - 2];
+
+			//remove filter if empty and not last
+			if (!filter.fixed && filter.empty && last !== filter) {
+				this.removeFilter(filter);
+			} else if (!last.fixed && last.empty && secondToLast.empty) {
+				//Remove last one if we just cleared either the last one or the second last one
+				this.removeFilter(last);
+			}
+			//Add new one if last one has content
+			if (!last.empty && this.colors.length > 0) {
+				this.addFilter({
+					color: this.colors.shift()
+				});
+			}
+			this.getParent().resize();
 
+			var query = {};
+			this.filters.forEach(function(filter) {
+				var name = filter.filter ? "filter" : filter.color;
+				if(filter.query){
+					query[name] = filter.query;
+				}
+			});
+			this.query = query;
+			this.notify({name:"query"});
 		}
 	});
 

diff --git a/gui/HoneyProxy/views/TrafficPane.js b/gui/HoneyProxy/views/TrafficPane.js
@@ -1,15 +1,17 @@
 /**
  * Main traffic view. Shows traffic table, search and details
  */
-define(["dojo/_base/declare",
+define(["dojo/aspect",
+		"dojo/_base/declare",
 		"dijit/layout/BorderContainer",
+		"../util/Observer",
 		"./_DetailViewMixin",
 		"dijit/layout/ContentPane",
 		"./Searchbar",
 		"./TrafficGrid",
 		"./TrafficSidebar",
 		"HoneyProxy/traffic"
-], function(declare, BorderContainer, _DetailViewMixin, ContentPane, Searchbar, TrafficGrid, TrafficSidebar, flowStore) {
+], function(aspect, declare, BorderContainer, Observer, _DetailViewMixin, ContentPane, Searchbar, TrafficGrid, TrafficSidebar, flowStore) {
 
 	return declare([BorderContainer, _DetailViewMixin], {
 		design: "sidebar",
@@ -23,25 +25,16 @@ define(["dojo/_base/declare",
 				region: "top",
 				splitter: false
 			});
+			this.own(Observer.observe(this.searchbar,function(record){
+				if(record.name === "query")
+					self.grid.set("query",self.searchbar.query);
+			},true));
+			this.addChild(this.searchbar);
 
 			//Main Traffic Grid
 			this.grid = new TrafficGrid({
 				store: flowStore
 			});
-
-			this.gridPane = new ContentPane({
-				region: "center",
-				splitter: true,
-				content: this.grid
-			});
-
-			//Sidebar
-			this.sidebar = new TrafficSidebar({
-				region: "right",
-				splitter: true
-			});
-
-
 			//Wire Grid Selection to DetailView
 			this.grid.on("dgrid-select", function(event) {
 				//if details have been hidden, don't open them on keyboard navigation
@@ -59,12 +52,22 @@ define(["dojo/_base/declare",
 				self.showDetails(self.grid.row(selectedRow).data);
 			});
 
-
-
-			//populate trafficPane
-			this.addChild(this.searchbar);
+			//Grid Pane Wrapper
+			this.gridPane = new ContentPane({
+				region: "center",
+				splitter: true,
+				content: this.grid
+			});
 			this.addChild(this.gridPane);
+
+			/*
+			//Sidebar
+			this.sidebar = new TrafficSidebar({
+				region: "right",
+				splitter: true
+			});
 			this.addChild(this.sidebar);
+			*/
 		}
 	});
 });
diff --git a/gui/HoneyProxy/views/templates/Searchbar-filterbutton.html b/gui/HoneyProxy/views/templates/Searchbar-filterbutton.html
@@ -1,5 +1,12 @@
-<div class="btn-group">
-  <button disabled class="btn btn-mini">
-  	<i data-bind="className: model.isfilter ?  'icon-filter' : 'icon-sign-blank'; css: ['color',model.color]"></i> <span data-bind="textContent: model.query"></span></button>
-  <button class="btn btn-mini" data-bind="click: view.onClick"><span class="close">&times;</span></button>
-</div>
+<form class="query input-prepend input-append span3" data-bind="toggleClass: ['empty',view.empty,'always-visible',view.alwaysVisible];
+														 submit: view.onSubmit.bind(view)">
+	<span class="add-on" data-bind="css: ['color',view.color];">
+		<i data-bind="className: view.filter?'icon-filter':'icon-tag'"></i></span>
+	<input type="text" class="span2" data-bind="bind: [view,'inputNode'];
+												input: view.onInput.bind(view);
+												blur: view.onBlur.bind(view);
+												placeholder: view.filter?'Filter':'Highlight'">
+	<button class="btn" tabindex="-1" data-bind="toggleClass: ['btn-info',view.highlightSubmit];
+												 title: view.highlightSubmit ? 'This query has not been submitted yet.' : 'Submit'">
+		<i class="icon-caret-right"></i></button>
+</form>
diff --git a/gui/HoneyProxy/views/templates/Searchbar.html b/gui/HoneyProxy/views/templates/Searchbar.html
@@ -1,31 +1,4 @@
-<div class="searchbar" style="overflow: visible; z-index: 10">
-	<form class="form-inline" style="padding:1em; margin-bottom: 0px">
-	<div class="input-append" >
-		<input type="text" class="span4" placeholder="Search">
-		<div class="btn-group">
-			<button class="btn" tabindex="-1"><i data-bind="className: view.type.isfilter ? 'icon-filter' : 'icon-sign-blank'"d></i> Filter</a></button>
-		    <ul data-bind="on: ['a:click',view.dropdownClick.bind(view)]" class="dropdown-menu">
-		    	<li><a href="#" data-props='{"isfilter":true}'><i class="icon-filter"></i>  Filter</a></li>
-		    	<li class="divider"></li>
-		    	<li><a href="#" data-props='{"isfilter":false, "color":"red"}'><i class="icon-sign-blank"></i> Highlight</a></li>
-		    	<li><a href="#" data-props='{"isfilter":false, "color":"green"}'><i class="icon-sign-blank"></i> Highlight (2)</a></li>
-		    	<li><a href="#" data-props='{"isfilter":false, "color":"blue"}'><i class="icon-sign-blank"></i> Highlight (3)</a></li>
-		    	<li><a href="#" data-props='{"isfilter":false, "color":"orange"}'><i class="icon-sign-blank"></i> Highlight (4)</a></li>
-		    </ul>
-		    <button class="btn" data-toggle="dropdown" tabindex="-1"><span class="caret"></span></button>
-		</div>
+<div class="searchbar" data-bind="toggleClass: ['dense', this.filters.length > 4]">
+	<div class="row" data-bind="bind: [view, 'filtersNode']">
 	</div>
-	&nbsp;&nbsp;
-	<span data-bind="widgets: view.queries">
-	<div class="btn-group">
-	  <button class="btn btn-mini"><i class="icon-filter"></i> Left</button>
-	  <button class="btn btn-mini"><span class="close">&times;</span></button>
-	</div>
-	<div class="btn-group">
-	  <button class="btn btn-mini"><i class="icon-sign-blank"></i> Right</button>
-	  <button class="btn btn-mini"><span class="close">&times;</span></button>
-	</div>
-
-	</span>
-	</form>
 </div>
diff --git a/gui/HoneyProxy/views/templates/_PopoutMixin.html b/gui/HoneyProxy/views/templates/_PopoutMixin.html
@@ -1,7 +1,7 @@
 <html>
 <head>
 	<title><%- title %></title>
-	<link rel="stylesheet" href="./HoneyProxy/honeyproxy.css">
+	<link rel="stylesheet" href="./HoneyProxy/css/honeyproxy.css">
 </head>
 <body>
 <%= content %>