update with nuxt4 for docker-web

2025-08-29 16:08:08 +02:00
parent 2db113a0c5
commit f0e2aa237a
65 changed files with 10747 additions and 22132 deletions
--- a/app/components/backup-restore.vue
+++ b/app/components/backup-restore.vue
@@ -0,0 +1,168 @@
+<script>
+export default {
+  data: () => ({
+    terminalContent: '',
+    penpotClass: [],
+    plausibleClass: [],
+    folderClass: [],
+    storjClass: [],
+    progressBarClass: [],
+    progressClass: '',
+    startApps: '',
+    endApps: '',
+    upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
+    downClass: [],
+    pauseClass: [],
+    compressingClass: [],
+    isDemonstrationEnded: false
+  }),
+  created () {
+    this.demonstration()
+  },
+  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.plausibleClass = this.giteaClass = [...this.upClass, 'rounded-xl']
+
+      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', 'rounded-xl']
+      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 () => {
+        // docker-web backup
+        if (i === 0) {
+          const cmd = '$ docker-web backup\n'
+          for (const y in cmd) {
+            this.terminalContent += cmd[y]
+            await this.delay(20)
+          }
+        }
+        if (i === 1) {
+          this.penpotClass = this.plausibleClass = this.giteaClass = [...this.upClass, ...this.pauseClass]
+        }
+        if (i === 2) {
+          this.penpotClass = [...this.compressingClass, ...this.pauseClass, 'rounded-l-xl', 'rounded-r-none']
+          this.plausibleClass = [...this.compressingClass, ...this.pauseClass, 'rounded-r-xl', 'rounded-l-none']
+          this.giteaClass = [...this.compressingClass, ...this.pauseClass]
+          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' }
+
+        // docker-web restore
+
+        // this.progressClass = 'w-0'
+        // this.startApps = 'w-full'
+
+        if (i === 7) { this.terminalContent = '' }
+        if (i === 7) { this.progressClass = 'w-0' }
+
+        if (i === 8) {
+          const cmd = '$ docker-web restore\n'
+          for (const 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.plausibleClass = [...this.upClass, ...this.pauseClass]
+          this.giteaClass = [...this.upClass, ...this.pauseClass]
+        }
+        if (i === 13) {
+          this.penpotClass = [...this.upClass]
+          this.plausibleClass = [...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)
+    }
+  }
+}
+</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>