refactor code & fixed location

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
 
@@ -195,7 +195,7 @@ watch(
                 :tab="stores.tab"
               />
               <TableHistory
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 :page-size="pageSize"
                 :total="total"
                 :page="page"

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
 import { useQuasar } from 'quasar'
-import moment from 'moment'
+import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
 
 import config from '@/app.config'
@@ -69,15 +69,16 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
+const clockInterval = ref<number | NodeJS.Timeout | 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
@@ -85,7 +86,6 @@ function updateClock() {
   formattedHH.value = HH
   formattedA.value = A
 }
-setInterval(updateClock, 1000)
 
 /** form-data */
 const formLocation = reactive({
@@ -137,7 +137,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({
@@ -191,7 +194,7 @@ const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
-const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+const intervalId = ref<number | NodeJS.Timeout | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -246,18 +249,6 @@ async function fetchCheckStatus() {
   }
 }
 
-/** ตัวเก่าก่อนเปลี่ยน */
-
-// async function stopChecking() {
-//   if (intervalId.value !== undefined) {
-//     clearInterval(intervalId.value) // หยุด interval
-//     setTimeout(() => {
-//       fetchCheckTime()
-//     }, 1000)
-//     intervalId.value = undefined // รีเซ็ตค่า
-//   }
-// }
-
 /** ตัวใหม่ที่เปลี่ยนก่อนเปลี่ยน
  * เริ่มจาก onMounted #3 เช็ค status คิว
  *
@@ -674,6 +665,7 @@ async function requestCamera() {
 onMounted(async () => {
   isLoadingCheckTime.value = true
   updateClock()
+  clockInterval.value = setInterval(updateClock, 1000)
   startChecking() //เช็ค status จาก คิว #1
 
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
@@ -690,6 +682,12 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   resetCameraAndImage()
 
+  // หยุด clock interval
+  if (clockInterval.value !== undefined) {
+    clearInterval(clockInterval.value)
+    clockInterval.value = undefined
+  }
+
   // หยุด interval ถ้ามี
   if (intervalId.value !== undefined) {
     clearInterval(intervalId.value)
@@ -1279,7 +1277,7 @@ watch(
         </div>
         <div class="col-12 text-center row q-pt-md">
           <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
-            พื้นที่ใกล้เคียง {{ formLocation.POI ?? formLocation.POI }}
+            พื้นที่ใกล้เคียง {{ formLocation.POI }}
           </div>
           <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
             {{ location }}
@@ -1318,7 +1316,7 @@ watch(
 .card-container {
   position: relative;
   overflow: hidden;
-  height: autu; /* Adjust as needed */
+  height: auto; /* Adjust as needed */
   background: #f5f5f5;
   height: 35vh !important;
   box-shadow: none !important;
@@ -1327,7 +1325,7 @@ watch(
 .card-container-xs {
   position: relative;
   overflow: hidden;
-  height: autu; /* Adjust as needed */
+  height: auto; /* Adjust as needed */
   background: #ffffff;
   height: 35vh !important;
   border-radius: 10px;

src/views/MainView.vue

@@ -10,6 +10,7 @@ import { logout, tokenParsed, getCookie, gotoLeavePage } from '@/plugins/auth'
 import { useCounterMixin } from '@/stores/mixin'
 import { usePrivacyStore } from '@/stores/privacy'
 import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
+import type { KeycloakPosition } from '@/interface/keycloak-position'
 
 // import type { notiType } from '@/interface/index/Main'
 // import type { Noti } from '@/interface/response/Main'
@@ -144,6 +145,8 @@ function onClickLogout() {
     ok: 'ยืนยัน',
     persistent: true,
   }).onOk(async () => {
+    // ล้างข้อมูล positionKeycloak ก่อน logout
+    positionKeycloakStore.clearPositionKeycloak()
     await http.post(config.API.keycloakLogSSO, { text: 'ออกจากระบบ' })
     await logout()
   })
@@ -174,16 +177,50 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
+  // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
+  const existingData = positionKeycloakStore.dataPositionKeycloak
+
+  if (existingData) {
+    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+    privacyStore.modalPrivacy = !existingData.privacyCheckin
+    privacyStore.setAccepted(existingData.privacyCheckin)
+
+    //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
+    if (existingData.avatarName) {
+      getImg(existingData.profileId, existingData.avatarName)
+    } else {
+      profileImg.value = avatar
+    }
+    return
+  }
+
+  // ไม่มีข้อมูล ให้ fetch จาก API
   await http
     .get(config.API.keycloakPosition())
     .then(async (res) => {
-      const data = await res.data.result
-      positionKeycloakStore.setPositionKeycloak(data)
-      privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
-      privacyStore.setAccepted(data.privacyCheckin)
+      const apiData = await res.data.result
+
+      // Map API response to KeycloakPosition interface
+      const keycloakData: KeycloakPosition = {
+        privacyCheckin: apiData.privacyCheckin ?? false,
+        avatarName: apiData.avatarName,
+        profileId: apiData.profileId,
+        organization: {
+          root: apiData.root,
+          child1: apiData.child1,
+          child2: apiData.child2,
+          child3: apiData.child3,
+          child4: apiData.child4,
+        },
+      }
+
+      positionKeycloakStore.setPositionKeycloak(keycloakData)
+      privacyStore.modalPrivacy = !keycloakData.privacyCheckin
+      privacyStore.setAccepted(keycloakData.privacyCheckin)
+
       //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
-      if (data.avatarName) {
-        getImg(data.profileId, data.avatarName)
+      if (keycloakData.avatarName) {
+        getImg(keycloakData.profileId, keycloakData.avatarName)
       } else {
         profileImg.value = avatar
       }
@@ -297,6 +334,7 @@ onMounted(async () => {
   const checkTokenParsed = await tokenParsed()
   const SSO_TOKEN = await getCookie('SSO')
   isSsoToken.value = SSO_TOKEN === 'y' ? true : false
+
   if (checkTokenParsed != null) {
     fullName.value = checkTokenParsed.name
   }