drop old app & fix homepage js

app/components/backup-restore.vue

@@ -14,16 +14,26 @@ export default {
     downClass: [],
     pauseClass: [],
     compressingClass: [],
-    isDemonstrationEnded: false
+    isDemonstrationEnded: false,
+    timer: null
   }),
-  created () {
+
+  mounted() {
     this.demonstration()
   },
+
+  beforeUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+
   methods: {
-    delay (time) {
+    delay(time) {
       return new Promise(resolve => setTimeout(resolve, time))
     },
-    demonstration () {
+
+    demonstration() {
       this.isDemonstrationEnded = false
       this.terminalContent = ''
       this.folderClass = this.storjClass = this.downClass
@@ -76,10 +86,6 @@ export default {
         if (i === 5) { this.terminalContent += '[√] apps backup done\n' }
 
         // docker-web restore
-
-        // this.progressClass = 'w-0'
-        // this.startApps = 'w-full'
-
         if (i === 7) { this.terminalContent = '' }
         if (i === 7) { this.progressClass = 'w-0' }
 
@@ -117,52 +123,14 @@ export default {
 
         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 }
+        if (i === 15) {
+          this.isDemonstrationEnded = true
+          this.progressClass = 'w-0'
+          this.terminalContent = ''
+          i = 0
+        }
       }, 1000)
     }
   }
 }
 </script>
-
-<template>
-  <h2 class="title">
-    Backup & restore
-  </h2>
-  <section class="docker-web-section">
-    <Terminal :terminal-content="terminalContent" />
-    <div
-      class="flex flex-col items-center md:w-3/4 lg:w-1/2 h-20 relative rounded-b-xl transition-all"
-    >
-      <div
-        class="flex transition-all justify-center duration-1000"
-        :class="startApps"
-      >
-        <SvgGitea :class="penpotClass" class="app--backup" />
-        <SvgDrone :class="giteaClass" class="app--backup hidden md:block" />
-        <SvgPlausible :class="plausibleClass" class="app--backup" />
-      </div>
-      <div :class="endApps">
-        <div class="app" :class="folderClass">
-          <SvgFolder class="text-yellow-400" />
-          <div class="-mt-7 text-sm text-center">
-            tar.gz
-          </div>
-        </div>
-        <SvgStorj 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
-          class="h-2 absolute rounded-full bg-green-400 transition-all duration-1000"
-          :class="progressClass"
-        />
-      </div>
-    </div>
-  </section>
-</template>