fix remove code check fake location

src/components/AscGISMap.vue

@@ -5,51 +5,20 @@ import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
 import { useQuasar } from 'quasar'
 import { usePrivacyStore } from '@/stores/privacy'
-import { useLocationValidation } from '@/composables/useLocationValidation'
 
 const mixin = useCounterMixin()
 const { messageError } = mixin
 const privacyStore = usePrivacyStore()
 
-// import type { LocationObject } from '@/interface/index/Main'
-const mapElement = ref<HTMLElement | null>(null)
-const emit = defineEmits(['update:location', 'locationStatus', 'mockDetected'])
+const emit = defineEmits(['update:location'])
 const $q = useQuasar()
 
-const { validateLocation } = useLocationValidation()
-const MOCK_CHECK_DELAY_MS = 800
-
-function wait(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-function getCurrentPositionAsync(options?: PositionOptions) {
-  return new Promise<GeolocationPosition>((resolve, reject) => {
-    navigator.geolocation.getCurrentPosition(resolve, reject, options)
-  })
-}
-
-async function getPositionForValidation(fallback: GeolocationPosition) {
-  await wait(MOCK_CHECK_DELAY_MS)
-  try {
-    return await getCurrentPositionAsync({
-      enableHighAccuracy: true,
-      timeout: 10000,
-      maximumAge: 0,
-    })
-  } catch (error) {
-    // Keep the original reading if the second sampling fails.
-    return fallback
-  }
-}
-
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit('update:location', latitude, longitude, namePOI)
 }
 
 const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
