Added simple page transition.

This commit is contained in:
Abdulmhsen B. A. A.
2024-07-22 21:31:46 +03:00
parent 109d133837
commit 2fb9435367
28 changed files with 3807 additions and 3735 deletions

View File

@@ -180,3 +180,11 @@ body {
.is-text-contents {
display: contents;
}
.page-enter-active, .page-leave-active {
transition: opacity 0.2s ease;
}
.page-enter-from, .page-leave-to {
opacity: 0;
}

View File

@@ -286,12 +286,10 @@
</div>
</div>
<template v-if="!hasAPISettings">
<no-api/>
</template>
<template v-else>
<slot v-if="!showConnection && hasAPISettings"/>
</template>
<div>
<NuxtPage v-if="!showConnection && hasAPISettings"/>
<no-api v-else/>
</div>
<div class="columns is-multiline is-mobile mt-3">
<div class="column is-12 is-hidden-tablet has-text-centered">

View File

@@ -18,7 +18,7 @@ export default defineNuxtConfig({
],
},
buildAssetsDir: "assets",
pageTransition: {name: 'page', mode: 'out-in'}
},
router: {
options: {

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -21,7 +22,8 @@
<template v-if="isDeleting">
<div class="column is-12">
<Message message_class="has-background-warning-90 has-text-dark" title="Deleting..."
icon="fas fa-spin fa-exclamation-triangle" message="Delete operation is in progress. Please wait..."/>
icon="fas fa-spin fa-exclamation-triangle"
message="Delete operation is in progress. Please wait..."/>
</div>
</template>
<template v-else-if="isLoading">
@@ -62,6 +64,7 @@
</div>
</template>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -22,8 +23,10 @@
<Message title="For your information" message_class="has-background-warning-90 has-text-dark"
icon="fas fa-info-circle">
<p>
This backend is using accesstoken instead of API keys, And this method untested and may not work as expected.
Please make sure you know what you are doing. Simple operations like <code>Import</code>, <code>Export</code>
This backend is using accesstoken instead of API keys, And this method untested and may not work as
expected.
Please make sure you know what you are doing. Simple operations like <code>Import</code>,
<code>Export</code>
should work fine.
</p>
<p>
@@ -182,7 +185,8 @@
</div>
<p class="help">
<span v-if="'plex' === backend.type">
Plex doesn't use standard API practice for identifying users. They use <code>X-Plex-Token</code> to
Plex doesn't use standard API practice for identifying users. They use <code>X-Plex-Token</code>
to
identify the user. The user selected here will only be used for webhook matching and filtering.
</span>
<span v-else>
@@ -338,13 +342,13 @@
</form>
</div>
</div>
</div>
</template>
<script setup>
import 'assets/css/bulma-switch.css'
import {notification, ucFirst} from '~/utils/index.js'
import {ref} from "vue";
import Message from "~/components/Message.vue";
import {notification, ucFirst} from '~/utils/index'
import Message from '~/components/Message'
const id = useRoute().params.backend
const redirect = useRoute().query?.redirect ?? `/backend/${id}`

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline" v-if="isLoading || isError">
<div class="column is-12">
<Message message_class="is-background-info-90 has-text-dark" title="Loading" v-if="isLoading"
@@ -28,7 +29,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'" :to="`/backend/${backend}/delete`">
<NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'"
:to="`/backend/${backend}/delete`">
<span class="icon"><i class="fas fa-trash"></i></span>
</NuxtLink>
</p>
@@ -75,7 +77,8 @@
<div class="columns" v-if="bHistory.length<1">
<div class="column is-12">
<Message message_class="is-background-warning-80 has-text-dark" title="Warning" icon="fas fa-exclamation-circle"
<Message message_class="is-background-warning-80 has-text-dark" title="Warning"
icon="fas fa-exclamation-circle"
message="No items were found. There are probably no items in the local database yet."/>
</div>
</div>
@@ -152,12 +155,13 @@
</div>
</div>
</template>
</div>
</template>
<script setup>
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
import Message from '~/components/Message'
import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
const backend = ref(useRoute().params.backend)
const bHistory = ref([])

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -12,7 +13,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -88,12 +90,13 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import {notification} from '~/utils/index.js'
import {notification} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import request from '~/utils/request.js'
import request from '~/utils/request'
const backend = useRoute().params.backend
const items = ref([])

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -10,7 +11,8 @@
<div class="is-pulled-right" v-if="hasLooked">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -130,12 +132,13 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import {makeSearchLink, notification} from "~/utils/index.js";
import {useStorage} from "@vueuse/core";
import Message from "~/components/Message.vue";
import {makeSearchLink, notification} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import Message from '~/components/Message'
const backend = useRoute().params.backend
const items = ref([])

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -10,7 +11,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="searchContent(true)" :disabled="isLoading || !searchField || !query"
<button class="button is-info" @click="searchContent(true)"
:disabled="isLoading || !searchField || !query"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
@@ -192,14 +194,15 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import request from '~/utils/request.js'
import request from '~/utils/request'
import moment from 'moment'
import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import Message from "~/components/Message.vue";
import {useStorage} from "@vueuse/core";
import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import Message from '~/components/Message'
import {useStorage} from '@vueuse/core'
const route = useRoute()
const router = useRouter()

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -11,7 +12,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -59,10 +61,11 @@
</div>
</template>
</div>
</div>
</template>
<script setup>
import {formatDuration, notification} from "~/utils/index.js";
import {formatDuration, notification} from "~/utils/index";
const backend = useRoute().params.backend
const items = ref([])

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -124,10 +125,11 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
import {makeSearchLink, notification} from "~/utils/index.js";
import {makeSearchLink, notification} from '~/utils/index'
const backend = useRoute().params.backend
const items = ref([])

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -10,7 +11,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -75,7 +77,8 @@
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
<div class="notification-content content" v-if="show_page_tips">
<ul>
<li>For <code>Plex</code> backends, if the <code>X-Plex-Token</code> is limited one, the users will not show
<li>For <code>Plex</code> backends, if the <code>X-Plex-Token</code> is limited one, the users will not
show
up. This is a limitation of the Plex API.
</li>
</ul>
@@ -83,26 +86,17 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import moment from 'moment'
import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import request from '~/utils/request.js'
import moment from "moment";
import request from '~/utils/request'
const backend = useRoute().params.backend
const items = ref({
"id": 14138718,
"uuid": "145bdb152ed42627",
"name": "wowkise",
"admin": true,
"guest": false,
"restricted": false,
"updatedAt": "2024-05-22T12:47:41+03:00"
})
const items = ref()
const isLoading = ref(false)
const show_page_tips = useStorage('show_page_tips', true)
const loadContent = async () => {

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -14,7 +15,8 @@
</button>
</p>
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -37,7 +39,8 @@
icon="fas fa-exclamation-circle">
No backends found. Please add new backends to start using the tool. You can add new backend by
<NuxtLink @click="toggleForm=true" v-text="'clicking here'"/>
or by clicking the <span class="icon is-clickable" @click="toggleForm=true"><i class="fas fa-add"></i></span>
or by clicking the <span class="icon is-clickable" @click="toggleForm=true"><i
class="fas fa-add"></i></span>
button above.
</Message>
</div>
@@ -123,7 +126,8 @@
</div>
</div>
<div class="card-footer-item">
<NuxtLink :to="api_url + backend.urls.webhook" class="is-info is-light" @click.prevent="copyUrl(backend)">
<NuxtLink :to="api_url + backend.urls.webhook" class="is-info is-light"
@click.prevent="copyUrl(backend)">
<span class="icon"><i class="fas fa-copy"></i></span>
<span class="is-hidden-mobile">Copy Webhook URL</span>
<span class="is-hidden-tablet">Webhook</span>
@@ -165,6 +169,7 @@
</div>
</template>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -15,7 +16,8 @@
</button>
</p>
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -95,13 +97,14 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import request from '~/utils/request.js'
import request from '~/utils/request'
import moment from 'moment'
import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import Message from '~/components/Message.vue'
import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import Message from '~/components/Message'
import {useStorage} from '@vueuse/core'
useHead({title: 'Backups'})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<h1 class="title is-4">
@@ -56,7 +57,8 @@
<span class="icon-text">
<span class="icon has-text-danger"><i class="fas fa-exclamation-triangle"></i></span>
<span>Remove the <code>console</code> or <code>docker exec -ti watchstate console</code> from the
input. You should use the command directly, For example i.e <code>db:list --output yaml</code></span>
input. You should use the command directly, For example i.e <code>db:list --output
yaml</code></span>
</span>
</p>
<p class="help" v-if="hasPlaceholder">
@@ -105,6 +107,7 @@
<option v-for="item in recentCommands" :key="item" :value="item"/>
</datalist>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span id="env_page_title" class="title is-4">
@@ -135,7 +136,8 @@
</span>
</template>
</p>
<span class="card-header-icon" v-if="item.mask" @click="item.mask = false" v-tooltip="'Unmask the value'">
<span class="card-header-icon" v-if="item.mask" @click="item.mask = false"
v-tooltip="'Unmask the value'">
<span class="icon"><i class="fas fa-unlock"></i></span>
</span>
</header>
@@ -208,6 +210,7 @@
</div>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -274,20 +275,23 @@
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
<ul>
<li>
Events marked with <code>is Tainted: Yes</code>, are interesting but are too chaotic to be useful be used to
Events marked with <code>is Tainted: Yes</code>, are interesting but are too chaotic to be useful be used
to
determine play state. However, we do use them to update local metadata & play progress.
</li>
<li>
Events marked with <code>is Tainted: No</code>, are events that are used to determine play state.
</li>
<li>
If you are fast enough, you might be able to see the event before it is consumed by the backend. which allow
If you are fast enough, you might be able to see the event before it is consumed by the backend. which
allow
you to delete it from the queue if you desire.
</li>
</ul>
</Message>
</div>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<span class="title is-4">
@@ -458,10 +459,11 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import request from '~/utils/request.js'
import request from '~/utils/request'
import {
ag,
formatDuration,
@@ -471,10 +473,10 @@ import {
notification,
TOOLTIP_DATE_FORMAT,
ucFirst
} from '~/utils/index.js'
} from '~/utils/index'
import moment from 'moment'
import {useStorage} from "@vueuse/core";
import Message from "~/components/Message.vue";
import {useStorage} from '@vueuse/core'
import Message from '~/components/Message'
const id = useRoute().params.id

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -292,6 +293,7 @@
</div>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span id="env_page_title" class="title is-4">
@@ -277,15 +278,16 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import request from '~/utils/request.js'
import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import 'assets/css/bulma-switch.css'
import request from '~/utils/request'
import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import moment from 'moment'
import 'assets/css/bulma-switch.css'
import Message from "~/components/Message.vue";
import Message from '~/components/Message'
useHead({title: 'Ignored GUIDs'})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12">
<h1 class="title is-4">
@@ -105,6 +106,7 @@
</div>
</div>
</div>
</div>
</template>
<style scoped>
@@ -116,10 +118,10 @@
</style>
<script setup>
import request from '~/utils/request.js'
import request from '~/utils/request'
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index.js'
import Message from '~/components/Message'
import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index'
useHead({title: 'Index'})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -37,7 +38,8 @@
</p>
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -64,6 +66,7 @@
:message="error" :use-close="true" @close="router.push('/logs')"/>
</div>
</div>
</div>
</template>
<style scoped>
@@ -75,12 +78,11 @@
</style>
<script setup>
import Message from '~/components/Message.vue'
import Message from '~/components/Message'
import moment from 'moment'
import {useStorage} from '@vueuse/core'
import {notification} from '~/utils/index.js'
import request from '~/utils/request.js'
import {notification} from '~/utils/index'
import request from '~/utils/request'
const router = useRouter()
const filename = useRoute().params.filename

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<span class="title is-4">
@@ -8,7 +9,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -45,7 +47,8 @@
<div class="columns is-multiline is-mobile has-text-centered">
<div class="column is-6-mobile is-pre">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
<span class="has-tooltip"
v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment(item.modified).fromNow() }}
</span>
</div>
@@ -64,13 +67,14 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
import request from "~/utils/request.js";
import moment from "moment";
import {humanFileSize, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
import Message from "~/components/Message.vue";
import request from '~/utils/request'
import moment from 'moment'
import {humanFileSize, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import Message from '~/components/Message'
useHead({title: 'Logs'})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4 ">
@@ -265,6 +266,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -44,10 +45,11 @@
</template>
</div>
</div>
</div>
</template>
<script setup>
import {copyText} from '~/utils/index.js'
import {copyText} from '~/utils/index'
useHead({title: `System Report`})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -57,6 +58,7 @@
</div>
</template>
</div>
</div>
</template>
<script setup>

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span id="env_page_title" class="title is-4">
@@ -188,8 +189,10 @@
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fa fa-info-circle">
<ul>
<li>The log suppressor work on almost everything that <code>WatchState</code> output. However, there are some
exceptions. For example <code>system:suppress</code>, <code>system:report</code> command output will not be
<li>The log suppressor work on almost everything that <code>WatchState</code> output. However, there are
some
exceptions. For example <code>system:suppress</code>, <code>system:report</code> command output will not
be
filtered. If you find a a place where the rule supposed to work but it's not please report it on
<span class="icon-text is-underlined">
<span class="icon"><i class="fas fa-brands fa-discord"></i></span>
@@ -198,12 +201,14 @@
</span>
</span>, <strong>NOT</strong> on GitHub issues tracker.
</li>
<li>The use case for this feature, is that sometimes it's out of your hands to fix a problem, and the constant
<li>The use case for this feature, is that sometimes it's out of your hands to fix a problem, and the
constant
logging of the same error can be annoying. This feature allows you to suppress the error from being
shown/recorded.
</li>
<li>
Rule of thumb, it's less compute intensive to use <code>contains</code> type, than <code>regex</code> type.
Rule of thumb, it's less compute intensive to use <code>contains</code> type, than <code>regex</code>
type.
As each rule will be tested against every single outputted message. The less rules you have, the better.
Having many rules will lead to performance degradation.
</li>
@@ -211,14 +216,15 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>
import 'assets/css/bulma-switch.css'
import request from '~/utils/request.js'
import {notification} from '~/utils/index.js'
import request from '~/utils/request'
import {notification} from '~/utils/index'
import {useStorage} from '@vueuse/core'
import Message from '~/components/Message.vue'
import Message from '~/components/Message'
useHead({title: 'Log Suppressor'})

View File

@@ -1,4 +1,5 @@
<template>
<div>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
@@ -156,7 +157,8 @@
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
<ul>
<li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to run
<li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to
run
in background. As running them via web console will take longer if you have many backends and/or has large
libraries.
</li>
@@ -174,6 +176,7 @@
</Message>
</div>
</div>
</div>
</template>
<script setup>