FEAT: backup & restore 1

2022-11-30 12:45:02 +01:00
parent 2736f2ff7c
commit 3127e60c04
53 changed files with 3550 additions and 248 deletions
--- a/src/components/backup-restore.vue
+++ b/src/components/backup-restore.vue
@@ -0,0 +1,134 @@
+<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 Rewind from 'Svg/rewind.vue'
+  import Terminal from 'Component/terminal.vue'
+
+  export default {
+    components: {Penpot, Deluge, Gitea, Rewind, Storj, Folder},
+    data: () => ({
+      terminalContent: '',
+      penpotClass: [],
+      delugeClass: [],
+      folderClass: [],
+      storjClass: ['hidden'],
+      progressBarClass: '',
+      progressClass: 'w-0',
+      startApps: 'w-full',
+      endApps: 'hidden',
+      upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
+      downClass: ['opacity-0', 'w-0', 'p-0'],
+      pauseClass: ['filter', 'grayscale'],
+      compressingClass: ['mx-0', 'rounded-none'],
+      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
+
+        let i = 0
+
+        this.timer = setInterval(async () => {
+          // up
+          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.progressClass = 'w-1/4'
+            this.penpotClass = [...this.upClass, ...this.pauseClass]
+            this.delugeClass = [...this.upClass, ...this.pauseClass]
+            this.giteaClass = [...this.upClass, ...this.pauseClass]
+          }
+          if (i == 2) this.progressClass = 'w-2/4'
+          if (i == 3) {
+            this.progressClass = 'w-3/4'
+            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 == 4) { 
+            this.folderClass = this.upClass
+            this.startApps = ['hidden']
+            this.endApps = ''
+            this.progressClass = 'w-full'
+          }
+
+          if (i == 5) this.progressBarClass = 'opacity-0'
+
+          if (i == 1) this.terminalContent += 'Pausing apps ... done\n'
+          if (i == 2) this.terminalContent += '[*] apps backup\n'
+          if (i == 3) this.terminalContent += '[*] compressing files\n'
+          if (i == 4) this.terminalContent += '[√] apps backup done\n'
+
+          if (i == 30) clearInterval(this.timer)
+          i += 1
+        }, 1000)
+      }
+    },
+    async created() {
+      this.demonstration()
+    },
+  }
+</script>
+
+<template>
+  <h2 class="text-3xl text-center mb-10">
+    Backup & restore :
+  </h2>
+  <section class="pegaz-section">
+    <Terminal :terminalContent="terminalContent" />
+    <div class="flex flex-col items-center w-1/2 h-full 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" />
+      </div>
+      <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>
+        <Storj class="hidden" :class="storjClass" />
+      </div>
+      <div class="flex justify-center w-full" :class="progressBarClass">
+        <div class="relative flex jus mt-12 w-44 rounded-full">
+          <span class="h-1 w-full absolute bg-black opacity-10"></span>
+          <span class="h-1 absolute bg-green-400 transition-all duration-1000" :class="progressClass"></span>
+        </div>
+      </div>
+    </div>
+    <transition
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="transform opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <div
+        @click="demonstration"
+        v-if="isDemonstrationEnded"
+        class="bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all rounded-full p-8 lg:p-20 md:p-12 absolute cursor-pointer focus:p-18 shadow-2xl z-50">
+        <Rewind class="text-white" />
+      </div>
+    </transition>
+  </section>
+</template>