TwitchBot/web/templates/ladder.jade

extends layout
block content
    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 #{ucfirst(currency)} Farmer Ladder Rankings (<span id="total_farmers"></span> farmers total)
                    thead
                        tr
                            th Rank
                            th Viewer
                            th #{ucfirst(currency)}
                    tbody
            ul.uk-pagination

block postscript
    script.
        var perPage = 20,
            data = !{JSON.stringify(rows)},
            lastPage = Math.ceil(data.length/perPage);

        function minifyPagination() {
            var current = parseInt($('li.uk-active').attr('page')),
                min = Math.max(current-3, 1),
                max = current+3;

            $('#page_first, #page_last').remove();

            $('ul.uk-pagination > li').addClass('uk-hidden');
            for(var x = min; x <= max; x++) {
                $('li#'+x).removeClass('uk-hidden');
            }

            if (min > 1) 
                $('li#'+min).before("<button id='page_first' class='uk-button'>&lt;&lt;</button>");
            if (max < lastPage)
                $('li#'+max).after("<button id='page_last' class='uk-button'>&gt;&gt;</button>");

            $('#page_first').click(function(){
                $('li#'+1).click();
            });
            $('#page_last').click(function(){
                $('li#'+lastPage).click();
            });
        };

        $(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 <= lastPage; i++) { 
                var button = $('<li page='+i+' id='+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>'+(Number(a+index+1).toLocaleString('en'))+'</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();

            minifyPagination();

            $('ul.uk-pagination > li').on('click', function(){
                minifyPagination();
            });

            $('#total_farmers').append(Number(data.length).toLocaleString('en'));

        });