From e90fbc3f430036b1167dccff6552571db9f48ba6 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Tue, 5 May 2026 09:24:44 +0700 Subject: [PATCH 01/21] feat(checkin): add option off site --- src/views/HomeView.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 9282d84..c8ffb27 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -192,6 +192,8 @@ const options = ref([ // value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ', // text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ', // }, + { value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร' }, + { value: 'อื่นๆ', text: 'อื่นๆ' }, ]) From 4e757e92762e4953a266bba9d1ab9e2f720748bc Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Tue, 5 May 2026 09:36:13 +0700 Subject: [PATCH 02/21] fix: checkout --- src/views/HomeView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index c8ffb27..67bf8db 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -569,7 +569,7 @@ async function getCheck() { } showLoader() - const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' ? 'Y' : 'N' + const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' || model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร' ? 'Y' : 'N' await http .get(config.API.checkoutCheck + `/${isSeminar}`) From 5ed1b27789121963909f3379a33a99b60d11c0c7 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Tue, 5 May 2026 10:11:48 +0700 Subject: [PATCH 03/21] reafactor(login): trim() username --- src/views/login.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/login.vue b/src/views/login.vue index df02614..df0725d 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -20,7 +20,7 @@ const password = ref('') async function onSubmit() { showLoader() const formdata = new URLSearchParams() - formdata.append('username', username.value) + formdata.append('username', username.value.trim()) formdata.append('password', password.value) await axios From 7ae3f0a55781c17dfa8aa65780c7cc76b7de7064 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Tue, 5 May 2026 10:18:23 +0700 Subject: [PATCH 04/21] fix(checkin): API checkoutCheck --- src/views/HomeView.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 67bf8db..ab7257f 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -192,7 +192,10 @@ const options = ref([ // value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ', // text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ', // }, - { value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร' }, + { + value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', + text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', + }, { value: 'อื่นๆ', text: 'อื่นๆ' }, ]) @@ -569,7 +572,12 @@ async function getCheck() { } showLoader() - const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' || model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร' ? 'Y' : 'N' + const isSeminar = + model.value === 'ไปประชุม / อบรม / สัมมนา' + ? 'S' + : model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร' + ? 'O' + : 'N' await http .get(config.API.checkoutCheck + `/${isSeminar}`) From 9efac056e93aa7e3ba358814e30570148cfbb6f9 Mon Sep 17 00:00:00 2001 From: waruneeauy Date: Thu, 7 May 2026 16:22:58 +0700 Subject: [PATCH 05/21] fix ios live mode --- src/views/HomeView.vue | 13 +++++++++++++ src/views/MapView.vue | 10 ++++++++++ 2 files changed, 23 insertions(+) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index ab7257f..8067899 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -890,6 +890,8 @@ watch( :resolution="{ width: photoWidth, height: photoHeight }" ref="camera" :autoplay="false" + :playsinline="true" + :facingMode="'user'" :style="!img ? 'display: block' : 'display: none'" /> @@ -1004,6 +1006,8 @@ watch( }" ref="camera" :autoplay="false" + :playsinline="true" + :facingMode="'user'" :style="!img ? 'display: block' : 'display: none'" /> @@ -1513,6 +1517,15 @@ watch( height: 100%; } +/* iOS-specific video fixes */ +.card-container video, +.card-container-xs video { + width: 100%; + height: 100%; + object-fit: cover; + -webkit-object-fit: cover; +} + .bg-topOut { background: rgb(39, 50, 56); background: linear-gradient( diff --git a/src/views/MapView.vue b/src/views/MapView.vue index 340308b..1b4c40f 100644 --- a/src/views/MapView.vue +++ b/src/views/MapView.vue @@ -335,6 +335,8 @@ onMounted(async () => { :resolution="{ width: photoWidth, height: photoHeight }" ref="camera" :autoplay="false" + :playsinline="true" + :facingMode="'user'" :style="!img ? 'display: block' : 'display: none'" /> @@ -569,4 +571,12 @@ onMounted(async () => { width: 100%; height: 100%; } + +/* iOS-specific video fixes */ +.card-container video { + width: 100%; + height: 100%; + object-fit: cover; + -webkit-object-fit: cover; +} From b11e660bcf0435bde9414c7dd5b5ef3acb167474 Mon Sep 17 00:00:00 2001 From: waruneeauy Date: Thu, 7 May 2026 16:47:35 +0700 Subject: [PATCH 06/21] fix(checkin): improve camera functionality and fix iOS Live Mode issue - Add playsinline prop to fix iOS Live Mode photo capture issue - Change default camera to front camera (facingMode: 'user') - Improve photo quality: change from PNG to JPEG with quality 0.8 - Fix memory leak: add URL.revokeObjectURL() cleanup - Add error handling for camera operations (openCamera, capturePhoto, refreshPhoto) - Add timestamp to photo filename for uniqueness Co-Authored-By: Claude Opus 4.7 --- src/views/HomeView.vue | 94 ++++++++++++++++++++++++++++-------------- src/views/MapView.vue | 76 +++++++++++++++++++++++----------- 2 files changed, 114 insertions(+), 56 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8067899..dc4e8da 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -347,18 +347,23 @@ async function openCamera() { } if (!isPermissionCameraDenied.value) { - // change camera device - if (cameraIsOn.value) { - camera.value?.stop() - } else { - await camera.value?.start() - const devices: any = await camera.value?.devices(['videoinput']) - if (devices) { - availableCameras.value = devices - await changeCamera() + try { + // change camera device + if (cameraIsOn.value) { + camera.value?.stop() + } else { + await camera.value?.start() + const devices: any = await camera.value?.devices(['videoinput']) + if (devices) { + availableCameras.value = devices + await changeCamera() + } } + cameraIsOn.value = !cameraIsOn.value + } catch (error) { + console.error('Error opening camera:', error) + messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง') } - cameraIsOn.value = !cameraIsOn.value } else { messageError( $q, @@ -428,26 +433,49 @@ async function switchCamera() { /** 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.jpg' - //ไฟล์รูป - const file = new File([imageBlob], fileName, { type: 'image/png' }) - fileImg.value = file - //แสดงรูป - camera.value?.stop() - const url = URL.createObjectURL(imageBlob) - img.value = url + try { + const imageBlob: any = await camera.value?.snapshot( + { width: photoWidth.value, height: photoHeight.value }, + 'image/jpeg', + 0.8 + ) + if (!imageBlob) { + messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') + return + } + const fileName = `photo_${Date.now()}.jpg` + //ไฟล์รูป + const file = new File([imageBlob], fileName, { type: 'image/jpeg' }) + fileImg.value = file + + // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak) + if (img.value) { + URL.revokeObjectURL(img.value) + } + + //แสดงรูป + camera.value?.stop() + const url = URL.createObjectURL(imageBlob) + img.value = url + } catch (error) { + console.error('Error capturing photo:', error) + messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') + } } /** function เปลี่ยนรูปภาพ*/ -function refreshPhoto() { - img.value = undefined - camera.value?.start() +async function refreshPhoto() { + try { + // ยกเลิก URL เก่า (ป้องกัน memory leak) + if (img.value) { + URL.revokeObjectURL(img.value) + img.value = undefined + } + await camera.value?.start() + } catch (error) { + console.error('Error refreshing photo:', error) + messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง') + } } /** ref validate*/ @@ -627,7 +655,11 @@ async function onClickConfirm() { try { showLoader() cameraIsOn.value = false - img.value = undefined + // ยกเลิก URL เก่า (ป้องกัน memory leak) + if (img.value) { + URL.revokeObjectURL(img.value) + img.value = undefined + } modalTime.value = false if (!statusCheckin.value) { statusCheckin.value = true @@ -665,7 +697,9 @@ const inQueue = ref(false) // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง function resetCameraAndImage() { + // ยกเลิก URL เก่า (ป้องกัน memory leak) if (img.value) { + URL.revokeObjectURL(img.value) img.value = undefined } if (cameraIsOn.value && camera.value) { @@ -885,14 +919,12 @@ watch(
- @@ -998,7 +1030,6 @@ watch(
- diff --git a/src/views/MapView.vue b/src/views/MapView.vue index 1b4c40f..5f7edc9 100644 --- a/src/views/MapView.vue +++ b/src/views/MapView.vue @@ -133,14 +133,19 @@ const photoHeight = ref(350) /** function เปิดกล้อง */ async function openCamera() { - // change camera device - if (cameraIsOn.value) { - camera.value?.stop() - } else { - await camera.value?.start() - changeCamera() + try { + // change camera device + if (cameraIsOn.value) { + camera.value?.stop() + } else { + await camera.value?.start() + changeCamera() + } + cameraIsOn.value = !cameraIsOn.value + } catch (error) { + console.error('Error opening camera:', error) + messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง') } - cameraIsOn.value = !cameraIsOn.value } /** change camera device */ @@ -152,25 +157,49 @@ async function changeCamera() { /** function ถ่ายรูป*/ async function capturePhoto() { - const imageBlob: any = await camera.value?.snapshot( - { width: photoWidth.value, height: photoHeight.value }, - 'image/png', - 0.5 - ) - const fileName = 'photo.png' - //ไฟล์รูป - const file = new File([imageBlob], fileName, { type: 'image/png' }) - fileImg.value = file - //แสดงรูป - camera.value?.stop() - const url = URL.createObjectURL(imageBlob) - img.value = url + try { + const imageBlob: any = await camera.value?.snapshot( + { width: photoWidth.value, height: photoHeight.value }, + 'image/jpeg', + 0.8 + ) + if (!imageBlob) { + messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') + return + } + const fileName = `photo_${Date.now()}.jpg` + //ไฟล์รูป + const file = new File([imageBlob], fileName, { type: 'image/jpeg' }) + fileImg.value = file + + // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak) + if (img.value) { + URL.revokeObjectURL(img.value) + } + + //แสดงรูป + camera.value?.stop() + const url = URL.createObjectURL(imageBlob) + img.value = url + } catch (error) { + console.error('Error capturing photo:', error) + messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') + } } /** function เปลี่ยนรูปภาพ*/ -function refreshPhoto() { - img.value = undefined - camera.value?.start() +async function refreshPhoto() { + try { + // ยกเลิก URL เก่า (ป้องกัน memory leak) + if (img.value) { + URL.revokeObjectURL(img.value) + img.value = undefined + } + await camera.value?.start() + } catch (error) { + console.error('Error refreshing photo:', error) + messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง') + } } /** ref validate*/ @@ -337,7 +366,6 @@ onMounted(async () => { :autoplay="false" :playsinline="true" :facingMode="'user'" - :style="!img ? 'display: block' : 'display: none'" /> From 9fde2b3984d84e8f58f491d6619a1ec2ea9ecdd2 Mon Sep 17 00:00:00 2001 From: waruneeauy Date: Fri, 8 May 2026 11:13:39 +0700 Subject: [PATCH 07/21] Fix mobile photo capture fallbacks Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/views/HomeView.vue | 276 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 244 insertions(+), 32 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index dc4e8da..f5f3b52 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -89,7 +89,7 @@ const formattedM = ref() const formattedH = ref() const formattedHH = ref() const formattedA = ref() -const clockInterval = ref() +const clockInterval = ref | undefined>() /** function อัพเดทเวลา*/ function updateClock() { @@ -118,6 +118,7 @@ const useLocation = ref('') //กรณีเลือกนอกสถ const fileImg = ref() //รูปถ่ายสถานที่ const remark = ref('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม const checkInId = ref('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก +const MIN_CAPTURE_FILE_SIZE_BYTES = 5 * 1024 /** * funciton เรียกพิกัดละติจูด พิกัดลองติจูด @@ -219,7 +220,123 @@ const availableCameras = ref([]) const currentCameraIndex = ref(0) const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown') -const intervalId = ref(undefined) // ต้องใช้ตัวแปรเก็บค่า interval +/** + * Use the native still-photo picker only on real iOS/iPadOS devices. + * Desktop mobile emulation can spoof the iPhone user-agent, so rely on + * platform + touch capability instead of user-agent alone. + */ +const isIOSDevice: boolean = (() => { + const platform = navigator.platform || '' + const hasTouchPoints = navigator.maxTouchPoints > 1 + + return ( + /iPhone|iPad|iPod/.test(platform) || + (platform === 'MacIntel' && hasTouchPoints) + ) +})() + +const isAndroidDevice: boolean = /Android/i.test(navigator.userAgent) +const preferNativePhotoCapture = ref(false) +const useNativePhotoCapture = computed( + () => isIOSDevice || preferNativePhotoCapture.value +) +const centeredPreviewImageStyle = Object.freeze({ + objectFit: 'cover', + objectPosition: 'center center', +}) + +/** Ref for the hidden file input used as native camera fallback */ +const nativePhotoInput = ref(null) + +function clearSelectedPhoto() { + if (img.value) { + URL.revokeObjectURL(img.value) + img.value = undefined + } + fileImg.value = undefined +} + +async function canDecodeImageBlob(blob: Blob) { + if (!blob.type.startsWith('image/')) { + return false + } + + const imageUrl = URL.createObjectURL(blob) + + try { + const image = await new Promise((resolve, reject) => { + const element = new Image() + element.onload = () => { + if (element.naturalWidth > 0 && element.naturalHeight > 0) { + resolve(element) + } else { + reject(new Error('Image has invalid dimensions')) + } + } + element.onerror = () => reject(new Error('Image decode failed')) + element.src = imageUrl + }) + + return image.naturalWidth > 0 && image.naturalHeight > 0 + } catch (error) { + console.error('Error decoding captured image:', error) + return false + } finally { + URL.revokeObjectURL(imageUrl) + } +} + +async function isValidCapturedImage(blob: Blob) { + if (blob.size < MIN_CAPTURE_FILE_SIZE_BYTES) { + return false + } + + return canDecodeImageBlob(blob) +} + +async function assignSelectedPhoto(file: File) { + clearSelectedPhoto() + fileImg.value = file + img.value = URL.createObjectURL(file) +} + +function openNativePhotoCapture() { + if (cameraIsOn.value) { + camera.value?.stop() + cameraIsOn.value = false + } + + if (nativePhotoInput.value) { + nativePhotoInput.value.value = '' + nativePhotoInput.value.click() + } +} + +/** + * Called when the user selects / captures a photo via the native file-input + * fallback. Mirrors the same `img` + `fileImg` state that capturePhoto() + * sets so the upload flow is identical. + */ +async function onNativePhotoSelected(event: Event) { + const input = event.target as HTMLInputElement + const file = input.files?.[0] + input.value = '' + if (!file) return + + if (!(await isValidCapturedImage(file))) { + clearSelectedPhoto() + messageError( + $q, + '', + 'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง' + ) + return + } + + await assignSelectedPhoto(file) +} + +const intervalId = ref | undefined>(undefined) /** * เริ่มจาก onMounted #1 เช็ค status คิว @@ -346,17 +463,34 @@ async function openCamera() { return } + // iOS Safari fallback: getUserMedia can open native video-recording UI and + // canvas.drawImage may produce a blank blob. Use the hidden file input + // with capture="user" instead — this opens the native camera in photo mode. + if (useNativePhotoCapture.value) { + openNativePhotoCapture() + return + } + if (!isPermissionCameraDenied.value) { try { - // change camera device if (cameraIsOn.value) { camera.value?.stop() } else { + // Keep the initial stream aligned with the Camera component's front-camera constraint. await camera.value?.start() const devices: any = await camera.value?.devices(['videoinput']) if (devices) { availableCameras.value = devices - await changeCamera() + + // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection. + const activeId = camera.value?.currentDeviceID() + const activeIdx = activeId + ? devices.findIndex((d: any) => d.deviceId === activeId) + : -1 + currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0 + currentCameraType.value = identifyCameraType( + devices[currentCameraIndex.value]?.label || '' + ) } } cameraIsOn.value = !cameraIsOn.value @@ -439,24 +573,30 @@ async function capturePhoto() { 'image/jpeg', 0.8 ) - if (!imageBlob) { + if (!imageBlob || !(await isValidCapturedImage(imageBlob))) { + if (isAndroidDevice) { + preferNativePhotoCapture.value = true + camera.value?.stop() + cameraIsOn.value = false + clearSelectedPhoto() + messageError( + $q, + '', + 'ไม่สามารถอ่านรูปจากกล้องของอุปกรณ์ได้ กรุณาถ่ายใหม่อีกครั้ง ระบบจะเปลี่ยนไปใช้โหมดถ่ายภาพของอุปกรณ์' + ) + return + } + messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') return } const fileName = `photo_${Date.now()}.jpg` //ไฟล์รูป const file = new File([imageBlob], fileName, { type: 'image/jpeg' }) - fileImg.value = file - - // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak) - if (img.value) { - URL.revokeObjectURL(img.value) - } + await assignSelectedPhoto(file) //แสดงรูป camera.value?.stop() - const url = URL.createObjectURL(imageBlob) - img.value = url } catch (error) { console.error('Error capturing photo:', error) messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง') @@ -466,10 +606,11 @@ async function capturePhoto() { /** function เปลี่ยนรูปภาพ*/ async function refreshPhoto() { try { - // ยกเลิก URL เก่า (ป้องกัน memory leak) - if (img.value) { - URL.revokeObjectURL(img.value) - img.value = undefined + clearSelectedPhoto() + + if (useNativePhotoCapture.value) { + openNativePhotoCapture() + return } await camera.value?.start() } catch (error) { @@ -552,6 +693,22 @@ async function confirm() { return } + if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) { + if (isAndroidDevice) { + preferNativePhotoCapture.value = true + camera.value?.stop() + cameraIsOn.value = false + } + clearSelectedPhoto() + disabledBtn.value = false + messageError( + $q, + '', + 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา' + ) + return + } + showLoader() const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง const locationName = workplace.value === 'in-place' ? '' : useLocation.value @@ -655,11 +812,7 @@ async function onClickConfirm() { try { showLoader() cameraIsOn.value = false - // ยกเลิก URL เก่า (ป้องกัน memory leak) - if (img.value) { - URL.revokeObjectURL(img.value) - img.value = undefined - } + clearSelectedPhoto() modalTime.value = false if (!statusCheckin.value) { statusCheckin.value = true @@ -697,11 +850,7 @@ const inQueue = ref(false) // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง function resetCameraAndImage() { - // ยกเลิก URL เก่า (ป้องกัน memory leak) - if (img.value) { - URL.revokeObjectURL(img.value) - img.value = undefined - } + clearSelectedPhoto() if (cameraIsOn.value && camera.value) { camera.value.stop() cameraIsOn.value = false @@ -735,7 +884,12 @@ const isPermissionCameraDenied = ref(false) // ตัวแปรสำ async function requestCamera() { try { - await navigator.mediaDevices.getUserMedia({ video: true }) + // Probe camera permission with the same front-camera constraint, then release the stream immediately. + const stream = await navigator.mediaDevices.getUserMedia({ + video: { facingMode: 'user' }, + audio: false, + }) + stream.getTracks().forEach((track) => track.stop()) } catch (err) { isPermissionCameraDenied.value = true } @@ -760,7 +914,8 @@ onMounted(async () => { // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว if (privacyStore.isAccepted) { mapRef.value?.requestLocationPermission() - requestCamera() + // iOS uses the file-input fallback and does not need a getUserMedia probe + if (!useNativePhotoCapture.value) requestCamera() } }) @@ -802,7 +957,8 @@ watch( (newVal) => { if (newVal) { mapRef.value?.requestLocationPermission() - requestCamera() + // iOS uses the file-input fallback and does not need a getUserMedia probe + if (!useNativePhotoCapture.value) requestCamera() } } ) @@ -929,7 +1085,26 @@ watch(
- + + +
+ +
@@ -1043,7 +1218,27 @@ watch(
- + + +
+ +
@@ -1497,6 +1692,21 @@ watch( + + + diff --git a/src/main.ts b/src/main.ts index b04278c..04b0dfd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,6 +12,9 @@ import 'quasar/src/css/index.sass' import th from 'quasar/lang/th' import http from '@/plugins/http' +import { forceOpenInExternalBrowser } from '@/utils/forceExternalBrowser' + +forceOpenInExternalBrowser() const app = createApp(App) const pinia = createPinia() diff --git a/src/utils/forceExternalBrowser.ts b/src/utils/forceExternalBrowser.ts new file mode 100644 index 0000000..bf65fa3 --- /dev/null +++ b/src/utils/forceExternalBrowser.ts @@ -0,0 +1,57 @@ +const EXTERNAL_BROWSER_QUERY_KEY = 'openExternalBrowser' + +const isLineBrowser = (userAgent: string) => /Line/i.test(userAgent) + +const isAndroid = (userAgent: string) => /Android/i.test(userAgent) + +const isIOS = (userAgent: string) => /iPhone|iPad|iPod/i.test(userAgent) + +const hasExternalRedirectFlag = () => { + const params = new URLSearchParams(window.location.search) + return params.get(EXTERNAL_BROWSER_QUERY_KEY) === '1' +} + +const buildIOSUrlWithFlag = () => { + const url = new URL(window.location.href) + url.searchParams.set(EXTERNAL_BROWSER_QUERY_KEY, '1') + return url.toString() +} + +const buildUrlWithoutFlag = () => { + const url = new URL(window.location.href) + url.searchParams.delete(EXTERNAL_BROWSER_QUERY_KEY) + return url.toString() +} + +const buildAndroidIntentUrl = () => { + const currentUrl = window.location.href + const strippedUrl = currentUrl.replace(/^https?:\/\//i, '') + return `intent://${strippedUrl}#Intent;scheme=https;package=com.android.chrome;end` +} + +export const forceOpenInExternalBrowser = () => { + const userAgent = navigator.userAgent || '' + + // Prevent redirect loops and only run in LINE browser. + if (!isLineBrowser(userAgent) || hasExternalRedirectFlag()) { + return + } + + if (isAndroid(userAgent)) { + window.location.replace(buildAndroidIntentUrl()) + return + } + + if (isIOS(userAgent)) { + window.location.replace(buildIOSUrlWithFlag()) + } +} + +export const shouldShowIOSLineFallback = () => { + const userAgent = navigator.userAgent || '' + return ( + isLineBrowser(userAgent) && isIOS(userAgent) && hasExternalRedirectFlag() + ) +} + +export const getExternalBrowserUrl = () => buildUrlWithoutFlag() From 5ba2a6dce5c49dec2b51c9cfde85549dcc9782e0 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Mon, 8 Jun 2026 17:11:09 +0700 Subject: [PATCH 19/21] fix: pagination --- src/components/TableHistory.vue | 58 ++++++++++++--------------------- src/interface/index/Main.ts | 2 +- src/views/HistoryView.vue | 9 ++--- 3 files changed, 27 insertions(+), 42 deletions(-) diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue index c364c30..e081a3c 100644 --- a/src/components/TableHistory.vue +++ b/src/components/TableHistory.vue @@ -13,20 +13,15 @@ import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table const { date2Thai } = useCounterMixin() const stores = useCheckIn() +const page = defineModel('page', { required: true }) +const pageSize = defineModel('pageSize', { required: true }) + /** props ข้อมูลจาก Components Page HistoryView */ const props = defineProps({ paging: { type: Boolean, default: false, }, - pageSize: { - type: Number, - default: 10, - }, - page: { - type: Number, - default: 1, - }, maxPage: { type: Number, default: 1, @@ -194,31 +189,20 @@ const visibleColumns = ref([ 'checkOutLocation', 'checkOutStatus', ]) - -const currentPage = ref(1) //หน้าปัจจุบัน -// Pagination - initial pagination -const initialPagination = ref({ - sortBy: null, - descending: false, - page: 1, - rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา +const pagination = ref({ + page: page.value, + rowsPerPage: pageSize.value, }) // Pagination - update rowsPerPage async function updatePagination(newPagination: Pagination) { - initialPagination.value = newPagination - currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row + pageSize.value = newPagination.rowsPerPage } async function filterFn() { - // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง - emit( - 'update:change-page', - 1, - initialPagination.value.rowsPerPage, - keyword.value - ) + emit('update:change-page', 1, pageSize.value, keyword.value) } + const modalPopup = ref(false) // popup แก้ไขลงเวลา const titlePopup = ref('') // หัวขข้อ popup แก้ไขลงเวลา const dataRow = ref() // ข้อมูลการลงเวลา @@ -276,17 +260,15 @@ function onClickOpenPopupRejrct(data: DataCheckIn) { } } -/** watch currentPage และ rowsPerPage*/ +function onUpdatePage(val: number) { + emit('update:change-page', val, pageSize.value, keyword.value) +} + +/** watch pageSize*/ watch( - [() => currentPage.value, () => initialPagination.value.rowsPerPage], + () => pageSize.value, () => { - // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง - emit( - 'update:change-page', - currentPage.value, - initialPagination.value.rowsPerPage, - keyword.value - ) + emit('update:change-page', 1, pageSize.value, keyword.value) } ) @@ -340,10 +322,10 @@ watch( v-model:selected="selected" :virtual-scroll-sticky-size-start="48" :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''" - :rows-per-page-options="[10, 25, 50, 100]" + :rows-per-page-options="[1, 10, 25, 50, 100]" :grid="$q.screen.gt.xs ? false : true" - :pagination="initialPagination" @update:pagination="updatePagination" + v-model:pagination="pagination" > + diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts index 5d82bd2..72b2ba1 100644 --- a/src/interface/index/Main.ts +++ b/src/interface/index/Main.ts @@ -29,7 +29,7 @@ interface Pagination { sortBy: string | null descending: boolean page: number - rowsPerPage: number | undefined + rowsPerPage: number } interface DataCheckIn { checkInDate: string diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue index 089d697..8f5a2bd 100644 --- a/src/views/HistoryView.vue +++ b/src/views/HistoryView.vue @@ -115,6 +115,7 @@ async function fetchlistTime() { async function updateYear(y: number, m: number) { stores.tab === 'history' ? (year.value = y) : (year2.value = y) month.value = m + page.value = 1 // รีเซ็ตหน้าเป็นหน้าแรกเมื่อปีหรือเดือนเปลี่ยนแปลง await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่ } @@ -177,9 +178,9 @@ watch( /> Date: Thu, 16 Jul 2026 11:30:46 +0700 Subject: [PATCH 20/21] refactor: privacyContent --- src/components/PopupPrivacy.vue | 98 +++++++++------------------------ src/views/HomeView.vue | 9 ++- 2 files changed, 32 insertions(+), 75 deletions(-) diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue index 1bd816b..739d65f 100644 --- a/src/components/PopupPrivacy.vue +++ b/src/components/PopupPrivacy.vue @@ -16,41 +16,26 @@ const modal = defineModel('modal', { // Privacy content data const privacyContent = { - title: 'การคุ้มครองข้อมูลส่วนบุคคล', + title: 'ประกาศความเป็นส่วนตัว', mainText: - 'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)', + 'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)', warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้', detailIntro: - 'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้', - purposes: { - title: 'วัตถุประสงค์การใช้ข้อมูล', - items: [ - 'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ', - 'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ', - 'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน', - ], - }, - understanding: { - items: [ - 'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น', - 'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด', - 'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด', - ], - }, - rights: { - title: - 'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่', - items: [ - 'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล', - 'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง', - 'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)', - 'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล', - ], - }, + 'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง', + + paragraphs: [ + 'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล', + 'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น', + 'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด', + 'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด', + 'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา', + 'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้', + 'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร', + ], consentText: - 'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ', + 'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว', buttons: { - accept: 'ยอมรับ', + accept: 'รับทราบและดำเนินการต่อ', decline: 'ไม่ยอมรับ', }, } @@ -97,7 +82,8 @@ const toggleDetails = () => { const checkIfScrollable = () => { nextTick(() => { - const container = (scrollContainer.value as any)?.$el || scrollContainer.value + const container = + (scrollContainer.value as any)?.$el || scrollContainer.value if (container) { const { scrollHeight, clientHeight } = container @@ -167,50 +153,18 @@ const checkIfScrollable = () => { {{ privacyContent.detailIntro }}

- +
-
    -
  1. - {{ item }} -
    2. -
-
- - -
- ข้าพเจ้าทราบและเข้าใจว่า -
    -
  • - {{ item }} -
    • -
-
- - -
-

- {{ privacyContent.rights.title }} +

+ {{ paragraph }}

-
    -
  • - {{ item }} -
    • -
- -

{{ privacyContent.consentText }}

+ +

{{ privacyContent.consentText }}

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 84a3e77..e114761 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1298,7 +1298,10 @@ watch(notificationCounter, () => {
-
+
@@ -1348,7 +1351,7 @@ watch(notificationCounter, () => { {{ crossDayCheckoutWarning }}
-
+
{ - +
Date: Thu, 16 Jul 2026 14:07:07 +0700 Subject: [PATCH 21/21] refactor: comment fetchKeycloakPosition existingData --- src/views/MainView.vue | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/views/MainView.vue b/src/views/MainView.vue index d83192e..f278e96 100644 --- a/src/views/MainView.vue +++ b/src/views/MainView.vue @@ -178,31 +178,32 @@ const landingPageUrl = ref(configParam.landingPageUrl) /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/ async function fetchKeycloakPosition() { // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage) - const existingData = positionKeycloakStore.dataPositionKeycloak + // จะช่วยลดจำนวนครั้งในการเรียก API และปรับปรุงประสิทธิภาพของแอปพลิเคชัน + // const existingData = positionKeycloakStore.dataPositionKeycloak - if (existingData) { - // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม + // if (existingData) { + // // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม - // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่ - const hasOrganization = - existingData.organization && - (existingData.organization.root || - existingData.organization.child1 || - existingData.organization.child2 || - existingData.organization.child3 || - existingData.organization.child4) + // // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่ + // const hasOrganization = + // existingData.organization && + // (existingData.organization.root || + // existingData.organization.child1 || + // existingData.organization.child2 || + // existingData.organization.child3 || + // existingData.organization.child4) - if (!hasOrganization) { - // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition - router.replace('/no-position') - return - } + // if (!hasOrganization) { + // // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition + // router.replace('/no-position') + // return + // } - privacyStore.modalPrivacy = !existingData.privacyCheckin - privacyStore.setAccepted(existingData.privacyCheckin) + // privacyStore.modalPrivacy = !existingData.privacyCheckin + // privacyStore.setAccepted(existingData.privacyCheckin) - return - } + // return + // } // ไม่มีข้อมูล ให้ fetch จาก API await http