Can't stop execution in parasails component method till navigator.geolocation yields the result

Question

I need to take the visitor's location when clicking a ajax-button and only then send the form data to the action.

So far I am able to conditionally submit based on a class existence.

The problem is that the navigator.geolocation condition in my code doesn't get parsed despite the agree popup appearing to user and the OK being clicked. It just skips this and display the fallback location.

Here is my changed default sails ajax-button component:

 methods: {

    click: async function () {
      let btnDelayed = document.getElementById('btn-search');

      if (btnDelayed && btnDelayed.classList.contains('delayed')) {
        console.log('btn-search cannot emit click');
        await this.loadGeoData();
      } else {
        console.log('btn-search can emit click ');
        this.$emit('click');
      }
    },
    loadGeoData: async function () {

      let loc = await this.getLocation();
      console.log('location');
      console.dir(loc);
      /*
            let test = {
              lat: 0.22,
              lng: 0.55
            };
      */
      let btnSubmit = document.getElementById('btn-search');
      btnSubmit.classList.remove('delayed');
      let pos = JSON.stringify(loc);
      this.$emit('pos', pos);
      console.log('pos event value ' + pos);
      this.click();
    },
    getLocation: async function () {
      let loc = {
        lat: 0,
        lng: 0
      };

        if (navigator.geolocation) {
          let options = {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0
          };

          console.log('geolocation loaded');
          navigator.geolocation.getCurrentPosition(function (position) {
            console.log('getting position...');
            console.dir(position);
            loc.lat = position.coords.latitude;
            loc.lng = position.coords.longitude;
          }, (err) => {
            console.warn(`ERROR(${err.code}): ${err.message}`);
          }, options);
        }

      return loc;
    }
  }

And here is the console log output:

btn-search cannot emit click
geolocation loaded
location
{…}
​
lat: 0
​
lng: 0
​
<prototype>: Object { … }
pos event value {"lat":0,"lng":0}
btn-search can emit click

// getting the data in the instance
argins
{…}
​
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
​
actionref: "{\"lat\":0,\"lng\":0}"
actiontype: "word"
search: ​

The avigator.geolocation.getCurrentPosition gets though executed but adter the form is submit:

getting position... ajax-button.component.js:108:13
Position
​
coords: Coordinates { latitude: 44.00000000000, longitude: 26.00000000000, accuracy: 931, … }
​
timestamp: 1548163982134

_

Of course, I need it executed before.

Answer 1

For further readers,

After days of searching I found this post, Catch Geolocation Error - Async Await, explaining how to make geolocation work with async/await.

The rest was just a matter of modifying the ajax-button component click event.