Mockup business type filtering (hwstartupGH-1)

bobthecow · Jan 25, 2013 · f6442f7 · f6442f7
1 parent 6966927
commit f6442f7
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -43,18 +43,22 @@
                     <div class="well">
                         <ul class="nav nav-list">
                             <!-- Search -->
-                            <li id="search" class="nav-header">Search</li>
-                            <li><input type="text"></li>
+                            <!-- <form id="search">
+                                <li class="nav-header">Search</li>
+                                <li><input type="text"></li>
+                            </form> -->
 
                             <!-- Types -->
-                            <li id="business-type" class="nav-header">Business Type</li>
-                            <li><label><input type="checkbox" value="retail">Retail</label></li>
-                            <li><label><input type="checkbox" value="workspace">Workspace</label></li>
-                            <li><label><input type="checkbox" value="fabricator">Fabricator</label></li>
-                            <li><label><input type="checkbox" value="distributor">Distributor</label></li>
-                            <li><label><input type="checkbox" value="museum ">Museum</label></li>
-                            <li><label><input type="checkbox" value="service">Service</label></li>
-                            <li><label><input type="checkbox" value="incubator">Incubator</label></li>
+                            <form id="filter">
+                                <li class="nav-header">Business Type</li>
+                                <li><label><input type="checkbox" checked="checked" value="retail">Retail</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="workspace">Workspace</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="fabricator">Fabricator</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="distributor">Distributor</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="museum">Museum</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="service">Service</label></li>
+                                <li><label><input type="checkbox" checked="checked" value="incubator">Incubator</label></li>
+                            </form>
                         </ul>
                     </div>
                 </div>

diff --git a/js/index.js b/js/index.js
@@ -8,12 +8,56 @@
     /**
      * Configuration
      */
+    var dataProvider = '1tteiG-HYAlsmh3ef5U-XVDEWu5QXqDxqWwDx-pc';
 
     /**
      * Storage objects
      */
     var map, layer;
 
+    /**
+     * Generates a search query for the Google Fusion Tables API.
+     *
+     * @param {String} Search string
+     *
+     * @return {Object}
+     */
+    function generateSearchQuery (term) {
+        var q = ""
+
+        return {
+            select: 'Location',
+            from:   dataProvider,
+            where:  q
+        };
+    }
+
+    /**
+     * Generates a filter query for the Google Fusion Tables API.
+     *
+     * @return {Object}
+     */
+    function generateFilterQuery () {
+        var q  = '',
+            qp = "'Business Type' IN ('",
+            qs = "') OR ";
+
+        // Build query
+        $('#filter').find('input[type="checkbox"]:checked').each(function () {
+            q += qp + $(this).attr('value') + qs;
+        });
+
+        // Trim & catch null
+        q = q.slice(0, q.length - 4);
+        if (q === '') q = "'Business Type' = 'undefined'";
+
+        return {
+            select: 'Location',
+            from:   dataProvider,
+            where:  q
+        };
+    }
+
     /**
      * Google Maps
      */
@@ -58,20 +102,28 @@
         map.setMapTypeId('map-style');
 
         layer = new google.maps.FusionTablesLayer({
-            query: {
-                select: 'Location',
-                from:   '1tteiG-HYAlsmh3ef5U-XVDEWu5QXqDxqWwDx-pc',
-                // where: '\'Category Tags\' IN(\'#electronics\') AND \'Provider Tags\' IN(\'supplier\')'
-            },
-            map: map
+            query:  generateFilterQuery(),
+            map:    map
         });
     }
 
     /**
      * UI events
      */
     function initEventListeners () {
-
+        // Selectors
+        $search = $('#search');
+        $filter = $('#filter');
+
+        // Search
+        $search.submit(function () {
+            return false;
+        });
+
+        // Filter
+        $filter.find('input').click(function () {
+            layer.setQuery(generateFilterQuery());
+        });
     }
 
     /**