From ed73bff8fa65e4d82f6b35a7ef37e47d05b33919 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 3 Oct 2021 18:17:07 +0700 Subject: [PATCH] implement toggle view ignored only in downloads page --- .../home/templates/home/downloads.html | 35 +++++---- tubearchivist/home/views.py | 19 +++-- tubearchivist/static/css/style.css | 78 +++++++++++++++++++ tubearchivist/static/script.js | 26 ++++--- 4 files changed, 128 insertions(+), 30 deletions(-) diff --git a/tubearchivist/home/templates/home/downloads.html b/tubearchivist/home/templates/home/downloads.html index c1373e0..1c33faa 100644 --- a/tubearchivist/home/templates/home/downloads.html +++ b/tubearchivist/home/templates/home/downloads.html @@ -27,19 +27,26 @@ -
- Change show / hide ignored only {{ filter_view }} - +
+
+ Show only ignored videos: +
+ + + +
+
+
+ grid view + list view +
-
- grid view - list view -
-{% if filter_view == "ignore" %} +{% if show_ignored_only %}

Ignored from download

{% else %}

Download queue

@@ -53,7 +60,7 @@ video_thumb
- {% if filter_view == "ignore" %} + {% if show_ignored_only %}

Ignore: {{ video.title }}

{% else %}

Download: {{ video.title }}

@@ -64,7 +71,7 @@ {{ video.channel_name }} {% endif %}

Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}

- {% if filter_view == "ignore" %} + {% if show_ignored_only %} {% else %} diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py index fc0cc65..f9a56f7 100644 --- a/tubearchivist/home/views.py +++ b/tubearchivist/home/views.py @@ -147,13 +147,13 @@ class DownloadView(View): config = AppConfig().config colors = config["application"]["colors"] view_style = config["default_view"]["downloads"] - filter_view = RedisArchivist().get_message("filter_view") + show_ignored_only = RedisArchivist().get_message("show_ignored_only")["status"] page_get = int(request.GET.get("page", 0)) pagination_handler = Pagination(page_get) url = config["application"]["es_url"] + "/ta_download/_search" - data = self.build_data(pagination_handler, filter_view) + data = self.build_data(pagination_handler, show_ignored_only) search = SearchHandler(url, data, cache=False) videos_hits = search.get_data() @@ -173,16 +173,21 @@ class DownloadView(View): "pagination": pagination, "title": "Downloads", "colors": colors, - "filter_view": filter_view, + "show_ignored_only": show_ignored_only, "view_style": view_style, } return render(request, "home/downloads.html", context) @staticmethod - def build_data(pagination_handler, filter_view): + def build_data(pagination_handler, show_ignored_only): """build data dict for search""" page_size = pagination_handler.pagination["page_size"] page_from = pagination_handler.pagination["page_from"] + if show_ignored_only: + filter_view = "ignore" + else: + filter_view = "pending" + data = { "size": page_size, "from": page_from, @@ -601,8 +606,10 @@ class PostData: def show_ignored_only(self): """switch view on /downloads/ to show ignored only""" show_value = self.exec_val - print("Download view: " + show_value) - RedisArchivist().set_message("filter_view", show_value, expire=False) + print(f"Filter download view ignored only: {show_value}") + RedisArchivist().set_message( + "show_ignored_only", {"status": show_value}, expire=False + ) return {"success": True} def forget_ignore(self): diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index 084a571..b9f6bcb 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -138,6 +138,73 @@ button:hover { text-decoration: underline; } +/* toggle on-off */ +.toggle { + display: flex; + align-items: center; +} + +.toggleBox > input[type="checkbox"] { + position: relative; + width: 70px; + height: 30px; + background-color: var(--accent-font-dark); + border-color: var(--accent-font-dark); + appearance: none; + border-radius: 15px; + transition: 0.4s; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + cursor: pointer; +} + +.toggleBox > input:checked[type="checkbox"] { + background-color: var(--accent-font-light); + border-color: var(--accent-font-light); +} + +.toggleBox > input[type="checkbox"]::before { + z-index: 2; + position: absolute; + content: ""; + left: 0; + top: 0; + width: 30px; + height: 30px; + background-color: white; + border-radius: 50%; + transform: scale(1.1); + transition: 0.4s; +} + +.toggleBox > input:checked[type="checkbox"]::before { + left: 40px; +} + +.toggleBox { + margin-left: 10px; + position: relative; + display: inline; +} + +.toggleBox > label { + position: absolute; + color: var(--main-font); + pointer-events: none; +} + +.toggleBox > .onbtn { + bottom: 15px; + left: 15px; + font-family: Sen-Regular, sans-serif; +} + +.toggleBox > .ofbtn { + bottom: 15px; + right: 15px; + font-family: Sen-Regular, sans-serif; + color: var(--main-font); +} + /* navigation */ .top-nav { display: block; @@ -211,6 +278,14 @@ button:hover { filter: var(--img-filter); } +.view-controls { + display: grid; + grid-template-columns: 1fr 1fr; + border-bottom: 2px solid; + border-color: var(--accent-font-dark); + margin-bottom: 20px; +} + .view-icons { display: flex; justify-content: end; @@ -713,6 +788,9 @@ button:hover { .footer { text-align: center; } + .toggle { + flex-wrap: wrap; + } .top-nav { flex-wrap: wrap-reverse; display: flex; diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index 3730cbf..d3d3f88 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -54,6 +54,22 @@ function changeView(image) { }, 500); } +function toggleCheckbox(checkbox) { + // pass checkbox id as key and checkbox.checked as value + var toggleId = checkbox.id; + var toggleVal = checkbox.checked; + var payloadDict = {}; + payloadDict[toggleId] = toggleVal; + var payload = JSON.stringify(payloadDict); + console.log(payload); + sendPost(payload); + setTimeout(function(){ + var currPage = window.location.pathname; + window.location.replace(currPage); + return false; + }, 500); +} + // download page buttons function rescanPending() { var payload = JSON.stringify({'rescan_pending': true}); @@ -90,16 +106,6 @@ function downloadNow(button) { }, 500); } -function showIgnoredOnly(showValue) { - var payload = JSON.stringify({'show_ignored_only': showValue}); - console.log(payload); - sendPost(payload); - setTimeout(function(){ - window.location.replace("/downloads/"); - return false; - }, 500); -} - function forgetIgnore(button) { var youtube_id = button.getAttribute('data-id'); var payload = JSON.stringify({'forgetIgnore': youtube_id});