diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index a964183..80fdb83 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -20,14 +20,16 @@ const modalTime = ref(false) // Dailog ลงเวลาเข้า const checkStatus = ref('') const statusCheckin = ref(true) // สถานะเวลา เข้า,ออก +const checkDate = ref(null) const msgCheckTime = ref('') // ข้อความแจ้งเตือน const isDisabledCheckTime = ref(false) // ข้อความแจ้งเตือน +const isErr = ref(null) // ข้อความแจ้งเตือน const endTimeAfternoon = ref('12:00:00') //เวลาเช็คเอาท์ตามรอบ /** * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */ -async function fetchCheckTime() { - showLoader() +async function fetchCheckTime(load: any = true) { + 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(undefined) const photoWidth = ref(350) const photoHeight = ref(350) +const intervalId = ref(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(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(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 })