Browse files

more ui pretty up

  • Loading branch information...
1 parent 2ac9e5a commit e65767a981100dc74daf9dd5dc62a0f46c71b4d8 @javasoze javasoze committed Oct 1, 2011
Showing with 59 additions and 18 deletions.
  1. +49 −18 apps/query-console/index.html
  2. +10 −0 apps/query-console/js/app.js
View
67 apps/query-console/index.html
@@ -23,80 +23,111 @@
<script src="js/mustache.js" ></script>
<script>
- var statsTemplate = "Found {{numhits}} docs in {{time}}ms";
+ var statsTemplate = "<span style='font-weight:bold'>Found {{numhits}} docs in {{time}}ms</spa>";
var facetTemplate = " {{value}} ({{count}})";
- var valueTemplate = " <span style='padding-right:50px;width:100px;margin-right:30px;background-color:#efefef;font-weight:bold;font-size:14px'>{{name}}:</span>{{value}}";
-
+ // var valueTemplate = " <span style='padding-right:50px;width:100px;margin-right:30px;background-color:#efefef;font-weight:bold;font-size:14px'>{{name}}:</span>{{value}}";
+ var valueTemplate = "<td style='background-color:#efefef'>{{name}}</td><td>{{value}}</td>";
function doClick() {
var ql = $('#query').val();
var reqJson = $.toJSON({'bql':ql});
$.getJSON('http://localhost:18888/parse?info='+encodeURIComponent(reqJson),function(res) {
var result = res["result"];
-
- var searchstats={'numhits':result.numhits,'time':result.time}
+ var searchStats;
+ if (result){
+ searchstats={'numhits':result.numhits,'time':result.time}
+ }
+ else{
+ searchstats={'numhits':0,'time':0}
+ }
var statsNode = $('#searchStats');
statsNode.empty();
statsNode.append($.mustache(statsTemplate, searchstats));
// facets
- var facets = result["facets"];
+ var facets = [];
+ if (result){
+ facets = result["facets"];
+ }
var facetDiv= $('#facets');
facetDiv.empty();
for (var f in facets){
var facetArray = facets[f];
- facetDiv.append("<div>");
- facetDiv.append("<span style='background-color:#efefef;font-weight:bold;font-size:14px'>"+f+"</span><br/>");
+ var someDiv = $('<div style="margin-top:15px;margin-bottom:15px"/>');
+ facetDiv.append(someDiv);
+ someDiv.append("<div style='text-align:center;margin-bottom:10px;background-color:#efefef;font-weight:bold;font-size:18px'>"+f+"</div>");
for (var i=0;i<facetArray.length;++i){
var facetVal = facetArray[i];
- facetDiv.append($.mustache(facetTemplate,facetVal));
- facetDiv.append("<br/>")
+ var selectedDiv = $('<strong style="background-color:#efefef"/>');
+ if (facetVal["selected"]){
+ someDiv.append(selectedDiv);
+ }
+ else{
+ selectedDiv = someDiv;
+ }
+ selectedDiv.append($.mustache(facetTemplate,facetVal));
+ someDiv.append("<br/>");
}
- facetDiv.append("</div>")
facetDiv.append("<hr/>");
}
//hits
- var hits = result.hits;
+
+ var hits = [];
+ if (result){
+ hits = result.hits;
+ }
$('#result').val($.toJSON(hits));
var hitsDiv = $('#hits');
hitsDiv.empty();
for (var i=0;i<hits.length;++i){
hitsDiv.append("<div/>");
var hit = hits[i];
+ var tableElem = $('<table class="zebra-striped" style="border-width:5px"/>');
+ hitsDiv.append(tableElem);
+ tableElem.append("<thead><tr><th>field</th><th>value(s)</th></tr></thead>");
+
+ var tbodyElem = $('<tbody/>');
+
+ tableElem.append(tbodyElem);
for (var f in hit){
var field = hit[f];
console.log('name:'+f);
console.log('val:'+field);
var val ={'name':f,'value':field};
console.log('not array: '+val.name);
- hitsDiv.append($.mustache(valueTemplate,val));
- hitsDiv.append("<br/>")
+ tbodyElem.append("<tr>"+$.mustache(valueTemplate,val)+"</tr>");
}
hitsDiv.append("<hr/>");
}
});
};
+
</script>
</head>
<body>
<div class="container">
+ <img width="100" height="100" src="http://javasoze.github.com/sensei/images/sensei_black.jpg"/>
<h1 style="text-align:center">Sensei Query Console</h1>
- <h3>Enter query: </h3><textarea style="width:850px;font-size:20px" id="query" cols="200" rows="3">select * from cars browse by (color:(true,1,5,hits),category:(true,1,5,hits))</textarea>
+ <h3>Enter query: </h3><textarea style="width:100%;font-size:20px" id="query" cols="200" rows="3">select * from cars browse by (color:(true,1,5,hits),category:(true,1,5,hits))</textarea>
+<!--
<input id="execute" onclick="doClick()" type="button" class="btn primary" value="execute" />
+-->
<br/>
- <div style="text-align:right" id="searchStats"></div>
+ <div style="text-align:right;margin-top:5px;margin-bottom:3px" id="searchStats"></div>
<hr/>
<div class="container-fluid">
<div class="sidebar">
- <h3>Facets</h3>
+ <h2>Facets</h2>
+ <hr/>
<div id="facets">
</div>
</div>
<div class="content">
- <h3>Results</h3>
+ <h2>Results</h2>
+ <hr/>
<div id="hits">
</div>
</div>
View
10 apps/query-console/js/app.js
@@ -1,3 +1,13 @@
+
+$(document).ready(function(){
+ $('#query').keypress(function(e){
+ var code = (e.keyCode ? e.keyCode : e.which);
+ if (code==13){
+ doClick();
+ }
+ });
+});
+
(function($){$.toJSON=function(o)
{if(typeof(JSON)=='object'&&JSON.stringify)
return JSON.stringify(o);var type=typeof(o);if(o===null)

0 comments on commit e65767a

Please sign in to comment.