some work to make tasks editor works in webui

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "@vueuse/core": "^10.6.1",
         "core-js": "^3.8.3",
+        "cron-parser": "^4.9.0",
         "hls.js": "^1.4.12",
         "moment": "^2.29.4",
         "plyr": "^3.7.8",
@@ -4646,6 +4647,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/cron-parser": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
+      "integrity": "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==",
+      "dependencies": {
+        "luxon": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7809,6 +7821,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",

frontend/package.json

@@ -15,6 +15,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@vueuse/core": "^10.6.1",
     "core-js": "^3.8.3",
+    "cron-parser": "^4.9.0",
     "hls.js": "^1.4.12",
     "moment": "^2.29.4",
     "plyr": "^3.7.8",

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" @removeTask="deleteTask" />
+  <pageTasks v-if="showTasks" :tasks="config.tasks" @task_remove="deleteTask" />
   <DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
   <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
     @playItem="playItem" />

frontend/src/assets/css/bulma-dark.css

@@ -5077,7 +5077,7 @@
 
   .modal-card-body {
     -webkit-overflow-scrolling: touch;
-    background-color: white;
+    background-color: #000;
   }
 
   .navbar {

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');
+const bus = useEventBus('item_added', 'task_edit');
 const emits = defineEmits(['addItem']);
 
 const selectedFormat = useStorage('selectedFormat', 'any')
@@ -212,13 +212,39 @@ const resetConfig = () => {
 }
 
 bus.on((event, data) => {
-  if (event !== 'item_added') {
+  const allowedEvents = ['item_added', 'task_edit'];
+  if (!allowedEvents.includes(event)) {
     return;
   }
 
-  if (data?.status === 'ok') {
-    url.value = '';
+
+  if (event === 'item_added') {
+    if (data?.status === 'ok') {
+      url.value = '';
+    }
+    url.value = data.url;
+    addInProgress.value = false;
   }
-  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;
+  }
+
 });
 </script>

frontend/src/components/Page-Tasks.vue

@@ -14,17 +14,6 @@
   </div>
 
   <div class="columns is-multiline">
-    <div class="column is-12 has-text-right">
-      <button class="button is-primary" @click="$emit('task_new')">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-plus" />
-          </span>
-          <span>New Task</span>
-        </span>
-      </button>
-    </div>
-
     <div class="column is-12">
       <div class="table-container">
         <table class="table is-bordered is-narrow is-hoverable is-striped is-fullwidth is-fixed">
@@ -45,12 +34,16 @@
                   {{ item.url }}
                 </a>
               </td>
-              <td class="has-text-centered" v-if="item.timer">{{ item.timer }}</td>
+              <td class="has-text-centered" v-if="item.timer">
+                <span :data-tooltip="'Timer: ' + item.timer">
+                  {{ moment(parseExpression(item.timer).next().toISOString()).fromNow() }}
+                </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('removeTask', key, item)"
+                    <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" />
@@ -58,7 +51,7 @@
                     </button>
                   </div>
                   <div class="control is-expanded">
-                    <button class="button is-small is-info" data-tooltip="Modify task">
+                    <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>
@@ -81,14 +74,25 @@
 
 <script setup>
 import { defineProps, defineEmits } from 'vue'
+import { useEventBus } from '@vueuse/core'
 
-defineEmits(['task_new', 'task_add', 'removeTask', 'tasks_updated'])
+import moment from "moment";
+import { parseExpression } from 'cron-parser';
+
+require('cron-parser');
+defineEmits(['task_edit', 'task_remove'])
+
+const bus = useEventBus('item_added', 'task_edit');
+
+const taskEdit = (item) => {
+  bus.emit('task_edit', item);
+}
 
 defineProps({
   tasks: {
     type: Array,
     required: true
-  }
+  },
 })
 
 </script>