diff options
| -rw-r--r-- | http/res/ranking.css | 1 | ||||
| -rw-r--r-- | http/res/ranking.js | 72 | ||||
| -rw-r--r-- | templates/ranking.html | 20 |
3 files changed, 75 insertions, 18 deletions
diff --git a/http/res/ranking.css b/http/res/ranking.css index b05db9c..76b67ae 100644 --- a/http/res/ranking.css +++ b/http/res/ranking.css @@ -1,3 +1,4 @@ +#filters div[role="group"] { margin: 10px; } .table-hover > tbody > tr.gold > td { background-color: #FFEF96 } .table-hover > tbody > tr.silver > td { background-color: #E5E5E5 } .table-hover > tbody > tr.bronze > td { background-color: #E1CAB4 } diff --git a/http/res/ranking.js b/http/res/ranking.js index 1cf09ab..61cb856 100644 --- a/http/res/ranking.js +++ b/http/res/ranking.js @@ -71,7 +71,7 @@ var ranking = { readHash : function() { var params = ranking.parseHash(location.hash); - var allParams = ['age', 'gender', 'region']; + var allParams = ['age', 'gender', 'region', 'name']; var paramsChanged = false; allParams.forEach(function(param) { var newParam = params.get(param) || []; @@ -86,13 +86,25 @@ var ranking = { $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary'); }); }); + var filtersPresent = false; allParams.forEach(function(param) { - if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) { + if ($('button[data-filter="' + param + '"]').size() > 0 + && $('button[data-filter="' + param + '"].btn-primary').size() == 0) { $('button[data-clear="' + param + '"]').addClass('btn-primary'); } else { - $('#filters').collapse(); + filtersPresent |= ($('button[data-filter="' + param + '"]').size() > 0); + } + var field = $('input[data-filter-field="' + param + '"]'); + if (field.size() > 0) { + field.val(params.get(param)); + if (field.val().length > 0) { + filtersPresent = true; + } } }); + if (filtersPresent) { + $('#filters').collapse(); + } if (paramsChanged) { $('table.table-paginate').paginate('clear'); ranking.filterRows(params); @@ -117,7 +129,12 @@ var ranking = { var row = $(this); var hidden = false; params.forEach(function(value, param) { - if (param != 'page') { + if (param == 'name') { + if (row.find('td.' + param).text().trim().toLowerCase().search(value.join('')) == -1) { + row.hide(); + hidden = true; + } + } else if (param != 'page') { if (value.indexOf(row.find('td.' + param).text().trim()) == -1) { row.hide(); hidden = true; @@ -178,11 +195,40 @@ var ranking = { $(window).on('hashchange', ranking.readHash).trigger('hashchange'); }); - $('button[data-filter]').click(function(ev) { + + var handleParams = function(callback, target, ev) { if (!ranking.filtersDisabled) { ranking.filtersDisabled = true; $('table.data-table, .filters .panel-body').css('opacity', 0.1); - var button = $(this); + var oldHash = location.hash.replace(/^#/, ''); + var newParams = callback(target, ev); + var newHash = ranking.constructHash(newParams); + if (oldHash != newHash) { + location.hash = newHash; + } else { + $('table.data-table, .filters .panel-body').css('opacity', 1); + ranking.filtersDisabled = false; + } + } + }; + + $('button[data-filter-action]').click(function(ev) { + handleParams(function(target, ev) { + var button = target; + var params = ranking.parseHash(location.hash); + var param = params.get(button.attr('data-filter-action')); + var value = $('input[data-filter-field="' + button.attr('data-filter-action') + '"]').val().trim().toLowerCase(); + if (value.length > 0) { + params.set(button.attr('data-filter-action'), [value]); + params.delete('page'); + } + return params; + }, $(this), ev); + }); + + $('button[data-filter]').click(function(ev) { + handleParams(function(target, ev) { + var button = target; var params = ranking.parseHash(location.hash); var param = params.get(button.attr('data-filter')); var value = button.attr('data-value'); @@ -201,20 +247,18 @@ var ranking = { params.set(button.attr('data-filter'), param); } params.delete('page'); - location.hash = ranking.constructHash(params); - } + return params; + }, $(this), ev); }); $('button[data-clear]').click(function() { - if (!ranking.filtersDisabled) { - ranking.filtersDisabled = true; - $('table.data-table, .filters .panel-body').css('opacity', 0.1); - var button = $(this); + handleParams(function(target, ev) { + var button = target; var params = ranking.parseHash(location.hash); params.delete(button.attr('data-clear')); params.delete('page'); - location.hash = ranking.constructHash(params); - } + return params; + }, $(this)); }); $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage); diff --git a/templates/ranking.html b/templates/ranking.html index ef338bb..2f546a7 100644 --- a/templates/ranking.html +++ b/templates/ranking.html @@ -24,7 +24,7 @@ title="Kliknięcie zamienia filtr w danej kategorii.<br />Kliknięcie z klawiszem Ctrl dodaje filtr w kategorii."></span> </div> <div class="collapse panel-body" id="filters"> - <p> + <div class="form-inline"> <div class="btn-group" role="group"> <button type="button" class="btn btn-disabled">Okręg</button> <button type="button" class="btn btn-default" data-filter="region" data-value="DS">DS</button> @@ -45,8 +45,6 @@ <button type="button" class="btn btn-default" data-filter="region" data-value="ZP">ZP</button> <button type="button" class="btn btn-default" data-clear="region">wszystkie</button> </div> - </p> - <p> <div class="btn-group" role="group"> <button type="button" class="btn btn-disabled">Płeć</button> <button type="button" class="btn btn-default" data-filter="gender" data-value="K">K</button> @@ -62,7 +60,21 @@ <button type="button" class="btn btn-default" data-filter="age" data-value="N">N</button> <button type="button" class="btn btn-default" data-clear="age">wszyscy</button> </div> - </p> + <div class="form-group"> + <form action="javascript:void(0)"> + <div class="input-group" role="group"> + <div class="input-group-addon">Imię/nazwisko</div> + <input type="text" class="form-control" data-filter-field="name" /> + <div class="input-group-btn"> + <button type="submit" class="btn btn-default" data-filter-action="name"> + <i class="glyphicon glyphicon-search"></i> + </button> + <button type="button" class="btn btn-default" data-clear="name">wyczyść</button> + </div> + </div> + </form> + </div> + </div> </div> </div> <div class="panel panel-default"> |