barcode-frontend-backend-docker/docker-front/front/src/pages/Blank.vue

<template>
    <div class="aaaa" id="main" >
      <div style="width: 100vw; height: 100vh; margin: 0px">
        <div style="position: absolute; bottom: 30px; text-align: center">
          <q-progress style="width: 80vw; height: 30px; margin: 0 10vw" :percentage = "progress_percent" height="20px"
            animate/>
          <span style="align: center; width: 100vw"> {{texts.blank_loading}} </span>
        </div>
      </div>
    </div>
</template>

<script>
const queryString = require('query-string')
const api = require('../api.js')
const utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain,
  QSelect,
  QInput,
  QField,
  QProgress
} from 'quasar'

export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    QItemMain,
    QSelect,
    QInput,
    QField,
    QProgress
  },
  data () {
    return {
      processed: 0,
      total_process: 6,
      progress_percent: 0,
      texts: {}
    }
  },
  methods: {
    process_completed: function () {
      this.processed += 1
      this.progress_percent = this.processed * 100 / this.total_process
      if (this.processed === this.total_process) {
        this.$router.push('/')
      }
    }
  },
  mounted () {
    var self = this
    utils.getTexts()
      .then(data => { self.process_completed() })
    api.getAndSaveDetail('scanapp/{LANG}/product_hier/2/')
      .then(data => { self.process_completed()})
    api.getAndSaveDetail('scanapp/{LANG}/product_hier/1/')
      .then(data => { self.process_completed() })
    api.getAndSaveList('language/{LANG}/weight/')
      .then(data => { self.process_completed() })
    api.getAndSaveList('language/{LANG}/length/')
      .then(data => { self.process_completed() })
    api.getAndSaveList('language/{LANG}/languages/')
       .then(data => { self.process_completed() })
  }
}
</script>

<style lang="stylus" scoped>
#main {
  background-image: url('~assets/splash.jpg')
}

</style>