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

Merge pull request #42 from chibicitiberiu/pagination

Browse Source 
Implemented pagination for videos
This commit is contained in:
chibicitiberiu 2018-12-04 17:32:36 +02:00 committed by GitHub
commit 8c22d86b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 7 deletions
Show Stats 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();
});

20
app/YtManagerApp/views/index.py
View File

@ -9,6 +9,7 @@ from django.shortcuts import render
from django.views.generic import CreateView, UpdateView, DeleteView, FormView
from django.views.generic.edit import FormMixin
from django.conf import settings
from django.core.paginator import Paginator
from YtManagerApp.management.videos import get_videos
from YtManagerApp.models import Subscription, SubscriptionFolder, VIDEO_ORDER_CHOICES, VIDEO_ORDER_MAPPING
from YtManagerApp.utils import youtube, subscription_file_parser
@ -36,6 +37,13 @@ class VideoFilterForm(forms.Form):
'all': None
}
CHOICES_RESULT_COUNT = (
(25, 25),
(50, 50),
(100, 100),
(200, 200)
)
query = forms.CharField(label='', required=False)
sort = forms.ChoiceField(label='Sort:', choices=VIDEO_ORDER_CHOICES, initial='newest')
show_watched = forms.ChoiceField(label='Show only: ', choices=CHOICES_SHOW_WATCHED, initial='all')
@ -48,6 +56,11 @@ class VideoFilterForm(forms.Form):
required=False,
widget=forms.HiddenInput()
)
page = forms.IntegerField(
required=False,
widget=forms.HiddenInput()
)
results_per_page = forms.ChoiceField(label='Results per page: ', choices=CHOICES_RESULT_COUNT, initial=50)
def __init__(self, data=None):
super().__init__(data, auto_id='form_video_filter_%s')
@ -65,7 +78,9 @@ class VideoFilterForm(forms.Form):
'show_watched',
'show_downloaded',
'subscription_id',
'folder_id'
'folder_id',
'page',
'results_per_page'
)
def clean_sort(self):
@ -147,6 +162,9 @@ def ajax_get_videos(request: HttpRequest):
only_downloaded=form.cleaned_data['show_downloaded']
)
paginator = Paginator(videos, form.cleaned_data['results_per_page'])
videos = paginator.get_page(form.cleaned_data['page'])
context = {
'videos': videos
}