src/components/AscGISMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
@@ -22,6 +22,8 @@ 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.'
@@ -237,6 +239,9 @@ 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) => {
@@ -273,6 +278,13 @@ 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, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
@@ -504,37 +504,27 @@ const getClassXS = (val: boolean) => {
 }
 const inQueue = ref<boolean>(false)
 
-// ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
-function resetCameraAndImage() {
-  if (img.value) {
-    img.value = undefined
-  }
-  if (cameraIsOn.value && camera.value) {
-    camera.value.stop()
-    cameraIsOn.value = false
-  }
-}
+const photoTimeout = ref<any | null>(null)
+const PHOTO_TIMEOUT_DURATION = 5 * 60 * 1000 // 5 นาที
 
-// เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
-function handleAppClose() {
-  resetCameraAndImage()
+// ฟังก์ชันใหม่สำหรับจัดการ timeout ของรูป
+function startPhotoTimeout() {
+  clearPhotoTimeout() // ล้าง timeout เดิมก่อน (ถ้ามี)
 
-  // หยุด 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()
+  photoTimeout.value = setTimeout(() => {
+    // ลบรูปหลังจาก 5 นาที
+    if (img.value) {
+      img.value = undefined
+      cameraIsOn.value = false
+      camera.value?.stop()
     }
+  }, PHOTO_TIMEOUT_DURATION)
+}
+
+function clearPhotoTimeout() {
+  if (photoTimeout.value) {
+    clearTimeout(photoTimeout.value)
+    photoTimeout.value = null
   }
 }
 
@@ -548,24 +538,6 @@ 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(