<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      //console.log('componentBeforeCreate', this)
    },
    created() {
      //console.log('componentCreated', this)
    },
    beforeMount() {
      //console.log('componentBeforeMount', this)
    },
    mounted() {
      //console.log('componentMounted', this);
    },
    beforeDestroy() {
      //console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      //console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        options: { frequency: 500 }, // Update interval
        gyro_enabled: false,
      }
    },
    // Component Methods
    methods: {

      gyroOnSuccess: function (acceleration) {
        $$('#gyro').html(`
              <div style="text-align: center;">X: ${acceleration.x.toFixed(4)}</div>
              <div style="text-align: center;">Y: ${acceleration.y.toFixed(4)}</div>
              <div style="text-align: center;">Z: ${acceleration.z.toFixed(4)}</div>`);
      },

      gyroOnError: function (error) {
        $$('#gyro').html(`
            <div style="text-align: center;">Code: ${error.code}</div>
            <div style="text-align: center;">Message: ${error.message}</div>`);
      },

      gpsOnSuccess: function (position) {
        $$('#gps').html(`
            <div style="text-align: center;">X: ${position.coords.latitude.toFixed(4)}</div>
            <div style="text-align: center;">Y: ${position.coords.longitude.toFixed(4)}</div>
            <div style="text-align: center;">Z: ${position.coords.altitude.toFixed(4)}</div>`);
      },


      gpsOnError: function (error) {
        $$('#gps').html(`
            <div style="text-align: center;">Code: ${error.code}</div>
            <div style="text-align: center;">Message: ${error.message}</div>`);
      },

      testFunc: function () {
        this.checkConnection();
        //navigator.geolocation.watchPosition(this.gpsOnSuccess, this.gpsOnError, this.options);
        navigator.vibrate(1500);
        if (this.gyro_enabled == false) {
          navigator.accelerometer.watchAcceleration(this.gyroOnSuccess, this.gyroOnError, this.options);
          this.gyro_enabled = true;
        };
      },

      checkConnection: function () {
        var networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN] = 'Unknown';
        states[Connection.ETHERNET] = 'Ethernet';
        states[Connection.WIFI] = 'WiFi';
        states[Connection.CELL_2G] = 'Cell 2G';
        states[Connection.CELL_3G] = 'Cell 3G';
        states[Connection.CELL_4G] = 'Cell 4G';
        states[Connection.CELL] = 'Cell generic';
        states[Connection.NONE] = 'No network';

        $$('#networktype').html(`
                    <div style="text-align: center;">Network type: ${states[networkState]}</div>`
        );
      },
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        //console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        //console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        //console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        //console.log('pageAfterIn', page);
      },
      pageBeforeOut: function (e, page) {
        //console.log('pageBeforeOut', page);
      },
      pageAfterOut: function (e, page) {
        //console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        //console.log('pageBeforeRemove', page);
      },
    }
  }



</script>