improve task page information display.

ui/components/TaskForm.vue

@@ -111,8 +111,9 @@
                   <span class="help">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>Select the preset to use for this URL. <span class="text-has-danger">If the
-                        <code>-f, --format</code> argument is present in the command line options, the preset and all
+                        <code>-f, --format</code> <span class="has-text-danger">
-                        it's options will be ignored.</span>
+                          argument is present in the command line options, the preset and all
+                          it's options will be ignored.</span></span>
                     </span>
                   </span>
                 </div>
@@ -152,8 +153,8 @@
                   </div>
                   <span class="help">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>Paths are relative to global download path, defaults to preset download path if set otherwise,
+                    <span>Current download folder: <code>{{ get_download_folder() }}</code>. All folders are
-                      fallback root path if not set.</span>
+                      sub-folders of <code>{{ config.app.download_path }}</code>.</span>
                   </span>
                 </div>
               </div>
@@ -170,11 +171,7 @@
                   </div>
                   <span class="help">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>Use this output template if non are given with URL. if not set, it will defaults to
+                    <span>Current output format: <code>{{ get_output_template() }}</code>.</span>
-                      <code>{{ config.app.output_template }}</code>.
-                      For more information <NuxtLink href="https://github.com/yt-dlp/yt-dlp#output-template"
-                        target="_blank">visit this url</NuxtLink>.
-                    </span>
                   </span>
                 </div>
               </div>
@@ -405,4 +402,23 @@ const hasFormatInConfig = computed(() => {
 
 const filter_presets = (flag = true) => config.presets.filter(item => item.default === flag)
 
+const get_download_folder = () => {
+  if (form.preset && !hasFormatInConfig.value) {
+    const preset = config.presets.find(p => p.name === form.preset)
+    if (preset && preset.folder) {
+      return preset.folder.replace(config.app.download_path, '')
+    }
+  }
+  return '/'
+}
+
+const get_output_template = () => {
+  if (form.preset && !hasFormatInConfig.value) {
+    const preset = config.presets.find(p => p.name === form.preset)
+    if (preset && preset.template) {
+      return preset.template
+    }
+  }
+  return config.app.output_template || '%(title)s.%(ext)s'
+}
 </script>

ui/pages/tasks.vue

@@ -101,8 +101,9 @@ div.is-centered {
                   </button>
                 </div>
                 <div class="card-footer-item">
-                  <button class="button is-purple is-fullwidth" @click="runNow(item)">
+                  <button class="button is-purple is-fullwidth" @click="runNow(item)"
-                    <span class="icon"><i class="fa-solid fa-microchip" /></span>
+                    :class="{ 'is-loading': runNowInProgress }">
+                    <span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
                     <span>Run now</span>
                   </button>
                 </div>
@@ -134,6 +135,7 @@ const toggleForm = ref(false)
 const isLoading = ref(false)
 const initialLoad = ref(true)
 const addInProgress = ref(false)
+const runNowInProgress = ref(false)
 
 watch(() => config.app.basic_mode, async () => {
   if (!config.app.basic_mode) {
@@ -217,7 +219,7 @@ const updateTasks = async items => {
 }
 
 const deleteItem = async item => {
-  if (true !== box.confirm(`Are you sure you want to delete (${item.name})?`, true)) {
+  if (true !== box.confirm(`Delete '${item.name}' task?`, true)) {
     return
   }
 
@@ -290,11 +292,13 @@ const tryParse = expression => {
   }
 }
 
-const runNow = item => {
+const runNow = async item => {
   if (true !== box.confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) {
     return
   }
 
+  runNowInProgress.value = true
+
   let data = {
     url: item.url,
     preset: item.preset,
@@ -313,6 +317,11 @@ const runNow = item => {
   }
 
   socket.emit('add_url', data)
+
+  setTimeout(async () => {
+    await nextTick()
+    runNowInProgress.value = false
+  }, 500)
 }
 
 onUnmounted(() => socket.off('status', statusHandler))
@@ -350,4 +359,5 @@ const exportItem = async item => {
 
   return copyText(base64UrlEncode(JSON.stringify(data)));
 }
+
 </script>