+
+
@@ -354,29 +659,49 @@ defineExpose({
"
>
พื้นที่ใกล้เคียง
+
+
+
+ {{ textTooltip }}
+
:
- {{ poiPlaceName || 'ไม่พบข้อมูล' }}
+ {{ poiPlaceName }}
-
+
-
- {{ poiPlaceName || 'ไม่พบข้อมูล' }}
+
+ พื้นที่ใกล้เคียง
+
+
+
+ {{ poiPlaceName || '-' }}
+
-
+
@@ -386,4 +711,8 @@ defineExpose({
.expanAS.q-item__section--avatar {
min-width: 40px !important;
}
+
+.map-hidden {
+ visibility: hidden;
+}
diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue
index 7360980..1264791 100644
--- a/src/components/AscGISMapTime.vue
+++ b/src/components/AscGISMapTime.vue
@@ -1,9 +1,8 @@
-
+
-
+
@@ -304,6 +305,9 @@ function onClose() {
+
+ ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
+
@@ -329,12 +334,6 @@ function onClose() {
v-model="formData.phone"
class="inputgreen"
hide-bottom-space
- :rules="[
- () =>
- !!formData.email ||
- !!formData.phone ||
- 'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
- ]"
/>
+
+
+ พบปัญหาการใช้งานกรุณาติดต่อผู้ดูแลระบบ
+ 088-264-9800
+
+
+
+
+
+
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index c299e4f..79a8f68 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,6 +1,6 @@
@@ -80,7 +114,7 @@ onMounted(() => {
>
import { ref, watch } from 'vue'
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
import type { DataCheckIn } from '@/interface/index/Main'
diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue
index a72dde3..1bd816b 100644
--- a/src/components/PopupPrivacy.vue
+++ b/src/components/PopupPrivacy.vue
@@ -4,9 +4,11 @@ import { useQuasar } from 'quasar'
import http from '@/plugins/http'
import config from '@/app.config'
import { usePrivacyStore } from '@/stores/privacy'
+import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
const $q = useQuasar()
const privacyStore = usePrivacyStore()
+const positionKeycloakStore = usePositionKeycloakStore()
const modal = defineModel('modal', {
required: true,
@@ -78,6 +80,12 @@ const handleAccept = async () => {
accept: true,
})
privacyStore.setAccepted(true)
+
+ // อัปเดต privacyCheckin ใน positionKeycloak store ด้วย
+ if (positionKeycloakStore.dataPositionKeycloak) {
+ positionKeycloakStore.dataPositionKeycloak.privacyCheckin = true
+ }
+
modal.value = false
} catch (error) {}
}
@@ -89,7 +97,7 @@ const toggleDetails = () => {
const checkIfScrollable = () => {
nextTick(() => {
- const container = scrollContainer.value?.$el || scrollContainer.value
+ const container = (scrollContainer.value as any)?.$el || scrollContainer.value
if (container) {
const { scrollHeight, clientHeight } = container
@@ -108,6 +116,7 @@ const checkIfScrollable = () => {
transition-show="slide-up"
transition-hide="slide-down"
:maximized="$q.screen.lt.sm"
+ @show="checkIfScrollable"
>
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 5d13e66..e081a3c 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -2,42 +2,37 @@
import { ref, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
-import { is, type QTableProps } from 'quasar'
+import type { QTableProps } from 'quasar'
import type { Pagination, DataCheckIn } from '@/interface/index/Main'
import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
const { date2Thai } = useCounterMixin()
-const stores = useChekIn()
+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,
- defualt: false,
- },
- pageSize: {
- type: Number,
- defualt: 10,
- },
- page: {
- type: Number,
- defualt: 1,
+ default: false,
},
maxPage: {
type: Number,
- defualt: 1,
+ default: 1,
},
total: {
type: Number,
- defualt: 0,
+ default: 0,
},
tab: {
type: String,
- defualt: '',
+ default: '',
required: true,
},
fetchData: {
@@ -62,15 +57,15 @@ const selected = ref([])
const columns = ref(
props.tab == 'history'
? [
- {
- name: 'checkInDate',
- align: 'left',
- label: 'วัน/เดือน/ปี',
- sortable: true,
- field: 'checkInDate',
- headerStyle: 'font-size: 14px',
- style: 'font-size: 14px; width:15%;',
- },
+ // {
+ // name: 'checkInDate',
+ // align: 'left',
+ // label: 'วัน/เดือน/ปี',
+ // sortable: true,
+ // field: 'checkInDate',
+ // headerStyle: 'font-size: 14px',
+ // style: 'font-size: 14px; width:15%;',
+ // },
{
name: 'checkInTime',
align: 'left',
@@ -79,6 +74,9 @@ const columns = ref(
field: 'checkInTime',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px; width:15%;',
+ format: (val: string, row: DataCheckIn) => {
+ return `${row.checkInDate} ${val} น.`
+ },
},
{
name: 'checkInLocation',
@@ -107,7 +105,9 @@ const columns = ref(
headerStyle: 'font-size: 14px',
style: 'font-size: 14px; width:15%;',
format: (val: string, row: DataCheckIn) => {
- return row.checkOutStatus != '-' && val ? val : '-'
+ return row.checkOutStatus != '-' && val
+ ? `${row.checkOutDate} ${val} น.`
+ : '-'
},
},
{
@@ -182,7 +182,6 @@ const columns = ref(
)
const visibleColumns = ref([
'checkInDateTime',
- 'checkInDate',
'checkInTime',
'checkInLocation',
'checkInStatus',
@@ -190,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() // ข้อมูลการลงเวลา
@@ -254,7 +242,7 @@ function classStatus(status: string) {
case 'ปฏิบัติงานไม่ครบตามกำหนดเวลา':
return 'text-orange-8'
default:
- break
+ return ''
}
}
@@ -272,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)
}
)
@@ -336,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"
>
@@ -472,10 +458,11 @@ watch(
+
ทั้งหมด {{ props.total }} รายการ
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index ab54d66..c95111d 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -2,14 +2,14 @@
import { onMounted, ref, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
import { calculateFiscalYear } from '@/utils/function'
import type { DataDateMonthObject } from '@/interface/index/Main'
import Popup from '@/components/PopUp.vue'
-const stores = useChekIn()
+const stores = useCheckIn()
const { monthYear2Thai } = useCounterMixin()
/**
@@ -18,11 +18,11 @@ const { monthYear2Thai } = useCounterMixin()
const props = defineProps({
fetchData: {
type: Function,
- require: true,
+ required: true,
},
tab: {
type: String,
- require: true,
+ required: true,
},
})
const emit = defineEmits(['update:year'])
@@ -43,8 +43,6 @@ function filterYearFn(type: string) {
const year = type === 'year' ? filterYear.value : dateMonth.value.year
const month = dateMonth.value.month
- console.log(year, month)
-
// ตรวจสอบค่าก่อนส่ง
if (isNaN(Number(year)) || isNaN(Number(month))) {
console.warn('Invalid year or month value:', { year, month })
diff --git a/src/composables/useLocationValidation.ts b/src/composables/useLocationValidation.ts
deleted file mode 100644
index 689af41..0000000
--- a/src/composables/useLocationValidation.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-import { ref } from 'vue'
-import { useQuasar } from 'quasar'
-import { useCounterMixin } from '@/stores/mixin'
-
-export interface LocationValidationResult {
- isValid: boolean
- isMockDetected: boolean
- confidence: 'low' | 'medium' | 'high'
- warnings: string[]
- errors: string[]
-}
-
-export interface PositionSnapshot {
- latitude: number
- longitude: number
- timestamp: number
-}
-
-// Configuration constants - exported for documentation and testing purposes
-export const VALIDATION_CONFIG = {
- MAX_TIMESTAMP_AGE_MS: 60_000, // 60 seconds - maximum acceptable age of location data
- MAX_ACCURACY_METERS: 100, // 100 meters - maximum acceptable GPS accuracy
- MAX_SPEED_MS: 100, // 100 m/s (~360 km/h) - maximum plausible movement speed
- POSITION_HISTORY_SIZE: 5, // number of positions to keep for pattern detection
- MOCK_INDICATOR_THRESHOLD: 3, // threshold for mock detection (indicators >= 3 = mock)
- SUSPICIOUS_ACCURACY_MAX: 5, // accuracy ≤ 5m AND integer = suspicious (real GPS never rounds to whole number)
- // Geographic service area (Thailand) to reduce spoofing risk from remote fake coordinates.
- SERVICE_AREA: {
- MIN_LAT: 5.0,
- MAX_LAT: 21.0,
- MIN_LON: 97.0,
- MAX_LON: 106.0,
- },
-} as const
-
-export function useLocationValidation() {
- const $q = useQuasar()
- const { messageError } = useCounterMixin()
-
- // Thai error messages - exported for i18n consistency
- const errorMessages = {
- MOCK_DETECTED:
- 'ตรวจพบว่าตำแหน่ง GPS อาจไม่ถูกต้อง กรุณาปิดแอปจำลองตำแหน่งและลองใหม่',
- INVALID_COORDINATES: 'พิกัดตำแหน่งไม่ถูกต้อง กรุณาลองใหม่',
- STALE_TIMESTAMP: 'ข้อมูลตำแหน่งเก่าเกินไป กรุณารับสัญญาณ GPS ใหม่',
- POOR_ACCURACY: 'ความแม่นยำตำแหน่งต่ำเกินไป กรุณาตรวจสอบการรับสัญญาณ GPS',
- IMPOSSIBLE_SPEED:
- 'ตรวจพบการเคลื่อนที่ด้วยความเร็วผิดปกติ อาจเป็นการจำลองตำแหน่ง',
- SUSPICIOUS_ACCURACY: 'ตรวจพบค่าความแม่นยำที่ผิดปกติ อาจเป็นการจำลองตำแหน่ง',
- DUPLICATE_POSITION: 'ตรวจพบพิกัดตำแหน่งซ้ำกัน อาจเป็นการจำลองตำแหน่ง',
- OUT_OF_SERVICE_AREA:
- 'ตรวจพบตำแหน่งนอกพื้นที่ใช้งานของระบบ กรุณาปิดแอปจำลองตำแหน่งและลองใหม่',
- }
-
- const previousPositions = ref
([])
-
- // คำนวณระยะห่างระหว่าง 2 จุด (Haversine formula)
- const haversineDistance = (
- lat1: number,
- lon1: number,
- lat2: number,
- lon2: number
- ): number => {
- const R = 6371e3 // Earth's radius in meters
- const φ1 = (lat1 * Math.PI) / 180
- const φ2 = (lat2 * Math.PI) / 180
- const Δφ = ((lat2 - lat1) * Math.PI) / 180
- const Δλ = ((lon2 - lon1) * Math.PI) / 180
-
- const a =
- Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
- Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2)
- const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-
- return R * c
- }
-
- // ตรวจสอบพิกัดถูกต้อง
- const validateCoordinates = (lat: number, lon: number): boolean => {
- return (
- lat >= -90 &&
- lat <= 90 &&
- lon >= -180 &&
- lon <= 180 &&
- !isNaN(lat) &&
- !isNaN(lon) &&
- !(lat === 0 && lon === 0) // Mock มักใช้ 0,0
- )
- }
-
- // ตรวจสอบความแม่นยำ
- const validateAccuracy = (accuracy: number | null): boolean => {
- if (accuracy === null) return true
- return accuracy <= VALIDATION_CONFIG.MAX_ACCURACY_METERS
- }
-
- // ตรวจสอบ Timestamp
- const validateTimestamp = (timestamp: number): boolean => {
- const now = Date.now()
- const age = Math.abs(now - timestamp)
- return age <= VALIDATION_CONFIG.MAX_TIMESTAMP_AGE_MS
- }
-
- // คำนวณความเร็ว
- const calculateSpeed = (
- pos1: PositionSnapshot,
- pos2: PositionSnapshot
- ): number => {
- const distance = haversineDistance(
- pos1.latitude,
- pos1.longitude,
- pos2.latitude,
- pos2.longitude
- )
- const timeDiff = Math.abs(pos2.timestamp - pos1.timestamp) / 1000 // seconds
- return timeDiff > 0 ? distance / timeDiff : 0
- }
-
- // ตรวจสอบความเร็วปกติ
- const validateSpeed = (
- current: PositionSnapshot,
- previous: PositionSnapshot
- ): boolean => {
- const speed = calculateSpeed(previous, current)
- return speed <= VALIDATION_CONFIG.MAX_SPEED_MS
- }
-
- // ตรวจสอบค่าความแม่นยำที่ผิดปกติ (mock apps มักรายงานค่าที่เป็นเลขจำนวนเต็มสวยงาม เช่น 5.0, 3.0)
- const hasSuspiciousPerfectAccuracy = (accuracy: number | null): boolean => {
- if (accuracy === null) return false
- return (
- Number.isInteger(accuracy) &&
- accuracy <= VALIDATION_CONFIG.SUSPICIOUS_ACCURACY_MAX
- )
- }
-
- // ตรวจสอบพิกัดซ้ำกันทุกค่า (real GPS มีการสั่นเล็กน้อย mock app มักคืนพิกัดเดิมซ้ำ)
- const hasDuplicateCoordinates = (lat: number, lon: number): boolean => {
- return previousPositions.value.some(
- (p) => p.latitude === lat && p.longitude === lon
- )
- }
-
- const isWithinServiceArea = (lat: number, lon: number): boolean => {
- const area = VALIDATION_CONFIG.SERVICE_AREA
- return (
- lat >= area.MIN_LAT &&
- lat <= area.MAX_LAT &&
- lon >= area.MIN_LON &&
- lon <= area.MAX_LON
- )
- }
-
- // Main validation function
- const validateLocation = (
- position: GeolocationPosition
- ): LocationValidationResult => {
- const warnings: string[] = []
- const errors: string[] = []
- let mockIndicators = 0
-
- const { latitude, longitude, accuracy } = position.coords
- const { timestamp } = position
-
- // 1. Coordinate validation
- if (!validateCoordinates(latitude, longitude)) {
- errors.push(errorMessages.INVALID_COORDINATES)
- mockIndicators += 3
- }
-
- // 1.1 Service-area validation (critical for remote spoofed coordinates)
- if (!isWithinServiceArea(latitude, longitude)) {
- errors.push(errorMessages.OUT_OF_SERVICE_AREA)
- mockIndicators += 3
- }
-
- // 2. Timestamp validation
- if (!validateTimestamp(timestamp)) {
- errors.push(errorMessages.STALE_TIMESTAMP)
- mockIndicators += 2
- }
-
- // 3. Accuracy validation
- if (!validateAccuracy(accuracy)) {
- warnings.push(errorMessages.POOR_ACCURACY)
- mockIndicators += 1
- }
-
- // 4. Compare with previous positions
- if (previousPositions.value.length > 0) {
- const previous =
- previousPositions.value[previousPositions.value.length - 1]
-
- if (!validateSpeed({ latitude, longitude, timestamp }, previous)) {
- errors.push(errorMessages.IMPOSSIBLE_SPEED)
- mockIndicators += 3
- }
- }
-
- // 5. Suspiciously perfect accuracy — real GPS never rounds to a whole-number ≤ 5m
- if (hasSuspiciousPerfectAccuracy(accuracy)) {
- warnings.push(errorMessages.SUSPICIOUS_ACCURACY)
- mockIndicators += 2
- }
-
- // 6. Exact duplicate coordinates — real GPS always drifts slightly between readings
- if (
- previousPositions.value.length > 0 &&
- hasDuplicateCoordinates(latitude, longitude)
- ) {
- warnings.push(errorMessages.DUPLICATE_POSITION)
- mockIndicators += 2
- }
-
- // Store current position
- previousPositions.value.push({ latitude, longitude, timestamp })
- if (
- previousPositions.value.length > VALIDATION_CONFIG.POSITION_HISTORY_SIZE
- ) {
- previousPositions.value.shift()
- }
-
- // Determine result
- const isMockDetected =
- mockIndicators >= VALIDATION_CONFIG.MOCK_INDICATOR_THRESHOLD
- const isValid = errors.length === 0
-
- let confidence: 'low' | 'medium' | 'high' = 'low'
- if (mockIndicators >= 5) confidence = 'high'
- else if (mockIndicators >= 3) confidence = 'medium'
-
- return {
- isValid,
- isMockDetected,
- confidence,
- warnings,
- errors,
- }
- }
-
- const showMockWarning = (result: LocationValidationResult) => {
- if (!result.isMockDetected) return
- messageError($q, '', errorMessages.MOCK_DETECTED)
- }
-
- const resetValidation = () => {
- previousPositions.value = []
- }
-
- return {
- validateLocation,
- showMockWarning,
- resetValidation,
- }
-}
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/interface/index/Main.ts b/src/interface/index/Main.ts
index 14def36..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
@@ -38,6 +38,7 @@ interface DataCheckIn {
checkInLocation: string
checkInStatus: string
checkInTime: string
+ checkOutDate: string
checkOutLocation: string
checkOutStatus: string
checkOutTime: string
diff --git a/src/interface/keycloak-position.ts b/src/interface/keycloak-position.ts
new file mode 100644
index 0000000..dfd2680
--- /dev/null
+++ b/src/interface/keycloak-position.ts
@@ -0,0 +1,29 @@
+/**
+ * Interface for Keycloak position data from /org/profile/keycloak/position API
+ */
+export interface KeycloakPosition {
+ /** Privacy consent status */
+ privacyCheckin: boolean
+ /** Profile image filename */
+ avatarName?: string
+ /** User profile ID */
+ profileId: string
+ /** Organization hierarchy data */
+ organization?: Organization
+}
+
+/**
+ * Organization hierarchy structure
+ */
+export interface Organization {
+ /** Top level organization */
+ root?: string
+ /** Child level 1 */
+ child1?: string
+ /** Child level 2 */
+ child2?: string
+ /** Child level 3 */
+ child3?: string
+ /** Child level 4 */
+ child4?: string
+}
diff --git a/src/main.ts b/src/main.ts
index fb28e50..04b0dfd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from '@/App.vue'
import '@/registerServiceWorker'
import router from '@/router'
import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { Quasar, Dialog, Notify, Loading } from 'quasar'
import '@vuepic/vue-datepicker/dist/main.css'
import quasarUserOptions from '@/quasar-user-options'
@@ -11,9 +12,13 @@ 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()
+pinia.use(piniaPluginPersistedstate)
app.use(router)
app.use(pinia)
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 9020cb6..378006f 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -2,7 +2,7 @@ import Axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
import { getToken } from './auth'
const http = Axios.create({
- timeout: 1000000000, // เพิ่มค่า timeout
+ timeout: 30000, // 30 seconds - reasonable timeout for API calls
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
@@ -30,6 +30,7 @@ http.interceptors.response.use(
// eslint-disable-next-line no-prototype-builtins
if (error.hasOwnProperty('response')) {
if (error.response.status === 401 || error.response.status === 403) {
+ // TODO: Implement proper logout logic on 401/403
// Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
// Store.commit("REMOVE_ACCESS_TOKEN")
}
diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts
index bb382dd..f1660ed 100644
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@@ -1,6 +1,8 @@
// // authen with keycloak client
// import Keycloak from 'keycloak-js'
+export {}
+
// const ACCESS_TOKEN = 'BMAHRIS_KEYCLOAK_IDENTITY'
// const REFRESH_TOKEN = 'BMAHRIS_KEYCLOAK_REFRESH'
// const keycloakConfig = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 23e3edb..8346697 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import MainView from '@/views/MainView.vue'
const loginView = () => import('@/views/login.vue')
const resetPasswordView = () => import('@/views/ResetPassword.vue')
+const noPositionView = () => import('@/views/NoPositionView.vue')
import { authenticated, logout } from '@/plugins/auth'
@@ -24,14 +25,14 @@ const router = createRouter({
Auth: true,
},
},
- {
- path: '/map',
- name: 'map',
- component: MapView,
- meta: {
- Auth: true,
- },
- },
+ // {
+ // path: '/map',
+ // name: 'map',
+ // component: MapView,
+ // meta: {
+ // Auth: true,
+ // },
+ // },
{
path: '/about',
name: 'about',
@@ -87,19 +88,63 @@ const router = createRouter({
Auth: false,
},
},
+ {
+ path: '/no-position',
+ name: 'no-position',
+ component: noPositionView,
+ meta: {
+ Auth: false,
+ },
+ },
],
})
// authen with keycloak client
router.beforeEach(async (to, from, next) => {
+ // ตรวจสอบเส้นทางพิเศษที่ไม่ต้องตรวจสอบสิทธิ์
+ const publicPaths = ['/login', '/auth', '/reset-password', '/no-position']
+ if (publicPaths.includes(to.path)) {
+ next()
+ return
+ }
+
+ // ตรวจสอบการ authenticate
if (to.meta.Auth) {
const checkAuthen = await authenticated()
if (!checkAuthen && to.meta.Auth) {
logout()
+ return
}
- } else {
- next()
}
+
+ // ตรวจสอบว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
+ // ต้องทำการ dynamic import เนื่องจากเป็นการใช้งาน Pinia store ใน router
+ if (to.path !== '/no-position') {
+ try {
+ const { usePositionKeycloakStore } = await import('@/stores/positionKeycloak')
+ const positionKeycloakStore = usePositionKeycloakStore()
+ const dataPositionKeycloak = positionKeycloakStore.dataPositionKeycloak
+
+ // ถ้ามีข้อมูล positionKeycloak แล้ว ให้ตรวจสอบว่ามี organization หรือไม่
+ if (dataPositionKeycloak) {
+ const hasOrganization =
+ dataPositionKeycloak.organization &&
+ (dataPositionKeycloak.organization.root ||
+ dataPositionKeycloak.organization.child1 ||
+ dataPositionKeycloak.organization.child2 ||
+ dataPositionKeycloak.organization.child3 ||
+ dataPositionKeycloak.organization.child4)
+
+ if (!hasOrganization) {
+ next('/no-position')
+ return
+ }
+ }
+ } catch (error) {
+ console.error('Error checking position:', error)
+ }
+ }
+
next()
})
diff --git a/src/stores/chekin.ts b/src/stores/checkin.ts
similarity index 96%
rename from src/stores/chekin.ts
rename to src/stores/checkin.ts
index bf27004..47f0694 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/checkin.ts
@@ -8,7 +8,7 @@ const mixin = useCounterMixin()
const { date2Thai } = mixin
/** store for checkin history*/
-export const useChekIn = defineStore('checkin', () => {
+export const useCheckIn = defineStore('checkin', () => {
const year = ref(calculateFiscalYear(new Date())) //ปีงบประมาณ
const rows = ref([])
const tab = ref('history')
@@ -33,6 +33,7 @@ export const useChekIn = defineStore('checkin', () => {
editStatus: e.editStatus != '' ? convertEditStatus(e.editStatus) : '',
editReason: e.editReason,
isEdit: e.isEdit,
+ checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : null,
}))
rows.value = dataList
}
diff --git a/src/stores/positionKeycloak.ts b/src/stores/positionKeycloak.ts
index c3a1ec0..22ffb52 100644
--- a/src/stores/positionKeycloak.ts
+++ b/src/stores/positionKeycloak.ts
@@ -1,65 +1,78 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
+import type { KeycloakPosition } from '@/interface/keycloak-position'
-export const usePositionKeycloakStore = defineStore('positionKeycloak', () => {
- const menuData = ref([
- 'ลงเวลาปฏิบัติงาน',
- 'ประวัติการลงเวลา',
- 'รายการลงเวลากรณีพิเศษ',
- ])
- const dataPositionKeycloak = ref(null)
+export const usePositionKeycloakStore = defineStore(
+ 'positionKeycloak',
+ () => {
+ const menuData = ref([
+ 'ลงเวลาปฏิบัติงาน',
+ 'ประวัติการลงเวลา',
+ 'รายการลงเวลากรณีพิเศษ',
+ ])
+ const dataPositionKeycloak = ref(null)
+ const profileImg = ref('')
- function setPositionKeycloak(data: any) {
- dataPositionKeycloak.value = data
- }
-
- function findOrgName(obj: any) {
- if (obj) {
- let name =
- obj.child4 != null &&
- obj.child4 !== '' &&
- obj.child3 != null &&
- obj.child3 !== ''
- ? obj.child4 + (obj.child3 ? '/' : '')
- : obj.child4 != null && obj.child4 !== ''
- ? obj.child4
- : ''
-
- name +=
- obj.child3 != null &&
- obj.child3 !== '' &&
- obj.child2 != null &&
- obj.child2 !== ''
- ? obj.child3 + (obj.child2 ? '/' : '')
- : obj.child3 != null && obj.child3 !== ''
- ? obj.child3
- : ''
-
- name +=
- obj.child2 != null &&
- obj.child2 !== '' &&
- obj.child1 != null &&
- obj.child1 !== ''
- ? obj.child2 + (obj.child1 ? '/' : '')
- : obj.child2 != null && obj.child2 !== ''
- ? obj.child2
- : ''
-
- name +=
- obj.child1 != null &&
- obj.child1 !== '' &&
- obj.root != null &&
- obj.root !== ''
- ? obj.child1 + (obj.root ? '/' : '')
- : obj.child1 != null && obj.child1 !== ''
- ? obj.child1
- : ''
- name += obj.root != null && obj.root !== '' ? obj.root : ''
- return name == '' ? '-' : name
- } else {
- return ''
+ function setPositionKeycloak(data: KeycloakPosition) {
+ dataPositionKeycloak.value = data
}
- }
- return { setPositionKeycloak, dataPositionKeycloak, findOrgName, menuData }
-})
+ /**
+ * ตั้งค่ารูปโปรไฟล์ผู้ใช้งาน
+ * @param url URL ของรูปโปรไฟล์
+ */
+ function setProfileImg(url: string) {
+ profileImg.value = url
+ }
+
+ /**
+ * ล้างข้อมูล Keycloak position (ใช้เมื่อ logout)
+ */
+ function clearPositionKeycloak() {
+ dataPositionKeycloak.value = null
+ profileImg.value = ''
+ // ลบ localStorage ด้วยเพื่อให้แน่ใจว่าข้อมูลหายจริง
+ localStorage.removeItem('positionKeycloak')
+ }
+
+ /**
+ * สร้างชื่อหน่วยงานจากข้อมูลลำดับชั้นองค์กร
+ * @param obj ข้อมูลองค์กรที่มีโครงสร้าง child4 -> child3 -> child2 -> child1 -> root
+ * @returns ชื่อหน่วยงานในรูปแบบ string เชื่อมด้วย /
+ */
+ function findOrgName(obj: KeycloakPosition | null): string {
+ if (!obj?.organization) {
+ return ''
+ }
+
+ const org = obj.organization
+ const levels = ['child4', 'child3', 'child2', 'child1', 'root'] as const
+ const parts: string[] = []
+
+ for (const level of levels) {
+ const value = org[level]
+ if (value) {
+ parts.push(value)
+ }
+ }
+
+ return parts.length > 0 ? parts.join('/') : '-'
+ }
+
+ return {
+ setPositionKeycloak,
+ clearPositionKeycloak,
+ setProfileImg,
+ dataPositionKeycloak,
+ profileImg,
+ findOrgName,
+ menuData,
+ }
+ },
+ {
+ persist: {
+ key: 'positionKeycloak',
+ storage: localStorage, // ใช้ localStorage เพื่อให้ข้อมูลอยู่ถาวร
+ },
+ }
+)
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/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()
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index a2f007f..8f5a2bd 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -5,7 +5,7 @@ import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import http from '@/plugins/http'
import config from '@/app.config'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
import { useCounterMixin } from '@/stores/mixin'
import { calculateFiscalYear } from '@/utils/function'
@@ -14,7 +14,7 @@ import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
const $q = useQuasar() //ใช้ noti quasar
const router = useRouter()
-const stores = useChekIn()
+const stores = useCheckIn()
const { showLoader, hideLoader, messageError } = useCounterMixin()
const { fetchHistoryList } = stores
@@ -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(
/>
-import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
+import {
+ ref,
+ reactive,
+ onMounted,
+ watch,
+ onBeforeUnmount,
+ computed,
+ nextTick,
+} from 'vue'
import { useQuasar } from 'quasar'
-import moment from 'moment'
+import { format } from 'date-fns'
import Camera from 'simple-vue-camera'
+import { storeToRefs } from 'pinia'
import config from '@/app.config'
import http from '@/plugins/http'
import { useCounterMixin } from '@/stores/mixin'
import { usePermissions } from '@/composables/usePermissions'
-import { useLocationValidation } from '@/composables/useLocationValidation'
import { usePrivacyStore } from '@/stores/privacy'
+import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
+import { useSocketStore } from '@/stores/socket'
import type { FormRef, OptionReason } from '@/interface/response/checkin'
@@ -18,12 +28,36 @@ import MapCheck from '@/components/AscGISMap.vue'
const mixin = useCounterMixin()
const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
const $q = useQuasar()
-const { checkPrivacyAccepted } = usePermissions()
-const { validateLocation, showMockWarning, resetValidation } =
- useLocationValidation()
+const {
+ cameraPermissionState,
+ checkPrivacyAccepted,
+ syncPermissionStates,
+ requestCameraPermission,
+} = usePermissions()
+const socketStore = useSocketStore()
+const { notificationCounter } = storeToRefs(socketStore)
const privacyStore = usePrivacyStore()
+const positionKeycloakStore = usePositionKeycloakStore()
const MOCK_CHECK_DELAY_MS = 800
+// เช็คว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
+const hasOrganization = computed(() => {
+ const data = positionKeycloakStore.dataPositionKeycloak
+ if (!data || !data.organization) return false
+
+ const org = data.organization
+ // ตรวจสอบว่ามีค่าที่ไม่ใช่ null, undefined หรือ string ว่าง
+ const hasValue = (val: string | null | undefined) => val && val.trim() !== ''
+
+ return !!(
+ hasValue(org.root) ||
+ hasValue(org.child1) ||
+ hasValue(org.child2) ||
+ hasValue(org.child3) ||
+ hasValue(org.child4)
+ )
+})
+
const modalTime = ref(false) // Dailog ลงเวลาเข้างานของคุณ
const checkStatus = ref('')
const statusCheckin = ref(true) // สถานะเวลา เข้า,ออก
@@ -33,11 +67,39 @@ const msgCheckTime = ref('') // ข้อความแจ้งเต
const isDisabledCheckTime = ref(true) // ข้อความแจ้งเตือน
const isErr = ref(null) // ข้อความแจ้งเตือน
const endTimeAfternoon = ref('12:00:00') //เวลาเช็คเอาท์ตามรอบ
+const crossDayCheckoutWarning = ref('')
const isLoadingCheckTime = ref(false) // ตัวแปรสำหรับการโหลด
const disabledBtn = ref(false)
-const locationGranted = ref(false)
-const isMockLocationDetected = ref(false)
+
+function parseApiDateTime(value?: string | null) {
+ if (!value) return null
+
+ const normalizedValue = value.includes('T') ? value : value.replace(' ', 'T')
+ const parsedDate = new Date(normalizedValue)
+ return Number.isNaN(parsedDate.getTime()) ? null : parsedDate
+}
+
+function isSameCalendarDay(firstDate: Date, secondDate: Date) {
+ return (
+ firstDate.getFullYear() === secondDate.getFullYear() &&
+ firstDate.getMonth() === secondDate.getMonth() &&
+ firstDate.getDate() === secondDate.getDate()
+ )
+}
+
+function updateCrossDayCheckoutWarning(checkInTime?: string | null) {
+ crossDayCheckoutWarning.value = ''
+
+ const checkInDate = parseApiDateTime(checkInTime)
+ if (!checkInDate) return
+
+ if (!isSameCalendarDay(checkInDate, new Date())) {
+ crossDayCheckoutWarning.value = `คุณยังไม่ได้ลงเวลาออกของวันที่ ${date2Thai(
+ checkInDate
+ )} กรุณาลงเวลาออกก่อน จึงจะลงเวลาเข้าของวันนี้ได้`
+ }
+}
/**
* fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
@@ -51,6 +113,7 @@ async function fetchCheckTime(load: any = true) {
statusCheckin.value = data.checkInId ? false : true
checkInId.value = data.checkInId ? data.checkInId : ''
+ updateCrossDayCheckoutWarning(data.checkInTime)
endTimeAfternoon.value = data.endTimeAfternoon
isDisabledCheckTime.value = isDisabledCheckTime.value ? true : false
})
@@ -74,15 +137,16 @@ const formattedM = ref()
const formattedH = ref()
const formattedHH = ref()
const formattedA = ref()
+const clockInterval = ref | undefined>()
/** function อัพเดทเวลา*/
function updateClock() {
- const date = Date.now()
- const hh = moment(date).format('HH')
- const mm = moment(date).format('mm')
- const ss = moment(date).format('ss')
- const HH = moment(date).format('hh')
- const A = moment(date).format('a')
+ const date = new Date()
+ const hh = format(date, 'HH')
+ const mm = format(date, 'mm')
+ const ss = format(date, 'ss')
+ const HH = format(date, 'hh')
+ const A = format(date, 'a')
formattedS.value = ss
formattedM.value = mm
@@ -90,7 +154,6 @@ function updateClock() {
formattedHH.value = HH
formattedA.value = A
}
-setInterval(updateClock, 1000)
/** form-data */
const formLocation = reactive({
@@ -103,6 +166,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 เรียกพิกัดละติจูด พิกัดลองติจูด
@@ -119,26 +183,7 @@ async function updateLocation(
formLocation.POI = namePOI
}
-/**
- * รับค่าสถานะ location จาก AscGISMap
- */
-function onLocationStatus(status: boolean) {
- locationGranted.value = status
- if (status) {
- isMockLocationDetected.value = false
- }
-}
-
-/**
- * รับค่า mock location detection จาก AscGISMap
- */
-function onMockDetected(result: any) {
- isMockLocationDetected.value = !!result?.isMockDetected
- disabledBtn.value = false
-}
-
function resetLocationForRetry() {
- locationGranted.value = false
formLocation.lat = 0
formLocation.lng = 0
formLocation.POI = ''
@@ -154,6 +199,131 @@ function wait(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
+function getCameraVideoElement() {
+ return camera.value?.video
+}
+
+function prepareInlineCameraVideo(videoElement: HTMLVideoElement) {
+ videoElement.autoplay = true
+ videoElement.muted = true
+ videoElement.setAttribute('autoplay', '')
+ videoElement.setAttribute('muted', '')
+ videoElement.setAttribute('playsinline', '')
+ videoElement.setAttribute('webkit-playsinline', 'true')
+}
+
+function isInlineCameraPreviewReady(videoElement: HTMLVideoElement) {
+ return (
+ Boolean(videoElement.srcObject) &&
+ videoElement.videoWidth > 0 &&
+ videoElement.videoHeight > 0 &&
+ videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
+ )
+}
+
+async function waitForCameraInstance() {
+ for (let attempt = 0; attempt < 10; attempt += 1) {
+ await nextTick()
+
+ if (camera.value) {
+ return camera.value
+ }
+
+ await wait(50)
+ }
+
+ return null
+}
+
+async function stopInlineCamera() {
+ camera.value?.stop()
+ cameraIsOn.value = false
+}
+
+async function remountInlineCameraComponent() {
+ await stopInlineCamera()
+ cameraMountKey.value += 1
+ await nextTick()
+ await wait(INLINE_CAMERA_REMOUNT_DELAY_MS)
+}
+
+async function ensureInlineCameraPreviewReady() {
+ const deadline = Date.now() + INLINE_CAMERA_PREVIEW_TIMEOUT_MS
+ let lastPlaybackError: unknown = null
+
+ while (Date.now() < deadline) {
+ const videoElement = getCameraVideoElement()
+
+ if (videoElement) {
+ prepareInlineCameraVideo(videoElement)
+
+ if (isInlineCameraPreviewReady(videoElement)) {
+ return
+ }
+
+ if (videoElement.srcObject) {
+ try {
+ await videoElement.play()
+ } catch (error) {
+ lastPlaybackError = error
+ }
+ }
+ }
+
+ await wait(INLINE_CAMERA_PREVIEW_POLL_MS)
+ }
+
+ if (lastPlaybackError instanceof Error) {
+ throw lastPlaybackError
+ }
+
+ throw new Error('Inline camera preview did not become ready in time')
+}
+
+async function syncActiveCameraDevices() {
+ const devices: any = await camera.value?.devices(['videoinput'])
+ if (!devices) {
+ return
+ }
+
+ availableCameras.value = devices
+
+ const activeId = camera.value?.currentDeviceID()
+ const activeIdx = activeId
+ ? devices.findIndex((device: any) => device.deviceId === activeId)
+ : -1
+ currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+ currentCameraType.value = resolveCameraType(
+ devices[currentCameraIndex.value]?.label || '',
+ 'front'
+ )
+}
+
+async function startInlineCamera(recoveryAttempt = 0): Promise {
+ const cameraInstance = await waitForCameraInstance()
+
+ if (!cameraInstance) {
+ throw new Error('Camera component is unavailable')
+ }
+
+ try {
+ currentCameraType.value = 'front'
+ await cameraInstance.start()
+ await ensureInlineCameraPreviewReady()
+ await syncActiveCameraDevices()
+ cameraIsOn.value = true
+ } catch (error) {
+ await stopInlineCamera()
+
+ if (recoveryAttempt < MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS) {
+ await remountInlineCameraComponent()
+ return startInlineCamera(recoveryAttempt + 1)
+ }
+
+ throw error
+ }
+}
+
async function getDelayedFreshPosition() {
const firstPosition = await getCurrentPositionAsync({
enableHighAccuracy: true,
@@ -161,7 +331,10 @@ async function getDelayedFreshPosition() {
maximumAge: 0,
})
- await wait(MOCK_CHECK_DELAY_MS)
+ // Only add delay in development mode for testing
+ if (import.meta.env.DEV) {
+ await wait(MOCK_CHECK_DELAY_MS)
+ }
try {
return await getCurrentPositionAsync({
@@ -174,62 +347,6 @@ async function getDelayedFreshPosition() {
}
}
-async function revalidateLocationBeforeSubmit() {
- if (!navigator.geolocation) {
- messageError(
- $q,
- '',
- 'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เบราว์เซอร์ของคุณไม่รองรับ Geolocation'
- )
- return false
- }
-
- try {
- // If previous attempt was mock, clear history so fresh GPS is not compared
- // against spoofed coordinates and incorrectly flagged as impossible speed.
- if (isMockLocationDetected.value) {
- resetValidation()
- }
-
- const position = await getDelayedFreshPosition()
-
- const validationResult = validateLocation(position)
-
- if (validationResult.isMockDetected) {
- isMockLocationDetected.value = true
- disabledBtn.value = false
- resetValidation()
- resetLocationForRetry()
- showMockWarning(validationResult)
- mapRef.value?.requestLocationPermission()
- return false
- }
-
- if (validationResult.errors.length > 0) {
- disabledBtn.value = false
- resetValidation()
- resetLocationForRetry()
- messageError($q, '', validationResult.errors[0])
- mapRef.value?.requestLocationPermission()
- return false
- }
-
- locationGranted.value = true
- isMockLocationDetected.value = false
- return true
- } catch (error) {
- disabledBtn.value = false
- resetLocationForRetry()
- messageError(
- $q,
- '',
- 'ไม่สามารถตรวจสอบตำแหน่งล่าสุดก่อนลงเวลาได้ กรุณาลองใหม่อีกครั้ง'
- )
- mapRef.value?.requestLocationPermission()
- return false
- }
-}
-
const location = ref('') // พื้นที่ใกล้เคียง
const model = ref('') // สถานที่ทำงาน
// ตัวเลือกสถานที่ทำงาน
@@ -249,6 +366,11 @@ const options = ref([
// value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
// text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
// },
+ {
+ value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
+ text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
+ },
+
{ value: 'อื่นๆ', text: 'อื่นๆ' },
])
@@ -267,8 +389,227 @@ const cameraIsOn = ref(false)
const img = ref(undefined)
const photoWidth = ref(350)
const photoHeight = ref(350)
+const cameraMountKey = ref(0)
+const availableCameras = ref([])
+const currentCameraIndex = ref(0)
+const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
-const intervalId = ref(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+/**
+ * Detect real iOS/iPadOS devices. Desktop mobile emulation can spoof the
+ * iPhone user-agent, so rely on platform + touch capability instead.
+ */
+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)
+/**
+ * `preferNativePhotoCapture` starts false on every device — inline camera is
+ * always attempted first. It is set to true only by
+ * `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` when
+ * inline capture is proven to be unsupported or has failed. This covers iOS
+ * Safari too: getUserMedia is supported there since iOS 14.3, so we try
+ * inline first and fall back gracefully on first failure.
+ */
+const preferNativePhotoCapture = ref(false)
+const useNativePhotoCapture = computed(() => preferNativePhotoCapture.value)
+const centeredPreviewImageStyle = Object.freeze({
+ objectFit: 'cover',
+ objectPosition: 'center center',
+})
+const INLINE_CAMERA_PREVIEW_TIMEOUT_MS = isIOSDevice ? 2500 : 1800
+const INLINE_CAMERA_PREVIEW_POLL_MS = 120
+const INLINE_CAMERA_REMOUNT_DELAY_MS = 120
+const MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS = 1
+
+/** Ref for the hidden file input used as native camera fallback */
+const nativePhotoInput = ref(null)
+const DEFAULT_NORMALIZED_IMAGE_QUALITY = 0.92
+
+interface NormalizePhotoOptions {
+ fileName?: string
+ mirrorHorizontally?: boolean
+ quality?: number
+}
+
+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 loadImageFromBlob(blob: Blob) {
+ const imageUrl = URL.createObjectURL(blob)
+
+ try {
+ return await new Promise((resolve, reject) => {
+ const image = new Image()
+ image.onload = () => resolve(image)
+ image.onerror = () => reject(new Error('Image load failed'))
+ image.src = imageUrl
+ })
+ } finally {
+ URL.revokeObjectURL(imageUrl)
+ }
+}
+
+async function normalizePhotoFile(
+ source: Blob,
+ options: NormalizePhotoOptions = {}
+) {
+ const fileName =
+ options.fileName ??
+ (source instanceof File && source.name
+ ? source.name
+ : `photo_${Date.now()}.jpg`)
+ const imageType =
+ source.type && source.type.startsWith('image/') ? source.type : 'image/jpeg'
+
+ if (!options.mirrorHorizontally) {
+ if (source instanceof File && source.name === fileName) {
+ return source
+ }
+
+ return new File([source], fileName, { type: imageType })
+ }
+
+ const image = await loadImageFromBlob(source)
+ const canvas = document.createElement('canvas')
+ canvas.width = image.naturalWidth
+ canvas.height = image.naturalHeight
+
+ const context = canvas.getContext('2d')
+ if (!context) {
+ throw new Error('Canvas context unavailable')
+ }
+
+ context.translate(canvas.width, 0)
+ context.scale(-1, 1)
+ context.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+ const normalizedBlob = await new Promise((resolve) => {
+ canvas.toBlob(
+ resolve,
+ imageType,
+ options.quality ?? DEFAULT_NORMALIZED_IMAGE_QUALITY
+ )
+ })
+
+ if (!normalizedBlob) {
+ throw new Error('Failed to normalize image')
+ }
+
+ return new File([normalizedBlob], fileName, { type: imageType })
+}
+
+async function assignSelectedPhoto(file: File) {
+ clearSelectedPhoto()
+ fileImg.value = file
+ img.value = URL.createObjectURL(file)
+}
+
+function openNativePhotoCapture() {
+ void stopInlineCamera()
+
+ if (nativePhotoInput.value) {
+ nativePhotoInput.value.value = ''
+ nativePhotoInput.value.click()
+ }
+}
+
+function enableNativePhotoCaptureFallback() {
+ preferNativePhotoCapture.value = true
+ void stopInlineCamera()
+ clearSelectedPhoto()
+}
+
+function switchToNativePhotoCapture() {
+ enableNativePhotoCaptureFallback()
+ openNativePhotoCapture()
+}
+
+/**
+ * Called when the user selects / captures a photo via the native file-input
+ * fallback. Keeps 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
+ }
+
+ try {
+ const normalizedFile = await normalizePhotoFile(file, {
+ fileName: file.name,
+ mirrorHorizontally: !isIOSDevice,
+ })
+
+ if (!(await isValidCapturedImage(normalizedFile))) {
+ throw new Error('Normalized image is invalid')
+ }
+
+ await assignSelectedPhoto(normalizedFile)
+ } catch (error) {
+ console.error('Error normalizing native photo:', error)
+ clearSelectedPhoto()
+ messageError($q, error, 'ไม่สามารถเตรียมรูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง')
+ }
+}
+
+const intervalId = ref | undefined>(undefined)
/**
* เริ่มจาก onMounted #1 เช็ค status คิว
@@ -297,19 +638,18 @@ async function fetchCheckStatus() {
/** inQueue เป็น true */
isDisabledCheckTime.value = true
msgCheckTime.value = 'ระบบกำลังประมวลผล'
- if (intervalId.value === undefined) {
- intervalId.value = setInterval(async () => {
- try {
- await fetchCheckStatus()
- } catch (error) {
- console.error('Error in interval fetchCheckStatus:', error)
- // หยุด interval ถ้าเกิด error
- stopChecking()
- }
- }, 3000)
- console.log('startChecking called, intervalId:', intervalId.value)
- }
- // hideLoader()
+ // if (intervalId.value === undefined) {
+ // intervalId.value = setInterval(async () => {
+ // try {
+ // await fetchCheckStatus()
+ // } catch (error) {
+ // console.error('Error in interval fetchCheckStatus:', error)
+ // // หยุด interval ถ้าเกิด error
+ // stopChecking()
+ // }
+ // }, 3000)
+ // console.log('startChecking called, intervalId:', intervalId.value)
+ // }
} else {
/** inQueue เป็น false */
isDisabledCheckTime.value = false
@@ -323,18 +663,6 @@ async function fetchCheckStatus() {
}
}
-/** ตัวเก่าก่อนเปลี่ยน */
-
-// async function stopChecking() {
-// if (intervalId.value !== undefined) {
-// clearInterval(intervalId.value) // หยุด interval
-// setTimeout(() => {
-// fetchCheckTime()
-// }, 1000)
-// intervalId.value = undefined // รีเซ็ตค่า
-// }
-// }
-
/** ตัวใหม่ที่เปลี่ยนก่อนเปลี่ยน
* เริ่มจาก onMounted #3 เช็ค status คิว
*
@@ -382,6 +710,32 @@ async function stopChecking() {
}
}
+function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
+ const lowerLabel = label.toLowerCase()
+ if (
+ lowerLabel.includes('front') ||
+ lowerLabel.includes('user') ||
+ lowerLabel.includes('face')
+ ) {
+ return 'front'
+ } else if (
+ lowerLabel.includes('back') ||
+ lowerLabel.includes('environment') ||
+ lowerLabel.includes('rear')
+ ) {
+ return 'back'
+ }
+ return 'unknown'
+}
+
+function resolveCameraType(
+ label: string,
+ fallbackType: 'front' | 'back'
+): 'front' | 'back' {
+ const detectedType = identifyCameraType(label)
+ return detectedType === 'unknown' ? fallbackType : detectedType
+}
+
/** function เปิดกล้อง*/
async function openCamera() {
// เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -389,16 +743,35 @@ async function openCamera() {
return
}
- if (!isPermissionCameraDenied.value) {
- // change camera device
- if (cameraIsOn.value) {
- await camera.value?.stop()
- } else {
- await camera.value?.start()
- await changeCamera() // ต้องรอให้ start() เสร็จก่อน
+ // If inline capture previously failed on this device, fall back to the
+ // native still-photo picker instead of reopening the live camera.
+ if (useNativePhotoCapture.value) {
+ openNativePhotoCapture()
+ return
+ }
+
+ if (cameraIsOn.value) {
+ await stopInlineCamera()
+ return
+ }
+
+ if (
+ (isIOSDevice || isAndroidDevice) &&
+ !useNativePhotoCapture.value &&
+ (cameraPermissionState.value === 'denied' ||
+ cameraPermissionState.value === 'unsupported')
+ ) {
+ switchToNativePhotoCapture()
+ return
+ }
+
+ const hasCameraPermission = await requestCameraPermission()
+ if (!hasCameraPermission) {
+ if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+ switchToNativePhotoCapture()
+ return
}
- cameraIsOn.value = !cameraIsOn.value
- } else {
+
messageError(
$q,
'',
@@ -406,37 +779,156 @@ async function openCamera() {
)
return
}
+
+ try {
+ await startInlineCamera()
+ } catch (error) {
+ console.error('Error opening camera:', error)
+
+ if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+ switchToNativePhotoCapture()
+ return
+ }
+
+ messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+ }
}
/** change camera device*/
-async function changeCamera() {
- const devices: any = await camera.value?.devices(['videoinput'])
- const device = await devices[0]
- camera.value?.changeCamera(device.deviceId)
+async function changeCamera(targetCameraType?: 'front' | 'back') {
+ try {
+ const devices: any = await camera.value?.devices(['videoinput'])
+
+ if (!devices || devices.length === 0) {
+ console.warn('No cameras found')
+ return
+ }
+
+ availableCameras.value = devices
+
+ if (devices.length === 1 || !targetCameraType) {
+ const device = devices[0]
+ const fallbackType =
+ targetCameraType ??
+ (currentCameraType.value === 'back' ? 'back' : 'front')
+ await camera.value?.changeCamera(device.deviceId)
+ await ensureInlineCameraPreviewReady()
+ currentCameraIndex.value = 0
+ currentCameraType.value = resolveCameraType(
+ device.label || '',
+ fallbackType
+ )
+ return
+ }
+
+ const matchingCameras = devices.filter(
+ (device: any) =>
+ identifyCameraType(device.label || '') === targetCameraType
+ )
+
+ if (matchingCameras.length > 0) {
+ const targetDevice = matchingCameras[0]
+ await camera.value?.changeCamera(targetDevice.deviceId)
+ await ensureInlineCameraPreviewReady()
+ currentCameraIndex.value = devices.indexOf(targetDevice)
+ currentCameraType.value = resolveCameraType(
+ targetDevice.label || '',
+ targetCameraType
+ )
+ } else {
+ const nextIndex = (currentCameraIndex.value + 1) % devices.length
+ const nextDevice = devices[nextIndex]
+ await camera.value?.changeCamera(nextDevice.deviceId)
+ await ensureInlineCameraPreviewReady()
+ currentCameraIndex.value = nextIndex
+ currentCameraType.value = resolveCameraType(
+ nextDevice.label || '',
+ targetCameraType
+ )
+ }
+ } catch (error) {
+ console.error('Error switching camera:', error)
+ }
+}
+
+/** switch camera device*/
+async function switchCamera() {
+ if (availableCameras.value.length <= 1) {
+ return
+ }
+
+ // สลับแค่ระหว่างกล้อง 2 ตัวแรก (กล้องหน้าและหลังหลัก)
+ const targetIndex = currentCameraIndex.value === 0 ? 1 : 0
+ const targetDevice = availableCameras.value[targetIndex]
+ const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
+
+ await camera.value?.changeCamera(targetDevice.deviceId)
+ await ensureInlineCameraPreviewReady()
+ currentCameraIndex.value = targetIndex
+ currentCameraType.value = resolveCameraType(
+ targetDevice.label || '',
+ fallbackType
+ )
}
/** 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
- //แสดงรูป
- await 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 || !(await isValidCapturedImage(imageBlob))) {
+ if (isIOSDevice || isAndroidDevice) {
+ switchToNativePhotoCapture()
+ return
+ }
+
+ messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+ return
+ }
+ const fileName = `photo_${Date.now()}.jpg`
+ const normalizedFile = await normalizePhotoFile(imageBlob, {
+ fileName,
+ mirrorHorizontally: false,
+ quality: 0.8,
+ })
+
+ if (!(await isValidCapturedImage(normalizedFile))) {
+ throw new Error('Normalized image is invalid')
+ }
+
+ await assignSelectedPhoto(normalizedFile)
+
+ //แสดงรูป
+ await stopInlineCamera()
+ } catch (error) {
+ console.error('Error capturing photo:', error)
+
+ if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+ switchToNativePhotoCapture()
+ return
+ }
+
+ messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+ }
}
/** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
- img.value = undefined
- camera.value?.start()
+async function refreshPhoto() {
+ try {
+ clearSelectedPhoto()
+
+ if (useNativePhotoCapture.value) {
+ openNativePhotoCapture()
+ return
+ }
+ await startInlineCamera()
+ } catch (error) {
+ console.error('Error refreshing photo:', error)
+ messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+ }
}
/** ref validate*/
@@ -462,11 +954,6 @@ async function validateForm() {
}
}
if (hasError.every((result) => result === true)) {
- const isLocationValid = await revalidateLocationBeforeSubmit()
- if (!isLocationValid) {
- return
- }
-
if (statusCheckin.value == false) {
getCheck()
} else if (statusCheckin.value) {
@@ -494,8 +981,16 @@ async function validateForm() {
}
}
-const mapRef = ref | null>(null)
+const mapRefDesktop = ref | null>(null)
+const mapRefMobile = ref | null>(null)
+
+// Computed ref that returns the correct map ref based on screen size
+const mapRef = computed(() =>
+ $q.screen.gt.xs ? mapRefDesktop.value : mapRefMobile.value
+)
+
const timeChickin = ref('') //เวลาเข้างาน,เวลาออกงาน
+const displayedCheckDate = ref(new Date())
/** function ยืนยันการลงเวลาเข้า - ออก*/
async function confirm() {
@@ -511,8 +1006,13 @@ async function confirm() {
return
}
- const isLocationValid = await revalidateLocationBeforeSubmit()
- if (!isLocationValid) {
+ if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
+ if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+ enableNativePhotoCaptureFallback()
+ }
+ clearSelectedPhoto()
+ disabledBtn.value = false
+ messageError($q, '', 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา')
return
}
@@ -533,6 +1033,7 @@ async function confirm() {
.then(async (res) => {
const data = await res.data.result
const dateObject = new Date(data.date)
+ displayedCheckDate.value = dateObject
checkDate.value = data.date ? true : false
const options: Intl.DateTimeFormatOptions = {
hour12: false,
@@ -564,7 +1065,12 @@ async function getCheck() {
}
showLoader()
- const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' ? 'Y' : 'N'
+ const isSeminar =
+ model.value === 'ไปประชุม / อบรม / สัมมนา'
+ ? 'S'
+ : model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร'
+ ? 'O'
+ : 'N'
await http
.get(config.API.checkoutCheck + `/${isSeminar}`)
@@ -614,7 +1120,7 @@ async function onClickConfirm() {
try {
showLoader()
cameraIsOn.value = false
- img.value = undefined
+ clearSelectedPhoto()
modalTime.value = false
if (!statusCheckin.value) {
statusCheckin.value = true
@@ -652,13 +1158,8 @@ const inQueue = ref(false)
// ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
function resetCameraAndImage() {
- if (img.value) {
- img.value = undefined
- }
- if (cameraIsOn.value && camera.value) {
- camera.value.stop()
- cameraIsOn.value = false
- }
+ clearSelectedPhoto()
+ void stopInlineCamera()
}
// เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -684,36 +1185,52 @@ function handleVisibilityChange() {
}
}
-const isPermissionCameraDenied = ref(false) // ตัวแปรสำหรับตรวจสอบการปฏิเสธสิทธิ์กล้อง
-
-async function requestCamera() {
- try {
- await navigator.mediaDevices.getUserMedia({ video: true })
- } catch (err) {
- isPermissionCameraDenied.value = true
- }
-}
-
/** Hook*/
onMounted(async () => {
- isLoadingCheckTime.value = true
+ // เริ่มต้น clock เสมอ
updateClock()
- startChecking() //เช็ค status จาก คิว #1
-
- // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
- if (privacyStore.isAccepted) {
- mapRef.value?.requestLocationPermission()
- requestCamera()
- }
+ clockInterval.value = setInterval(updateClock, 1000)
// เพิ่ม event listeners สำหรับมือถือ
document.addEventListener('visibilitychange', handleVisibilityChange)
window.addEventListener('pagehide', handleAppClose)
+
+ // ถ้ามีข้อมูลสังกัดแล้ว เริ่ม checking ได้เลย
+ if (hasOrganization.value) {
+ isLoadingCheckTime.value = true
+ startChecking()
+ }
+
+ await syncPermissionStates()
+
+ // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
+ if (privacyStore.isAccepted) {
+ mapRef.value?.requestLocationPermission()
+ }
})
+// เฝ้าดูการเปลี่ยนแปลงของ hasOrganization
+// เพื่อเริ่ม startChecking เมื่อมีข้อมูลสังกัด
+watch(
+ hasOrganization,
+ (newValue) => {
+ if (newValue && !isLoadingCheckTime.value) {
+ isLoadingCheckTime.value = true
+ startChecking()
+ }
+ },
+ { immediate: false }
+)
+
onBeforeUnmount(() => {
resetCameraAndImage()
+ // หยุด clock interval
+ if (clockInterval.value !== undefined) {
+ clearInterval(clockInterval.value)
+ clockInterval.value = undefined
+ }
+
// หยุด interval ถ้ามี
if (intervalId.value !== undefined) {
clearInterval(intervalId.value)
@@ -727,23 +1244,18 @@ onBeforeUnmount(() => {
watch(
() => privacyStore.isAccepted,
- (newVal) => {
+ async (newVal) => {
if (newVal) {
+ await syncPermissionStates()
mapRef.value?.requestLocationPermission()
- requestCamera()
}
}
)
-watch(
- () => locationGranted.value,
- (newVal) => {
- // Removed auto-reset of isMockLocationDetected to prevent
- // clearing mock detection state when permission is granted.
- // Mock detection state should only be reset after explicit user action
- // or after a successful validation without mock indicators.
- }
-)
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+ startChecking()
+})
@@ -763,6 +1275,7 @@ watch(
>