drop old app & fix homepage js

app/components/applications-list.vue

@@ -6,18 +6,10 @@ export default {
         name: 'Transmission',
         component: resolveComponent('SvgTransmission')
       },
-      {
-        name: 'Drone',
-        component: resolveComponent('SvgDrone')
-      },
       {
         name: 'Gitea',
         component: resolveComponent('SvgGitea')
       },
-      {
-        name: 'Hoppscotch',
-        component: resolveComponent('SvgHoppscotch')
-      },
       {
         name: 'Jellyfin',
         component: resolveComponent('SvgJellyfin')
@@ -25,14 +17,6 @@ export default {
       {
         name: 'Nextcloud',
         component: resolveComponent('SvgNextcloud')
-      },
-      {
-        name: 'Plausible',
-        component: resolveComponent('SvgPlausible')
-      },
-      {
-        name: 'Penpot',
-        component: resolveComponent('SvgPenpot')
       }
     ]
   })
@@ -46,13 +30,9 @@ export default {
     </h2>
     <ul class="flex justify-center p-2 max-w-full flex-wrap">
       <li v-for="app in apps" :key="app" class="m-4">
-        <a
-          :href="
-            'https://github.com/docker-web/docker-web/tree/master/apps/' +
-              app.name.toLowerCase()
-          "
-          :title="app.name"
-        >
+        <a :href="'https://github.com/docker-web/docker-web/tree/master/apps/' +
+          app.name.toLowerCase()
+          " :title="app.name">
           <component :is="app.component" class="app hover:scale-110" />
         </a>
       </li>

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>