docker-website/components/backup-restore.vue

<script>
export default {
  data: () => ({
    terminalContent: '',
    penpotClass: [],
    delugeClass: [],
    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.delugeClass = 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 () => {
        // pegaz backup
        if (i === 0) {
          const cmd = '$ pegaz backup\n'
          for (const y in cmd) {
            this.terminalContent += cmd[y]
            await this.delay(20)
          }
        }
        if (i === 1) {
          this.penpotClass = this.delugeClass = this.giteaClass = [...this.upClass, ...this.pauseClass]
        }
        if (i === 2) {
          this.penpotClass = [...this.compressingClass, ...this.pauseClass, 'rounded-l-xl', 'rounded-r-none']
          this.delugeClass = [...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' }

        // 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) {
          const cmd = '$ pegaz 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.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)
    }
  }
}
</script>

<template>
  <h2 class="title">
    Backup & restore
  </h2>
  <section class="pegaz-section">
    <Terminal :terminal-content="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"
      >
        <SvgPenpot :class="penpotClass" class="app--backup" />
        <SvgGitea :class="giteaClass" class="app--backup hidden md:block" />
        <SvgDeluge :class="delugeClass" 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>