somewhere

components/GlobalComponents/AppInstallDialog.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="pwa_dialog">
+    <div class="dialog-wrapper">
+      <div class="txt">
+        <p>با نصب برنامه تحت وب آسان سرویس سریع تر به پنل کاربری خود دسترسی داشته باشید!</p>
+      </div>
+      <div class="btns">
+        <button id="installPWA" class="btn btn-secondary secondary-reverse">نصب کن</button>
+        <button id="closePwaDialog" class="btn btn-secondary cancel">فعلا نه!</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PwaDialog'
+}
+</script>

components/GlobalComponents/Hero.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="hero">
+    <div class="bg">
+      <div class="container">
+        <h2>{{ title }}</h2>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeroComponent',
+  props: {
+    title: {
+      required: true,
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

components/GlobalComponents/LotteryPopUp.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="lottery">
+    <div
+      v-if="!lotteryPopUpBtn || lotteryPopUpBtn.visible"
+      class="lottery-popup-button"
+      :style="[buttonStyle, { transform: btnScale }]"
+      @click="showPopup"
+    ></div>
+
+    <div class="lottery-popup">
+      <div class="relatevePos">
+        <div class="bg" @click="closePopup"></div>
+        <div class="content" :style="[popUpStyle]">
+          <div class="relativePos">
+            <i class="closeBtn far fa-times-circle" @click="closePopup"></i>
+            <div class="btnBox" @click="closePopup">
+              <nuxt-link
+                v-if="lastLottery && lastLottery.expired"
+                :to="{ name: 'lottery', query: { mode: 'result' } }"
+                class="btn btn-primary"
+                >مشاهده نتایج قرعه کشی</nuxt-link
+              >
+              <nuxt-link v-else :to="{ name: 'lottery', query: { mode: 'enroll' } }" class="btn btn-primary"
+                >شرکت در قرعه کشی</nuxt-link
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LotteryPopUp',
+  data() {
+    return {
+      lotteryPopUpBtn: null,
+      lastLottery: null,
+      btnScale: 'scale(0)',
+      isPopupOpen: false
+    }
+  },
+  computed: {
+    buttonStyle() {
+      const btn = this.lotteryPopUpBtn
+      const data = {
+        bottom: btn?.y.toString().concat('px') || 0,
+        left: btn?.x.toString().concat('px') || 0,
+        width: btn?.w.toString().concat('px') || 0,
+        height: btn?.h.toString().concat('px') || 0
+      }
+      if (btn) data.backgroundImage = `url(${btn?.bgImg})`
+      return data
+    },
+    popUpStyle() {
+      const popup = this.lastLottery
+      const data = {}
+
+      if (popup) {
+        if (!popup.expired) {
+          data.backgroundImage = `url(${popup?.entryBgImg})`
+          data.width = popup.entryWidth.toString().concat('px')
+          data.height = popup.entryHeight.toString().concat('px')
+        } else {
+          data.backgroundImage = `url(${popup?.resultBgImg})`
+          data.width = popup.resultWidth.toString().concat('px')
+          data.height = popup.resultHeight.toString().concat('px')
+        }
+      }
+
+      return data
+    }
+  },
+  watch: {
+    buttonStyle(neVal, oldVal) {
+      setTimeout(() => (this.btnScale = 'scale(1)'), 1 * 1000)
+    }
+  },
+  async mounted() {
+    // attach esc key to window
+    $(document).keyup(e => {
+      if (e.key === 'Escape' && this.isPopupOpen) this.closePopup()
+    })
+
+    // fetch data
+    try {
+      const lotteryPopUpBtn = await this.$axios.get('/api/public/lotteryPopUp')
+      if (lotteryPopUpBtn.data.visible) {
+        const lastLottery = await this.$axios.get('/api/public/lastLottery')
+        this.lastLottery = lastLottery.data
+      }
+      setTimeout(() => (this.lotteryPopUpBtn = lotteryPopUpBtn.data), 2 * 1000)
+    } catch (e) {
+      console.log('LotteryPopUp button fetch problem ---- ', e.response.data)
+    }
+  },
+  methods: {
+    showPopup() {
+      this.$gsap
+        .timeline({
+          onComplete: () => (this.isPopupOpen = true)
+        })
+        .to($('.lottery-popup'), { autoAlpha: 1, duration: 0.04 })
+        .to($('.lottery-popup .content'), { opacity: 1, scale: 1, duration: 0.2, ease: 'power3.out' })
+    },
+    closePopup() {
+      this.$gsap
+        .timeline({
+          onComplete: () => (this.isPopupOpen = false)
+        })
+        .to($('.lottery-popup .content'), { opacity: 0, scale: 0, duration: 0.1 })
+        .to($('.lottery-popup'), { autoAlpha: 0, duration: 0.04 })
+    }
+  }
+}
+</script>

components/GlobalComponents/TableNotice.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="notice">*برای مشاهده ادامه جدول افقی اسکرول کنید.</p>
+</template>