You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.8 KiB
105 lines
4.8 KiB
doctype html
|
|
html(lang="en")
|
|
head
|
|
title= title
|
|
link(rel='stylesheet', href='/lib/uikit/css/uikit.almost-flat.min.css')
|
|
link(rel='stylesheet', href='/css/app.css')
|
|
script(src='/lib/jquery.js')
|
|
script(src='/lib/uikit/js/uikit.min.js')
|
|
body
|
|
div.uk-grid
|
|
div.uk-width-1-1
|
|
div.uk-grid
|
|
div.uk-width-1-4
|
|
img(src='/img/#{logo}')
|
|
div.uk-width-2-4
|
|
// bigimagelogo
|
|
h1.uk-text-center #{title}<br/>#{slogan}
|
|
div.uk-width-1-4
|
|
img.flip(src='/img/#{logo}')
|
|
div.uk-width-1-1
|
|
nav.uk-navbar
|
|
ul.uk-navbar-nav.uk-navbar-center
|
|
li: a(href='http://www.twitch.tv/#{title}'): img(src='/img/twitch.png', alt='Stream')
|
|
li: a(href='/') Home
|
|
li: a(href='/ladder') Ladder
|
|
li: a(href='#') Chat Stats
|
|
li: a(href='http://www.twitter.com/#{twitter}'): img(src='/img/twitter.gif', alt='Twitter')
|
|
div.uk-width-1-1
|
|
div.uk-container.uk-container-center
|
|
div.uk-grid
|
|
br
|
|
br
|
|
div.uk-width-1-1
|
|
div.uk-panel.uk-panel-box
|
|
div.uk-badge.uk-float-right
|
|
form.uk-search
|
|
input(class='uk-search-field', type='search', placeholder='Search...')
|
|
button(class='uk-close', type='reset')
|
|
table.uk-table.uk-table-hover.uk-table-striped
|
|
caption Potato Farmer Ladder Rankings
|
|
thead
|
|
tr
|
|
th Rank
|
|
th Viewer
|
|
th Potatoes
|
|
tbody
|
|
ul.uk-pagination
|
|
|
|
script.
|
|
var perPage = 50,
|
|
data = !{JSON.stringify(rows)};
|
|
|
|
$(document).ready(function(){
|
|
|
|
// Live search of the ladder listings
|
|
$('.uk-search-field').keyup(function() {
|
|
var query = $(this).val();
|
|
|
|
if(query.length > 2) {
|
|
var temp = $('.uk-active').attr('page');
|
|
$('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>');
|
|
$('table > tbody').empty();
|
|
|
|
data.forEach(function(element, index, array) {
|
|
if(element.user.search(new RegExp(query, 'i')) != -1) {
|
|
$('table > tbody').append($('<tr></tr>').append('<td>'+index+'</td><td>'+element.user+'</td><td>'+element.points+'</td>'));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Create pagination buttons
|
|
for(var i = 1; i <= Math.ceil(data.length/perPage); i++) {
|
|
var button = $('<li page='+i+'></li>').append('<a>'+i+'</a>');
|
|
button.on('click', function(){
|
|
//get page
|
|
var z = $(this).attr('page');
|
|
|
|
// cleanup
|
|
var temp = $('.uk-active').attr('page');
|
|
$('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>');
|
|
$('table > tbody').empty();
|
|
|
|
$(this).addClass('uk-active').empty().append('<span>'+z+'</span>');
|
|
|
|
// slice(a, b): a = (n*(x-1))+1, b = n*x where n = perPage and x=curerntPage (skip +1 at end of a for splice)
|
|
var a = (perPage*(z-1)),
|
|
b = perPage*z;
|
|
|
|
data.slice(a, b).forEach(function(element, index, array){
|
|
$('table > tbody').append($('<tr></tr>').append('<td>'+(a+index+1)+'</td><td>'+element.user+'</td><td>'+element.points+'</td>'));
|
|
});
|
|
});
|
|
|
|
$('.uk-pagination').append(button);
|
|
}
|
|
|
|
// When search input is cleared, go back to first page
|
|
$('.uk-close').on('click', function(){
|
|
$('ul.uk-pagination > li').first().click();
|
|
});
|
|
|
|
// Show the first page when we load up
|
|
$('ul.uk-pagination > li').first().click();
|
|
});
|