From ccc8a658b7530cb52f3cdd34fb72b60fa558cead Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sun, 3 Oct 2021 18:44:44 +0700
Subject: [PATCH] implement toggle view to show subscribed only

---
 .../home/templates/home/channel.html          | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index 366b113..1b5f32d 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -30,19 +30,26 @@
         </form>
     </div>
 </div>
-<div class="view-icons">
-    <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
-    <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
-</div>
-<div class="padding-box">
-    <h2>Total matching channels: {{ max_hits }}</h2>
-    <span>Change show / hide subscribed only </span><span class="settings-current">{{ show_subed_only }}</span>
-    <select name="watched" id="watched" onchange="showSubscribedOnly(this.value)">
-        <option value="" disabled selected> -- change -- </option>
-        <option value="0">show all channels</option>
-        <option value="1">show subscribed channels only</option>
-    </select>
+<div class="view-controls">
+    <div class="toggle">
+        <span>Show only subscribed channels:</span>
+        <div class="toggleBox">
+            <input 
+                id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
+                {% if show_subed_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="channel" data-value="grid" alt="grid view">
+        <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
+    </div>
 </div>
+<h2>Total matching channels: {{ max_hits }}</h2>
 <div class="channel-list {{ view_style }}">
     {% if channels %}
         {% for channel in channels %}