app.ux

<script>
/**
 * @desc: Application-level configurations and methods are shared by all pages.
 */
import fetch from '@system.fetch'
import configuration from '@system.configuration'
import device from '@system.device'
import cipher from '@system.cipher'  
import geolocation from '@system.geolocation'
import prompt from '@system.prompt' 

// URL for the Maps
const mapBaseUrl = 'https://geojson.pbest.me'
const markerIconColor = 'red'

// to enable async
const injectRef = Object.getPrototypeOf(global) || global
injectRef.regeneratorRuntime = require('@babel/runtime/regenerator')

/* The main configuration and data resource */
const data = require('./common/json/data.json')

export default {
  onCreate() {
    // Setup the locale
    this.locale = 'en'              // by default
    this._setupLocale(data.content)  // Find the closest match based on the config file
    
    // Initialize the data cached by the app
    this.dataCache = {
      meta: Object.assign({}, data.meta),
      appInfo: Object.assign({}, data.content[this.locale].app),
      pois: [].concat(data.content[this.locale].pois),
      myCoordinates: { lat: 0, lon: 0},   // user's coordinates
      globalMapURL: mapBaseUrl, 
      userId: cipher.getRandomValues(8)
    }
    this.channel = new BroadcastChannel('updateChannel')
    this._updateDatabase()
      .then(() => this.geolocateUser())
      .then(() => this.generateMapUrl())
      .then(() => {
        // Notify all the components that the database is ready
        this.channel.postMessage('ready')
        console.info(`   ✔️ All set!`)
      })
  },
  onDestroy: function () {
      this.channel.close()
  },
  /**
   * Obtains data cached by the app.
   * @param key
   */
  getAppData(key) {
    return this.dataCache[key]
  },
  /**
   * Sets the data cached by the app.
   * @param key
   * @param val
   */
  setAppData(key, val) {
    this.dataCache[key] = val
  },
  _updateDatabase() {
    return new Promise((resolve, reject) => {
      console.info('[2] Fetching external resources with latest configuration...')
      fetch.fetch({
        url: data.meta.source_url,
        method: 'get'
      }).then((result) => {
        try {
          if (result && result.data.code === 200) {
            const json = JSON.parse(result.data.data)
            if (json.meta.version && (json.meta.version > data.meta.version)) {
              // Updates the locale
              this._setupLocale(json.content)
              this.setAppData('meta', Object.assign({}, json.meta))
              this.setAppData('appInfo', Object.assign({}, json.content[this.locale].app))
              this.setAppData('pois', [].concat(json.content[this.locale].pois))
              console.info(`   ✔️ Using (remote) database version v${json.meta.version}`);
            } else {
              console.info(`   ✔️ Using local database version v ${data.meta.version}`);
            }
          }
        } catch(e) {
          console.error(`   🐛 I could not fetch the external resource. Reason: ${e}`);
        }
        console.info(`   ✔️ ${this.getAppData('pois').length} POIs loaded from Release v${this.getAppData('meta').version}`)
      })
      .finally(() => { resolve(this.getAppData('meta').version)} )
    })
  },
  /**
   * Finds the closest locale from a JSON object whose keys are the ISO tags to match
   * with the given `locale` string. 
   */
  _closestLocale (locale, available) {
    if (typeof locale === 'string' && available[locale]) {
      return locale
    }
    const components = locale.split('-');
    while (components.length) {
      const potential = components.join('-')
      if (available[potential]) {
        return potential
      }
      components.pop()
    }
    // If none, returns the first available
    return Object.keys(available)[0]
  },
  /**
   * Configure the best locale to serve the content, based on the config JSON object 
   * */  
  _setupLocale(json) {
    const localeObject = configuration.getLocale()
    const systemLocale = [localeObject.language, localeObject.countryOrRegion]
      .filter(n => !!n)
      .join('-')
    this.locale = this._closestLocale(systemLocale, json)
    console.info(`[1] Selected the closest locale [${this.locale}]`)
  },
  geolocateUser() {
    return new Promise((resolve, reject) => {
      const res = this.tryAndGetGeolocation()
      resolve(res)
    })
  },
  /** 
   * Get the permission from the user,  
   */
  async tryAndGetGeolocation() {
    const self = this
    let granted = false
    console.info('[3] Getting user location...')

    const tryGeolocation = () => {
      return new Promise((resolve, reject) => {
        geolocation.getLocation({ 
          success(res) { 
            self.setAppData('myCoordinates', { lat: res.latitude, lon: res.longitude })
            // If the distance is short (to the first PoI), it enables continous geolocation
            console.info(`   ✔️ Got user\'s coordinates [${res.latitude},${res.longitude}]`)          
            resolve(true)
          }, 
          fail(res, code) {
            console.error(`   🐛 Error getting the location (code ${code})`)
            resolve(false)
          },
        })
      })
    }
    const showDialog = () => {
      return new Promise((resolve, reject) => {
        prompt.showDialog({ 
          title: self.i18n.$t('message.app.geolocation.request'), 
          message: self.i18n.$t('message.app.geolocation.description'), 
          buttons: [ 
            { 
              text: self.i18n.$t('message.app.geolocation.no'), 
              color: '#B11623' 
            },
            { 
              text: self.i18n.$t('message.app.geolocation.yes'), 
              color: '#88C100'
            }, 
          ], 
          success: function (res) { 
            if (res.index === 1) {
              console.info({ message: '    The user wants to repeat the process' })
            } else if (res.index === 0) {
              console.info("   🚫 User doesn't grant geolocation permissions"); 
              self.exit()
            }
          }, 
          cancel: function(){ 
            console.info("   🚫 User cancelled the geolocation permission dialog"); 
          },
          complete: function() {
            resolve(false)
          },
        })
      })
    } 
    
    while (!granted) {
      // Infinite loop until geolocation is granted 
      granted = await tryGeolocation()
      if (!granted) {
        granted = await showDialog()
      }
    }
  },
  generateMapUrl() {
    console.info('[5] Generating global map URL...')
    const url = `${mapBaseUrl}?icon=${markerIconColor}&locale=${this.locale}&url=${encodeURIComponent(data.meta.source_url)}` 
    this.setAppData('globalMapURL', url) 
    return url
  },
  generateIndidivualMapUrl(item) {
    console.info(`Generating individual map URL for ${item.id}...`)
    const geojson = {
      type: "Feature",
      properties: {
        popupContent: item.name
      },
      geometry: {
        type: "Point",
        coordinates: [ parseFloat(item.lon), parseFloat(item.lat) ]
      }
    }
    const url = `${mapBaseUrl}?icon=${markerIconColor}`+
      `&locale=${this.locale}&geojson=${encodeURIComponent(JSON.stringify(geojson))}` 
    return url
  },  
  track(action, page) {
    const matomoBaseUrl = this.dataCache.meta.matomo_base_url
    if (!matomoBaseUrl) { return false }
    const url = `http://${this.manifest.package}/v${this.manifest.versionCode}/${page}`
    const random = String(Math.floor(Math.random()*1000)).padStart(4, '0');
    let matomoUrl = matomoBaseUrl + `&rand=${random}&action_name=${action}&url=${url}`
    matomoUrl += `&_id=${this.dataCache.userId}`
    device.getInfo()
      .then((res) => {
        matomoUrl += `&res=${res.data.screenWidth}x${res.data.screenHeight}`
        matomoUrl += `&lang=${res.data.language}-${res.data.region}` 
        matomoUrl += `&ua=${res.data.model}-${res.data.platformVersionCode}` 
        fetch.fetch({url: matomoUrl})
      })
  }
}
</script>