Added collapsible views.
This commit is contained in:
ArabCoders
parent
2b05f0b17a
commit
a73c32ea66
4 changed files with 263 additions and 236 deletions
|
|
@ -31,6 +31,10 @@
|
|||
background-color: #000;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
unicode-bidi: plaintext;
|
||||
|
|
@ -64,4 +68,8 @@
|
|||
.container {
|
||||
background-color: #0f1010;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,176 +1,185 @@
|
|||
<template>
|
||||
<h1 class="is-size-3">
|
||||
Completed
|
||||
<h1 class="is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
|
||||
</span>
|
||||
<span>Completed</span>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div class="columns has-text-centered" v-if="hasItems">
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-ghost is-inverted" @click="masterSelectAll = !masterSelectAll">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
|
||||
<div v-if="showCompleted">
|
||||
<div class="columns has-text-centered" v-if="hasItems">
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-ghost is-inverted"
|
||||
@click="masterSelectAll = !masterSelectAll">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
|
||||
</span>
|
||||
<span v-if="!masterSelectAll">Select All</span>
|
||||
<span v-else>Unselect All</span>
|
||||
</span>
|
||||
<span v-if="!masterSelectAll">Select All</span>
|
||||
<span v-else>Unselect All</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
|
||||
@click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
|
||||
@click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</span>
|
||||
<span>Remove Selected</span>
|
||||
</span>
|
||||
<span>Remove Selected</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasCompleted">
|
||||
<button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasCompleted">
|
||||
<button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
</span>
|
||||
<span>Clear Completed</span>
|
||||
</span>
|
||||
<span>Clear Completed</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasFailed">
|
||||
<button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-xmark" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasFailed">
|
||||
<button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-xmark" />
|
||||
</span>
|
||||
<span>Clear Failed</span>
|
||||
</span>
|
||||
<span>Clear Failed</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasFailed">
|
||||
<button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-rotate-right" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column" v-if="hasFailed">
|
||||
<button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-rotate-right" />
|
||||
</span>
|
||||
<span>Re-queue Failed</span>
|
||||
</span>
|
||||
<span>Re-queue Failed</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6" v-for="item in completed" :key="item._id">
|
||||
<div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
|
||||
<header class="card-header el has-tooltip" :data-tooltip="item.title">
|
||||
<div class="card-header-title has-text-centered el is-block">
|
||||
<a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
|
||||
@click.prevent="$emit('playItem', item)">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<span v-else>{{ item.title }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12" v-if="item.error">
|
||||
<span class="has-text-danger">{{ item.error }}</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span class="icon-text">
|
||||
<span class="icon"
|
||||
:class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
|
||||
<font-awesome-icon
|
||||
:icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
|
||||
</span>
|
||||
<span>{{ capitalize(item.status) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span :date-datetime="item.datetime"
|
||||
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
|
||||
{{ moment(item.datetime).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<label class="checkbox is-block">
|
||||
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
|
||||
:value="item._id">
|
||||
Select
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column" v-if="item.status != 'finished'">
|
||||
<a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
|
||||
@click="reQueueItem(item._id, item)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-rotate-right" />
|
||||
</span>
|
||||
<span>Re-queue</span>
|
||||
</span>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6" v-for="item in completed" :key="item._id">
|
||||
<div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
|
||||
<header class="card-header el has-tooltip" :data-tooltip="item.title">
|
||||
<div class="card-header-title has-text-centered el is-block">
|
||||
<a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
|
||||
@click.prevent="$emit('playItem', item)">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<span v-else>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="column" v-if="item.filename">
|
||||
<a class="button is-fullwidth is-primary" :href="makeDownload(config, item)"
|
||||
:download="item.filename?.split('/').reverse()[0]">
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12" v-if="item.error">
|
||||
<span class="has-text-danger">{{ item.error }}</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-download" />
|
||||
<span class="icon"
|
||||
:class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
|
||||
<font-awesome-icon
|
||||
:icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
|
||||
</span>
|
||||
<span>Download</span>
|
||||
<span>{{ capitalize(item.status) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span :date-datetime="item.datetime"
|
||||
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
|
||||
{{ moment(item.datetime).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<label class="checkbox is-block">
|
||||
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
|
||||
:value="item._id">
|
||||
Select
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
<div class="columns">
|
||||
<div class="column" v-if="item.status != 'finished'">
|
||||
<a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
|
||||
@click="reQueueItem(item._id, item)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-rotate-right" />
|
||||
</span>
|
||||
<span>Re-queue</span>
|
||||
</span>
|
||||
<span>Remove</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-up-right-from-square" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="column" v-if="item.filename">
|
||||
<a class="button is-fullwidth is-primary" :href="makeDownload(config, item)"
|
||||
:download="item.filename?.split('/').reverse()[0]">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-download" />
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</span>
|
||||
<span>Visit Link</span>
|
||||
</span>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</span>
|
||||
<span>Remove</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-up-right-from-square" />
|
||||
</span>
|
||||
<span>Visit Link</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content has-text-centered" v-if="!hasCompleted">
|
||||
<p v-if="config.isConnected">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-success">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
<div class="content has-text-centered" v-if="!hasCompleted">
|
||||
<p v-if="config.isConnected">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-success">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
</span>
|
||||
<span>No downloads records.</span>
|
||||
</span>
|
||||
<span>No downloads records.</span>
|
||||
</span>
|
||||
</p>
|
||||
<p v-else>
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
|
||||
</p>
|
||||
<p v-else>
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
|
||||
</span>
|
||||
<span>Connecting...</span>
|
||||
</span>
|
||||
<span>Connecting...</span>
|
||||
</span>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed, ref, watch, defineEmits } from 'vue';
|
||||
import moment from "moment";
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
|
||||
|
||||
|
|
@ -187,6 +196,7 @@ const props = defineProps({
|
|||
|
||||
const selectedElms = ref([]);
|
||||
const masterSelectAll = ref(false);
|
||||
const showCompleted = useStorage('showCompleted', true)
|
||||
|
||||
watch(masterSelectAll, (value) => {
|
||||
for (const key in props.completed) {
|
||||
|
|
|
|||
|
|
@ -1,121 +1,129 @@
|
|||
<template>
|
||||
<h1 class="is-size-3">
|
||||
Queue
|
||||
<h1 class="is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
|
||||
<icon class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
|
||||
</span>
|
||||
<span>Queue</span>
|
||||
</icon>
|
||||
</h1>
|
||||
|
||||
<div class="columns has-text-centered" v-if="hasQueuedItems">
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
|
||||
<div v-if="showQueue">
|
||||
<div class="columns has-text-centered" v-if="hasQueuedItems">
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
|
||||
</span>
|
||||
<span v-if="!masterSelectAll">Select All</span>
|
||||
<span v-else>Unselect All</span>
|
||||
</span>
|
||||
<span v-if="!masterSelectAll">Select All</span>
|
||||
<span v-else>Unselect All</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
|
||||
@click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
|
||||
@click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</span>
|
||||
<span>Cancel Selected</span>
|
||||
</span>
|
||||
<span>Cancel Selected</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6" v-for="item in queue" :key="item._id">
|
||||
<div class="card">
|
||||
<header class="card-header el has-tooltip" :data-tooltip="item.title">
|
||||
<div class="card-header-title has-text-centered el is-block">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<div id="progress-bar" class="is-round">
|
||||
<div id="progress-percentage">{{ updateProgress(item) }}</div>
|
||||
<div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6" v-for="item in queue" :key="item._id">
|
||||
<div class="card">
|
||||
<header class="card-header el has-tooltip" :data-tooltip="item.title">
|
||||
<div class="card-header-title has-text-centered el is-block">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<div id="progress-bar" class="is-round">
|
||||
<div id="progress-percentage">{{ updateProgress(item) }}</div>
|
||||
<div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span class="icon-text">
|
||||
<span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
|
||||
<font-awesome-icon
|
||||
:icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
|
||||
</span>
|
||||
<span>{{ capitalize(item.status) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span :data-datetime="item.datetime"
|
||||
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
|
||||
{{ moment(item.datetime).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<label class="checkbox is-block">
|
||||
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
|
||||
Select
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span class="icon-text">
|
||||
<span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
|
||||
<font-awesome-icon
|
||||
:icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
|
||||
</span>
|
||||
<span>{{ capitalize(item.status) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<span :data-datetime="item.datetime"
|
||||
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
|
||||
{{ moment(item.datetime).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4 has-text-centered">
|
||||
<label class="checkbox is-block">
|
||||
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
|
||||
Select
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-trash-can" />
|
||||
</span>
|
||||
<span>Cancel</span>
|
||||
</span>
|
||||
<span>Cancel</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-up-right-from-square" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-up-right-from-square" />
|
||||
</span>
|
||||
<span>Visit Link</span>
|
||||
</span>
|
||||
<span>Visit Link</span>
|
||||
</span>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content has-text-centered" v-if="!hasQueuedItems">
|
||||
<p v-if="config.isConnected">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-success">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
<div class="content has-text-centered" v-if="!hasQueuedItems">
|
||||
<p v-if="config.isConnected">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-success">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-check" />
|
||||
</span>
|
||||
<span>No queued items.</span>
|
||||
</span>
|
||||
<span>No queued items.</span>
|
||||
</span>
|
||||
</p>
|
||||
<p v-else>
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
|
||||
</p>
|
||||
<p v-else>
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
|
||||
</span>
|
||||
<span>Connecting...</span>
|
||||
</span>
|
||||
<span>Connecting...</span>
|
||||
</span>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, ref, watch, computed } from 'vue';
|
||||
import moment from "moment";
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
defineEmits(['deleteItem']);
|
||||
|
||||
|
|
@ -132,6 +140,7 @@ const props = defineProps({
|
|||
|
||||
const selectedElms = ref([]);
|
||||
const masterSelectAll = ref(false);
|
||||
const showQueue = useStorage('showQueue', true)
|
||||
|
||||
watch(masterSelectAll, (value) => {
|
||||
for (const key in props.queue) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
|||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import {
|
||||
faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
|
||||
faSpinner, faWifi, faSignal
|
||||
faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
|
||||
|
|
@ -17,7 +17,7 @@ import './assets/css/bulma-dark.css'
|
|||
import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
|
||||
|
||||
library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
|
||||
faSquare, faSquareCheck, faSpinner, faWifi, faSignal)
|
||||
faSquare, faSquareCheck, faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,)
|
||||
const app = createApp(App);
|
||||
|
||||
app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);
|
||||
|
|
|
|||
Loading…
Reference in a new issue