From a73c32ea664c59c39065f2f1af2bf4ff0f36eecd Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Wed, 29 Nov 2023 22:45:16 +0300
Subject: [PATCH] Added collapsible views.

---
 frontend/src/assets/css/style.css            |   8 +
 frontend/src/components/Page-Completed.vue   | 292 ++++++++++---------
 frontend/src/components/Page-Downloading.vue | 195 +++++++------
 frontend/src/main.js                         |   4 +-
 4 files changed, 263 insertions(+), 236 deletions(-)

diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css
index c7932995..4db35e1d 100644
--- a/frontend/src/assets/css/style.css
+++ b/frontend/src/assets/css/style.css
@@ -31,6 +31,10 @@
     background-color: #000;
   }
 
+  .is-unselectable {
+    user-select: none;
+  }
+
   @media (prefers-color-scheme: dark) {
     * {
       unicode-bidi: plaintext;
@@ -64,4 +68,8 @@
     .container {
       background-color: #0f1010;
     }
+
+    .is-unselectable {
+      user-select: none;
+    }
   }
diff --git a/frontend/src/components/Page-Completed.vue b/frontend/src/components/Page-Completed.vue
index 898e57b3..f88429ad 100644
--- a/frontend/src/components/Page-Completed.vue
+++ b/frontend/src/components/Page-Completed.vue
@@ -1,176 +1,185 @@
 <template>
-  <h1 class="is-size-3">
-    Completed
+  <h1 class="is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
+    <span class="icon-text">
+      <span class="icon">
+        <font-awesome-icon :icon="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
+      </span>
+      <span>Completed</span>
+    </span>
   </h1>
 
-  <div class="columns has-text-centered" v-if="hasItems">
-    <div class="column">
-      <button type="button" class="button is-fullwidth is-ghost is-inverted" @click="masterSelectAll = !masterSelectAll">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+  <div v-if="showCompleted">
+    <div class="columns has-text-centered" v-if="hasItems">
+      <div class="column">
+        <button type="button" class="button is-fullwidth is-ghost is-inverted"
+          @click="masterSelectAll = !masterSelectAll">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+            </span>
+            <span v-if="!masterSelectAll">Select All</span>
+            <span v-else>Unselect All</span>
           </span>
-          <span v-if="!masterSelectAll">Select All</span>
-          <span v-else>Unselect All</span>
-        </span>
-      </button>
-    </div>
-    <div class="column">
-      <button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
-        @click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-trash-can" />
+        </button>
+      </div>
+      <div class="column">
+        <button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
+          @click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-trash-can" />
+            </span>
+            <span>Remove Selected</span>
           </span>
-          <span>Remove Selected</span>
-        </span>
-      </button>
-    </div>
-    <div class="column" v-if="hasCompleted">
-      <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-circle-check" />
+        </button>
+      </div>
+      <div class="column" v-if="hasCompleted">
+        <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-circle-check" />
+            </span>
+            <span>Clear Completed</span>
           </span>
-          <span>Clear Completed</span>
-        </span>
-      </button>
-    </div>
-    <div class="column" v-if="hasFailed">
-      <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-circle-xmark" />
+        </button>
+      </div>
+      <div class="column" v-if="hasFailed">
+        <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-circle-xmark" />
+            </span>
+            <span>Clear Failed</span>
           </span>
-          <span>Clear Failed</span>
-        </span>
-      </button>
-    </div>
-    <div class="column" v-if="hasFailed">
-      <button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-rotate-right" />
+        </button>
+      </div>
+      <div class="column" v-if="hasFailed">
+        <button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-rotate-right" />
+            </span>
+            <span>Re-queue Failed</span>
           </span>
-          <span>Re-queue Failed</span>
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
-  </div>
 
-  <div class="columns is-multiline">
-    <div class="column is-6" v-for="item in completed" :key="item._id">
-      <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
-        <header class="card-header el has-tooltip" :data-tooltip="item.title">
-          <div class="card-header-title has-text-centered el is-block">
-            <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
-              @click.prevent="$emit('playItem', item)">
-              {{ item.title }}
-            </a>
-            <span v-else>{{ item.title }}</span>
-          </div>
-        </header>
-        <div class="card-content">
-          <div class="columns is-multiline">
-            <div class="column is-12" v-if="item.error">
-              <span class="has-text-danger">{{ item.error }}</span>
-            </div>
-            <div class="column is-4 has-text-centered">
-              <span class="icon-text">
-                <span class="icon"
-                  :class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
-                  <font-awesome-icon
-                    :icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
-                </span>
-                <span>{{ capitalize(item.status) }}</span>
-              </span>
-            </div>
-            <div class="column is-4 has-text-centered">
-              <span :date-datetime="item.datetime"
-                :data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
-                {{ moment(item.datetime).fromNow() }}
-              </span>
-            </div>
-            <div class="column is-4 has-text-centered">
-              <label class="checkbox is-block">
-                <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
-                  :value="item._id">
-                Select
-              </label>
-            </div>
-          </div>
-          <div class="columns">
-            <div class="column" v-if="item.status != 'finished'">
-              <a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
-                @click="reQueueItem(item._id, item)">
-                <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-rotate-right" />
-                  </span>
-                  <span>Re-queue</span>
-                </span>
+    <div class="columns is-multiline">
+      <div class="column is-6" v-for="item in completed" :key="item._id">
+        <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
+          <header class="card-header el has-tooltip" :data-tooltip="item.title">
+            <div class="card-header-title has-text-centered el is-block">
+              <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
+                @click.prevent="$emit('playItem', item)">
+                {{ item.title }}
               </a>
+              <span v-else>{{ item.title }}</span>
             </div>
-            <div class="column" v-if="item.filename">
-              <a class="button is-fullwidth is-primary" :href="makeDownload(config, item)"
-                :download="item.filename?.split('/').reverse()[0]">
+          </header>
+          <div class="card-content">
+            <div class="columns is-multiline">
+              <div class="column is-12" v-if="item.error">
+                <span class="has-text-danger">{{ item.error }}</span>
+              </div>
+              <div class="column is-4 has-text-centered">
                 <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-download" />
+                  <span class="icon"
+                    :class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
+                    <font-awesome-icon
+                      :icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
                   </span>
-                  <span>Download</span>
+                  <span>{{ capitalize(item.status) }}</span>
                 </span>
-              </a>
+              </div>
+              <div class="column is-4 has-text-centered">
+                <span :date-datetime="item.datetime"
+                  :data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
+                  {{ moment(item.datetime).fromNow() }}
+                </span>
+              </div>
+              <div class="column is-4 has-text-centered">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
+                    :value="item._id">
+                  Select
+                </label>
+              </div>
             </div>
-            <div class="column">
-              <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
-                <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-trash-can" />
+            <div class="columns">
+              <div class="column" v-if="item.status != 'finished'">
+                <a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
+                  @click="reQueueItem(item._id, item)">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-rotate-right" />
+                    </span>
+                    <span>Re-queue</span>
                   </span>
-                  <span>Remove</span>
-                </span>
-              </a>
-            </div>
-            <div class="column">
-              <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
-                <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
+                </a>
+              </div>
+              <div class="column" v-if="item.filename">
+                <a class="button is-fullwidth is-primary" :href="makeDownload(config, item)"
+                  :download="item.filename?.split('/').reverse()[0]">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-download" />
+                    </span>
+                    <span>Download</span>
                   </span>
-                  <span>Visit Link</span>
-                </span>
-              </a>
+                </a>
+              </div>
+              <div class="column">
+                <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-trash-can" />
+                    </span>
+                    <span>Remove</span>
+                  </span>
+                </a>
+              </div>
+              <div class="column">
+                <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
+                    </span>
+                    <span>Visit Link</span>
+                  </span>
+                </a>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div class="content has-text-centered" v-if="!hasCompleted">
-    <p v-if="config.isConnected">
-      <span class="icon-text">
-        <span class="icon has-text-success">
-          <font-awesome-icon icon="fa-solid fa-circle-check" />
+    <div class="content has-text-centered" v-if="!hasCompleted">
+      <p v-if="config.isConnected">
+        <span class="icon-text">
+          <span class="icon has-text-success">
+            <font-awesome-icon icon="fa-solid fa-circle-check" />
+          </span>
+          <span>No downloads records.</span>
         </span>
-        <span>No downloads records.</span>
-      </span>
-    </p>
-    <p v-else>
-      <span class="icon-text">
-        <span class="icon">
-          <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
+      </p>
+      <p v-else>
+        <span class="icon-text">
+          <span class="icon">
+            <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
+          </span>
+          <span>Connecting...</span>
         </span>
-        <span>Connecting...</span>
-      </span>
-    </p>
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { defineProps, computed, ref, watch, defineEmits } from 'vue';
 import moment from "moment";
+import { useStorage } from '@vueuse/core'
 
 const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
 
@@ -187,6 +196,7 @@ const props = defineProps({
 
 const selectedElms = ref([]);
 const masterSelectAll = ref(false);
+const showCompleted = useStorage('showCompleted', true)
 
 watch(masterSelectAll, (value) => {
   for (const key in props.completed) {
diff --git a/frontend/src/components/Page-Downloading.vue b/frontend/src/components/Page-Downloading.vue
index 2155ba01..202a6b1f 100644
--- a/frontend/src/components/Page-Downloading.vue
+++ b/frontend/src/components/Page-Downloading.vue
@@ -1,121 +1,129 @@
 <template>
-  <h1 class="is-size-3">
-    Queue
+  <h1 class="is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
+    <icon class="icon-text">
+      <span class="icon">
+        <font-awesome-icon :icon="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
+      </span>
+      <span>Queue</span>
+    </icon>
   </h1>
 
-  <div class="columns has-text-centered" v-if="hasQueuedItems">
-    <div class="column">
-      <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+  <div v-if="showQueue">
+    <div class="columns has-text-centered" v-if="hasQueuedItems">
+      <div class="column">
+        <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+            </span>
+            <span v-if="!masterSelectAll">Select All</span>
+            <span v-else>Unselect All</span>
           </span>
-          <span v-if="!masterSelectAll">Select All</span>
-          <span v-else>Unselect All</span>
-        </span>
-      </button>
-    </div>
-    <div class="column">
-      <button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
-        @click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-trash-can" />
+        </button>
+      </div>
+      <div class="column">
+        <button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
+          @click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-trash-can" />
+            </span>
+            <span>Cancel Selected</span>
           </span>
-          <span>Cancel Selected</span>
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
-  </div>
 
-  <div class="columns is-multiline">
-    <div class="column is-6" v-for="item in queue" :key="item._id">
-      <div class="card">
-        <header class="card-header el has-tooltip" :data-tooltip="item.title">
-          <div class="card-header-title has-text-centered el is-block">
-            {{ item.title }}
-          </div>
-        </header>
-        <div class="card-content">
-          <div class="columns is-multiline">
-            <div class="column is-12">
-              <div id="progress-bar" class="is-round">
-                <div id="progress-percentage">{{ updateProgress(item) }}</div>
-                <div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
+    <div class="columns is-multiline">
+      <div class="column is-6" v-for="item in queue" :key="item._id">
+        <div class="card">
+          <header class="card-header el has-tooltip" :data-tooltip="item.title">
+            <div class="card-header-title has-text-centered el is-block">
+              {{ item.title }}
+            </div>
+          </header>
+          <div class="card-content">
+            <div class="columns is-multiline">
+              <div class="column is-12">
+                <div id="progress-bar" class="is-round">
+                  <div id="progress-percentage">{{ updateProgress(item) }}</div>
+                  <div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
+                </div>
+              </div>
+              <div class="column is-4 has-text-centered">
+                <span class="icon-text">
+                  <span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
+                    <font-awesome-icon
+                      :icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
+                  </span>
+                  <span>{{ capitalize(item.status) }}</span>
+                </span>
+              </div>
+              <div class="column is-4 has-text-centered">
+                <span :data-datetime="item.datetime"
+                  :data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
+                  {{ moment(item.datetime).fromNow() }}
+                </span>
+              </div>
+              <div class="column is-4 has-text-centered">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
+                  Select
+                </label>
               </div>
             </div>
-            <div class="column is-4 has-text-centered">
-              <span class="icon-text">
-                <span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
-                  <font-awesome-icon
-                    :icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
-                </span>
-                <span>{{ capitalize(item.status) }}</span>
-              </span>
-            </div>
-            <div class="column is-4 has-text-centered">
-              <span :data-datetime="item.datetime"
-                :data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
-                {{ moment(item.datetime).fromNow() }}
-              </span>
-            </div>
-            <div class="column is-4 has-text-centered">
-              <label class="checkbox is-block">
-                <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
-                Select
-              </label>
-            </div>
-          </div>
-          <div class="columns">
-            <div class="column">
-              <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
-                <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-trash-can" />
+            <div class="columns">
+              <div class="column">
+                <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-trash-can" />
+                    </span>
+                    <span>Cancel</span>
                   </span>
-                  <span>Cancel</span>
-                </span>
-              </a>
-            </div>
-            <div class="column">
-              <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
-                <span class="icon-text">
-                  <span class="icon">
-                    <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
+                </a>
+              </div>
+              <div class="column">
+                <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
+                  <span class="icon-text">
+                    <span class="icon">
+                      <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
+                    </span>
+                    <span>Visit Link</span>
                   </span>
-                  <span>Visit Link</span>
-                </span>
-              </a>
+                </a>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div class="content has-text-centered" v-if="!hasQueuedItems">
-    <p v-if="config.isConnected">
-      <span class="icon-text">
-        <span class="icon has-text-success">
-          <font-awesome-icon icon="fa-solid fa-circle-check" />
+    <div class="content has-text-centered" v-if="!hasQueuedItems">
+      <p v-if="config.isConnected">
+        <span class="icon-text">
+          <span class="icon has-text-success">
+            <font-awesome-icon icon="fa-solid fa-circle-check" />
+          </span>
+          <span>No queued items.</span>
         </span>
-        <span>No queued items.</span>
-      </span>
-    </p>
-    <p v-else>
-      <span class="icon-text">
-        <span class="icon">
-          <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
+      </p>
+      <p v-else>
+        <span class="icon-text">
+          <span class="icon">
+            <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
+          </span>
+          <span>Connecting...</span>
         </span>
-        <span>Connecting...</span>
-      </span>
-    </p>
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { defineProps, defineEmits, ref, watch, computed } from 'vue';
 import moment from "moment";
+import { useStorage } from '@vueuse/core'
 
 defineEmits(['deleteItem']);
 
@@ -132,6 +140,7 @@ const props = defineProps({
 
 const selectedElms = ref([]);
 const masterSelectAll = ref(false);
+const showQueue = useStorage('showQueue', true)
 
 watch(masterSelectAll, (value) => {
   for (const key in props.queue) {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8c8d57a5..d2df131c 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSpinner, faWifi, faSignal
+  faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@@ -17,7 +17,7 @@ import './assets/css/bulma-dark.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
 
 library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSquare, faSquareCheck, faSpinner, faWifi, faSignal)
+  faSquare, faSquareCheck, faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,)
 const app = createApp(App);
 
 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);