chibicitiberiu/ytsm
1
0
Fork 0
mirror of https://github.com/chibicitiberiu/ytsm.git synced 2024-02-24 05:43:31 +00:00
Code Issues Releases Wiki Activity

Implemented pagination for videos.

Browse Source
This commit is contained in:
Tiberiu Chibici
2018-12-04 02:01:51 +02:00
parent fa5760de69
commit 042bef7755
3 changed files with 79 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/YtManagerApp/templates/YtManagerApp/index_videos.html
View File

@ -58,4 +58,38 @@
</div>
{% endfor %}
</div>
<div class="pagination row">
<div class="btn-toolbar mx-auto">
<div class="btn-group mr-2" role="group">
<button id="btn_page_first" type="button" class="btn btn-light btn-paging"
data-toggle="tooltip" title="First page"
{% if videos.has_previous %} data-navigation-page="1" {% else %} disabled {% endif %}>
<span class="typcn typcn-chevron-left-outline" aria-hidden="true"></span>
</button>
<button id="btn_page_prev" type="button" class="btn btn-light btn-paging"
data-toggle="tooltip" title="Previous"
{% if videos.has_previous %} data-navigation-page="{{ videos.previous_page_number }}" {% else %} disabled {% endif %} >
<span class="typcn typcn-chevron-left" aria-hidden="true"></span>
</button>
</div>
<small class="my-auto mx-2">
Page {{ videos.number }} of {{ videos.paginator.num_pages }}
</small>
<div class="btn-group mx-2" role="group">
<button id="btn_page_next" type="button" class="btn btn-light btn-paging"
data-toggle="tooltip" title="Next"
{% if videos.has_next %} data-navigation-page="{{ videos.next_page_number }}" {% else %} disabled {% endif %} >
<span class="typcn typcn-chevron-right" aria-hidden="true"></span>
</button>
<button id="btn_page_last" type="button" class="btn btn-light btn-paging"
data-toggle="tooltip" title="Last"
{% if videos.has_next %} data-navigation-page="{{ videos.paginator.num_pages }}" {% else %} disabled {% endif %} >
<span class="typcn typcn-chevron-right-outline" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>

32
app/YtManagerApp/templates/YtManagerApp/js/index.js
View File

@ -123,16 +123,33 @@ function videos_Reload()
let videos_timeout = null;
function videos_ReloadWithTimer()
function videos_ResetPageAndReloadWithTimer()
{
let filters_form = $("#form_video_filter");
filters_form.find('input[name=page]').val("1");
clearTimeout(videos_timeout);
videos_timeout = setTimeout(function()
{
videos_Submit.call($('#form_video_filter'));
videos_Reload();
videos_timeout = null;
}, 200);
}
function videos_PageClicked()
{
// Obtain page from button
let page = $(this).data('navigation-page');
// Set page
let filters_form = $("#form_video_filter");
filters_form.find('input[name=page]').val(page);
// Reload
videos_Reload();
$("html, body").animate({ scrollTop: 0 }, "slow");
}
function videos_Submit(e)
{
let loadingDiv = $('#videos-loading');
@ -145,6 +162,7 @@ function videos_Submit(e)
.done(function(result) {
$("#videos-wrapper").html(result);
$(".ajax-link").on("click", ajaxLink_Clicked);
$(".btn-paging").on("click", videos_PageClicked);
})
.fail(function() {
$("#videos-wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
@ -189,9 +207,11 @@ $(document).ready(function ()
// Videos filters
let filters_form = $("#form_video_filter");
filters_form.submit(videos_Submit);
filters_form.find('input[name=query]').on('change', videos_ReloadWithTimer);
filters_form.find('select[name=sort]').on('change', videos_ReloadWithTimer);
filters_form.find('select[name=show_watched]').on('change', videos_ReloadWithTimer);
filters_form.find('select[name=show_downloaded]').on('change', videos_ReloadWithTimer);
filters_form.find('input[name=query]').on('change', videos_ResetPageAndReloadWithTimer);
filters_form.find('select[name=sort]').on('change', videos_ResetPageAndReloadWithTimer);
filters_form.find('select[name=show_watched]').on('change', videos_ResetPageAndReloadWithTimer);
filters_form.find('select[name=show_downloaded]').on('change', videos_ResetPageAndReloadWithTimer);
filters_form.find('select[name=results_per_page]').on('change', videos_ResetPageAndReloadWithTimer);
videos_Reload();
});