FEAT: backup/restore v2 & disclaimer v1

src/components/backup-restore.vue

@@ -4,25 +4,24 @@
   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},
+    components: {Penpot, Deluge, Gitea, Storj, Folder},
     data: () => ({
       terminalContent: '',
       penpotClass: [],
       delugeClass: [],
       folderClass: [],
-      storjClass: ['hidden'],
-      progressBarClass: '',
-      progressClass: 'w-0',
-      startApps: 'w-full',
-      endApps: 'hidden',
+      storjClass: [],
+      progressBarClass: [],
+      progressClass: '',
+      startApps: '',
+      endApps: '',
       upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
-      downClass: ['opacity-0', 'w-0', 'p-0'],
-      pauseClass: ['filter', 'grayscale'],
-      compressingClass: ['mx-0', 'rounded-none'],
+      downClass: [],
+      pauseClass: [],
+      compressingClass: [],
       isDemonstrationEnded: false,
     }),
     methods: {
@@ -35,10 +34,20 @@
         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 () => {
-          // up
+          // pegaz backup
           if (i == 0) {
             let cmd = '$ pegaz backup\n'
             for (let y in cmd) {
@@ -47,14 +56,11 @@
             }
           }
           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'
+          if (i == 2) {
             this.penpotClass = [...this.compressingClass, ...this.pauseClass]
             this.delugeClass = [...this.compressingClass, ...this.pauseClass]
             this.giteaClass = [...this.compressingClass, ...this.pauseClass]
@@ -62,22 +68,69 @@
             this.delugeClass.push('rounded-r-xl', 'rounded-l-none')
             this.startApps = 'w-16'
           }
-          if (i == 4) { 
+          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 = ''
-            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 == 2) this.terminalContent += '[*] compressing files\n'
+          if (i == 4) this.terminalContent += 'Unpausing apps ... done\n'
+          if (i == 5) this.terminalContent += '[√] apps backup done\n'
 
-          if (i == 30) clearInterval(this.timer)
+          // 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)
       }
     },
@@ -88,12 +141,12 @@
 </script>
 
 <template>
-  <h2 class="text-3xl text-center mb-10">
-    Backup & restore :
+  <h2 class="title">
+    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 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" />
@@ -108,27 +161,10 @@
         </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 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>
       </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>