v4

src/components/pnMagicOverlay.vue

@@ -0,0 +1,73 @@
+<template>
+  <q-dialog
+    v-model="visible"
+    maximized
+    persistent
+    transition-show="slide-up"
+    transition-hide="slide-down">
+    <div 
+      class="flex items-center justify-center fullscrean-card column"
+      >
+      <q-icon :name = "icon" color="brand" size="160px"/>
+      <div class="text-h5 q-mb-lg">
+          {{ $t(message1) }}
+      </div>
+
+      <div
+        v-if="message2" 
+        class="absolute-bottom q-py-lg flex justify-center row"
+        >
+        {{ $t(message2) }}
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  icon: string
+  message1: string
+  message2?: string
+  routeName: string
+}>()
+
+const visible = ref(false)
+const router = useRouter()
+const timers = ref<number[]>([])
+
+const setupTimers = () => {
+  visible.value = true
+  
+  const timer1 = window.setTimeout(() => {
+    visible.value = false
+    
+    const timer2 = window.setTimeout(() => {
+      router.push({ name: props.routeName })
+    }, 300)
+    
+    timers.value.push(timer2)
+  }, 2000)
+
+  timers.value.push(timer1)
+};
+
+const clearTimers = () => {
+  timers.value.forEach(timer => clearTimeout(timer))
+  timers.value = []
+}
+
+onMounted(setupTimers)
+onUnmounted(clearTimers)
+</script>
+
+<style lang="scss" scoped>
+  .fullscrean-card {
+    background-color: white;
+  }
+
+</style>
+
+