Added filter with radio buttons

This commit is contained in:
ayxan 2022-12-20 17:15:43 +04:00
parent 4a56c1558d
commit 0ad9f71f2a
3 changed files with 35 additions and 22 deletions

View File

@ -9,8 +9,17 @@
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">
<form action="{% url 'homepage' %}" class="form-inline my-2 mb-3 search-form">
<input name="search" type="text" class="form-control" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0 ml-2" type="submit">Search</button>
<div style="display: flex;">
<input name="search" type="text" class="form-control search-input" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0 ml-2" type="submit">Search</button>
</div>
<br>
<input id="all" name="type" type="radio" checked>
<label for="all" style="margin-right: 1.5rem;">All</label>
<input id="watched" name="type" type="radio" value="watched">
<label for="watched" style="margin-right: 1.5rem;">Watched</label>
<input id="unwatched" name="type" type="radio" value="unwatched">
<label for="unwatched">Unwatched</label>
</form>
<table class="table">
@ -62,29 +71,24 @@
{% endfor %}
</tbody>
</table>
<div style="margin-bottom: 8.5rem;">
<div style="margin-bottom: 11rem;">
<div class="btn-new-episode">
<button type="button" class="btn btn-outline-primary">
<a href="/" style="text-decoration: none; color: inherit;">All</a>
</button>
<button type="button" class="btn btn-outline-primary" style="margin-left: 4px;">
<a href="?new=true" style="text-decoration: none; color: inherit;">Unwatched</a>
</button> <br>
<button type="button" class="btn btn-outline-primary" style="margin-top: 4.7%; margin-bottom: 77%;">
<a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">Update</a>
<a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">Update All</a>
</button>
</div>
{{view}}
<div class="pages">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
{% if series.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1"><<</a>
<a class="page-link" href="?page=1&{{kwargs}}"><<</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.previous_page_number}}"><</a>
<a class="page-link" href="?page={{series.previous_page_number}}&{{kwargs}}"><</a>
</li>
{% endif %}
@ -94,10 +98,10 @@
{% if series.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{series.next_page_number}}">></a>
<a class="page-link" href="?page={{series.next_page_number}}&{{kwargs}}">></a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.paginator.num_pages}}">>></a>
<a class="page-link" href="?page={{series.paginator.num_pages}}&{{kwargs}}">>></a>
</li>
{% endif %}
</ul>

View File

@ -9,17 +9,28 @@ from django.db.models import Q
def homepage_view(request):
user = User.objects.get(id=request.user.id)
if request.GET.get('new') == 'true':
type_ = request.GET.get('type')
if type_ == 'unwatched':
series = user.series.filter(~Q(new_episodes_count=0)).order_by('-id')
elif type_ == 'watched':
series = user.series.filter(new_episodes_count=0).order_by('-id')
else: series = user.series.filter().order_by('-id')
if search := request.GET.get('search'):
search = request.GET.get('search', 'None')
if search != 'None':
series = series.filter(
Q(title__icontains=search)
)
def kwargs():
queries = request.GET.copy()
queries.pop('page', 0)
return queries.urlencode()
page = request.GET.get('page')
paginator = Paginator(series, 5)
return render(request, 'homepage.html', context={'series': paginator.get_page(page)})
return render(request, 'homepage.html', context={'series': paginator.get_page(page),
'kwargs': kwargs()})

View File

@ -12,10 +12,9 @@
.search-form {
width: 370px;
display: flex;
}
.search-form input {
.search-form .search-input {
margin-right: 1rem;
}
@ -36,10 +35,9 @@
.search-form {
width: 330px;
display: flex;
}
.search-form input {
.search-form .search-input {
margin-top: 4px;
height: 45px;
margin-right: 1rem;