diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index f974864..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,155 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Project Overview - -This is an HRMS (Human Resource Management System) check-in/check-out web application built for the Bangkok Metropolitan Administration (BMA). The application allows employees to record their work attendance using geolocation verification and camera features. - -**Tech Stack:** -- Vue 3 with Composition API and TypeScript -- Vite for build tooling -- Quasar Framework for UI components -- Pinia for state management -- Vue Router for routing -- Keycloak for authentication -- ArcGIS API and Google Maps for location features -- PWA capabilities with offline support -- Docker deployment with nginx - -**Development Server:** Runs on port 3008 - -## Common Commands - -```bash -# Development -npm run dev # Start dev server on port 3008 - -# Building -npm run build # Build for production -npm run preview # Preview production build on port 3008 - -# Testing -npm run test:unit # Run unit tests with vitest -npm run test:e2e # Run e2e tests with cypress -npm run test:e2e:dev # Run cypress in dev mode - -# Code Quality -npm run lint # Lint and auto-fix code -npm run format # Format code with prettier -npm run type-check # TypeScript type checking - -# Docker -docker buildx build --platform=linux/amd64 -f docker/Dockerfile . -t hrms-checkin:0.1 -``` - -## Architecture - -### Directory Structure - -``` -src/ -├── api/ # API layer modules (checkin, history, message) -├── components/ # Reusable Vue components -├── composables/ # Vue composables (e.g., usePermissions) -├── interface/ # TypeScript type definitions -│ └── response/ # API response types -├── plugins/ # Vue plugins (auth, http, keycloak) -├── router/ # Vue Router configuration -├── stores/ # Pinia stores for state management -├── style/ # Global styles and Quasar variables -├── utils/ # Utility functions -└── views/ # Page-level Vue components -``` - -### Key Architecture Patterns - -**Authentication Flow:** -- Uses Keycloak for SSO authentication -- Tokens stored in cookies with `BMAHRISCKI_KEYCLOAK_IDENTITY` key -- Auth state managed in `src/plugins/auth.ts` -- Router guards enforce authentication on protected routes -- 401 responses trigger automatic logout via axios interceptor - -**State Management:** -- `stores/mixin.ts` - Global utilities (Thai date formatting, dialogs, loaders, error handling) -- `stores/chekin.ts` - Check-in history and status management -- `stores/privacy.ts` - Privacy consent management -- `stores/positionKeycloak.ts` - User position/role data - -**API Layer:** -- Base axios instance in `src/plugins/http.ts` with automatic token injection -- API endpoints organized by feature in `src/api/` -- Environment-specific API URLs configured in `src/api/index.ts` -- Production API URL set via `VITE_API_URI_CONFIG` env variable - -**Routing:** -- Main layout (`MainView`) wraps authenticated routes -- Protected routes require `meta.Auth: true` -- Auth check runs in router beforeEach guard -- Public routes: `/login`, `/auth`, `/reset-password`, `/history` - -**Geolocation & Maps:** -- ArcGIS JS API for advanced mapping features -- Google Maps integration for location services -- Camera integration for check-in photo verification -- Privacy consent required before accessing camera/location - -**Date/Time Handling:** -- Thai Buddhist calendar (BE) conversion (+543 years) -- Thai month names (full and abbreviated) -- `date-fns-tz` for timezone handling (Asia/Bangkok) -- Fiscal year calculation (October start) - -### Component Conventions - -- Components use Quasar UI components (`q-btn`, `q-dialog`, etc.) -- Thai language throughout the UI -- Custom dialogs use `CustomDialog.vue` component -- Loading states use Quasar's `QSpinnerCube` -- Error dialogs prevent overlap with `activeErrorDialog` tracking - -### Localization - -- Quasar configured with Thai language (`quasar/lang/th`) -- All UI text in Thai -- Date formatting uses `date2Thai()` and `monthYear2Thai()` from mixin store -- Status labels translated: ABSENT→'ขาดราชการ', NORMAL→'ปกติ', LATE→'สาย' - -### Environment Variables - -Required in `.env.production`: -- `VITE_API_URI_CONFIG` - Production API base URL -- `VITE_URL_SSO` - Keycloak SSO logout URL -- `VITE_URL_USER` - User service URL for redirects - -### PWA Configuration - -- Auto-update registration with `vite-plugin-pwa` -- Manifest: "HRMS-Checkin" / "HRMS Checkin" -- Icons: 192x192 and 512x512 PNG -- Service worker registered in `src/registerServiceWorker.ts` - -## Development Notes - -**When adding new features:** -1. Create API functions in `src/api/` -2. Define TypeScript interfaces in `src/interface/response/` -3. Use Pinia stores for complex state, composables for reusable logic -4. Follow Thai localization patterns for user-facing text -5. Ensure privacy consent flow for camera/location features - -**When working with dates:** -- Always use `date2Thai()` or `convertDateToAPI()` from mixin store -- Dates stored in BE format (year + 543) -- API expects `yyyy-MM-dd` or `yyyy-MM-dd HH:mm:ss` format - -**When handling errors:** -- Use `messageError()` from mixin store for consistent error dialogs -- 401 errors trigger automatic logout -- Dialog overlap prevention built into error handling - -**When running tests:** -- Unit tests use Vitest with jsdom environment -- E2E tests use Cypress with baseUrl: `http://localhost:4173` -- Test files follow pattern: `*.cy.{js,ts}` or `*.spec.{js,ts}` diff --git a/src/components/DialogDebug.vue b/src/components/DialogDebug.vue index 798ce47..fb151e3 100644 --- a/src/components/DialogDebug.vue +++ b/src/components/DialogDebug.vue @@ -305,9 +305,6 @@ function onClose() {
-
- ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ -
@@ -334,6 +330,12 @@ function onClose() { v-model="formData.phone" class="inputgreen" hide-bottom-space + :rules="[ + () => + !!formData.email || + !!formData.phone || + 'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ', + ]" />
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 5df3c0c..bfc8e91 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -187,9 +187,6 @@ const cameraIsOn = ref(false) const img = ref(undefined) const photoWidth = ref(350) const photoHeight = ref(350) -const availableCameras = ref([]) -const currentCameraIndex = ref(0) -const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown') const intervalId = ref(undefined) // ต้องใช้ตัวแปรเก็บค่า interval @@ -305,16 +302,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 เปิดกล้อง*/ async function openCamera() { // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง @@ -328,11 +315,7 @@ async function openCamera() { await camera.value?.stop() } else { await camera.value?.start() - const devices: any = await camera.value?.devices(['videoinput']) - if (devices) { - availableCameras.value = devices - await changeCamera() - } + await changeCamera() // ต้องรอให้ start() เสร็จก่อน } cameraIsOn.value = !cameraIsOn.value } else { @@ -346,59 +329,10 @@ async function openCamera() { } /** 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] - await camera.value?.changeCamera(device.deviceId) - currentCameraIndex.value = 0 - currentCameraType.value = identifyCameraType(device.label || '') - 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) - currentCameraIndex.value = devices.indexOf(targetDevice) - currentCameraType.value = targetCameraType - } else { - const nextIndex = (currentCameraIndex.value + 1) % devices.length - const nextDevice = devices[nextIndex] - await camera.value?.changeCamera(nextDevice.deviceId) - currentCameraIndex.value = nextIndex - currentCameraType.value = identifyCameraType(nextDevice.label || '') - } - } 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] - - await camera.value?.changeCamera(targetDevice.deviceId) - currentCameraIndex.value = targetIndex - currentCameraType.value = identifyCameraType(targetDevice.label || '') +async function changeCamera() { + const devices: any = await camera.value?.devices(['videoinput']) + const device = await devices[0] + camera.value?.changeCamera(device.deviceId) } /** function ถ่ายรูป*/ @@ -825,16 +759,6 @@ watch( v-if="$q.screen.gt.xs" class="absolute-bottom-right q-ma-md" > - - \ No newline at end of file +