Limit Tasks component to ve view only

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <PageHeader :config="config" @toggleForm="addForm = !addForm" @toggleTasks="showTasks = !showTasks" />
   <formAdd v-if="addForm" :config="config" @addItem="addItem" />
-  <pageTasks v-if="showTasks" :tasks="config.tasks" @task_remove="deleteTask" />
+  <pageTasks v-if="showTasks" :tasks="config.tasks" />
   <DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
   <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
     @playItem="playItem" />
@@ -31,7 +31,7 @@ import { useToast } from 'vue-toastification'
 import { useStorage, useEventBus } from '@vueuse/core'
 
 const toast = useToast();
-const bus = useEventBus('item_added', 'show_form');
+const bus = useEventBus('item_added', 'show_form', 'task_edit');
 
 const config = reactive({
   isConnected: false,
@@ -170,21 +170,13 @@ const playItem = (item) => {
   video_link.value = config.app.url_host + config.app.url_prefix + baseDir + encodeURIComponent(item.filename);
 };
 
-const deleteTask = (indexNumber, item) => {
+bus.on((event, data) => {
-  if (!confirm(`Are you sure you want to delete this task ${item?.name || item.url}?`)) {
+  if (!['show_form'].includes(event)) {
-    return;
+    return true;
-  }
-  config.tasks = config.tasks.filter((_, index) => {
-    return index !== indexNumber;
-  });
-}
-bus.on((event) => {
-  const allowedEvents = ['show_form'];
-  if (!allowedEvents.includes(event)) {
-    return;
   }
   if ('show_form' === event) {
     addForm.value = true;
+    setTimeout(() => bus.emit('task_edit', data), 500);
   }
 });
 

frontend/src/components/Form-Add.vue

@@ -148,7 +148,7 @@ import { defineEmits, defineProps, onMounted, ref } from 'vue'
 import { downloadFormats } from '../formats.js'
 import { useStorage, useEventBus } from '@vueuse/core'
 
-const bus = useEventBus('item_added', 'task_edit','show_form');
+const bus = useEventBus('item_added', 'task_edit');
 const emits = defineEmits(['addItem']);
 
 const selectedFormat = useStorage('selectedFormat', 'any')
@@ -212,40 +212,17 @@ const resetConfig = () => {
 }
 
 bus.on((event, data) => {
-  const allowedEvents = ['item_added', 'task_edit'];
+  const allowedEvents = ['item_added'];
   if (!allowedEvents.includes(event)) {
     return;
   }
 
-
+  if ('item_added' === event) {
-  if (event === 'item_added') {
     if (data?.status === 'ok') {
       url.value = '';
     }
     url.value = data.url;
     addInProgress.value = false;
   }
-
-  if ('task_edit' === event) {
-    console.log(data);
-    selectedFormat.value = data.format;
-    selectedQuality.value = data.quality;
-
-    if (typeof data.ytdlp_config === 'object') {
-      data.ytdlp_config = JSON.stringify(data.ytdlp_config);
-    }
-    if (typeof data.ytdlp_cookies === 'object') {
-      data.ytdlp_cookies = JSON.stringify(data.ytdlp_cookies);
-    }
-
-    ytdlpConfig.value = data.ytdlp_config;
-    ytdlpCookies.value = data.ytdlp_cookies;
-    output_template.value = data.output_template;
-    downloadPath.value = data.folder;
-    url.value = data.url;
-    showAdvanced.value = true;
-    bus.emit('show_form');
-  }
-
 });
 </script>

frontend/src/components/Page-Header.vue

@@ -12,7 +12,7 @@
           <font-awesome-icon icon="fa-solid fa-plus" />
         </button>
       </div>
-      <div class="navbar-item">
+      <div class="navbar-item" v-if="config.tasks.length > 0">
         <button data-tooltip="Show/Hide Tasks" class="button is-dark has-tooltip-bottom" @click="$emit('toggleTasks')">
           <font-awesome-icon icon="fa-solid fa-tasks" />
         </button>

frontend/src/components/Page-Tasks.vue

@@ -8,9 +8,6 @@
         <span>Tasks</span>
       </span>
     </p>
-    <p class="subtitle is-4 has-text-danger">
-      This section is not working yet.
-    </p>
   </div>
 
   <div class="columns is-multiline">
@@ -19,10 +16,9 @@
         <table class="table is-bordered is-narrow is-hoverable is-striped is-fullwidth is-fixed">
           <thead class="has-text-centered">
             <tr>
-              <th class="has-text-centered" width="20%">Name</th>
+              <th class="has-text-centered" width="25%">Name</th>
               <th class="has-text-centered" width="50%">URL</th>
-              <th class="has-text-centered" width="20%">Timer</th>
+              <th class="has-text-centered" width="25%">Next run</th>
-              <th class="has-text-centered" width="10%">Options</th>
             </tr>
           </thead>
           <tbody>
@@ -40,25 +36,6 @@
                 </span>
               </td>
               <td class="has-text-centered" v-else>once an hour</td>
-              <td class="has-text-centered">
-                <div class="field is-grouped">
-                  <div class="control is-expanded">
-                    <button class="button is-small is-danger" @click="$emit('task_remove', key, item)"
-                      data-tooltip="Remove task">
-                      <span class="icon">
-                        <font-awesome-icon icon="fa-solid fa-trash" />
-                      </span>
-                    </button>
-                  </div>
-                  <div class="control is-expanded">
-                    <button class="button is-small is-info" @click="taskEdit(item)" data-tooltip="Modify task">
-                      <span class="icon">
-                        <font-awesome-icon icon="fa-solid fa-cog" />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </td>
             </tr>
             <tr v-if="tasks.length < 1">
               <td colspan="4" class="has-text-centered has-text-danger">
@@ -73,24 +50,10 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue'
+import { defineProps } from 'vue'
-import { useEventBus } from '@vueuse/core'
-
 import moment from "moment";
 import { parseExpression } from 'cron-parser';
 
-require('cron-parser');
-defineEmits(['task_edit', 'task_remove',])
-
-const bus = useEventBus('item_added', 'task_edit', 'show_form');
-
-const taskEdit = (item) => {
-  bus.emit('show_form');
-  setTimeout(() => {
-    bus.emit('item_added', item);
-  }, 1000);
-}
-
 defineProps({
   tasks: {
     type: Array,