refactor code & fixed location

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;