src/components/AscGISMap.vue

@@ -163,19 +163,8 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
+    mapView.value.resize()
-    try {
+    mapView.value.requestRender?.()
-      if (typeof mapView.value.resize === 'function') {
-        mapView.value.resize()
-      }
-    } catch (error) {
-      console.warn('Map resize failed:', error)
-    }
-
-    if (typeof mapView.value.requestRender === 'function') {
-      mapView.value.requestRender?.()
-    }
-
     mapView.value
       .goTo(
         {
@@ -296,11 +285,7 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-
+    mapView.value.graphics.add(userGraphic)
-    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
-    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
-      mapView.value.graphics.add(userGraphic)
-    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -396,22 +381,12 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-
+        mapView.value.graphics.add(poiGraphic)
-        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
+        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-        if (mapView.value && !mapView.value.destroyed) {
+        mapView.value.goTo({
-          if (mapView.value.graphics) {
+          target: [userPoint, poiPoint],
-            mapView.value.graphics.add(poiGraphic)
+          zoom: zoomMap.value,
-          }
+        })
-          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-          if (typeof mapView.value.goTo === 'function') {
-            mapView.value.goTo({
-              target: [userPoint, poiPoint],
-              zoom: zoomMap.value,
-            }).catch(() => {
-              // Ignore goTo errors
-            })
-          }
-        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })

src/stores/socket.ts

@@ -1,4 +1,3 @@
-import { ref } from 'vue'
 import config from '@/app.config'
 import { getToken } from '@/plugins/auth'
 import { defineStore } from 'pinia'
@@ -11,7 +10,6 @@ interface sockeBackup {
 
 export const useSocketStore = defineStore('socket', () => {
   let socket: Socket
-  const notificationCounter = ref(0);
 
   async function init() {
     socket = io(new URL(config.API.socket).origin, {
@@ -21,7 +19,6 @@ export const useSocketStore = defineStore('socket', () => {
 
     socket.on('socket-notification', (payload) => {
       let body: sockeBackup = JSON.parse(payload)
-      notificationCounter.value++ 
       notifyStatus(body.message, body.success)
     })
   }
@@ -97,5 +94,5 @@ export const useSocketStore = defineStore('socket', () => {
 
   init()
 
-  return { notificationCounter }
+  return {}
 })

src/views/HomeView.vue

@@ -11,7 +11,6 @@ import {
 import { useQuasar } from 'quasar'
 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'
@@ -19,7 +18,6 @@ import { useCounterMixin } from '@/stores/mixin'
 import { usePermissions } from '@/composables/usePermissions'
 import { usePrivacyStore } from '@/stores/privacy'
 import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
-import { useSocketStore } from '@/stores/socket'
 
 import type { FormRef, OptionReason } from '@/interface/response/checkin'
 
@@ -34,8 +32,6 @@ const {
   syncPermissionStates,
   requestCameraPermission,
 } = usePermissions()
-const socketStore = useSocketStore()
-const { notificationCounter } = storeToRefs(socketStore)
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -638,18 +634,19 @@ async function fetchCheckStatus() {
       /** inQueue เป็น true  */
       isDisabledCheckTime.value = true
       msgCheckTime.value = 'ระบบกำลังประมวลผล'
-      // if (intervalId.value === undefined) {
+      if (intervalId.value === undefined) {
-      //   intervalId.value = setInterval(async () => {
+        intervalId.value = setInterval(async () => {
-      //     try {
+          try {
-      //       await fetchCheckStatus()
+            await fetchCheckStatus()
-      //     } catch (error) {
+          } catch (error) {
-      //       console.error('Error in interval fetchCheckStatus:', error)
+            console.error('Error in interval fetchCheckStatus:', error)
-      //       // หยุด interval ถ้าเกิด error
+            // หยุด interval ถ้าเกิด error
-      //       stopChecking()
+            stopChecking()
-      //     }
+          }
-      //   }, 3000)
+        }, 3000)
-      //   console.log('startChecking called, intervalId:', intervalId.value)
+        console.log('startChecking called, intervalId:', intervalId.value)
-      // }
+      }
+      // hideLoader()
     } else {
       /** inQueue เป็น false  */
       isDisabledCheckTime.value = false
@@ -1251,11 +1248,6 @@ watch(
     }
   }
 )
-
-/** Watch notification counter on socket */
-watch(notificationCounter, () => {
-  startChecking()
-})
 </script>
 
 <template>
@@ -1413,13 +1405,13 @@ watch(notificationCounter, () => {
                         </div>
                       </div>
 
-                      <div v-if="cameraIsOn && img == null">
+                      <div v-if="cameraIsOn">
                         <div
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
                           <q-btn
-                            v-if="availableCameras.length > 1"
+                            v-if="availableCameras.length > 1 && img == null"
                             round
                             push
                             icon="flip_camera_ios"
@@ -1429,6 +1421,7 @@ watch(notificationCounter, () => {
                             @click="switchCamera"
                           />
                           <q-btn
+                            v-if="img == null"
                             round
                             push
                             icon="photo_camera"
@@ -1436,41 +1429,8 @@ watch(notificationCounter, () => {
                             color="positive"
                             @click="capturePhoto"
                           />
-                        </div>
-                        <div v-else>
-                          <div
-                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
-                            style="background: #00000021"
-                          >
-                            <q-btn
-                              v-if="availableCameras.length > 1"
-                              round
-                              icon="flip_camera_ios"
-                              size="16px"
-                              style="background: #424242; color: white"
-                              @click="switchCamera"
-                              unelevated
-                              class="q-mr-xs"
-                            />
-                            <q-btn
-                              round
-                              icon="photo_camera"
-                              size="18px"
-                              style="background: #263238; color: white"
-                              @click="capturePhoto"
-                              unelevated
-                            />
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- Refresh button - shows when photo is captured regardless of camera state -->
-                      <div v-if="img != null && !useNativePhotoCapture">
-                        <div
-                          v-if="$q.screen.gt.xs"
-                          class="absolute-bottom-right q-ma-md"
-                        >
                           <q-btn
+                            v-else
                             round
                             push
                             icon="refresh"
@@ -1485,12 +1445,31 @@ watch(notificationCounter, () => {
                             style="background: #00000021"
                           >
                             <q-btn
+                              v-if="availableCameras.length > 1 && img == null"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
+                            <q-btn
+                              round
+                              v-if="img == null"
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                            <q-btn
+                              v-else
                               round
                               icon="refresh"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="refreshPhoto"
-                              unelevated
                             />
                           </div>
                         </div>
@@ -1562,13 +1541,13 @@ watch(notificationCounter, () => {
                           </div>
                         </div>
 
-                        <div v-if="cameraIsOn && img == null">
+                        <div v-if="cameraIsOn">
                           <div
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1"
+                              v-if="availableCameras.length > 1 && img == null"
                               round
                               icon="flip_camera_ios"
                               size="16px"
@@ -1579,22 +1558,15 @@ watch(notificationCounter, () => {
                             />
                             <q-btn
                               round
+                              v-if="img == null"
                               icon="photo_camera"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="capturePhoto"
                               unelevated
                             />
-                          </div>
-                        </div>
-
-                        <!-- Refresh button - shows when photo is captured regardless of camera state -->
-                        <div v-if="img != null && !useNativePhotoCapture">
-                          <div
-                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
-                            style="background: #00000021"
-                          >
                             <q-btn
+                              v-else
                               round
                               icon="refresh"
                               size="18px"