Added search functionality

src/web/static/js/dashboard.js

@@ -20,13 +20,16 @@ $(document).ready(function () {
         'soilFilter': undefined, 'shelterTypeFilter': undefined, 'countryFilter': countryChart
     }
 
-    d3.csv('/static/data/shelters-sample.csv', function (data) {
-    // d3.json("api/v0.1/shelters", function(dataObject) {
-    //
-    //      var data = []
-    //      for (var key in dataObject) {
-    //         data.push(dataObject[key])
-    //      }
+    var dimensions = []
+//    d3.csv('/static/data/shelters-sample.csv', function (data) {
+     d3.json("api/v0.1/shelters", function(dataObject) {
+
+          var data = []
+          for (var key in dataObject) {
+             var shelter = dataObject[key]
+             shelter["db_id"] = key
+             data.push(shelter)
+          }
         var dateFormat = d3.time.format('%Y');
 
         var ndx = crossfilter(data);
@@ -36,6 +39,13 @@ $(document).ready(function () {
         });
         var all = ndx.groupAll();
         var dataCount = dc.dataCount('#data-count')
+
+        var db_idDimension = ndx.dimension(function(d) {
+            return d.db_id
+        });
+
+        dimensions.push(db_idDimension)
+
         var zoneDimension = ndx.dimension(function (d) {
             if (d.zone) {
                 return d.zone;
@@ -43,19 +53,19 @@ $(document).ready(function () {
                 return "No data"
             }
         });
-
+        dimensions.push(zoneDimension)
         var zoneCount = zoneDimension.group().reduceCount()
 
-
         var crisisDimension = ndx.dimension(function (d) {
             if (d['associateddisasterimmediatecause']) {
                 return d['associateddisasterimmediatecause'];
             } else {
                 return 'No data'
             }
-
         });
+        dimensions.push(crisisDimension);
         var crisisCount = crisisDimension.group().reduceCount()
+
         var climateDimension = ndx.dimension(function (d) {
             if (d['climatezone']) {
                 return d['climatezone'];
@@ -64,9 +74,9 @@ $(document).ready(function () {
             }
 
         });
+        dimensions.push(climateDimension);
         var climateCount = climateDimension.group().reduceCount()
 
-
         var timeDimension = ndx.dimension(function (d) {
             if (d['yearofconstructionfirstcompletedshelters']) {
                 return d3.time.year(dateFormat.parse(d['yearofconstructionfirstcompletedshelters']));
@@ -74,8 +84,8 @@ $(document).ready(function () {
             else {
                 return undefined;
             }
-
         });
+        dimensions.push(timeDimension);
         var timeCount = timeDimension.group().reduceCount(
             function (d) {
                 if (d['yearofconstructionfirstcompletedshelters']) {
@@ -93,8 +103,8 @@ $(document).ready(function () {
             } else {
                 return undefined;
             }
-
         });
+        dimensions.push(shelters);
 
         var countryDimension = ndx.dimension(function (d) {
             if (d.country) {
@@ -104,6 +114,7 @@ $(document).ready(function () {
             }
 
         })
+        dimensions.push(countryDimension);
         var countryCount = countryDimension.group().reduceCount()
 
         var topographyDimension = ndx.dimension(function (d) {
@@ -112,11 +123,10 @@ $(document).ready(function () {
             } else {
                 return 'No data'
             }
-
         })
+        dimensions.push(topographyDimension);
         var topographyCount = topographyDimension.group().reduceCount()
 
-
         var sheltersGroup = shelters.group().reduceCount();
 
         mapChart.dimension(shelters)
@@ -287,6 +297,34 @@ $(document).ready(function () {
 
         }
 
+        d3.select('#query').on('keydown', function() {
+            if (d3.event.keyCode == 13) {
+                var query = this.value
+                console.log("Searching for " + query);
+
+                if (query!="") {
+                    d3.json("api/v0.1/shelters/search/" + query, function(results) {
+                    if (results != null) {
+                        db_idDimension.filterFunction(function(id) {
+                            return id in results;
+                        });
+                    }
+                    dc.renderAll();
+                    generateShelterList(allDimensions.top(Infinity));
+
+
+                 })
+
+                } else {
+                    db_idDimension.filterAll();
+                    dc.renderAll();
+                    generateShelterList(allDimensions.top(Infinity));
+                }
+
+            }
+
+        });
+
 
         d3.select('#download')
             .on('click', function () {
@@ -296,6 +334,16 @@ $(document).ready(function () {
             });
 
 
+        d3.select('#all').on('click', function () {
+            for (var i=0; i< dimensions.length; i++ ) {
+                dimensions[i].filterAll();
+            }
+//            dc.filterAll();
+            dc.renderAll();
+            $("select").val("");
+            $("#query").val("");
+
+        });
 
         function onFiltered(chart) {
 
@@ -322,12 +370,7 @@ $(document).ready(function () {
 
     })
 
-    d3.selectAll('#all').on('click', function () {
-        dc.filterAll();
-        dc.renderAll();
-        $("select").val("");
 
-    });
 
 
     // Serializing filters values in URL

src/web/templates/dashboard.html

@@ -33,7 +33,7 @@
     <section class="search">
         <div class="content">
             <div class="search-wrapper">
-                <input type="" name="" placeholder="Search Shelters.."/>
+                <input type="" name="" id="query" placeholder="Search Shelters.."/>
             </div>
         </div>
     </section>
@@ -155,9 +155,6 @@
                                                 <span class="filter-count"></span> selected out of <span
                                                     class="total-count"></span>
                                                 records
-                                                |
-
-
                                             </small>
                                         </h4>
                                     </div>