fix check null POI

src/components/AscGISMap.vue

@@ -2,10 +2,16 @@
 import { onMounted, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
+import { useCounterMixin } from '@/stores/mixin'
+import { useQuasar } from 'quasar'
 
-import type { LocationObject } from '@/interface/index/Main'
+const mixin = useCounterMixin()
+const { messageError } = mixin
 
+// import type { LocationObject } from '@/interface/index/Main'
+const mapElement = ref<HTMLElement | null>(null)
 const emit = defineEmits(['update:location'])
+const $q = useQuasar()
 
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
@@ -191,6 +197,61 @@ async function initializeMap() {
   }
 }
 
+const locationGranted = ref(false)
+// Function to request location permission
+const requestLocationPermission = () => {
+  if (!navigator.geolocation) {
+    messageError(
+      $q,
+      '',
+      'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เบราว์เซอร์ของคุณไม่รองรับ Geolocation'
+    )
+    return
+  }
+
+  navigator.geolocation.getCurrentPosition(
+    () => {
+      // Permission granted
+      locationGranted.value = true
+
+      // Center map on user's location if map is initialized
+      initializeMap()
+    },
+    (error) => {
+      // Permission denied
+      locationGranted.value = false
+
+      switch (error.code) {
+        case error.PERMISSION_DENIED:
+          messageError(
+            $q,
+            '',
+            'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เนื่องจากคุณปฏิเสธการเข้าถึงตำแหน่ง กรุณาเปิดการเข้าถึงตำแหน่ง'
+          )
+          break
+        case error.POSITION_UNAVAILABLE:
+          messageError($q, '', 'ไม่สามารถระบุตำแหน่งปัจจุบันได้')
+          break
+        case error.TIMEOUT:
+          messageError($q, '', 'การร้องขอตำแหน่งหมดเวลา กรุณาลองอีกครั้ง')
+          break
+        default:
+          messageError(
+            $q,
+            '',
+            'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เกิดข้อผิดพลาดไม่ทราบสาเหตุในการเข้าถึงตำแหน่ง'
+          )
+          break
+      }
+    },
+    { enableHighAccuracy: true }
+  )
+}
+
+defineExpose({
+  requestLocationPermission,
+})
+
 onMounted(async () => {
   await initializeMap()
 })
@@ -215,7 +276,11 @@ onMounted(async () => {
     :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
   >
     <div v-if="$q.screen.gt.xs">
-      <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
+      <div
+        id="mapViewDisplay"
+        ref="mapElement"
+        style="height: 35vh; pointer-events: none"
+      ></div>
 
       <div
         :class="

src/stores/mixin.ts

@@ -230,6 +230,18 @@ export const useCounterMixin = defineStore('mixin', () => {
         }
       }
     } else {
+      if (msg !== '') {
+        return q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: `พบข้อผิดพลาด`,
+            message: msg,
+            icon: 'warning',
+            color: 'red',
+            onlycancel: true,
+          },
+        })
+      }
       q.dialog({
         component: CustomComponent,
         componentProps: {

src/views/HomeView.vue

@@ -306,10 +306,15 @@ function validateForm() {
   }
 }
 
+const mapRef = ref<InstanceType<typeof MapCheck> | null>(null)
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
+  if (!formLocation.POI || formLocation.POI === '') {
+    mapRef.value?.requestLocationPermission()
+    return
+  }
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const locationName = workplace.value === 'in-place' ? '' : useLocation.value
@@ -349,6 +354,12 @@ async function confirm() {
 }
 
 async function getCheck() {
+  console.log('getCheck')
+
+  if (!formLocation.POI || formLocation.POI === '') {
+    mapRef.value?.requestLocationPermission()
+    return
+  }
   showLoader()
   await http
     .get(config.API.checkoutCheck)
@@ -434,6 +445,7 @@ onMounted(async () => {
   // await fetchCheckTime()
   updateClock()
   startChecking() //เช็ค status จาก คิว #1
+  mapRef.value?.requestLocationPermission()
 })
 </script>
 
@@ -498,6 +510,7 @@ onMounted(async () => {
                   <div class="col-12">
                     <MapCheck
                       v-if="$q.screen.gt.xs"
+                      ref="mapRef"
                       @update:location="updateLocation"
                     />
                   </div>
@@ -661,7 +674,7 @@ onMounted(async () => {
                   </div>
 
                   <div class="col-12" v-if="$q.screen.xs">
-                    <MapCheck @update:location="updateLocation" />
+                    <MapCheck ref="mapRef" @update:location="updateLocation" />
                   </div>
                 </div>
                 <!-- กรอกข้อมูล หน้ามือถือ -->
@@ -975,6 +988,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 </template>
+
 <style scoped>
 .q-card.cardImg:hover {
   border: 1px solid #02a998 !important;