diff options
| -rw-r--r-- | http/res/ranking.js | 35 | ||||
| -rw-r--r-- | templates/ranking.html | 5 |
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> |