summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--http/res/ranking.js284
-rw-r--r--templates/ranking.html6
2 files changed, 198 insertions, 92 deletions
diff --git a/http/res/ranking.js b/http/res/ranking.js
index 2bba8a1..c0338dd 100644
--- a/http/res/ranking.js
+++ b/http/res/ranking.js
@@ -1,100 +1,202 @@
-var playerClick = function(ev) {
- if (!$(ev.target).closest('a').size()) {
- var row = $(this);
- var pid = row.find('td.pid').text();
- if (pid) {
- var link = 'players/' + pid.trim() + '.html';
- location.href = link;
- }
+$.fn.paginate = function(pagesize, page) {
+
+ var $this = this;
+ if (pagesize == 'clear') {
+ $this.removeAttr('data-paginate');
+ $this.find('[data-paginate-visible]').removeAttr('data-paginate-visible');
+ $this.find('tbody tr').show();
+ return;
+ }
+
+ var pagesize = pagesize || 50;
+ var page = page || 1;
+
+ var rows = $this.find('tbody tr');
+ if (!$this.attr('data-paginate')) {
+ $this.attr('data-paginate', pagesize);
+ rows.filter(':visible').attr('data-paginate-visible', 1);
+ } else {
+ pagesize = parseInt($this.attr('data-paginate'));
}
-}
-
-var parseHash = function() {
- var hash = location.hash.replace(/^#/, '');
- 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].split(','));
+
+ var visible = rows.filter('[data-paginate-visible=1]');
+ visible.each(function(index, row) {
+ row = $(row);
+ if (index >= (page-1)*pagesize
+ && index < page*pagesize) {
+ row.show();
+ } else { // rollin', rollin', rollin'...
+ row.hide();
}
});
- return params;
-}
-
-var constructHash = function(params) {
- return Array.from(params).map(function(param) {
- return param[0] + ':' + param[1].join(',');
- }).join(';');
-}
-
-var readHash = function() {
- $('button.btn-primary').removeClass('btn-primary');
- var params = parseHash();
- params.forEach(function(values, param) {
- values.forEach(function(value) {
- $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary');
+
+ return visible.size();
+};
+
+var ranking = {
+
+ playerClick : function(ev) {
+ if (!$(ev.target).closest('a').size()) {
+ var row = $(this);
+ var pid = row.find('td.pid').text();
+ if (pid) {
+ var link = 'players/' + pid.trim() + '.html';
+ location.href = link;
+ }
+ }
+ },
+
+ parseHash : function() {
+ var hash = location.hash.replace(/^#/, '');
+ 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].split(','));
+ }
});
- });
- 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');
+ return params;
+ },
+
+ constructHash : function(params) {
+ return Array.from(params).map(function(param) {
+ return param[0] + ':' + param[1].join(',');
+ }).join(';');
+ },
+
+ readHash : function() {
+ $('button.btn-primary').removeClass('btn-primary');
+ var params = ranking.parseHash();
+ 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();
+ }
+ });
+ ranking.filterRows(params);
+ var pagesize = 40;
+ var page = params.get('page') || [0];
+ var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0]));
+ ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1);
+ ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1);
+ },
+
+ filterRows : function(params) {
+ $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
+ var row = $(this);
+ var hidden = false;
+ params.forEach(function(value, param) {
+ if (param != 'page') {
+ if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
+ row.hide();
+ hidden = true;
+ }
+ }
+ });
+ if (!hidden) {
+ row.show();
+ }
+ });
+ $('table.table tbody tr:visible').eq(0).addClass('gold');
+ $('table.table tbody tr:visible').eq(1).addClass('silver');
+ $('table.table tbody tr:visible').eq(2).addClass('bronze');
+ $('table.table').css('opacity', 1);
+ },
+
+ buildPaginator: function(selector, count, pagesize, page) {
+ var box = $(selector);
+ box.html('');
+ var buttonGroup = $('<div>').addClass('btn-group');
+ var pages = parseInt(Math.ceil(count / pagesize));
+ buttonGroup.attr('data-pages', pages);
+ buttonGroup.append($('<button>').addClass('btn btn-default paginator-prev').attr('type', 'button').text('<<'));
+ for (var i = 0; i < pages; i++) {
+ var pageBtn = $('<button>').addClass('btn btn-default paginator-page').attr('type', 'button').attr('data-page', i+1).text(i+1);
+ if (i+1 == page) {
+ pageBtn.addClass('btn-primary');
+ }
+ buttonGroup.append(pageBtn);
+ }
+ buttonGroup.append($('<button>').addClass('btn btn-default paginator-next').attr('type', 'button').text('>>'));
+ box.append(buttonGroup);
+ },
+
+ changePage: function() {
+ $('table.table').css('opacity', 0.1);
+ var btn = $(this);
+ var page = parseInt(btn.attr('data-page'));
+ var params = ranking.parseHash();
+ var currentPage = params.get('page');
+ currentPage = currentPage ? parseInt(currentPage[0]) : 1;
+ if (btn.hasClass('paginator-prev')) {
+ page = currentPage - 1;
+ }
+ if (btn.hasClass('paginator-next')) {
+ page = currentPage + 1;
+ }
+ var count = parseInt(btn.closest('[data-pages]').attr('data-pages'));
+ if (page > 0 && page <= count) {
+ params.set('page', [page]);
+ location.hash = ranking.constructHash(params);
} else {
- $('#filters').collapse();
+ $('table.table').css('opacity', 1);
}
- });
- filterRows(params);
-}
-
-var filterRows = function(params) {
- $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
- var row = $(this);
- params.forEach(function(value, param) {
- if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
- row.hide();
+ },
+
+ init : function() {
+
+ $('.container .table tbody tr').click(ranking.playerClick);
+
+ $(document).ready(function() {
+ $(window).on('hashchange', ranking.readHash).trigger('hashchange');
+ });
+
+ $('button[data-filter]').click(function() {
+ $('table.table-paginate').paginate('clear');
+ $('table.table').css('opacity', 0.1);
+ var button = $(this);
+ var params = ranking.parseHash();
+ 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);
+ }
+ params.delete('page');
+ location.hash = ranking.constructHash(params);
});
- });
- $('table.table tbody tr:visible').eq(0).addClass('gold');
- $('table.table tbody tr:visible').eq(1).addClass('silver');
- $('table.table tbody tr:visible').eq(2).addClass('bronze');
- $('table.table').css('opacity', 1);
-}
-
-$('.container .table tbody tr').click(playerClick);
-
-$(document).ready(function() {
- $(window).on('hashchange', readHash).trigger('hashchange');
-});
-
-$('button[data-filter]').click(function() {
- $('table.table').css('opacity', 0.1);
- var button = $(this);
- var params = parseHash();
- 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);
+
+ $('button[data-clear]').click(function() {
+ $('table.table-paginate').paginate('clear');
+ $('table.table').css('opacity', 0.1);
+ var button = $(this);
+ var params = ranking.parseHash();
+ params.delete(button.attr('data-clear'));
+ params.delete('page');
+ location.hash = ranking.constructHash(params);
+ });
+
+ $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage);
}
- location.hash = constructHash(params);
-});
-
-$('button[data-clear]').click(function() {
- $('table.table').css('opacity', 0.1);
- var button = $(this);
- var params = parseHash();
- params.delete(button.attr('data-clear'));
- location.hash = constructHash(params);
-});
+
+};
+
+ranking.init();
diff --git a/templates/ranking.html b/templates/ranking.html
index 797cdef..8f668d1 100644
--- a/templates/ranking.html
+++ b/templates/ranking.html
@@ -70,8 +70,10 @@
</div>
</div>
</div>
+ <div id="top-paginator" class="text-center"></div>
+ <br />
<div class="table-responsive">
- <table class="table table-striped table-hover table-condened">
+ <table class="table table-striped table-hover table-condened table-paginate">
<thead>
<tr class="text-center">
<th colspan="2">Miejsce</th>
@@ -125,6 +127,8 @@
</tr>
</tbody>
</table>
+ <div id="bottom-paginator" class="text-center"></div>
+ <br />
</div>
<div class="well well-sm">
&copy; 2017 - dla <a href="http://pzbs.pl">PZBS</a> zrobił <a href="https://emkael.info">mkl.</a> Też sobie <a href="https://github.com/emkael/pzbs-ranking">zrób.</a>
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-30 06:19:12 +0000