Added alerts and removed all whitespace.
Change-Id: Iee4681fccf72ce3f28cba534a49b03fe62b54fda
diff --git a/client/query/query.html b/client/query/query.html
index bcd98d0..ca238ed 100644
--- a/client/query/query.html
+++ b/client/query/query.html
@@ -46,7 +46,6 @@
<div class="panel panel-default">
<div class="panel-heading flex flex-row">
<span class="vertical-fix width-fix">Filter Categories</span>
- <button id="searchButton" class="btn btn-primary right-fix">Search</button>
</div>
<div class="panel-body">
<ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
@@ -56,9 +55,19 @@
<div class="col-sm-9 col-md-10">
+ <div id="alerts"></div>
+
<div class="panel panel-default">
+ <div class="panel-heading">Filter Based Search</div>
<div class="panel-body">
<div id="filters"></div>
+ <button id="searchButton" class="btn btn-primary right-fix">Search</button>
+ </div>
+ </div>
+
+ <div class="panel panel-default">
+ <div class="panel-heading">Path Based Search</div>
+ <div class="panel-body">
<form class="form-inline" id="searchBar">
<div class="form-group">
<div class="input-group">
@@ -66,7 +75,7 @@
type="text" class="form-control" data-toggle="tooltip" data-placement="top"
title="This bar is for doing a tab completion like path completion. Press tab, enter, or click AutoComplete to begin your search.">
<div class="input-group-btn">
- <button id="autoCompleteButton" type="submit" class="btn btn-default">AutoComplete</button>
+ <button id="autoCompleteSearch" type="submit" class="btn btn-default">Search</button>
</div>
</div>
</div>
diff --git a/client/query/query.js b/client/query/query.js
index 3993c43..faac685 100644
--- a/client/query/query.js
+++ b/client/query/query.js
@@ -14,12 +14,12 @@
/**
* Atmos
* @version 2.0
- *
+ *
* Configures an Atmos object. This manages the atmos interface.
- *
- * @constructor
+ *
+ * @constructor
* @param {string} catalog - NDN path
- * @param {Object} config - Object of configuration options for a Face.
+ * @param {Object} config - Object of configuration options for a Face.
*/
function Atmos(catalog, config){
@@ -41,6 +41,7 @@
this.searchBar = $('#searchBar');
this.searchButton = $('#searchButton');
this.pagers = $('.pager');
+ this.alerts = $('#alerts');
var scope = this;
@@ -91,7 +92,7 @@
item.removeClass('active');
});
}
-
+
});
});
@@ -119,7 +120,7 @@
this.searchBar.submit(function(e){
e.preventDefault();
- scope.searchInput.trigger('autoComplete');
+ console.warn("This feature is incomplete.");
});
this.searchButton.click(function(){
@@ -146,14 +147,14 @@
console.log("Search started!", this.searchInput.val(), filters);
- console.log("Initiating query");
+ console.log("Initiating query");
this.results = []; //Drop any old results.
this.resultTable.empty();
var scope = this;
- this.query(this.catalog, filters,
+ this.query(this.catalog, filters,
function(interest, data){ //Response function
console.log("Query Response:", interest, data);
@@ -167,6 +168,7 @@
}, function(interest){ //Timeout function
console.warn("Request failed! Timeout");
+ scope.createAlert("Request timed out. \"" + interest.getName().toUri() + "\" See console for details.");
});
}
@@ -183,13 +185,9 @@
this.searchBar.removeClass('has-error').find('.help-block').fadeOut(function(){$(this).remove()});
}
- var filters = this.getFilters();
-
- filters["?"] = this.searchInput.val();
-
var scope = this;
- this.query(this.catalog, filters,
+ this.query(this.catalog, {"?": field},
function(interest, data){
var ack = data.getName();
@@ -201,7 +199,7 @@
scope.face.expressInterest(new Interest(name).setInterestLifetimeMilliseconds(5000),
function(interest, data){
console.log("Autocomplete query return: ", data.getContent().toString());
-
+
if (data.getContent().length !== 0){
var options = JSON.parse(data.getContent().toString().replace(/[\n\0]/g, "")).next.map(function(element){
return field + element;
@@ -211,10 +209,12 @@
}, function(interest){
console.warn("Interest timed out!", interest);
+ scope.createAlert("Request timed out. \"" + interest.getName().toUri() + "\" See console for details.");
});
}, function(interest){
console.error("Request failed! Timeout", interest);
+ scope.createAlert("Request timed out. \"" + interest.getName().toUri() + "\" See console for details.");
});
}
@@ -295,7 +295,8 @@
},
function(interest){ //Timeout
- console.error("Failed to retrieve results: timeout");
+ console.error("Failed to retrieve results: timeout", interest);
+ scope.createAlert("Request timed out. \"" + interest.getName().toUri() + "\" See console for details.");
}
);
@@ -330,6 +331,23 @@
return filters;
}
+ /**
+ * Creates a closable alert for the user.
+ *
+ * @param {string} message
+ * @param {string} type - Override the alert type.
+ */
+ Atmos.prototype.createAlert = function(message, type) {
+
+ var alert = $('<div class="alert"><div>');
+ alert.addClass(type?type:'alert-info');
+ alert.text(message);
+ alert.append(Atmos.closeButton);
+
+ this.alerts.append(alert);
+ }
+ Atmos.closeButton = '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
+
return Atmos;
})();