summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--http/res/ranking.css1
-rw-r--r--http/res/ranking.js72
-rw-r--r--templates/ranking.html20
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">