diff --git a/src/api/api.checkin.ts b/src/api/api.checkin.ts index 49143ca..f9fb724 100644 --- a/src/api/api.checkin.ts +++ b/src/api/api.checkin.ts @@ -5,6 +5,7 @@ const urlFile = `${env.API_URI}/salary` export default { checkin: () => `${leave}/check-in`, checkTime: () => `${leave}/check-time`, + checkStatus: () => `${leave}/check-status`, keycloakLogSSO: `${env.API_URI}/org/keycloak/log/sso`, keycloakPosition: () => `${env.API_URI}/org/profile/keycloak/position`, diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 23b8c0b..a043f79 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -51,9 +51,7 @@ const formattedS = ref() const formattedM = ref() const formattedH = ref() -/** - * function อัพเดทเวลา - */ +/** function อัพเดทเวลา*/ function updateClock() { const date = Date.now() const hh = moment(date).format('HH') @@ -103,9 +101,7 @@ const options = ref([ 'อื่นๆ', ]) -/** - * function เลือกสถานที่ - */ +/** function เลือกสถานที่*/ function selectLocation() { if (model.value === 'อื่นๆ') { useLocation.value = '' @@ -121,51 +117,44 @@ const img = ref(undefined) const photoWidth = ref(350) const photoHeight = ref(350) -/** - * function เปิดกล้อง - */ +/** function เปิดกล้อง*/ async function openCamera() { // change camera device if (cameraIsOn.value) { - camera.value?.stop() + await camera.value?.stop() } else { await camera.value?.start() - changeCamera() + await changeCamera() // ต้องรอให้ start() เสร็จก่อน } cameraIsOn.value = !cameraIsOn.value } -/** - * change camera device - */ +/** change camera device*/ async function changeCamera() { const devices: any = await camera.value?.devices(['videoinput']) const device = await devices[0] camera.value?.changeCamera(device.deviceId) } -/** - * function ถ่ายรูป - */ +/** function ถ่ายรูป*/ async function capturePhoto() { const imageBlob: any = await camera.value?.snapshot( { width: photoWidth.value, height: photoHeight.value }, 'image/png', 0.5 ) + if (!imageBlob) return const fileName = 'photo.png' //ไฟล์รูป const file = new File([imageBlob], fileName, { type: 'image/png' }) fileImg.value = file //แสดงรูป - camera.value?.stop() + await camera.value?.stop() const url = URL.createObjectURL(imageBlob) img.value = url } -/** - * function เปลี่ยนรูปภาพ - */ +/** function เปลี่ยนรูปภาพ*/ function refreshPhoto() { img.value = undefined camera.value?.start() @@ -179,9 +168,7 @@ const objectRef: FormRef = { useLocation: useLocationRef, } -/** - * function ตรวจสอบค่าว่างของ input - */ +/** function ตรวจสอบค่าว่างของ input*/ function validateForm() { const hasError = [] for (const key in objectRef) { @@ -200,9 +187,7 @@ function validateForm() { const timeChickin = ref('') //เวลาเข้างาน,เวลาออกงาน -/** - * function ยืนยันการลงเวลาเข้า - ออก - */ +/** function ยืนยันการลงเวลาเข้า - ออก*/ async function confirm() { showLoader() const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง @@ -221,6 +206,7 @@ async function confirm() { .then(async (res) => { const data = await res.data.result const dateObject = new Date(data.date) + localStorage.setItem('taskid', data.taskId) const options: Intl.DateTimeFormatOptions = { hour12: false, hour: '2-digit', @@ -230,37 +216,33 @@ async function confirm() { dateObject ) timeChickin.value = timeString - setTimeout(() => { - modalTime.value = true - remark.value = '' - hideLoader() - }, 2000) + modalTime.value = true + remark.value = '' }) .catch((err) => { - hideLoader() messageError($q, err) }) + .finally(() => { + hideLoader() + }) } -/** - * ปิด popup แสดงการลงเวลา - */ +/** ปิด popup แสดงการลงเวลา*/ async function onClickConfirm() { showLoader() - setTimeout(async () => { - if (!stetusCheckin.value) { - stetusCheckin.value = true - } - await fetchCheckTime() - }, 2000) + if (!stetusCheckin.value) { + stetusCheckin.value = true + } + + await fetchCheckTime() + startChecking() + cameraIsOn.value = false img.value = undefined modalTime.value = false } -/** - * เลือกสถานที่ทำงาน - */ +/** เลือกสถานที่ทำงาน*/ function updateWorkplace() { useLocation.value = '' model.value = '' @@ -277,10 +259,52 @@ const getClass = (val: boolean) => { } } +const inQueue = ref(false) + +async function fetchCheckStatus() { + // let taskId = localStorage.getItem('taskid') + // console.log(taskId) + // if (!taskId) return + 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 = 'กำลังดำเนินงาน' + } else { + isDisabledCheckTime.value = false + msgCheckTime.value = '' + stopChecking() // หยุดการทำงาน + fetchCheckTime() + console.log('Response เป็น false, หยุด interval') + } + } catch (error) { + console.log('เกิดข้อผิดพลาด', error) + stopChecking() // หยุดการทำงาน + } +} +const intervalId = ref(undefined) // ต้องใช้ตัวแปรเก็บค่า interval + +function startChecking() { + if (intervalId.value === undefined) { + // ป้องกันการสร้าง interval ซ้ำ + intervalId.value = setInterval(fetchCheckStatus, 3000) + } +} + +function stopChecking() { + if (intervalId.value !== undefined) { + clearInterval(intervalId.value) // หยุด interval + fetchCheckTime() + intervalId.value = undefined // รีเซ็ตค่า + } +} + /** Hook*/ onMounted(async () => { - await fetchCheckTime() + // await fetchCheckTime() updateClock() + startChecking() }) @@ -291,10 +315,29 @@ onMounted(async () => {
- + + + + ลงเวลาออกงาน (รอประมวลผล) + + + + ลงเวลาเข้างาน (รอประมวลผล) + + + ลงเวลาเข้างาน - ลงเวลาออกงาน + + ลงเวลาออกงาน
@@ -323,7 +366,9 @@ onMounted(async () => {
- +
+ +
@@ -344,6 +389,7 @@ onMounted(async () => {
+ { *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที