Interactive, multiple choice filters

2 files changed, 30 insertions, 10 deletions

diff --git a/http/res/ranking.js b/http/res/ranking.js
index b1c0bf8..2bba8a1 100644
--- a/http/res/ranking.js
+++ b/http/res/ranking.js
@@ -11,12 +11,12 @@ var playerClick = function(ev) {
 
 var parseHash = function() {
     var hash = location.hash.replace(/^#/, '');
-    var hashParams = hash.split(',');
+    var hashParams = hash.split(';');
     var params = new Map();
     hashParams.forEach(function(hashParam) {
         var param = hashParam.split(':');
         if (param.length > 1) {
-            params.set(param[0], param[1]);
+            params.set(param[0], param[1].split(','));
         }
     });
     return params;
@@ -24,20 +24,24 @@ var parseHash = function() {
 
 var constructHash = function(params) {
     return Array.from(params).map(function(param) {
-        return param[0] + ':' + param[1];
-    }).join(',');
+        return param[0] + ':' + param[1].join(',');
+    }).join(';');
 }
 
 var readHash = function() {
     $('button.btn-primary').removeClass('btn-primary');
     var params = parseHash();
-    params.forEach(function(value, param) {
-        $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary');
+    params.forEach(function(values, param) {
+        values.forEach(function(value) {
+            $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary');
+        });
     });
     var allParams = ['age', 'gender', 'region'];
     allParams.forEach(function(param) {
         if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) {
             $('button[data-clear="' + param + '"]').addClass('btn-primary');
+        } else {
+            $('#filters').collapse();
         }
     });
     filterRows(params);
@@ -47,7 +51,7 @@ var filterRows = function(params) {
     $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
         var row = $(this);
         params.forEach(function(value, param) {
-            if (row.find('td.' + param).text().trim() != value) {
+            if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
                 row.hide();
             }
         });
@@ -68,7 +72,22 @@ $('button[data-filter]').click(function() {
     $('table.table').css('opacity', 0.1);
     var button = $(this);
     var params = parseHash();
-    params.set(button.attr('data-filter'), button.attr('data-value'));
+    var param = params.get(button.attr('data-filter'));
+    var value = button.attr('data-value');
+    var index = param ? param.indexOf(value) : -1;
+    if (index > -1) {
+        param = param.filter(function(v) { return v != value; });
+    } else {
+        if (!param) {
+            param = [];
+        }
+        param.push(value);
+    }
+    if (!param.length) {
+        params.delete(button.attr('data-filter'));
+    } else {
+        params.set(button.attr('data-filter'), param);
+    }
     location.hash = constructHash(params);
 });
 
diff --git a/templates/ranking.html b/templates/ranking.html
index 0f348e1..72d3750 100644
--- a/templates/ranking.html
+++ b/templates/ranking.html
@@ -14,10 +14,10 @@
         </h1>
       </div>
       <div class="panel panel-default filters">
-        <div class="panel-heading">
+        <div class="panel-heading" role="button" data-toggle="collapse" data-target="#filters" aria-expanded="false" aria-controls="filters">
           Filtry rankingu
         </div>
-        <div class="panel-body">
+        <div class="collapse panel-body" id="filters">
           <p>
             <div class="btn-group" role="group">
               <button type="button" class="btn btn-disabled">Okręg</button>
@@ -118,6 +118,7 @@
       </div>
     </div>
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script type="text/javascript" src="res/ranking.js"></script>
   </body>
 </html>