[Groonga-commit] groonga/gcs [master] Implement search on Twitter bootstrap

Back to archive index

null+****@clear***** null+****@clear*****
2012年 6月 22日 (金) 17:49:57 JST


Yoji SHIDARA	2012-06-22 17:49:57 +0900 (Fri, 22 Jun 2012)

  New Revision: 59e67df648cd410134efc6ea29f35778630d7c6a
  https://github.com/groonga/gcs/commit/59e67df648cd410134efc6ea29f35778630d7c6a

  Log:
    Implement search on Twitter bootstrap

  Added files:
    public/stylesheets/gcs.css
  Modified files:
    public/javascripts/gcs.js
    views/index.jade
    views/layout.jade

  Modified: public/javascripts/gcs.js (+31 -15)
===================================================================
--- public/javascripts/gcs.js    2012-06-22 16:10:56 +0900 (830279f)
+++ public/javascripts/gcs.js    2012-06-22 17:49:57 +0900 (81a12a3)
@@ -1,22 +1,38 @@
 function renderResults(data) {
-  var template = $('script#table-template').text();
+  var template = $('script#results-template').text();
   var rendered = jade.compile(template)(data);
-  $(results).html(rendered);
+  $('#results').html(rendered);
 }
 
-$(document).ready(function($) {
-  $('form.search').submit(function() {
-    var query = $('form.search input[name="query"]').val();
+function renderRequestInformation(data) {
+  var template = $('script#request-information-template').text();
+  var rendered = jade.compile(template)(data);
+  $('#request-information').html(rendered);
+}
+
+function onSearch() {
+  var query = $('form#search input[name="query"]').val();
+  var domain = $('form#domain input[name="domain-name"]').val();
+  var searchEndpoint = 'http://search-' + domain + '-example.localhost:3000/2011-02-01/search'; // TODO
+  var params = {q: query};
+  var urlForRawRequest = searchEndpoint + '?' + jQuery.param(params);
+  renderRequestInformation({urlForRawRequest: urlForRawRequest});
 
-    $.ajax({
-      type: 'GET',
-      url: 'http://search-companies-example.localhost:3000/2011-02-01/search', // TODO
-      data: {q: query},
-      dataType: 'jsonp',
-      success: function(data) {
-        renderResults(data);
-      }
-    });
-    return false;
+  $('#results').hide();
+  $.ajax({
+    type: 'GET',
+    url: searchEndpoint,
+    data: params,
+    dataType: 'jsonp',
+    success: function(data) {
+      renderResults(data);
+      $('#results').show();
+    }
   });
+  return false;
+}
+
+$(document).ready(function($) {
+  $('form#domain').submit(onSearch);
+  $('form#search').submit(onSearch);
 });

  Added: public/stylesheets/gcs.css (+11 -0) 100644
===================================================================
--- /dev/null
+++ public/stylesheets/gcs.css    2012-06-22 17:49:57 +0900 (44fa5cb)
@@ -0,0 +1,11 @@
+body {
+  margin-top: 60px;
+}
+
+.id-row {
+  background-color: #f4f9fe;
+}
+
+.id-cell {
+  font-weight: bold;
+}

  Modified: views/index.jade (+5 -19)
===================================================================
--- views/index.jade    2012-06-22 16:10:56 +0900 (fd3a177)
+++ views/index.jade    2012-06-22 17:49:57 +0900 (c17ffef)
@@ -1,20 +1,6 @@
-h2 dashboard
+form#search.form-search
+  input.search-query(type="text", name="query", value="")
+  input.btn(type="submit", value="Search")
 
-script#table-template(type="text/html")
-  |table
-  |  each record, index in hits.hit
-  |    tr
-  |      td= index
-  |      td= record.id
-  |      td
-  |    each value, columnName in record.data
-  |      tr
-  |        td
-  |        td= columnName
-  |        td= value
-
-form.search
-  input(type="text", name="query", value="tokyo")
-  input(type="submit", value="Search")
-
-table#results
+#request-information
+#results

  Modified: views/layout.jade (+33 -2)
===================================================================
--- views/layout.jade    2012-06-22 16:10:56 +0900 (81213bb)
+++ views/layout.jade    2012-06-22 17:49:57 +0900 (e22163d)
@@ -5,6 +5,37 @@ html
     script(src="/javascripts/jquery-1.7.2.min.js", type="text/javascript")
     script(src="/javascripts/jade.min.js", type="text/javascript")
     script(src="/javascripts/gcs.js", type="text/javascript")
+    link(href="/stylesheets/bootstrap.min.css", rel="stylesheet")
+    link(href="/stylesheets/gcs.css", rel="stylesheet")
+    script#request-information-template(type="text/html")
+      |p
+      |  span view raw:
+      |  a(href=urlForRawRequest, target='_blank')= urlForRawRequest
+    script#results-template(type="text/html")
+      |table.table.table-bordered
+      |  if hits.hit.length > 0
+      |    each record, index in hits.hit
+      |      tr.id-row
+      |        td= index + 1
+      |        td.id-cell(colspan="2")= record.id
+      |      each value, columnName in record.data
+      |        tr
+      |          td
+      |          td= columnName
+      |          td= value
+      |  else
+      |    tr
+      |      td No record matched for the query.
+
   body
-    h1 Groonga CloudSearch
-    != body
+    .navbar.navbar-fixed-top
+      .navbar-inner
+        .container
+          a.brand(href="/") Groonga CloudSearch
+          form.navbar-form.pull-right#domain
+            input(type="text", value="companies", name="domain-name")
+          p.navbar-text.pull-right Domain:
+    .container
+      .row
+        .span12
+          != body
-------------- next part --------------
HTML$B$NE:IU%U%!%$%k$rJ]4I$7$^$7$?(B...
Download 



Groonga-commit メーリングリストの案内
Back to archive index