+
+
@@ -659,49 +354,29 @@ defineExpose({
"
>
พื้นที่ใกล้เคียง
-
-
-
- {{ textTooltip }}
-
:
- {{ poiPlaceName }}
+ {{ poiPlaceName || 'ไม่พบข้อมูล' }}
-
+
-
- พื้นที่ใกล้เคียง
-
-
- {{ poiPlaceName || '-' }}
-
+ {{ poiPlaceName || 'ไม่พบข้อมูล' }}
-
+
@@ -711,8 +386,4 @@ 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 1264791..7360980 100644
--- a/src/components/AscGISMapTime.vue
+++ b/src/components/AscGISMapTime.vue
@@ -1,8 +1,9 @@
-
+
-
+
-
- ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
-
@@ -334,6 +329,12 @@ 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 79a8f68..c299e4f 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,6 +1,6 @@
@@ -114,7 +80,7 @@ onBeforeUnmount(() => {
>
import { ref, watch } from 'vue'
-import type { PropType } from 'vue'
+import { PropType } from 'vue'
import type { DataCheckIn } from '@/interface/index/Main'
diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue
index 1bd816b..a72dde3 100644
--- a/src/components/PopupPrivacy.vue
+++ b/src/components/PopupPrivacy.vue
@@ -4,11 +4,9 @@ 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,
@@ -80,12 +78,6 @@ const handleAccept = async () => {
accept: true,
})
privacyStore.setAccepted(true)
-
- // อัปเดต privacyCheckin ใน positionKeycloak store ด้วย
- if (positionKeycloakStore.dataPositionKeycloak) {
- positionKeycloakStore.dataPositionKeycloak.privacyCheckin = true
- }
-
modal.value = false
} catch (error) {}
}
@@ -97,7 +89,7 @@ const toggleDetails = () => {
const checkIfScrollable = () => {
nextTick(() => {
- const container = (scrollContainer.value as any)?.$el || scrollContainer.value
+ const container = scrollContainer.value?.$el || scrollContainer.value
if (container) {
const { scrollHeight, clientHeight } = container
@@ -116,7 +108,6 @@ 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 e081a3c..5d13e66 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -2,37 +2,42 @@
import { ref, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
-import { useCheckIn } from '@/stores/checkin'
+import { useChekIn } from '@/stores/chekin'
-import type { QTableProps } from 'quasar'
+import { is, 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 = useCheckIn()
-
-const page = defineModel('page', { required: true })
-const pageSize = defineModel('pageSize', { required: true })
+const stores = useChekIn()
/** props ข้อมูลจาก Components Page HistoryView */
const props = defineProps({
paging: {
type: Boolean,
- default: false,
+ defualt: false,
+ },
+ pageSize: {
+ type: Number,
+ defualt: 10,
+ },
+ page: {
+ type: Number,
+ defualt: 1,
},
maxPage: {
type: Number,
- default: 1,
+ defualt: 1,
},
total: {
type: Number,
- default: 0,
+ defualt: 0,
},
tab: {
type: String,
- default: '',
+ defualt: '',
required: true,
},
fetchData: {
@@ -57,15 +62,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',
@@ -74,9 +79,6 @@ 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',
@@ -105,9 +107,7 @@ const columns = ref(
headerStyle: 'font-size: 14px',
style: 'font-size: 14px; width:15%;',
format: (val: string, row: DataCheckIn) => {
- return row.checkOutStatus != '-' && val
- ? `${row.checkOutDate} ${val} น.`
- : '-'
+ return row.checkOutStatus != '-' && val ? val : '-'
},
},
{
@@ -182,6 +182,7 @@ const columns = ref(
)
const visibleColumns = ref([
'checkInDateTime',
+ 'checkInDate',
'checkInTime',
'checkInLocation',
'checkInStatus',
@@ -189,20 +190,31 @@ const visibleColumns = ref([
'checkOutLocation',
'checkOutStatus',
])
-const pagination = ref({
- page: page.value,
- rowsPerPage: pageSize.value,
+
+const currentPage = ref(1) //หน้าปัจจุบัน
+// Pagination - initial pagination
+const initialPagination = ref({
+ sortBy: null,
+ descending: false,
+ page: 1,
+ rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
})
// Pagination - update rowsPerPage
async function updatePagination(newPagination: Pagination) {
- pageSize.value = newPagination.rowsPerPage
+ initialPagination.value = newPagination
+ currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
}
async function filterFn() {
- emit('update:change-page', 1, pageSize.value, keyword.value)
+ // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+ emit(
+ 'update:change-page',
+ 1,
+ initialPagination.value.rowsPerPage,
+ keyword.value
+ )
}
-
const modalPopup = ref(false) // popup แก้ไขลงเวลา
const titlePopup = ref('') // หัวขข้อ popup แก้ไขลงเวลา
const dataRow = ref() // ข้อมูลการลงเวลา
@@ -242,7 +254,7 @@ function classStatus(status: string) {
case 'ปฏิบัติงานไม่ครบตามกำหนดเวลา':
return 'text-orange-8'
default:
- return ''
+ break
}
}
@@ -260,15 +272,17 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
}
}
-function onUpdatePage(val: number) {
- emit('update:change-page', val, pageSize.value, keyword.value)
-}
-
-/** watch pageSize*/
+/** watch currentPage และ rowsPerPage*/
watch(
- () => pageSize.value,
+ [() => currentPage.value, () => initialPagination.value.rowsPerPage],
() => {
- emit('update:change-page', 1, pageSize.value, keyword.value)
+ // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+ emit(
+ 'update:change-page',
+ currentPage.value,
+ initialPagination.value.rowsPerPage,
+ keyword.value
+ )
}
)
@@ -322,10 +336,10 @@ watch(
v-model:selected="selected"
:virtual-scroll-sticky-size-start="48"
:style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
- :rows-per-page-options="[1, 10, 25, 50, 100]"
+ :rows-per-page-options="[10, 25, 50, 100]"
:grid="$q.screen.gt.xs ? false : true"
+ :pagination="initialPagination"
@update:pagination="updatePagination"
- v-model:pagination="pagination"
>
@@ -458,11 +472,10 @@ watch(
-
ทั้งหมด {{ props.total }} รายการ
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index c95111d..ab54d66 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 { useCheckIn } from '@/stores/checkin'
+import { useChekIn } from '@/stores/chekin'
import { calculateFiscalYear } from '@/utils/function'
import type { DataDateMonthObject } from '@/interface/index/Main'
import Popup from '@/components/PopUp.vue'
-const stores = useCheckIn()
+const stores = useChekIn()
const { monthYear2Thai } = useCounterMixin()
/**
@@ -18,11 +18,11 @@ const { monthYear2Thai } = useCounterMixin()
const props = defineProps({
fetchData: {
type: Function,
- required: true,
+ require: true,
},
tab: {
type: String,
- required: true,
+ require: true,
},
})
const emit = defineEmits(['update:year'])
@@ -43,6 +43,8 @@ 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
new file mode 100644
index 0000000..689af41
--- /dev/null
+++ b/src/composables/useLocationValidation.ts
@@ -0,0 +1,255 @@
+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 b92ed29..ecf1ef3 100644
--- a/src/composables/usePermissions.ts
+++ b/src/composables/usePermissions.ts
@@ -1,171 +1,52 @@
-import { onBeforeUnmount, ref } from 'vue'
+import { useQuasar } from 'quasar'
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')
- let cameraPermissionStatus: PermissionStatus | null = null
- let locationPermissionStatus: PermissionStatus | null = null
+ // const checkCameraPermission = (): 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 checkLocationPermission = (): boolean => {
+ // if (!privacyStore.isAccepted) {
+ // privacyStore.modalPrivacy = true
+ // $q.notify({
+ // type: 'warning',
+ // message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
+ // position: 'top',
+ // })
+ // return false
+ // }
+ // return true
+ // }
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 {
- cameraPermissionState,
- locationPermissionState,
+ // checkCameraPermission,
+ // checkLocationPermission,
checkPrivacyAccepted,
- syncPermissionStates,
- requestCameraPermission,
- requestLocationPermission,
}
}
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 72b2ba1..14def36 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
+ rowsPerPage: number | undefined
}
interface DataCheckIn {
checkInDate: string
@@ -38,7 +38,6 @@ 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
deleted file mode 100644
index dfd2680..0000000
--- a/src/interface/keycloak-position.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * 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 04b0dfd..fb28e50 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,6 @@ 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'
@@ -12,13 +11,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()
-pinia.use(piniaPluginPersistedstate)
app.use(router)
app.use(pinia)
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 378006f..9020cb6 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: 30000, // 30 seconds - reasonable timeout for API calls
+ timeout: 1000000000, // เพิ่มค่า timeout
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
@@ -30,7 +30,6 @@ 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 f1660ed..bb382dd 100644
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@@ -1,8 +1,6 @@
// // 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 8346697..23e3edb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,6 @@ 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'
@@ -25,14 +24,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',
@@ -88,63 +87,19 @@ 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/checkin.ts b/src/stores/chekin.ts
similarity index 96%
rename from src/stores/checkin.ts
rename to src/stores/chekin.ts
index 47f0694..bf27004 100644
--- a/src/stores/checkin.ts
+++ b/src/stores/chekin.ts
@@ -8,7 +8,7 @@ const mixin = useCounterMixin()
const { date2Thai } = mixin
/** store for checkin history*/
-export const useCheckIn = defineStore('checkin', () => {
+export const useChekIn = defineStore('checkin', () => {
const year = ref(calculateFiscalYear(new Date())) //ปีงบประมาณ
const rows = ref([])
const tab = ref('history')
@@ -33,7 +33,6 @@ export const useCheckIn = 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 22ffb52..c3a1ec0 100644
--- a/src/stores/positionKeycloak.ts
+++ b/src/stores/positionKeycloak.ts
@@ -1,78 +1,65 @@
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)
- const profileImg = ref('')
+export const usePositionKeycloakStore = defineStore('positionKeycloak', () => {
+ const menuData = ref([
+ 'ลงเวลาปฏิบัติงาน',
+ 'ประวัติการลงเวลา',
+ 'รายการลงเวลากรณีพิเศษ',
+ ])
+ const dataPositionKeycloak = ref(null)
- function setPositionKeycloak(data: KeycloakPosition) {
- dataPositionKeycloak.value = data
- }
-
- /**
- * ตั้งค่ารูปโปรไฟล์ผู้ใช้งาน
- * @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 เพื่อให้ข้อมูลอยู่ถาวร
- },
+ 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 ''
+ }
+ }
+
+ return { setPositionKeycloak, dataPositionKeycloak, findOrgName, menuData }
+})
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
deleted file mode 100644
index 28c1e3b..0000000
--- a/src/stores/socket.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-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 e590103..f2c3dc4 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,33 +100,35 @@ $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
@@ -134,7 +136,4 @@ $muti-tab: #87d4cc
/* q-tree */
.q-tree
- color: #c8d3db
-
-.custom-notification-top
- margin-top: 180px !important
+ color: #c8d3db
diff --git a/src/utils/forceExternalBrowser.ts b/src/utils/forceExternalBrowser.ts
deleted file mode 100644
index bf65fa3..0000000
--- a/src/utils/forceExternalBrowser.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-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 8f5a2bd..a2f007f 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 { useCheckIn } from '@/stores/checkin'
+import { useChekIn } from '@/stores/chekin'
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 = useCheckIn()
+const stores = useChekIn()
const { showLoader, hideLoader, messageError } = useCounterMixin()
const { fetchHistoryList } = stores
@@ -115,7 +115,6 @@ 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 เพื่อดึงข้อมูลใหม่
}
@@ -178,9 +177,9 @@ watch(
/>
-import {
- ref,
- reactive,
- onMounted,
- watch,
- onBeforeUnmount,
- computed,
- nextTick,
-} from 'vue'
+import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
import { useQuasar } from 'quasar'
-import { format } from 'date-fns'
+import moment from 'moment'
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'
@@ -28,36 +18,12 @@ import MapCheck from '@/components/AscGISMap.vue'
const mixin = useCounterMixin()
const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
const $q = useQuasar()
-const {
- cameraPermissionState,
- checkPrivacyAccepted,
- syncPermissionStates,
- requestCameraPermission,
-} = usePermissions()
-const socketStore = useSocketStore()
-const { notificationCounter } = storeToRefs(socketStore)
+const { checkPrivacyAccepted } = usePermissions()
+const { validateLocation, showMockWarning, resetValidation } =
+ useLocationValidation()
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) // สถานะเวลา เข้า,ออก
@@ -67,39 +33,11 @@ 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)
-
-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
- )} กรุณาลงเวลาออกก่อน จึงจะลงเวลาเข้าของวันนี้ได้`
- }
-}
+const locationGranted = ref(false)
+const isMockLocationDetected = ref(false)
/**
* fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
@@ -113,7 +51,6 @@ 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
})
@@ -137,16 +74,15 @@ const formattedM = ref()
const formattedH = ref()
const formattedHH = ref()
const formattedA = ref()
-const clockInterval = ref | undefined>()
/** function อัพเดทเวลา*/
function updateClock() {
- 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')
+ 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')
formattedS.value = ss
formattedM.value = mm
@@ -154,6 +90,7 @@ function updateClock() {
formattedHH.value = HH
formattedA.value = A
}
+setInterval(updateClock, 1000)
/** form-data */
const formLocation = reactive({
@@ -166,7 +103,6 @@ const useLocation = ref('') //กรณีเลือกนอกสถ
const fileImg = ref() //รูปถ่ายสถานที่
const remark = ref('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม
const checkInId = ref('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก
-const MIN_CAPTURE_FILE_SIZE_BYTES = 5 * 1024
/**
* funciton เรียกพิกัดละติจูด พิกัดลองติจูด
@@ -183,7 +119,26 @@ 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 = ''
@@ -199,131 +154,6 @@ 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,
@@ -331,10 +161,7 @@ async function getDelayedFreshPosition() {
maximumAge: 0,
})
- // Only add delay in development mode for testing
- if (import.meta.env.DEV) {
- await wait(MOCK_CHECK_DELAY_MS)
- }
+ await wait(MOCK_CHECK_DELAY_MS)
try {
return await getCurrentPositionAsync({
@@ -347,6 +174,62 @@ 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('') // สถานที่ทำงาน
// ตัวเลือกสถานที่ทำงาน
@@ -366,11 +249,6 @@ const options = ref([
// value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
// text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
// },
- {
- value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
- text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
- },
-
{ value: 'อื่นๆ', text: 'อื่นๆ' },
])
@@ -389,227 +267,8 @@ 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')
-/**
- * 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)
+const intervalId = ref(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
/**
* เริ่มจาก onMounted #1 เช็ค status คิว
@@ -638,18 +297,19 @@ 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)
- // }
+ 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()
} else {
/** inQueue เป็น false */
isDisabledCheckTime.value = false
@@ -663,6 +323,18 @@ async function fetchCheckStatus() {
}
}
+/** ตัวเก่าก่อนเปลี่ยน */
+
+// async function stopChecking() {
+// if (intervalId.value !== undefined) {
+// clearInterval(intervalId.value) // หยุด interval
+// setTimeout(() => {
+// fetchCheckTime()
+// }, 1000)
+// intervalId.value = undefined // รีเซ็ตค่า
+// }
+// }
+
/** ตัวใหม่ที่เปลี่ยนก่อนเปลี่ยน
* เริ่มจาก onMounted #3 เช็ค status คิว
*
@@ -710,32 +382,6 @@ 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 ก่อนเปิดกล้อง
@@ -743,35 +389,16 @@ async function openCamera() {
return
}
- // 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
+ if (!isPermissionCameraDenied.value) {
+ // change camera device
+ if (cameraIsOn.value) {
+ await camera.value?.stop()
+ } else {
+ await camera.value?.start()
+ await changeCamera() // ต้องรอให้ start() เสร็จก่อน
}
-
+ cameraIsOn.value = !cameraIsOn.value
+ } else {
messageError(
$q,
'',
@@ -779,156 +406,37 @@ 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(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
- )
+async function changeCamera() {
+ const devices: any = await camera.value?.devices(['videoinput'])
+ const device = await devices[0]
+ camera.value?.changeCamera(device.deviceId)
}
/** function ถ่ายรูป*/
async function capturePhoto() {
- 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, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
- }
+ 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
}
/** function เปลี่ยนรูปภาพ*/
-async function refreshPhoto() {
- try {
- clearSelectedPhoto()
-
- if (useNativePhotoCapture.value) {
- openNativePhotoCapture()
- return
- }
- await startInlineCamera()
- } catch (error) {
- console.error('Error refreshing photo:', error)
- messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
- }
+function refreshPhoto() {
+ img.value = undefined
+ camera.value?.start()
}
/** ref validate*/
@@ -954,6 +462,11 @@ 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) {
@@ -981,16 +494,8 @@ async function validateForm() {
}
}
-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 mapRef = ref | null>(null)
const timeChickin = ref('') //เวลาเข้างาน,เวลาออกงาน
-const displayedCheckDate = ref(new Date())
/** function ยืนยันการลงเวลาเข้า - ออก*/
async function confirm() {
@@ -1006,13 +511,8 @@ async function confirm() {
return
}
- if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
- if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
- enableNativePhotoCaptureFallback()
- }
- clearSelectedPhoto()
- disabledBtn.value = false
- messageError($q, '', 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา')
+ const isLocationValid = await revalidateLocationBeforeSubmit()
+ if (!isLocationValid) {
return
}
@@ -1033,7 +533,6 @@ 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,
@@ -1065,12 +564,7 @@ async function getCheck() {
}
showLoader()
- const isSeminar =
- model.value === 'ไปประชุม / อบรม / สัมมนา'
- ? 'S'
- : model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร'
- ? 'O'
- : 'N'
+ const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' ? 'Y' : 'N'
await http
.get(config.API.checkoutCheck + `/${isSeminar}`)
@@ -1120,7 +614,7 @@ async function onClickConfirm() {
try {
showLoader()
cameraIsOn.value = false
- clearSelectedPhoto()
+ img.value = undefined
modalTime.value = false
if (!statusCheckin.value) {
statusCheckin.value = true
@@ -1158,8 +652,13 @@ const inQueue = ref(false)
// ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
function resetCameraAndImage() {
- clearSelectedPhoto()
- void stopInlineCamera()
+ if (img.value) {
+ img.value = undefined
+ }
+ if (cameraIsOn.value && camera.value) {
+ camera.value.stop()
+ cameraIsOn.value = false
+ }
}
// เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -1185,52 +684,36 @@ function handleVisibilityChange() {
}
}
+const isPermissionCameraDenied = ref(false) // ตัวแปรสำหรับตรวจสอบการปฏิเสธสิทธิ์กล้อง
+
+async function requestCamera() {
+ try {
+ await navigator.mediaDevices.getUserMedia({ video: true })
+ } catch (err) {
+ isPermissionCameraDenied.value = true
+ }
+}
+
/** Hook*/
onMounted(async () => {
- // เริ่มต้น clock เสมอ
+ isLoadingCheckTime.value = true
updateClock()
- 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()
+ startChecking() //เช็ค status จาก คิว #1
// เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
if (privacyStore.isAccepted) {
mapRef.value?.requestLocationPermission()
+ requestCamera()
}
-})
-// เฝ้าดูการเปลี่ยนแปลงของ hasOrganization
-// เพื่อเริ่ม startChecking เมื่อมีข้อมูลสังกัด
-watch(
- hasOrganization,
- (newValue) => {
- if (newValue && !isLoadingCheckTime.value) {
- isLoadingCheckTime.value = true
- startChecking()
- }
- },
- { immediate: false }
-)
+ // เพิ่ม event listeners สำหรับมือถือ
+ document.addEventListener('visibilitychange', handleVisibilityChange)
+ window.addEventListener('pagehide', handleAppClose)
+})
onBeforeUnmount(() => {
resetCameraAndImage()
- // หยุด clock interval
- if (clockInterval.value !== undefined) {
- clearInterval(clockInterval.value)
- clockInterval.value = undefined
- }
-
// หยุด interval ถ้ามี
if (intervalId.value !== undefined) {
clearInterval(intervalId.value)
@@ -1244,18 +727,23 @@ onBeforeUnmount(() => {
watch(
() => privacyStore.isAccepted,
- async (newVal) => {
+ (newVal) => {
if (newVal) {
- await syncPermissionStates()
mapRef.value?.requestLocationPermission()
+ requestCamera()
}
}
)
-/** Watch notification counter on socket */
-watch(notificationCounter, () => {
- startChecking()
-})
+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.
+ }
+)
@@ -1275,7 +763,6 @@ watch(notificationCounter, () => {
>
-
-
-
-
-
+
+
+
{
color="positive"
@click="capturePhoto"
/>
-
-
-
-
-
-
-
{
style="background: #00000021"
>
@@ -1501,113 +911,6 @@ watch(notificationCounter, () => {
-
-
-
{
-
-
@@ -1802,7 +1105,7 @@ watch(notificationCounter, () => {
>
-
+
-
+
@@ -1917,7 +1226,7 @@ watch(notificationCounter, () => {
-
+
-
+
- {{ date2Thai(displayedCheckDate) }}
+ {{ date2Thai(Thai) }}
@@ -1997,7 +1312,7 @@ watch(notificationCounter, () => {
- พื้นที่ใกล้เคียง {{ formLocation.POI }}
+ พื้นที่ใกล้เคียง {{ formLocation.POI ?? formLocation.POI }}
{{ location }}
@@ -2020,20 +1335,6 @@ watch(notificationCounter, () => {
-
-
-
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index d83192e..eda5edc 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,5 +1,5 @@
-
-
-
-
-
-
-
-
-
-
ไม่พบข้อมูลสังกัด
-
-
-
- ท่านยังไม่มีสังกัดในโครงสร้างองค์กร
-
-
- เมื่อเจ้าหน้าที่ได้เพิ่มท่านในโครงสร้างองค์กรเรียบร้อยแล้ว
- กรุณาเข้าสู่ระบบใหม่อีกครั้ง
-
-
-
-
-
-
-
diff --git a/src/views/login.vue b/src/views/login.vue
index df0725d..df02614 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.trim())
+ formdata.append('username', username.value)
formdata.append('password', password.value)
await axios
diff --git a/tests/utils.ts b/tests/utils.ts
deleted file mode 100644
index 92b5e37..0000000
--- a/tests/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { enableAutoUnmount, flushPromises, VueWrapper } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-
-/**
- * Helper function to setup test environment with Pinia
- */
-export function setupTest() {
- const pinia = createPinia()
- setActivePinia(pinia)
- return pinia
-}
-
-/**
- * Helper to flush all pending promises
- */
-export async function flushAllPromises() {
- await flushPromises()
- await new Promise((resolve) => setTimeout(resolve, 0))
-}
-
-/**
- * Helper to cleanup after each test
- */
-export function teardownTest() {
- vi.clearAllMocks()
-}
diff --git a/vite.config.js b/vite.config.js
index 8ed3c30..6d575e0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -23,7 +23,7 @@ export default defineConfig({
cleanupOutdatedCaches: true,
globPatterns: ['**/*.*'],
},
- includeAssets: ['icons/safari-pinned-tab.svg', 'src/assets/markers/*.svg'],
+ includeAssets: ['icons/safari-pinned-tab.svg'],
manifest: {
name: 'HRMS-Checkin',
short_name: 'HRMS Checkin',