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

<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" />
        <SvgPenpot :class="giteaClass" class="app--backup hidden md:block" />
        <SvgNextcloud :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>
<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,
    timer: null
  }),

  mounted() {
    this.demonstration()
  },

  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

  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
        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
          this.progressClass = 'w-0'
          this.terminalContent = ''
          i = 0
        }
      }, 1000)
    }
  }
}
</script>

<style>
code {
  display: block;
  /* pour gérer le scroll */
  overflow-x: auto;
  /* scroll horizontal si nécessaire */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE et Edge */
}

code::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}
</style>