implement toggle view ignored only in downloads page

tubearchivist/home/templates/home/downloads.html

@@ -27,19 +27,26 @@
         </div>
     </div>
 </div>
-<div class="padding-box">
-    <span>Change show / hide ignored only </span><span class="settings-current">{{ filter_view }}</span>
-    <select name="showIgnoredOnly" id="showIgnoredOnly" onchange="showIgnoredOnly(this.value)">
-        <option value="" disabled selected> -- change -- </option>
-        <option value="ignore">show ignored only</option>
-        <option value="pending">show download queue</option>
-    </select>
+<div class="view-controls">
+    <div class="toggle">
+        <span>Show only ignored videos:</span>
+        <div class="toggleBox">
+            <input 
+                id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox"
+                {% if show_ignored_only %}
+                    checked
+                {% endif %}
+                >
+            <label for="" class="onbtn">On</label>
+            <label for="" class="ofbtn">Off</label>
+        </div>
+    </div>
+    <div class="view-icons">
+        <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
+        <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
+    </div>
 </div>
-<div class="view-icons">
-    <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
-    <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
-</div>
-{% if filter_view == "ignore" %}
+{% if show_ignored_only %}
     <h2>Ignored from download</h2>
 {% else %}
     <h2>Download queue</h2>
@@ -53,7 +60,7 @@
                     <img src="{{ video.vid_thumb_url }}" alt="video_thumb">
                 </div>
                 <div class="dl-desc {{ view_style }}">
-                    {% if filter_view == "ignore" %}
+                    {% if show_ignored_only %}
                         <h3>Ignore: {{ video.title }}</h3>
                     {% else %}
                         <h3>Download: {{ video.title }}</h3>
@@ -64,7 +71,7 @@
                         <span>{{ video.channel_name }}</span>
                     {% endif %}
                     <p>Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}</p>
-                    {% if filter_view == "ignore" %}
+                    {% if show_ignored_only %}
                         <button data-id="{{ video.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
                         <button data-id="{{ video.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
                     {% else %}

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):

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;

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});