-const isMapReady = ref<boolean>(false)
 
 // Replace ArcGIS api key
 const apiKey = ref<string>(
@@ -58,7 +27,7 @@ const apiKey = ref<string>(
 )
 const zoomMap = ref<number>(18)
 
-async function initializeMap(position: GeolocationPosition) {
+async function initializeMap() {
   try {
     // Load modules of ArcGIS
     loadModules([
@@ -69,149 +38,159 @@ async function initializeMap(position: GeolocationPosition) {
       'esri/Graphic',
       'esri/layers/TileLayer',
     ]).then(async ([esriConfig, Map, MapView, Point, Graphic, TileLayer]) => {
+      // Set apiKey
+      // esriConfig.apiKey =
+      //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+
+      // Create a FeatureLayer using a custom server URL
+      // const hillshadeLayer = new TileLayer({
+      //   url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
+      // })
+
       const map = new Map({
         basemap: 'streets',
+        // basemap: 'arcgis-topographic',
+        // layers: [hillshadeLayer],
       })
 
-      const { latitude, longitude } = position.coords
+      navigator.geolocation.getCurrentPosition(async (position) => {
+        const { latitude, longitude } = position.coords
 
-      const mapView = new MapView({
-        container: 'mapViewDisplay',
-        map: map,
-        center: {
-          latitude: latitude,
-          longitude: longitude,
-        }, // Set the initial map center current position
+        const mapView = new MapView({
+          container: 'mapViewDisplay',
+          map: map,
+          center: {
+            latitude: latitude,
+            longitude: longitude,
+          }, // Set the initial map center current position
 
-        zoom: zoomMap.value,
-        constraints: {
-          snapToZoom: false, // Disables snapping to the zoom level
-          minZoom: zoomMap.value, // Set minimum zoom level
-          maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
-        },
+          zoom: zoomMap.value,
+          constraints: {
+            snapToZoom: false, // Disables snapping to the zoom level
+            minZoom: zoomMap.value, // Set minimum zoom level
+            maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
+          },
 
-        ui: {
-          components: [], // Empty array to remove all default UI components
-        },
-      })
-      isMapReady.value = true
-
-      // ตำแหน่งของผู้ใช้
-      const userPoint = new Point({ longitude, latitude })
-      const userSymbol = {
-        type: 'picture-marker',
-        url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
-        width: '32px',
-        height: '32px',
-      }
-      const userGraphic = new Graphic({
-        geometry: userPoint,
-        symbol: userSymbol,
-      })
-      mapView.graphics.add(userGraphic)
-      // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
-      await axios
-        .get(
-          'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
-          {
-            params: {
-              f: 'json', // Format JSON response
-              distance: 2000,
-              category: 'POI',
-              location: {
-                spatialReference: { wkid: 4326 },
-                x: longitude,
-                y: latitude,
-              },
-              token: apiKey.value,
-            },
-          }
-        )
-        .then((response) => {
-          // console.log('poi', response.data.location)
-          poiPlaceName.value = response.data.address
-            ? response.data.address.PlaceName === ''
-              ? response.data.address.ShortLabel
-              : response.data.address.PlaceName
-            : 'ไม่พบข้อมูล'
-          const poiPoint = new Point({
-            longitude: response.data.location.x,
-            latitude: response.data.location.y,
-          })
-          const poiSymbol = {
-            type: 'picture-marker',
-            url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
-            width: '32px',
-            height: '32px',
-          }
-          const poiGraphic = new Graphic({
-            geometry: poiPoint,
-            symbol: poiSymbol,
-          })
-          mapView.graphics.add(poiGraphic)
-          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-          mapView.goTo({
-            target: [userPoint, poiPoint],
-            zoom: zoomMap.value,
-          })
-
-          updateLocation(latitude, longitude, poiPlaceName.value)
+          ui: {
+            components: [], // Empty array to remove all default UI components
+          },
         })
-        .catch(async (error) => {
-          // console.error('Error fetching points of interest:', error)
-          // Get POI place ยิงไปขอที่ server arcgis ไม่ต้องใช้ token
-          await axios
-            .get(
-              'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-              {
-                params: {
-                  f: 'json', // Format JSON response
-                  distance: 2000,
-                  category: 'POI',
-                  location: {
-                    spatialReference: { wkid: 4326 },
-                    x: longitude,
-                    y: latitude,
-                  },
+
+        // ตำแหน่งของผู้ใช้
+        const userPoint = new Point({ longitude, latitude })
+        const userSymbol = {
+          type: 'picture-marker',
+          url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+          width: '32px',
+          height: '32px',
+        }
+        const userGraphic = new Graphic({
+          geometry: userPoint,
+          symbol: userSymbol,
+        })
+        mapView.graphics.add(userGraphic)
+        // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
+        await axios
+          .get(
+            'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+            {
+              params: {
+                f: 'json', // Format JSON response
+                distance: 2000,
+                category: 'POI',
+                location: {
+                  spatialReference: { wkid: 4326 },
+                  x: longitude,
+                  y: latitude,
                 },
-              }
-            )
-            .then((response) => {
-              // console.log('poi', response.data.location)
-              poiPlaceName.value = response.data.address
-                ? response.data.address.PlaceName === ''
-                  ? response.data.address.ShortLabel
-                  : response.data.address.PlaceName
-                : 'ไม่พบข้อมูล'
-              const poiPoint = new Point({
-                longitude: response.data.location.x,
-                latitude: response.data.location.y,
-              })
-              const poiSymbol = {
-                type: 'picture-marker',
-                url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
-                width: '32px',
-                height: '32px',
-              }
-              const poiGraphic = new Graphic({
-                geometry: poiPoint,
-                symbol: poiSymbol,
-              })
-              mapView.graphics.add(poiGraphic)
-              // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-              mapView.goTo({
-                target: [userPoint, poiPoint],
-                zoom: zoomMap.value,
-              })
+                token: apiKey.value,
+              },
+            }
+          )
+          .then((response) => {
+            // console.log('poi', response.data.location)
+            poiPlaceName.value = response.data.address
+              ? response.data.address.PlaceName === ''
+                ? response.data.address.ShortLabel
+                : response.data.address.PlaceName
+              : 'ไม่พบข้อมูล'
+            const poiPoint = new Point({
+              longitude: response.data.location.x,
+              latitude: response.data.location.y,
+            })
+            const poiSymbol = {
+              type: 'picture-marker',
+              url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+              width: '32px',
+              height: '32px',
+            }
+            const poiGraphic = new Graphic({
+              geometry: poiPoint,
+              symbol: poiSymbol,
+            })
+            mapView.graphics.add(poiGraphic)
+            // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+            mapView.goTo({
+              target: [userPoint, poiPoint],
+              zoom: zoomMap.value,
+            })
 
-              updateLocation(latitude, longitude, poiPlaceName.value)
-            })
-            .catch((error) => {
-              // Keep map visible even when POI lookup fails.
-              poiPlaceName.value = 'ไม่พบข้อมูล'
-              updateLocation(latitude, longitude, poiPlaceName.value)
-            })
-        })
+            updateLocation(latitude, longitude, poiPlaceName.value)
+          })
+          .catch(async (error) => {
+            // console.error('Error fetching points of interest:', error)
+            // Get POI place ยิงไปขอที่ server arcgis ไม่ต้องใช้ token
+            await axios
+              .get(
+                'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                {
+                  params: {
+                    f: 'json', // Format JSON response
+                    distance: 2000,
+                    category: 'POI',
+                    location: {
+                      spatialReference: { wkid: 4326 },
+                      x: longitude,
+                      y: latitude,
+                    },
+                  },
+                }
+              )
+              .then((response) => {
+                // console.log('poi', response.data.location)
+                poiPlaceName.value = response.data.address
+                  ? response.data.address.PlaceName === ''
+                    ? response.data.address.ShortLabel
+                    : response.data.address.PlaceName
+                  : 'ไม่พบข้อมูล'
+                const poiPoint = new Point({
+                  longitude: response.data.location.x,
+                  latitude: response.data.location.y,
+                })
+                const poiSymbol = {
+                  type: 'picture-marker',
+                  url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+                  width: '32px',
+                  height: '32px',
+                }
+                const poiGraphic = new Graphic({
+                  geometry: poiPoint,
+                  symbol: poiSymbol,
+                })
+                mapView.graphics.add(poiGraphic)
+                // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+                mapView.goTo({
+                  target: [userPoint, poiPoint],
+                  zoom: zoomMap.value,
+                })
+
+                updateLocation(latitude, longitude, poiPlaceName.value)
+              })
+              .catch((error) => {
+                // console.error('Error fetching points of interest:', error)
+              })
+          })
+      })
     })
   } catch (error) {
     console.error('Error loading the map', error)
@@ -242,35 +221,10 @@ const requestLocationPermission = () => {
 
   navigator.geolocation.getCurrentPosition(
     async (position) => {
-      const sampledPosition = await getPositionForValidation(position)
-
-      // Validate location first
-      const validationResult = validateLocation(sampledPosition)
-
-      // Do not block map preview on initial mock detection.
-      // The hard-stop warning is enforced at submit time in HomeView.
-      if (validationResult.isMockDetected) {
-        locationGranted.value = true
-        emit('locationStatus', true)
-      }
-
-      // Check for critical errors (invalid coordinates) that prevent showing location
-      const hasCriticalErrors = validationResult.errors.some((error) =>
-        error.includes('พิกัดตำแหน่งไม่ถูกต้อง')
-      )
-
-      if (hasCriticalErrors) {
-        locationGranted.value = false
-        emit('locationStatus', false)
-        messageError($q, '', validationResult.errors[0])
-        return
-      }
-
-      // Permission granted for map preview state.
+      // Permission granted
       locationGranted.value = true
-      emit('locationStatus', true)
 
-      const { latitude, longitude } = sampledPosition.coords
+      const { latitude, longitude } = position.coords
       // console.log('Current position:', latitude, longitude)
 
       if (!latitude || !longitude) {
@@ -280,13 +234,12 @@ const requestLocationPermission = () => {
 
       // Center map on user's location if map is initialized
       if (privacyStore.isAccepted) {
-        await initializeMap(sampledPosition)
+        await initializeMap()
       }
     },
     (error) => {
       // Permission denied
       locationGranted.value = false
-      emit('locationStatus', false)
 
       switch (error.code) {
         case error.PERMISSION_DENIED:
@@ -311,19 +264,18 @@ const requestLocationPermission = () => {
           break
       }
     },
-    { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
+    { enableHighAccuracy: true }
   )
 }
 
 defineExpose({
   requestLocationPermission,
-  locationGranted,
 })
 </script>
 
 <template>
   <!-- Loading skeleton -->
-  <div v-if="!isMapReady" class="col-12">
+  <div v-if="!poiPlaceName" class="col-12">
     <q-skeleton
       :height="$q.screen.gt.xs ? '35vh' : '45px'"
       width="100%"
@@ -333,7 +285,7 @@ defineExpose({
   </div>
 
   <q-card
-    v-show="isMapReady"
+    v-show="poiPlaceName"
     bordered
     flat
     class="col-12 bg-grey-2 shadow-0"
@@ -355,7 +307,7 @@ defineExpose({
       >
         พื้นที่ใกล้เคียง
         <span class="q-px-sm">:</span>
-        {{ poiPlaceName || 'ไม่พบข้อมูล' }}
+        {{ poiPlaceName }}
       </div>
     </div>
 
@@ -372,7 +324,7 @@ defineExpose({
           </q-item-section>
 
           <q-item-section>
-            {{ poiPlaceName || 'ไม่พบข้อมูล' }}
+            {{ poiPlaceName }}
           </q-item-section>
         </template>