FEAT: add rss & eslint & typescript
This commit is contained in:
prosety
@@ -1,153 +1,156 @@
|
||||
<script>
|
||||
import Penpot from 'Svg/apps/penpot.vue'
|
||||
import Deluge from 'Svg/apps/deluge.vue'
|
||||
import Gitea from 'Svg/apps/gitea.vue'
|
||||
import Folder from 'Svg/folder.vue'
|
||||
import Storj from 'Svg/storj.vue'
|
||||
import Terminal from 'Component/terminal.vue'
|
||||
import Penpot from 'Svg/apps/penpot.vue'
|
||||
import Deluge from 'Svg/apps/deluge.vue'
|
||||
import Gitea from 'Svg/apps/gitea.vue'
|
||||
import Folder from 'Svg/folder.vue'
|
||||
import Storj from 'Svg/storj.vue'
|
||||
import Terminal from 'Component/terminal.vue'
|
||||
|
||||
export default {
|
||||
components: {Penpot, Deluge, Gitea, Storj, Folder},
|
||||
data: () => ({
|
||||
terminalContent: '',
|
||||
penpotClass: [],
|
||||
delugeClass: [],
|
||||
folderClass: [],
|
||||
storjClass: [],
|
||||
progressBarClass: [],
|
||||
progressClass: '',
|
||||
startApps: '',
|
||||
endApps: '',
|
||||
upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
|
||||
downClass: [],
|
||||
pauseClass: [],
|
||||
compressingClass: [],
|
||||
isDemonstrationEnded: false,
|
||||
}),
|
||||
methods: {
|
||||
delay(time) {
|
||||
return new Promise(resolve => setTimeout(resolve, time))
|
||||
},
|
||||
demonstration() {
|
||||
this.isDemonstrationEnded = false
|
||||
this.terminalContent = ''
|
||||
this.folderClass = this.storjClass = this.downClass
|
||||
this.penpotClass = this.delugeClass = this.giteaClass = this.upClass
|
||||
|
||||
this.storjClass = ['hidden']
|
||||
this.progressBarClass = ['opacity-0']
|
||||
this.progressClass = 'w-0'
|
||||
this.startApps = 'w-full'
|
||||
this.endApps = 'hidden'
|
||||
this.upClass = ['animate-upApp', 'mx-2', 'md:mx-12']
|
||||
this.downClass = ['opacity-0', 'w-0', 'p-0', 'h-0']
|
||||
this.pauseClass = ['filter', 'grayscale']
|
||||
this.compressingClass = ['mx-0', 'rounded-none']
|
||||
|
||||
let i = 0
|
||||
|
||||
this.timer = setInterval(async () => {
|
||||
// pegaz backup
|
||||
if (i == 0) {
|
||||
let cmd = '$ pegaz backup\n'
|
||||
for (let y in cmd) {
|
||||
this.terminalContent += cmd[y]
|
||||
await this.delay(20)
|
||||
}
|
||||
}
|
||||
if (i == 1) {
|
||||
this.penpotClass = [...this.upClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.upClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.upClass, ...this.pauseClass]
|
||||
}
|
||||
if (i == 2) {
|
||||
this.penpotClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.penpotClass.push('rounded-l-xl', 'rounded-r-none')
|
||||
this.delugeClass.push('rounded-r-xl', 'rounded-l-none')
|
||||
this.startApps = 'w-16'
|
||||
}
|
||||
if (i == 3) {
|
||||
this.progressBarClass = 'opacity-100'
|
||||
this.progressClass = 'w-full'
|
||||
}
|
||||
if (i == 5) {
|
||||
this.progressBarClass = 'opacity-0'
|
||||
this.folderClass = this.upClass
|
||||
this.startApps = ['hidden']
|
||||
this.endApps = ''
|
||||
}
|
||||
|
||||
if (i == 1) this.terminalContent += 'Pausing apps ... done\n'
|
||||
if (i == 2) this.terminalContent += '[*] compressing files\n'
|
||||
if (i == 4) this.terminalContent += 'Unpausing apps ... done\n'
|
||||
if (i == 5) this.terminalContent += '[√] apps backup done\n'
|
||||
|
||||
// pegaz restore
|
||||
|
||||
// this.progressClass = 'w-0'
|
||||
// this.startApps = 'w-full'
|
||||
|
||||
if (i == 7) this.terminalContent = ''
|
||||
if (i == 7) this.progressClass = 'w-0'
|
||||
|
||||
if (i == 8) {
|
||||
let cmd = '$ pegaz restore\n'
|
||||
for (let y in cmd) {
|
||||
this.terminalContent += cmd[y]
|
||||
await this.delay(20)
|
||||
}
|
||||
}
|
||||
if (i == 10) {
|
||||
this.progressBarClass = 'opacity-100'
|
||||
this.progressClass = 'w-full'
|
||||
}
|
||||
if (i == 11) {
|
||||
this.folderClass = this.downClass
|
||||
this.progressBarClass = 'opacity-0'
|
||||
this.startApps = 'w-full'
|
||||
}
|
||||
if (i == 11) {
|
||||
this.penpotClass = [...this.upClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.upClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.upClass, ...this.pauseClass]
|
||||
}
|
||||
if (i == 13) {
|
||||
this.penpotClass = [...this.upClass]
|
||||
this.delugeClass = [...this.upClass]
|
||||
this.giteaClass = [...this.upClass]
|
||||
}
|
||||
|
||||
if (i == 9) this.terminalContent += 'Stoping apps ... done\n'
|
||||
if (i == 10) this.terminalContent += '[*] uncompressing files\n'
|
||||
if (i == 12) this.terminalContent += '[*] starting apps ...done\n'
|
||||
if (i == 13) this.terminalContent += '[√] apps restore done\n'
|
||||
|
||||
i += 1
|
||||
|
||||
if (i == 15) this.isDemonstrationEnded = true
|
||||
if (i == 15) this.progressClass = 'w-0'
|
||||
if (i == 15) this.terminalContent = ''
|
||||
// if (i == 15) clearInterval(this.timer)
|
||||
if (i == 15) i = 0
|
||||
}, 1000)
|
||||
}
|
||||
export default {
|
||||
components: { Penpot, Deluge, Gitea, Storj, Folder },
|
||||
data: () => ({
|
||||
terminalContent: '',
|
||||
penpotClass: [],
|
||||
delugeClass: [],
|
||||
folderClass: [],
|
||||
storjClass: [],
|
||||
progressBarClass: [],
|
||||
progressClass: '',
|
||||
startApps: '',
|
||||
endApps: '',
|
||||
upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
|
||||
downClass: [],
|
||||
pauseClass: [],
|
||||
compressingClass: [],
|
||||
isDemonstrationEnded: false,
|
||||
}),
|
||||
methods: {
|
||||
delay(time) {
|
||||
return new Promise((resolve) => setTimeout(resolve, time))
|
||||
},
|
||||
async created() {
|
||||
this.demonstration()
|
||||
demonstration() {
|
||||
this.isDemonstrationEnded = false
|
||||
this.terminalContent = ''
|
||||
this.folderClass = this.storjClass = this.downClass
|
||||
this.penpotClass = this.delugeClass = this.giteaClass = this.upClass
|
||||
|
||||
this.storjClass = ['hidden']
|
||||
this.progressBarClass = ['opacity-0']
|
||||
this.progressClass = 'w-0'
|
||||
this.startApps = 'w-full'
|
||||
this.endApps = 'hidden'
|
||||
this.upClass = ['animate-upApp', 'mx-2', 'md:mx-12']
|
||||
this.downClass = ['opacity-0', 'w-0', 'p-0', 'h-0']
|
||||
this.pauseClass = ['filter', 'grayscale']
|
||||
this.compressingClass = ['mx-0', 'rounded-none']
|
||||
|
||||
let i = 0
|
||||
|
||||
this.timer = setInterval(async () => {
|
||||
// pegaz backup
|
||||
if (i == 0) {
|
||||
let cmd = '$ pegaz backup\n'
|
||||
for (let y in cmd) {
|
||||
this.terminalContent += cmd[y]
|
||||
await this.delay(20)
|
||||
}
|
||||
}
|
||||
if (i == 1) {
|
||||
this.penpotClass = [...this.upClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.upClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.upClass, ...this.pauseClass]
|
||||
}
|
||||
if (i == 2) {
|
||||
this.penpotClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.compressingClass, ...this.pauseClass]
|
||||
this.penpotClass.push('rounded-l-xl', 'rounded-r-none')
|
||||
this.delugeClass.push('rounded-r-xl', 'rounded-l-none')
|
||||
this.startApps = 'w-16'
|
||||
}
|
||||
if (i == 3) {
|
||||
this.progressBarClass = 'opacity-100'
|
||||
this.progressClass = 'w-full'
|
||||
}
|
||||
if (i == 5) {
|
||||
this.progressBarClass = 'opacity-0'
|
||||
this.folderClass = this.upClass
|
||||
this.startApps = ['hidden']
|
||||
this.endApps = ''
|
||||
}
|
||||
|
||||
if (i == 1) this.terminalContent += 'Pausing apps ... done\n'
|
||||
if (i == 2) this.terminalContent += '[*] compressing files\n'
|
||||
if (i == 4) this.terminalContent += 'Unpausing apps ... done\n'
|
||||
if (i == 5) this.terminalContent += '[√] apps backup done\n'
|
||||
|
||||
// pegaz restore
|
||||
|
||||
// this.progressClass = 'w-0'
|
||||
// this.startApps = 'w-full'
|
||||
|
||||
if (i == 7) this.terminalContent = ''
|
||||
if (i == 7) this.progressClass = 'w-0'
|
||||
|
||||
if (i == 8) {
|
||||
let cmd = '$ pegaz restore\n'
|
||||
for (let y in cmd) {
|
||||
this.terminalContent += cmd[y]
|
||||
await this.delay(20)
|
||||
}
|
||||
}
|
||||
if (i == 10) {
|
||||
this.progressBarClass = 'opacity-100'
|
||||
this.progressClass = 'w-full'
|
||||
}
|
||||
if (i == 11) {
|
||||
this.folderClass = this.downClass
|
||||
this.progressBarClass = 'opacity-0'
|
||||
this.startApps = 'w-full'
|
||||
}
|
||||
if (i == 11) {
|
||||
this.penpotClass = [...this.upClass, ...this.pauseClass]
|
||||
this.delugeClass = [...this.upClass, ...this.pauseClass]
|
||||
this.giteaClass = [...this.upClass, ...this.pauseClass]
|
||||
}
|
||||
if (i == 13) {
|
||||
this.penpotClass = [...this.upClass]
|
||||
this.delugeClass = [...this.upClass]
|
||||
this.giteaClass = [...this.upClass]
|
||||
}
|
||||
|
||||
if (i == 9) this.terminalContent += 'Stoping apps ... done\n'
|
||||
if (i == 10) this.terminalContent += '[*] uncompressing files\n'
|
||||
if (i == 12) this.terminalContent += '[*] starting apps ...done\n'
|
||||
if (i == 13) this.terminalContent += '[√] apps restore done\n'
|
||||
|
||||
i += 1
|
||||
|
||||
if (i == 15) this.isDemonstrationEnded = true
|
||||
if (i == 15) this.progressClass = 'w-0'
|
||||
if (i == 15) this.terminalContent = ''
|
||||
// if (i == 15) clearInterval(this.timer)
|
||||
if (i == 15) i = 0
|
||||
}, 1000)
|
||||
},
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.demonstration()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2 class="title">
|
||||
Backup & restore
|
||||
</h2>
|
||||
<h2 class="title">Backup & restore</h2>
|
||||
<section class="pegaz-section">
|
||||
<Terminal :terminalContent="terminalContent" />
|
||||
<div class="flex flex-col items-center w-1/2 h-20 relative rounded-b-xl transition-all">
|
||||
<div class="flex transition-all justify-center duration-1000" :class="startApps">
|
||||
<div
|
||||
class="flex flex-col items-center w-1/2 h-20 relative rounded-b-xl transition-all"
|
||||
>
|
||||
<div
|
||||
class="flex transition-all justify-center duration-1000"
|
||||
:class="startApps"
|
||||
>
|
||||
<Penpot :class="penpotClass" class="app app--backup" />
|
||||
<Gitea :class="giteaClass" class="app app--backup hidden md:block" />
|
||||
<Deluge :class="delugeClass" class="app app--backup" />
|
||||
@@ -155,15 +158,18 @@
|
||||
<div :class="endApps">
|
||||
<div class="app" :class="folderClass">
|
||||
<Folder class="text-yellow-400" />
|
||||
<div class="-mt-7 text-sm text-center">
|
||||
tar.gz
|
||||
</div>
|
||||
<div class="-mt-7 text-sm text-center">tar.gz</div>
|
||||
</div>
|
||||
<Storj class="hidden" :class="storjClass" />
|
||||
</div>
|
||||
<div class="flex mt-10 w-14 absolute" :class="progressBarClass">
|
||||
<span class="h-2 w-full absolute bg-black rounded-full opacity-10"></span>
|
||||
<span class="h-2 absolute rounded-full bg-green-400 transition-all duration-1000" :class="progressClass"></span>
|
||||
<span
|
||||
class="h-2 w-full absolute bg-black rounded-full opacity-10"
|
||||
></span>
|
||||
<span
|
||||
class="h-2 absolute rounded-full bg-green-400 transition-all duration-1000"
|
||||
:class="progressClass"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user