removed responsive tables, added multiple working queries for checkbo…

…x toggles for grade, fixed small dynatable bug see: alfajango/jquery-dynatable#116
eddieferrer · Jul 11, 2015 · be4328c · be4328c
1 parent 10265ca
commit be4328c
Show file tree

Hide file tree

Showing 26 changed files with 74 additions and 2,906 deletions.
diff --git a/bower_components/dynatable/jquery.dynatable.js b/bower_components/dynatable/jquery.dynatable.js
@@ -1546,11 +1546,11 @@
             for (var i = 0, len = inputQueries.length; i < len; i++) {
               var attr = inputQueries[i];
               if (data[label][attr]) {
-                if (typeof urlOptions[label] === 'undefined') { urlOptions[label] = {}; }
-                urlOptions[label][attr] = data[label][attr];
-              } else {
-                delete urlOptions[label][attr];
-              }
+                 if (typeof urlOptions[label] === 'undefined') { urlOptions[label] = {}; }
+                 urlOptions[label][attr] = data[label][attr];
+               } else if(urlOptions[label]) {
+                 delete urlOptions[label][attr];
+               }
             }
             continue;
           }

diff --git a/index.html b/index.html
@@ -15,8 +15,6 @@
     <link rel="stylesheet" href="bower_components/foundation/css/foundation.min.css"/>
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="bower_components/dynatable/jquery.dynatable.css">
-
-    <link rel="stylesheet" href="js/zurb-responsive-tables/responsive-tables.css">
 </head>
 
 <body>
@@ -29,7 +27,7 @@ <h1>
         <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
     <div class="large-12 columns">
-        <table id="mazama_climb_load" class="responsive">
+        <table id="mazama_climb_load">
           <thead>
           <tr>
           <th>Details</th>
@@ -2517,6 +2515,15 @@ <h1>
     </div>
 
     <div class="large-12 columns">
+      <select id="search-status" name="status">
+        <option></option>
+        <option>Cancelled</option>
+        <option>Full</option>
+        <option>Open</option>
+      </select>
+      <input class="search-grade" name="gradeA" type="checkbox" value="A">A
+      <input class="search-grade" name="gradeB" type="checkbox" value="B">B
+      <input class="search-grade" name="gradeC" type="checkbox" value="C">C
       Restriction codes
       Most Mazamas climbs are open to anyone who applies.  Some leaders prefer to restrict their climbs in some manner.  These “restriction codes” are listed below:
 
@@ -2540,7 +2547,7 @@ <h1>
       D - Same as “C” level except on steep snow slopes, glacier travel and crevasse rescue, self-arrest, belaying, rappelling and 5th class rock climbing.  (examples: West Ridge of Mt. Stuart, Mt Hood, Sandy Glacier Headwall)
       E -Multi-pitch technical routes same as “D”, with high degree of self-sufficiency and proficiency using technical skills under high exposure, sharing high angle leads, setting protection and anchors.  (examples: North ridge of Mt. Stuart, Beckey Route, Liberty Bell)
     </div>
-    
+
     <footer>
         <div class="large-12 columns">
             <hr/>
@@ -2574,7 +2581,6 @@ <h1>
       // });
 
     </script>
-    <script src="js/zurb-responsive-tables/responsive-tables.js"></script>
 
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,26 +1,11 @@
 $(function() {
-    var thead = '<tr>' +
-            '<th>' + 'Climb' + '</th>' +
-            '<th>' + 'Leave' + '</th>' +
-            '<th>' + 'Return' + '</th>' +
-            '<th>' + 'Peak' + '</th>' +
-            '<th>' + 'Route' + '</th>' +
-            '<th>' + 'grade' + '</th>' +
-            '<th>' + 'Leader' + '</th>' +
-            '<th>' + 'gradEmphasis' + '</th>' +
-            '<th>' + 'partySize' + '</th>' +
-            '<th>' + 'Spots' + '</th>' +
-            '<th>' + 'Status' + '</th>' +
-            '<th>' + 'Updated' + '</th>' +
-            '<th>' + 'details' + '</th>' +
-          '</tr>';
-
-    $('#mazama_climb_load').find('thead').html(thead);
 
     // Function that renders the list items from our records
     function ulWriter(rowIndex, record, columns, cellWriter) {
-      var tr;
-      tr = '<tr>' +
+      // console.log(record);
+      var climb_block;
+      climb_block = '<tr class="panel">' +
+            '<td>' + record.details + '</td>' +
             '<td>' + record.climbNumber + '</td>' +
             '<td>' + record.departureDate + '</td>' +
             '<td>' + record.returnDate + '</td>' +
@@ -33,16 +18,15 @@ $(function() {
             '<td>' + record.spotsRemaining + '</td>' +
             '<td>' + record.status + '</td>' +
             '<td>' + record.lastUpdate + '</td>' +
-            '<td>' + record.details + '</td>' +
            '</tr>';
       if ( rowIndex > 0 ) {
-          return tr;
+          return climb_block;
       }
     }
 
     // Function that creates our records from the DOM when the page is loaded
     function ulReader(index, li, record) {
-      console.log(record);
+      // console.log(record);
       var $li = $(li);
           record.details = $li.find('td:nth-child(1)').html();
           record.climbNumber = $li.find('td:nth-child(2)').html();
@@ -59,20 +43,57 @@ $(function() {
           record.lastUpdate = $li.find('td:nth-child(13)').html();
     }
 
-    $('#mazama_climb_load').dynatable({
-     table: {
-       headRowSelector: 'thead tr',
-       bodyRowSelector: 'tbody tr'
-     },
-     dataset: {
-       perPageDefault: 50,
-       perPageOptions: [25, 50]
-     },
-     writers: {
-       _rowWriter: ulWriter
-     },
-     readers: {
-       _rowReader: ulReader
-     }
+
+    var dynatable = $('#mazama_climb_load')
+    .bind('dynatable:init', function(e, dynatable) {
+      dynatable.queries.functions["search-grade"] = function(record, queryValue) {
+        for (var i = 0; i < queryValue.length; i++) {
+           if ( record.grade.includes(queryValue[i]) ) {
+             return true
+           }
+        }
+        return false
+      };
+    })
+    .dynatable({
+        features: {
+            paginate: true,
+            recordCount: true,
+            search: false,
+            perPageSelect: false,
+            pushState: false
+        },
+        table: {
+            bodyRowSelector: 'tbody tr'
+        },
+        dataset: {
+            perPageDefault: 50,
+            perPageOptions: [25, 50]
+        },
+        writers: {
+            _rowWriter: ulWriter
+        },
+        readers: {
+            _rowReader: ulReader
+        },
+        inputs: {
+          queries: $('#search-status ')
+        }
+    }).data('dynatable');
+
+    $('.search-grade').change( function() {
+        var checked_values = [];
+        $('.search-grade').each( function (){
+          if ( $(this).is(":checked") ) {
+            checked_values.push($(this).val());
+          }
+        });
+        if ( checked_values.length > 0 ) {
+          dynatable.queries.add("search-grade",checked_values);
+        } else {
+          dynatable.queries.remove("search-grade");
+        }
+        dynatable.process();
     });
+
 });
diff --git a/js/zurb-responsive-tables/.gitignore b/js/zurb-responsive-tables/.gitignore