diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md index 7897460..bb4f782 100644 --- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md +++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md @@ -7,3 +7,8 @@ ## Project Issues & Fixes - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes +- [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue +- [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos +- [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization +- [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted) +- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md new file mode 100644 index 0000000..f78b23d --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md @@ -0,0 +1,11 @@ +--- +name: front_camera_preview_alignment +description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting +type: project +--- + +When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation. + +**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.” + +**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md new file mode 100644 index 0000000..791f98e --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md @@ -0,0 +1,11 @@ +--- +name: ios16-inline-camera-white-preview +description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early +type: project +--- + +In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering. + +**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded. + +**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md new file mode 100644 index 0000000..22792d0 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md @@ -0,0 +1,11 @@ +--- +name: ios_native_camera_popup_control +description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement. +type: project +--- + +In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform). The hidden `` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail. + +**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails." iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable. A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted. + +**How to apply:** `preferNativePhotoCapture` must start `false` on all devices. Never seed it with `isIOSDevice`. All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically. diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md new file mode 100644 index 0000000..77f33ef --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md @@ -0,0 +1,11 @@ +--- +name: ios_native_photo_mirroring +description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization +type: project +--- + +For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization. + +**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS. + +**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture. diff --git a/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md new file mode 100644 index 0000000..a10c142 --- /dev/null +++ b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md @@ -0,0 +1,11 @@ +--- +name: Active camera investigation scope +description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use +type: project +--- + +Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue. + +**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow. + +**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`. diff --git a/package.json b/package.json index c36ed30..503f2f9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "quasar": "^2.11.1", "register-service-worker": "^1.7.2", "simple-vue-camera": "^1.1.3", + "socket.io-client": "^4.8.3", "vite-plugin-pwa": "^0.16.7", "vue": "^3.4.15", "vue-router": "^4.1.6", diff --git a/src/App.vue b/src/App.vue index ea76d33..867210e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,12 @@ + + diff --git a/src/api/socket.ts b/src/api/socket.ts new file mode 100644 index 0000000..b018666 --- /dev/null +++ b/src/api/socket.ts @@ -0,0 +1,7 @@ +import env from "./index"; + +const socket = `${env.API_URI}/org-socket`; + +export default { + socket, +}; diff --git a/src/app.config.ts b/src/app.config.ts index c6dbe0c..085d287 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -4,6 +4,7 @@ import leave from '@/api/api.checkin' import history from '@/api/api.history' import message from '@/api/api.message' +import socket from '@/api/socket' const API = { /**leave */ @@ -12,6 +13,7 @@ const API = { ...history, /**message */ ...message, + ...socket, } export default { diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index ec1eb0b..bfe0e9c 100644 --- a/src/components/AscGISMap.vue +++ b/src/components/AscGISMap.vue @@ -163,8 +163,19 @@ function reattachAndResizeMap(retry = 0) { mapView.value.container = activeContainer } - mapView.value.resize() - mapView.value.requestRender?.() + // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่ + try { + if (typeof mapView.value.resize === 'function') { + mapView.value.resize() + } + } catch (error) { + console.warn('Map resize failed:', error) + } + + if (typeof mapView.value.requestRender === 'function') { + mapView.value.requestRender?.() + } + mapView.value .goTo( { @@ -285,7 +296,11 @@ async function initializeMap() { geometry: userPoint, symbol: userSymbol, }) - mapView.value.graphics.add(userGraphic) + + // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics + if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) { + mapView.value.graphics.add(userGraphic) + } // Get POI place ยิงไปขอที่ server ของกทม.ก่อน // await axios // .get( @@ -381,12 +396,22 @@ async function initializeMap() { geometry: poiPoint, symbol: poiSymbol, }) - mapView.value.graphics.add(poiGraphic) - // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI - mapView.value.goTo({ - target: [userPoint, poiPoint], - zoom: zoomMap.value, - }) + + // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo + if (mapView.value && !mapView.value.destroyed) { + if (mapView.value.graphics) { + mapView.value.graphics.add(poiGraphic) + } + // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI + if (typeof mapView.value.goTo === 'function') { + mapView.value.goTo({ + target: [userPoint, poiPoint], + zoom: zoomMap.value, + }).catch(() => { + // Ignore goTo errors + }) + } + } updateLocation(latitude, longitude, poiPlaceName.value) }) diff --git a/src/composables/usePermissions.ts b/src/composables/usePermissions.ts index ecf1ef3..b92ed29 100644 --- a/src/composables/usePermissions.ts +++ b/src/composables/usePermissions.ts @@ -1,52 +1,171 @@ -import { useQuasar } from 'quasar' +import { onBeforeUnmount, ref } from 'vue' import { usePrivacyStore } from '@/stores/privacy' +type BrowserPermissionState = PermissionState | 'unsupported' + +type PermissionQueryName = 'camera' | 'geolocation' + export function usePermissions() { - const $q = useQuasar() const privacyStore = usePrivacyStore() + const cameraPermissionState = ref('prompt') + const locationPermissionState = ref('prompt') - // const checkCameraPermission = (): boolean => { - // if (!privacyStore.isAccepted) { - // privacyStore.modalPrivacy = true - // $q.notify({ - // type: 'warning', - // message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง', - // position: 'top', - // }) - // return false - // } - // return true - // } + let cameraPermissionStatus: PermissionStatus | null = null + let locationPermissionStatus: PermissionStatus | null = null - // const checkLocationPermission = (): boolean => { - // if (!privacyStore.isAccepted) { - // privacyStore.modalPrivacy = true - // $q.notify({ - // type: 'warning', - // message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่', - // position: 'top', - // }) - // return false - // } - // return true - // } + const isPermissionsApiSupported = () => + typeof navigator !== 'undefined' && 'permissions' in navigator + + const setPermissionState = ( + target: typeof cameraPermissionState | typeof locationPermissionState, + state: BrowserPermissionState + ) => { + target.value = state + } + + const setPermissionChangeListener = ( + name: PermissionQueryName, + status: PermissionStatus + ) => { + status.onchange = () => { + const target = + name === 'camera' ? cameraPermissionState : locationPermissionState + setPermissionState(target, status.state) + } + } + + async function queryPermissionState(name: PermissionQueryName) { + if (!isPermissionsApiSupported()) { + return null + } + + try { + return await navigator.permissions.query({ name } as PermissionDescriptor) + } catch (error) { + return null + } + } + + async function syncPermissionState(name: PermissionQueryName) { + const target = + name === 'camera' ? cameraPermissionState : locationPermissionState + const previousStatus = + name === 'camera' ? cameraPermissionStatus : locationPermissionStatus + + if (previousStatus) { + previousStatus.onchange = null + } + + const status = await queryPermissionState(name) + if (!status) { + if (target.value === 'prompt') { + setPermissionState(target, 'unsupported') + } + return + } + + if (name === 'camera') { + cameraPermissionStatus = status + } else { + locationPermissionStatus = status + } + + setPermissionState(target, status.state) + setPermissionChangeListener(name, status) + } + + async function syncPermissionStates() { + await Promise.all([ + syncPermissionState('camera'), + syncPermissionState('geolocation'), + ]) + } const checkPrivacyAccepted = (): boolean => { if (!privacyStore.isAccepted) { privacyStore.modalPrivacy = true - // $q.notify({ - // type: 'warning', - // message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน', - // position: 'center', - // }) return false } return true } + async function requestCameraPermission() { + if (!checkPrivacyAccepted()) { + return false + } + + if (cameraPermissionState.value === 'granted') { + return true + } + + if (!navigator.mediaDevices?.getUserMedia) { + setPermissionState(cameraPermissionState, 'unsupported') + return false + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ + video: { facingMode: 'user' }, + audio: false, + }) + + stream.getTracks().forEach((track) => track.stop()) + setPermissionState(cameraPermissionState, 'granted') + return true + } catch (error) { + setPermissionState(cameraPermissionState, 'denied') + return false + } finally { + await syncPermissionState('camera') + } + } + + async function requestLocationPermission() { + if (!checkPrivacyAccepted()) { + return false + } + + if (locationPermissionState.value === 'granted') { + return true + } + + if (!navigator.geolocation) { + setPermissionState(locationPermissionState, 'unsupported') + return false + } + + return new Promise((resolve) => { + navigator.geolocation.getCurrentPosition( + async () => { + setPermissionState(locationPermissionState, 'granted') + await syncPermissionState('geolocation') + resolve(true) + }, + async () => { + setPermissionState(locationPermissionState, 'denied') + await syncPermissionState('geolocation') + resolve(false) + } + ) + }) + } + + onBeforeUnmount(() => { + if (cameraPermissionStatus) { + cameraPermissionStatus.onchange = null + } + + if (locationPermissionStatus) { + locationPermissionStatus.onchange = null + } + }) + return { - // checkCameraPermission, - // checkLocationPermission, + cameraPermissionState, + locationPermissionState, checkPrivacyAccepted, + syncPermissionStates, + requestCameraPermission, + requestLocationPermission, } } diff --git a/src/stores/socket.ts b/src/stores/socket.ts new file mode 100644 index 0000000..28c1e3b --- /dev/null +++ b/src/stores/socket.ts @@ -0,0 +1,101 @@ +import { ref } from 'vue' +import config from '@/app.config' +import { getToken } from '@/plugins/auth' +import { defineStore } from 'pinia' +import { Notify } from 'quasar' +import { io, Socket } from 'socket.io-client' +interface sockeBackup { + message: string + success?: boolean +} + +export const useSocketStore = defineStore('socket', () => { + let socket: Socket + const notificationCounter = ref(0); + + async function init() { + socket = io(new URL(config.API.socket).origin, { + auth: { token: await getToken() }, + path: '/api/v1/org-socket', + }) + + socket.on('socket-notification', (payload) => { + let body: sockeBackup = JSON.parse(payload) + notificationCounter.value++ + notifyStatus(body.message, body.success) + }) + } + + function notifyStatus(message: string, success?: boolean) { + Notify.create({ + group: false, + type: success === undefined || success ? 'positive' : 'negative', + message: `${message}`, + position: 'top', + classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้ + timeout: success === undefined || success ? 3000 : 0, + actions: + success === undefined || success + ? [] + : [ + { + icon: 'close', + color: 'white', + round: true, + }, + ], + progress: true, + }) + } + + function fnStyleNotiOrg() { + if (document.getElementById('notify-link-style')) return + const style = document.createElement('style') + style.id = 'notify-link-style' + style.textContent = ` + .notify-link { + padding: 4px 8px; + border-radius: 4px; + text-decoration: none; + color: #fff; + border: 1px solid #fff; + transition: all 0.3s; + cursor: pointer; + margin:0 0 0 5px; + } + .notify-link:hover { + background-color: #ffffff; + color: #21BA45; + } + ` + document.head.appendChild(style) + } + ;(window as any).resetOrgPage = (type: string) => { + localStorage.setItem('org_type', type) + window.location.reload() + } + function notifyStatusOrg(type: string, message: string, success?: boolean) { + fnStyleNotiOrg() + Notify.create({ + message: `${message} ${ + type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน' + }`, + html: true, + group: false, + type: success === undefined || success ? 'positive' : 'negative', + position: 'top', + timeout: 0, + actions: [ + { + icon: 'close', + color: 'white', + round: true, + }, + ], + }) + } + + init() + + return { notificationCounter } +}) diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass index f2c3dc4..e590103 100644 --- a/src/style/quasar-variables.sass +++ b/src/style/quasar-variables.sass @@ -69,30 +69,30 @@ div $separator-color: #EDEDED !default .bg-teal-1 - background: #e0f2f1a6 !important - + background: #e0f2f1a6 !important + .table_ellipsis - max-width: 200px - white-space: nowrap - overflow: hidden - text-overflow: ellipsis + max-width: 200px + white-space: nowrap + overflow: hidden + text-overflow: ellipsis .table_ellipsis:hover - word-wrap: break-word - overflow: visible - white-space: normal + word-wrap: break-word + overflow: visible + white-space: normal .table_ellipsis2 - max-width: 25vw - white-space: nowrap - overflow: hidden - text-overflow: ellipsis + max-width: 25vw + white-space: nowrap + overflow: hidden + text-overflow: ellipsis .table_ellipsis2:hover - word-wrap: break-word - overflow: visible - white-space: normal - transition: width 2s + word-wrap: break-word + overflow: visible + white-space: normal + transition: width 2s $muti-tab: #87d4cc .text-muti-tab @@ -100,35 +100,33 @@ $muti-tab: #87d4cc .bg-muti-tab background: $muti-tab !important - /* editor */ .q-editor font-size: 1rem line-height: 1.5rem font-weight: 400 - + .q-editor h1, .q-menu h1 - font-size: 1.5rem - line-height: 2rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em + font-size: 1.5rem + line-height: 2rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em .q-editor h2, .q-menu h2 - font-size: 1.25rem - line-height: 1.5rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em - + font-size: 1.25rem + line-height: 1.5rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em .q-editor h3, .q-menu h3 - font-size: 1.1rem - line-height: 1.5rem - font-weight: 400 - margin-block-start: 0em - margin-block-end: 0em + font-size: 1.1rem + line-height: 1.5rem + font-weight: 400 + margin-block-start: 0em + margin-block-end: 0em .q-editor p, .q-menu p margin: 0 @@ -136,4 +134,7 @@ $muti-tab: #87d4cc /* q-tree */ .q-tree - color: #c8d3db + color: #c8d3db + +.custom-notification-top + margin-top: 180px !important diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 67bf8db..84a3e77 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,8 +1,17 @@ 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