fix: document.addEventListener visibilitychange window.addEventListener pagehide

src/components/AscGISMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
+import { ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
@@ -22,8 +22,6 @@ function updateLocation(latitude: number, longitude: number, namePOI: string) {
 
 const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
 
-const intervalId = ref<any | null>(null)
-
 // Replace ArcGIS api key
 const apiKey = ref<string>(
   'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
@@ -239,9 +237,6 @@ const requestLocationPermission = () => {
       // Center map on user's location if map is initialized
       if (privacyStore.isAccepted) {
         await initializeMap()
-        intervalId.value = setInterval(async () => {
-          await initializeMap()
-        }, 300000)
       }
     },
     (error) => {
@@ -278,13 +273,6 @@ const requestLocationPermission = () => {
 defineExpose({
   requestLocationPermission,
 })
-
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-    intervalId.value = null
-  }
-})
 </script>
 
 <template>

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue'
+import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
@@ -504,27 +504,37 @@ const getClassXS = (val: boolean) => {
 }
 const inQueue = ref<boolean>(false)
 
-const photoTimeout = ref<any | null>(null)
+// ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
-const PHOTO_TIMEOUT_DURATION = 5 * 60 * 1000 // 5 นาที
+function resetCameraAndImage() {
-
+  if (img.value) {
-// ฟังก์ชันใหม่สำหรับจัดการ timeout ของรูป
+    img.value = undefined
-function startPhotoTimeout() {
+  }
-  clearPhotoTimeout() // ล้าง timeout เดิมก่อน (ถ้ามี)
+  if (cameraIsOn.value && camera.value) {
-
+    camera.value.stop()
-  photoTimeout.value = setTimeout(() => {
+    cameraIsOn.value = false
-    // ลบรูปหลังจาก 5 นาที
+  }
-    if (img.value) {
-      img.value = undefined
-      cameraIsOn.value = false
-      camera.value?.stop()
-    }
-  }, PHOTO_TIMEOUT_DURATION)
 }
 
-function clearPhotoTimeout() {
+// เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
-  if (photoTimeout.value) {
+function handleAppClose() {
-    clearTimeout(photoTimeout.value)
+  resetCameraAndImage()
-    photoTimeout.value = null
+
+  // หยุด interval ถ้ามี
+  if (intervalId.value !== undefined) {
+    clearInterval(intervalId.value)
+    intervalId.value = undefined
+  }
+}
+
+// จัดการ visibility change สำหรับมือถือ
+function handleVisibilityChange() {
+  if (document.visibilityState === 'hidden') {
+    handleAppClose()
+  } else if (document.visibilityState === 'visible') {
+    // เมื่อกลับมาที่แอพ ให้เรียกแผนที่ใหม่
+    if (privacyStore.isAccepted) {
+      mapRef.value?.requestLocationPermission()
+    }
   }
 }
 
@@ -538,6 +548,24 @@ onMounted(async () => {
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
   }
+
+  // เพิ่ม event listeners สำหรับมือถือ
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  window.addEventListener('pagehide', handleAppClose)
+})
+
+onBeforeUnmount(() => {
+  resetCameraAndImage()
+
+  // หยุด interval ถ้ามี
+  if (intervalId.value !== undefined) {
+    clearInterval(intervalId.value)
+    intervalId.value = undefined
+  }
+
+  // ลบ event listeners
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+  window.removeEventListener('pagehide', handleAppClose)
 })
 
 watch(