[#180,demos/search][m]: google docs example using nigeria oil spill data - closes #180.

demos/search/app.js

@@ -74,6 +74,7 @@ var SearchView = Backbone.View.extend({
     <div class="controls"> \
       <div class="query-here"></div> \
     </div> \
+    <div class="total"><h2><span></span> records found</h2></div> \
     <div class="body"> \
       <div class="sidebar"></div> \
       <div class="results"> \
@@ -99,6 +100,8 @@ var SearchView = Backbone.View.extend({
     });
     this.el.html(html);
 
+    this.el.find('.total span').text(this.model.recordCount);
+
     var view = new recline.View.FacetViewer({
       model: this.model
     });
@@ -138,8 +141,9 @@ function setupMoreComplexExample(config) {
       },
       {silent: true}
     );
-    if (dataset.get('url').indexOf('openspending') != -1) {
-      dataset.queryState.addFacet('dataset');
+    if (dataset.get('url') in templates) {
+      // for gdocs example
+      dataset.queryState.addFacet('cause');
     }
     dataset.query();
   });
@@ -153,6 +157,7 @@ var templates = {
        {{#data}} \
        <li>{{key}}: {{value}}</li> \
        {{/data}} \
+     </ul> \
     </div> \
     ';
     var data = _.map(_.keys(record), function(key) {
@@ -171,8 +176,9 @@ var templates = {
       </h3> \
       <ul> \
        {{#data}} \
-       <li>{{key}}: {{value}}</li> \
+         <li>{{key}}: {{value}}</li> \
        {{/data}} \
+       </ul> \
     </div> \
     ';
     var data = [];
@@ -186,6 +192,27 @@ var templates = {
       amount_formatted: formatAmount(record['amount']),
       data: data
     });
+  },
+  'https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE': function(record) {
+    var template = '<div class="record"> \
+      <h3> \
+        {{record.incidentsite}} &ndash; {{record.datereported}} &ndash; {{record.estimatedspillvolumebbl}} barrels \
+      </h3> \
+      <ul> \
+       {{#data}} \
+         <li>{{key}}: {{value}}</li> \
+       {{/data}} \
+       </ul> \
+    </div> \
+    ';
+    var data = [];
+    _.each(_.keys(record), function(key) {
+      data.push({ key: key, value: record[key] });
+    });
+    return Mustache.render(template, {
+      record: record,
+      data: data
+    });
   }
 }
 

demos/search/index.html

@@ -73,6 +73,11 @@ ul.facet-items {
   list-style-type: none;
   margin-left: 0;
 }
+
+.record ul {
+  list-style-type: none;
+  margin-left: 0;
+}
 </style>
 
 <div class="page-header">
@@ -81,7 +86,7 @@ ul.facet-items {
 
 <div class="info">
   <p>This demo shows how Recline can be used to build a search app. It includes faceting as well as search. You can find the <a href="app.js">source javascript here</a> &ndash; please feel free to reuse!</p>
-  <p>The default version uses some local example data but you can also connect directly to any other backend supported by Recline, in particular SOLR or ElasticSearch. For example, here's an <a href="?backend=solr&amp;url=http://openspending.org/api/search">example of this app running</a> off the OpenSpending SOLR-style search API.</p>
+  <p>The default setup uses local example data but you can also connect directly to any other <a href="{{page.root}}/docs/backends.html">backend supported by Recline</a>, for example SOLR, ElasticSearch or even a google docs spreadsheet. As an example: here's an <a href="?backend=solr&amp;url=http://openspending.org/api/search">example running against the SOLR-style OpenSpending API</a> and here's an example <a href="?backend=gdocs&amp;url=https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE">running against a GDocs spreadsheet (Oil spills in the Niger Delta)</a>.</p>
 </div>
 
 <hr />