opnform-host-nginx/client/stores/app.js

import { defineStore } from "pinia"
import { nextTick } from "vue"

export const useAppStore = defineStore("app", {
  state: () => ({
    layout: "default",
    navbarHidden: false,

    // App Loader
    loader: {
      percent: 0,
      show: false,
      canSuccess: true,
      duration: 3000,
      _timer: null,
      _cut: null,
    },
  }),
  actions: {
    hideNavbar() {
      this.navbarHidden = true
    },
    showNavbar() {
      this.navbarHidden = false
    },
    setLayout(layout) {
      this.layout = layout ?? "default"
    },
    loaderIncrease(num) {
      this.loader.percent = this.loader.percent + Math.floor(num)
    },
    loaderDecrease(num) {
      this.loader.percent = this.loader.percent - Math.floor(num)
    },
    loaderFinish() {
      this.loader.percent = 100
      this.loaderHide()
    },
    loaderSetTimer(timerVal) {
      this.loader._timer = timerVal
    },
    loaderPause() {
      clearInterval(this.loader._timer)
    },
    loaderHide() {
      this.loaderPause()
      this.loader._timer = null
      setTimeout(() => {
        this.loader.show = false
        nextTick(() => {
          setTimeout(() => {
            this.loader.percent = 0
          }, 200)
        })
      }, 500)
    },
    loaderFail() {
      this.loader.canSuccess = false
    },
    loaderStart() {
      this.loader.show = true
      this.loader.canSuccess = true
      if (this.loader._timer) {
        clearInterval(this.loader._timer)
        this.loader.percent = 0
      }
      this.loader._cut = 10000 / Math.floor(this.loader.duration)

      this.loaderSetTimer(
        setInterval(() => {
          this.loaderIncrease(this.loader._cut * Math.random())
          if (this.loader.percent > 95) {
            this.loaderFinish()
          }
        }, 100),
      )
    },
  },
})