Added simple page transition.
This commit is contained in:
Abdulmhsen B. A. A.
@@ -1,107 +1,110 @@
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-sd-card"></i></span>
|
||||
Backups
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" @click="queueTask" :disabled="isLoading"
|
||||
:class="{'is-loading':isLoading, 'is-primary':!queued, 'is-danger':queued}">
|
||||
<span class="icon"><i class="fas fa-sd-card"></i></span>
|
||||
<span>{{ !queued ? 'Queue backup' : 'Remove from queue' }}</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">
|
||||
This page contains all of your manually generated and automatic backups.
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-sd-card"></i></span>
|
||||
Backups
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="items.length < 1 || isLoading">
|
||||
<Message v-if="isLoading" message_class="is-background-info-90 has-text-dark" icon="fas fa-spinner fa-spin"
|
||||
title="Loading" message="Loading data. Please wait..."/>
|
||||
<Message v-else title="Warning" message_class="is-background-warning-80 has-text-dark"
|
||||
icon="fas fa-exclamation-triangle">
|
||||
No backups found.
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet" v-for="(item, index) in items" :key="'backup-'+index">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title is-text-overflow pr-1">
|
||||
<span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i> </span>
|
||||
<span>
|
||||
<NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
|
||||
</span>
|
||||
</p>
|
||||
<span class="card-header-icon">
|
||||
<NuxtLink @click="deleteFile(item)" class="has-text-danger" v-tooltip="'Delete this backup file.'">
|
||||
<span class="icon"><i class="fas fa-trash"></i></span>
|
||||
</NuxtLink>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" @click="queueTask" :disabled="isLoading"
|
||||
:class="{'is-loading':isLoading, 'is-primary':!queued, 'is-danger':queued}">
|
||||
<span class="icon"><i class="fas fa-sd-card"></i></span>
|
||||
<span>{{ !queued ? 'Queue backup' : 'Remove from queue' }}</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">
|
||||
This page contains all of your manually generated and automatic backups.
|
||||
</span>
|
||||
</header>
|
||||
<div class="card-footer-item">
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-calendar"></i> </span>
|
||||
<span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.date).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ moment(item.date).fromNow() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="items.length < 1 || isLoading">
|
||||
<Message v-if="isLoading" message_class="is-background-info-90 has-text-dark" icon="fas fa-spinner fa-spin"
|
||||
title="Loading" message="Loading data. Please wait..."/>
|
||||
<Message v-else title="Warning" message_class="is-background-warning-80 has-text-dark"
|
||||
icon="fas fa-exclamation-triangle">
|
||||
No backups found.
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet" v-for="(item, index) in items" :key="'backup-'+index">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title is-text-overflow pr-1">
|
||||
<span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i> </span>
|
||||
<span>
|
||||
<NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
|
||||
</span>
|
||||
</p>
|
||||
<span class="card-header-icon">
|
||||
<NuxtLink @click="deleteFile(item)" class="has-text-danger" v-tooltip="'Delete this backup file.'">
|
||||
<span class="icon"><i class="fas fa-trash"></i></span>
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-hdd"></i> </span>
|
||||
<span>{{ humanFileSize(item.size) }}</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-tag"></i> </span>
|
||||
<span class="is-capitalized">{{ item.type }}</span>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-calendar"></i> </span>
|
||||
<span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.date).format(TOOLTIP_DATE_FORMAT)}`">
|
||||
{{ moment(item.date).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-hdd"></i> </span>
|
||||
<span>{{ humanFileSize(item.size) }}</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-tag"></i> </span>
|
||||
<span class="is-capitalized">{{ item.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<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>
|
||||
Backups that are tagged <code>Automatic</code> are subject to auto deletion after <code>9</code> days from
|
||||
the date of creation.
|
||||
</li>
|
||||
<li>
|
||||
You can trigger a backup task to run in the background by clicking the
|
||||
<code><span class="icon"><i class="fas fa-sd-card"></i></span> Queue backup</code> button. on top right.
|
||||
Those backups will be tagged as <code>Automatic</code>.
|
||||
</li>
|
||||
<li>
|
||||
To generate a manual backup, you need to use the <code>state:backup</code> command from the console.
|
||||
or by <span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<NuxtLink :to="makeConsoleCommand('state:backup -s [backend] --file /config/backup/[file]')"
|
||||
v-text="'Web Console'"/>
|
||||
page.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
<div class="column is-12">
|
||||
<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>
|
||||
Backups that are tagged <code>Automatic</code> are subject to auto deletion after <code>9</code> days from
|
||||
the date of creation.
|
||||
</li>
|
||||
<li>
|
||||
You can trigger a backup task to run in the background by clicking the
|
||||
<code><span class="icon"><i class="fas fa-sd-card"></i></span> Queue backup</code> button. on top right.
|
||||
Those backups will be tagged as <code>Automatic</code>.
|
||||
</li>
|
||||
<li>
|
||||
To generate a manual backup, you need to use the <code>state:backup</code> command from the console.
|
||||
or by <span class="icon"><i class="fas fa-terminal"></i></span>
|
||||
<NuxtLink :to="makeConsoleCommand('state:backup -s [backend] --file /config/backup/[file]')"
|
||||
v-text="'Web Console'"/>
|
||||
page.
|
||||
</li>
|
||||
</ul>
|
||||
</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'})
|
||||
|
||||
Reference in New Issue
Block a user