GeoData: enable location setting via device location in geo cell

packages/nc-gui/components.d.ts

@@ -28,7 +28,6 @@ declare module '@vue/runtime-core' {
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
-    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
@@ -48,7 +47,6 @@ declare module '@vue/runtime-core' {
     AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
     AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
     APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
@@ -108,8 +106,6 @@ declare module '@vue/runtime-core' {
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
-    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
-    MdiAdd: typeof import('~icons/mdi/add')['default']
     MdiAlpha: typeof import('~icons/mdi/alpha')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
@@ -204,7 +200,6 @@ declare module '@vue/runtime-core' {
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
-    MdiShieldKeyOutline: typeof import('~icons/mdi/shield-key-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiSort: typeof import('~icons/mdi/sort')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']

packages/nc-gui/components/cell/GeoData.vue

@@ -27,6 +27,8 @@ let error = $ref<string | undefined>()
 
 let isExpanded = $ref(false)
 
+let isLoading = $ref(false)
+
 // const localValue = computed<string | Record<string, any> | undefined>({
 //   get: () => localValueState.value,
 //   set: (val: undefined | string | Record<string, any>) => {
@@ -38,8 +40,6 @@ let isExpanded = $ref(false)
 //   },
 // })
 
-
-
 // const isPopupOpen = ref(false)
 // const showPopup = () => (isPopupOpen.value = true)
 
@@ -126,8 +126,6 @@ const latLongStr = computed(() => {
 //   longitude: number
 // }
 
-
-
 // const latitude = ref('INITIAL')
 
 // interface FormState {
@@ -155,6 +153,28 @@ const clear = () => {
   formState.longitude = longitude
   console.log(`clear - formState: `, formState)
 }
+
+const onGetCurrentLocation = () => {
+  isLoading = true
+  const success = (position) => {
+    const crd = position.coords
+    formState.latitude = crd.latitude
+    formState.longitude = crd.longitude
+  }
+
+  const error = (err) => {
+    console.warn(`ERROR(${err.code}): ${err.message}`)
+  }
+
+  const options = {
+    enableHighAccuracy: true,
+    timeout: 8000,
+    maximumAge: 10000,
+  }
+
+  navigator.geolocation.getCurrentPosition(success, error, options)
+  if (success !== null) isLoading = false
+}
 </script>
 
 <template>
@@ -173,12 +193,16 @@ const clear = () => {
     <template #overlay>
       <a-form :model="formState" class="flex flex-col w-full" @finish="handleFinish">
         <a-form-item label="Latitude">
-          <a-input v-model:value="formState.latitude" type="number" step="0.000001" :max="90" :min="-90" />
+          <a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" />
         </a-form-item>
         <a-form-item label="Longitude">
-          <a-input v-model:value="formState.longitude" type="number" step="0.000001" :min="-180" :max="180" />
+          <a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" />
         </a-form-item>
         <a-form-item>
+          <a-form-item>
+            <a-button @click="onGetCurrentLocation">Your Location</a-button>
+            <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
+          </a-form-item>
           <a-button type="text" @click="clear">Cancel</a-button>
           <a-button type="primary" html-type="submit">Submit</a-button>
         </a-form-item>