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

Add list view for tasks.

Browse source
This commit is contained in:
arabcoders 2025-06-04 00:35:36 +03:00
parent f57f1d3916
commit 46b57e06e7
3 changed files with 216 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/library/Utils.py
View file

@ -779,7 +779,7 @@ def get_files(base_path: str, dir: str | None = None):
return [] return []
contents: list = [] contents: list = []
for file in pathlib.Path(dir_path).iterdir(): for file in dir_path.iterdir():
if file.name.startswith(".") or file.name.startswith("_"): if file.name.startswith(".") or file.name.startswith("_"):
continue continue

97
ui/pages/presets.vue
View file

@ -23,7 +23,7 @@ div.is-centered {
<p class="control"> <p class="control">
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;" <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;"
v-tooltip.bottom="'Toggle add form'"> v-tooltip.bottom="'Toggle add form'">
<span class="icon"><i class="fas fa-add"/></span> <span class="icon"><i class="fas fa-add" /></span>
</button> </button>
</p> </p>
@ -37,7 +37,7 @@ div.is-centered {
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="presets && presets.length > 0"> :disabled="!socket.isConnected || isLoading" v-if="presets && presets.length > 0">
<span class="icon"><i class="fas fa-refresh"/></span> <span class="icon"><i class="fas fa-refresh" /></span>
</button> </button>
</p> </p>
</div> </div>
@ -56,9 +56,9 @@ div.is-centered {
</div> </div>
</div> </div>
<div class="columns is-multiline" v-if="!toggleForm"> <template v-if="!toggleForm">
<template v-if="presetsNoDefault && presetsNoDefault.length > 0"> <div class="columns is-multiline" v-if="presetsNoDefault && presetsNoDefault.length > 0">
<template v-if="display_style === 'list'"> <template v-if="'list' === display_style">
<div class="column is-12"> <div class="column is-12">
<div class="table-container"> <div class="table-container">
<table class="table is-striped is-hoverable is-fullwidth is-bordered" <table class="table is-striped is-hoverable is-fullwidth is-bordered"
@ -79,19 +79,19 @@ div.is-centered {
<td class="is-vcentered is-items-center"> <td class="is-vcentered is-items-center">
<div class="field is-grouped is-grouped-centered"> <div class="field is-grouped is-grouped-centered">
<div class="control"> <div class="control">
<button class="button is-primary is-small is-fullwidth" v-tooltip="'Export preset.'" <button class="button is-primary is-small is-fullwidth" v-tooltip="'Export'"
@click="exportItem(item)"> @click="exportItem(item)">
<span class="icon"><i class="fa-solid fa-file-export" /></span> <span class="icon"><i class="fa-solid fa-file-export" /></span>
</button> </button>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit preset.'" <button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit'"
@click="editItem(item)"> @click="editItem(item)">
<span class="icon"><i class="fa-solid fa-cog" /></span> <span class="icon"><i class="fa-solid fa-cog" /></span>
</button> </button>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-danger is-small is-fullwidth" v-tooltip="'Delete preset.'" <button class="button is-danger is-small is-fullwidth" v-tooltip="'Delete'"
@click="deleteItem(item)"> @click="deleteItem(item)">
<span class="icon"><i class="fa-solid fa-trash" /></span> <span class="icon"><i class="fa-solid fa-trash" /></span>
</button> </button>
@ -104,13 +104,14 @@ div.is-centered {
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="column is-6" v-for="item in presetsNoDefault" :key="item.id"> <div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
<div class="card is-flex is-full-height is-flex-direction-column"> <div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header"> <header class="card-header">
<div class="card-header-title is-text-overflow is-block" v-text="item.name" /> <div class="card-header-title is-text-overflow is-block" v-text="item.name" />
<div class="card-header-icon"> <div class="card-header-icon">
<button class="has-text-primary" v-tooltip="'Export preset.'" @click="exportItem(item)"> <button class="has-text-primary" v-tooltip="'Export'" @click="exportItem(item)">
<span class="icon"><i class="fa-solid fa-file-export" /></span> <span class="icon"><i class="fa-solid fa-file-export" /></span>
</button> </button>
<button @click="item.raw = !item.raw"> <button @click="item.raw = !item.raw">
@ -176,32 +177,36 @@ div.is-centered {
</div> </div>
</div> </div>
</template> </template>
</template>
<div class="column is-12" v-if="!presets || presets.length < 1">
<Message title="No presets" message="There are no custom defined presets."
class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle" />
</div> </div>
</div>
<div class="columns is-multiline" v-if="!toggleForm"> <div class="columns is-multiline" v-if="!presets || presets.length < 1">
<div class="column is-12" v-if="presets && presets.length > 0"> <div class="column is-12">
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle"> <Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
<ul> message="Loading data. Please wait..." v-if="isLoading" />
<li> <Message title="No presets" message="There are no custom defined presets."
When you export preset, it doesn't include <code>Cookies</code> field for security reasons. class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle" v-else />
</li> </div>
<li>
If you have created a global <code>config/ytdlp.cli</code> file, it will be appended to your exported
preset
<code><i class="fa-solid fa-terminal" /> Command options for yt-dlp</code> field for better
compatibility
and completeness.
</li>
</ul>
</Message>
</div> </div>
</div>
<div class="columns is-multiline" v-if="presets && presets.length > 0">
<div class="column is-12">
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle">
<ul>
<li>
When you export preset, it doesn't include <code>Cookies</code> field for security reasons.
</li>
<li>
If you have created a global <code>config/ytdlp.cli</code> file, it will be appended to your exported
preset
<code><i class="fa-solid fa-terminal" /> Command options for yt-dlp</code> field for better
compatibility
and completeness.
</li>
</ul>
</Message>
</div>
</div>
</template>
</main> </main>
</template> </template>
@ -214,20 +219,18 @@ const config = useConfigStore()
const socket = useSocketStore() const socket = useSocketStore()
const box = useConfirm() const box = useConfirm()
const display_style = useStorage("display_style", "cards") const display_style = useStorage("preset_display_style", "cards")
const presets = ref([]) const presets = ref([])
const preset = ref({}) const preset = ref({})
const presetRef = ref("") const presetRef = ref("")
const toggleForm = ref(false) const toggleForm = ref(false)
const isLoading = ref(false) const isLoading = ref(true)
const initialLoad = ref(true) const initialLoad = ref(true)
const addInProgress = ref(false) const addInProgress = ref(false)
const remove_keys = ["raw", "toggle_description"]
const presetsNoDefault = computed(() => presets.value.filter((t) => !t.default))
const presetsNoDefault = computed(() =>
presets.value.filter((t) => !t.default),
)
watch( watch(
() => config.app.basic_mode, () => config.app.basic_mode,
@ -239,15 +242,12 @@ watch(
}, },
) )
watch( watch(() => socket.isConnected, async () => {
() => socket.isConnected, if (socket.isConnected && initialLoad.value) {
async () => { await reloadContent(true)
if (socket.isConnected && initialLoad.value) { initialLoad.value = false
await reloadContent(true) }
initialLoad.value = false })
}
},
)
const reloadContent = async (fromMounted = false) => { const reloadContent = async (fromMounted = false) => {
try { try {
@ -335,6 +335,7 @@ const deleteItem = async (item) => {
} }
const updateItem = async ({ reference, preset }) => { const updateItem = async ({ reference, preset }) => {
preset = cleanObject(preset, remove_keys)
if (reference) { if (reference) {
const index = presets.value.findIndex((t) => t?.id === reference) const index = presets.value.findIndex((t) => t?.id === reference)
if (index > -1) { if (index > -1) {
@ -354,7 +355,7 @@ const updateItem = async ({ reference, preset }) => {
} }
const filterItem = item => { const filterItem = item => {
const { raw, toggle_description, ...rest } = item const rest = cleanObject(item, remove_keys)
if ("default" in rest) { if ("default" in rest) {
delete rest.default delete rest.default
} }

235
ui/pages/tasks.vue
View file

@ -3,17 +3,13 @@ table.is-fixed {
table-layout: fixed; table-layout: fixed;
} }
div.table-container {
overflow: hidden;
}
div.is-centered { div.is-centered {
justify-content: center; justify-content: center;
} }
</style> </style>
<template> <template>
<div> <main>
<div class="mt-1 columns is-multiline"> <div class="mt-1 columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable"> <div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4"> <span class="title is-4">
@ -25,14 +21,24 @@ div.is-centered {
<div class="is-pulled-right"> <div class="is-pulled-right">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control"> <p class="control">
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm"> <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm"
<span class="icon"><i class="fas fa-add"></i></span> v-tooltip.bottom="'Toggle Add form'">
<span class="icon"><i class="fas fa-add" /></span>
</button> </button>
</p> </p>
<p class="control">
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
@click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
</button>
</p>
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="tasks && tasks.length > 0"> :disabled="!socket.isConnected || isLoading" v-if="tasks && tasks.length > 0">
<span class="icon"><i class="fas fa-refresh"></i></span> <span class="icon"><i class="fas fa-refresh" /></span>
</button> </button>
</p> </p>
</div> </div>
@ -43,84 +49,174 @@ div.is-centered {
</span> </span>
</div> </div>
</div> </div>
</div>
<div class="column is-12" v-if="toggleForm"> <div class="columns is-multiline" v-if="toggleForm">
<div class="column is-12">
<TaskForm :addInProgress="addInProgress" :reference="taskRef" :task="task" @cancel="resetForm(true);" <TaskForm :addInProgress="addInProgress" :reference="taskRef" :task="task" @cancel="resetForm(true);"
@submit="updateItem" /> @submit="updateItem" />
</div> </div>
</div>
<div class="column is-12" v-if="!toggleForm"> <div class="columns is-multiline" v-if="!isLoading && !toggleForm && tasks && tasks.length > 0">
<div class="columns is-multiline" v-if="tasks && tasks.length > 0"> <template v-if="'list' === display_style">
<div class="column is-6" v-for="item in tasks" :key="item.id"> <div class="column is-12">
<div class="card is-flex is-full-height is-flex-direction-column"> <div class="table-container">
<header class="card-header"> <table class="table is-striped is-hoverable is-fullwidth is-bordered"
<div class="card-header-title is-text-overflow is-block"> style="min-width: 850px; table-layout: fixed;">
<NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink> <thead>
</div> <tr class="has-text-centered is-unselectable">
<div class="card-header-icon"> <th width="50%">
<a class="has-text-primary" v-tooltip="'Export task.'" @click.prevent="exportItem(item)"> <span class="icon"><i class="fa-solid fa-tasks" /></span>
<span class="icon"><i class="fa-solid fa-file-export" /></span> <span>Task</span>
</a> </th>
</div> <th width="30%">
</header>
<div class="card-content is-flex-grow-1">
<div class="content">
<p class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-clock" /></span> <span class="icon"><i class="fa-solid fa-clock" /></span>
<span v-if="item.timer">{{ tryParse(item.timer) }} - {{ item.timer }}</span> <span>Timer</span>
<span v-else>No timer is set</span> </th>
</p> <th width="20%">
<p class="is-text-overflow" v-if="item.folder"> <span class="icon"><i class="fa-solid fa-gear" /></span>
<span class="icon"><i class="fa-solid fa-folder" /></span> <span>Actions</span>
<span>{{ calcPath(item.folder) }}</span> </th>
</p> </tr>
<p class="is-text-overflow" v-if="item.template"> </thead>
<span class="icon"><i class="fa-solid fa-file" /></span> <tbody>
<span>{{ item.template }}</span> <tr v-for="item in tasks" :key="item.id">
</p> <td class="is-vcentered">
<p class="is-text-overflow"> <div class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-tv" /></span> <NuxtLink target="_blank" :href="item.url" class="is-bold">
<span>{{ item.preset ?? config.app.default_preset }}</span> {{ item.name }}
</p> </NuxtLink>
<p class="is-text-overflow" v-if="item.cli"> </div>
<span class="icon"><i class="fa-solid fa-terminal" /></span> <div v-if="item.preset">
<span>{{ item.cli }}</span> <span class="icon"><i class="fa-solid fa-tv" /></span>
</p> <span>{{ item.preset ?? config.app.default_preset }}</span>
</div> </div>
</td>
<td class="is-vcentered has-text-centered">
<span v-if="item.timer" class="has-tooltip" v-tooltip="item.timer">
{{ tryParse(item.timer) }}
</span>
<span v-else class="has-text-danger">
<span class="icon"><i class="fa-solid fa-exclamation-triangle" /></span>
<span>No timer is set</span>
</span>
</td>
<td class="is-vcentered is-items-center">
<div class="field is-grouped is-grouped-centered">
<div class="control">
<button class="button is-purple is-small is-fullwidth" v-tooltip="'Run now'"
@click="runNow(item)" :class="{ 'is-loading': item?.in_progress }">
<span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
</button>
</div>
<div class="control">
<button class="button is-primary is-small is-fullwidth" v-tooltip="'Export'"
@click="exportItem(item)">
<span class="icon"><i class="fa-solid fa-file-export" /></span>
</button>
</div>
<div class="control">
<button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit'"
@click="editItem(item)">
<span class="icon"><i class="fa-solid fa-cog" /></span>
</button>
</div>
<div class="control">
<button class="button is-danger is-small is-fullwidth" v-tooltip="'Delete'"
@click="deleteItem(item)">
<span class="icon"><i class="fa-solid fa-trash" /></span>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<template v-else>
<div class="column is-6" v-for="item in tasks" :key="item.id">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block">
<NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
</div> </div>
<div class="card-footer mt-auto"> <div class="card-header-icon">
<div class="card-footer-item"> <a class="has-text-primary" v-tooltip="'Export task.'" @click.prevent="exportItem(item)">
<button class="button is-warning is-fullwidth" @click="editItem(item);"> <span class="icon"><i class="fa-solid fa-file-export" /></span>
<span class="icon"><i class="fa-solid fa-cog" /></span> </a>
<span>Edit</span> </div>
</button> </header>
</div> <div class="card-content is-flex-grow-1">
<div class="card-footer-item"> <div class="content">
<button class="button is-danger is-fullwidth" @click="deleteItem(item)"> <p class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-trash" /></span> <span class="icon"><i class="fa-solid fa-clock" /></span>
<span>Delete</span> <span v-if="item.timer">{{ tryParse(item.timer) }} - {{ item.timer }}</span>
</button> <span v-else>No timer is set</span>
</div> </p>
<div class="card-footer-item"> <p class="is-text-overflow" v-if="item.folder">
<button class="button is-purple is-fullwidth" @click="runNow(item)" <span class="icon"><i class="fa-solid fa-folder" /></span>
:class="{ 'is-loading': item?.in_progress }"> <span>{{ calcPath(item.folder) }}</span>
<span class="icon"><i class="fa-solid fa-up-right-from-square" /></span> </p>
<span>Run now</span> <p class="is-text-overflow" v-if="item.template">
</button> <span class="icon"><i class="fa-solid fa-file" /></span>
</div> <span>{{ item.template }}</span>
</p>
<p class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-tv" /></span>
<span>{{ item.preset ?? config.app.default_preset }}</span>
</p>
<p class="is-text-overflow" v-if="item.cli">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
<span>{{ item.cli }}</span>
</p>
</div>
</div>
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(item);">
<span class="icon"><i class="fa-solid fa-cog" /></span>
<span>Edit</span>
</button>
</div>
<div class="card-footer-item">
<button class="button is-danger is-fullwidth" @click="deleteItem(item)">
<span class="icon"><i class="fa-solid fa-trash" /></span>
<span>Delete</span>
</button>
</div>
<div class="card-footer-item">
<button class="button is-purple is-fullwidth" @click="runNow(item)"
:class="{ 'is-loading': item?.in_progress }">
<span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
<span>Run now</span>
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template>
</div>
<div class="columns is-multiline" v-if="!tasks || tasks.length < 1">
<div class="column is-12">
<Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
message="Loading data. Please wait..." v-if="isLoading" />
<Message title="No tasks" message="No tasks are defined." class="is-background-warning-80 has-text-dark" <Message title="No tasks" message="No tasks are defined." class="is-background-warning-80 has-text-dark"
icon="fas fa-exclamation-circle" v-if="!tasks || tasks.length < 1" /> icon="fas fa-exclamation-circle" v-else />
</div> </div>
</div> </div>
</div> </main>
</template> </template>
<script setup> <script setup>
import moment from 'moment' import moment from 'moment'
import { useStorage } from '@vueuse/core'
import { CronExpressionParser } from 'cron-parser' import { CronExpressionParser } from 'cron-parser'
import { request } from '~/utils/index' import { request } from '~/utils/index'
@ -133,9 +229,10 @@ const tasks = ref([])
const task = ref({}) const task = ref({})
const taskRef = ref('') const taskRef = ref('')
const toggleForm = ref(false) const toggleForm = ref(false)
const isLoading = ref(false) const isLoading = ref(true)
const initialLoad = ref(true) const initialLoad = ref(true)
const addInProgress = ref(false) const addInProgress = ref(false)
const display_style = useStorage("tasks_display_style", "cards")
watch(() => config.app.basic_mode, async () => { watch(() => config.app.basic_mode, async () => {
if (!config.app.basic_mode) { if (!config.app.basic_mode) {