เเก้ ลงเวลาเข้างาน

src/views/HomeView.vue

@@ -20,14 +20,16 @@ const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้า
 const checkStatus = ref<string>('')
 const statusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 
+const checkDate = ref<boolean | null>(null)
 const msgCheckTime = ref<string>('') // ข้อความแจ้งเตือน
 const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ้งเตือน
+const isErr = ref<boolean | null>(null) // ข้อความแจ้งเตือน
 const endTimeAfternoon = ref<string>('12:00:00') //เวลาเช็คเอาท์ตามรอบ
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
-async function fetchCheckTime() {
+async function fetchCheckTime(load: any = true) {
-  showLoader()
+  load && showLoader()
   await http
     .get(config.API.checkTime())
     .then(async (res) => {
@@ -39,12 +41,13 @@ async function fetchCheckTime() {
     })
     .catch((err) => {
       if (err.response.status === 500) {
+        isErr.value = true
         isDisabledCheckTime.value = true
         msgCheckTime.value = err.response.data.message
       } else messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      load && hideLoader()
     })
 }
 
@@ -128,6 +131,109 @@ const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
 
+const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+
+/**
+ * เริ่มจาก onMounted #1 เช็ค status คิว
+ *
+ */
+async function startChecking() {
+  showLoader()
+  fetchCheckStatus()
+  if (intervalId.value === undefined) {
+    // เรียกใช้ซ้ำ ถ้า intervalId == undefined
+    intervalId.value = setInterval(async () => {
+      await fetchCheckStatus() // รอให้ fetchCheckStatus ทำงานเสร็จก่อน
+    }, 3000)
+  }
+}
+
+/**
+ * เริ่มจาก onMounted #2 เช็ค status คิว
+ *
+ */
+async function fetchCheckStatus() {
+  try {
+    const res = await http.get(config.API.checkStatus())
+    inQueue.value = res.data.result.inQueue
+
+    if (res.data.result.inQueue) {
+      /** inQueue เป็น true  */
+      isDisabledCheckTime.value = true
+      msgCheckTime.value = 'ระบบกำลังประมวลผล'
+      hideLoader()
+    } else {
+      /** inQueue เป็น false  */
+      isDisabledCheckTime.value = false
+      msgCheckTime.value = ''
+      stopChecking() // หยุดการทำงาน
+      console.log('Response เป็น false, หยุด interval')
+    }
+  } catch (error) {
+    console.log('เกิดข้อผิดพลาด', error)
+    stopChecking() // หยุดการทำงาน
+  }
+}
+
+/** ตัวเก่าก่อนเปลี่ยน */
+
+// async function stopChecking() {
+//   if (intervalId.value !== undefined) {
+//     clearInterval(intervalId.value) // หยุด interval
+//     setTimeout(() => {
+//       fetchCheckTime()
+//     }, 1000)
+//     intervalId.value = undefined // รีเซ็ตค่า
+//   }
+// }
+
+/** ตัวใหม่ที่เปลี่ยนก่อนเปลี่ยน
+ * เริ่มจาก onMounted #3 เช็ค status คิว
+ *
+ */
+async function stopChecking() {
+  if (intervalId.value !== undefined) {
+    await fetchCheckTime()
+    clearInterval(intervalId.value)
+    intervalId.value = undefined // รีเซ็ตค่า interval
+
+    async function repeatFetch() {
+      await fetchCheckTime(false)
+      if (statusCheckin.value && checkDate.value === true) {
+        setTimeout(repeatFetch, 1000)
+      } else {
+        checkDate.value = null
+        isErr.value = false
+      }
+    }
+
+    async function repeatFetchOut() {
+      await fetchCheckTime(false)
+      if (
+        isErr.value === false &&
+        statusCheckin.value === false &&
+        checkDate.value === true
+      ) {
+        setTimeout(repeatFetchOut, 1000) // เรียกตัวเองซ้ำ
+      } else {
+        checkDate.value = null
+        isErr.value = null
+      }
+    }
+
+    // ตรวจสอบเงื่อนไขก่อนเริ่มการ fetch ซ้ำ
+    if (statusCheckin.value && checkDate.value === true) {
+      repeatFetch()
+    } else if (
+      isErr.value === false &&
+      statusCheckin.value === false &&
+      checkDate.value === true
+    ) {
+      repeatFetchOut()
+    }
+  }
+}
+
 /** function เปิดกล้อง*/
 async function openCamera() {
   // change camera device
@@ -221,6 +327,7 @@ async function confirm() {
     .then(async (res) => {
       const data = await res.data.result
       const dateObject = new Date(data.date)
+      checkDate.value = data.date ? true : false
       const options: Intl.DateTimeFormatOptions = {
         hour12: false,
         hour: '2-digit',
@@ -289,6 +396,7 @@ async function onClickConfirm() {
 
   // await fetchCheckTime()
   // fetchCheckStatus()
+
   startChecking()
 
   cameraIsOn.value = false
@@ -321,53 +429,11 @@ const getClassXS = (val: boolean) => {
 }
 const inQueue = ref<boolean>(false)
 
-async function fetchCheckStatus() {
-  try {
-    const res = await http.get(config.API.checkStatus())
-    inQueue.value = res.data.result.inQueue
-    if (res.data.result.inQueue) {
-      isDisabledCheckTime.value = true
-      msgCheckTime.value = 'ระบบกำลังประมวลผล'
-      hideLoader()
-    } else {
-      isDisabledCheckTime.value = false
-      msgCheckTime.value = ''
-      stopChecking() // หยุดการทำงาน
-      console.log('Response เป็น false, หยุด interval')
-    }
-  } catch (error) {
-    console.log('เกิดข้อผิดพลาด', error)
-    stopChecking() // หยุดการทำงาน
-  }
-}
-const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
-
-async function startChecking() {
-  showLoader()
-  fetchCheckStatus()
-  if (intervalId.value === undefined) {
-    // ป้องกันการสร้าง interval ซ้ำ
-    intervalId.value = setInterval(async () => {
-      await fetchCheckStatus() // รอให้ fetchCheckStatus ทำงานเสร็จก่อน
-    }, 3000)
-  }
-}
-
-async function stopChecking() {
-  if (intervalId.value !== undefined) {
-    clearInterval(intervalId.value) // หยุด interval
-    setTimeout(() => {
-      fetchCheckTime()
-    }, 1000)
-    intervalId.value = undefined // รีเซ็ตค่า
-  }
-}
-
 /** Hook*/
 onMounted(async () => {
   // await fetchCheckTime()
   updateClock()
-  startChecking()
+  startChecking() //เช็ค status จาก คิว #1
 })
 </script>