docker-website/src/components/backup-restore.vue

<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 Terminal from 'Component/terminal.vue'

export default {
  components: { Penpot, Deluge, Gitea, Storj, Folder },
  data: () => ({
    terminalContent: '',
    penpotClass: [],
    delugeClass: [],
    folderClass: [],
    storjClass: [],
    progressBarClass: [],
    progressClass: '',
    startApps: '',
    endApps: '',
    upClass: ['animate-upApp', 'mx-2', 'md:mx-12'],
    downClass: [],
    pauseClass: [],
    compressingClass: [],
    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

      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 () => {
        // pegaz backup
        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.penpotClass = [...this.upClass, ...this.pauseClass]
          this.delugeClass = [...this.upClass, ...this.pauseClass]
          this.giteaClass = [...this.upClass, ...this.pauseClass]
        }
        if (i == 2) {
          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 == 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'

        // 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)
    },
  },
  async created() {
    this.demonstration()
  },
}
</script>

<template>
  <h2 class="title">Backup & restore</h2>
  <section class="pegaz-section">
    <Terminal :terminalContent="terminalContent" />
    <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" />
        <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 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>
  </section>
</template>