danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Limit Tasks component to ve view only

Browse source
This commit is contained in:
ArabCoders 2023-12-29 16:31:07 +03:00
parent 23dcef5b81
commit e7890739f6
4 changed files with 13 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/App.vue
View file

@ -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) => {
if (!confirm(`Are you sure you want to delete this task ${item?.name || item.url}?`)) {
return;
}
config.tasks = config.tasks.filter((_, index) => {
return index !== indexNumber;
});
}
bus.on((event) => {
const allowedEvents = ['show_form'];
if (!allowedEvents.includes(event)) {
return;
bus.on((event, data) => {
if (!['show_form'].includes(event)) {
return true;
}
if ('show_form' === event) {
addForm.value = true;
setTimeout(() => bus.emit('task_edit', data), 500);
}
});

29
frontend/src/components/Form-Add.vue
View file

@ -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 (event === 'item_added') {
if ('item_added' === event) {
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>

2
frontend/src/components/Page-Header.vue
View file

@ -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>

43
frontend/src/components/Page-Tasks.vue
View file

@ -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="10%">Options</th>
<th class="has-text-centered" width="25%">Next run</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 { useEventBus } from '@vueuse/core'
import { defineProps } from 'vue'
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,