Location API

components.locations-section.js

import Ember from 'ember';
import { inject as service } from '@ember/service';
import { task, timeout } from 'ember-concurrency';
import { get } from '@ember/object';

const autoSuggest = ({ latitude, longitude }, place, appCode, appID) => {
  return fetch(`https://places.cit.api.here.com/places/v1/autosuggest?at=${latitude},${longitude}&q=${place}&app_id=${appID}&app_code=${appCode}`);
};

const appendCreds = (url, appCode, appID) => {
  return `${url}&app_id=${appID}&app_code=${appCode}`
};

export default Ember.Component.extend({
  geolocation: service(),
  
  didReceiveAttrs() {
    this._super(...arguments);
    this.locations.perform();
  },
  
  locationQuery: 'Tim Hortons',
  
  locations: task(function * () {
    yield timeout(1000);
    const appID = this.get('appID');
    const appCode = this.get('appCode');
    const geolocation = this.get('geolocation');
    const place = this.get('locationQuery');
    
		const geoObject = yield geolocation.getLocation();
    const result = yield autoSuggest(geoObject.coords, place || '', appCode, appID);
    const resp = yield result.json();
    const fill = yield Promise.all(
      resp.results.map(async (r) => {
        const rp = await fetch(appendCreds(r.href, appCode, appID))
        return rp.json();
    	})
   	);
    const filtered = fill.filter(r => get(r, 'contacts.website.firstObject.value'));
    this.set('locationResult', filtered);
  }).keepLatest()
});

components.main-page.js

import Ember from 'ember';
import { storageFor } from 'ember-local-storage';

export default Ember.Component.extend({
  settings: storageFor('settings')
});

storages.settings.js

import StorageObject from 'ember-local-storage/local/object';

const Storage = StorageObject.extend();

export default Storage;

styles.app.css

.spinning-circle {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 10px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  animation: spin 1s infinite linear;
}

@keyframes spin { 
  100% { 
    transform: rotate(360deg); 
  } 
} 

templates.application.hbs

{{main-page}}

templates.components.locations-section.hbs

<section class="section">
  <div class="container">
    <h1 class="title">
    	Locations
    </h1>
    <div class="field">
      <label class="label">
        Place
      </label>
      <div class="control">
        <input class="input" type="text" placeholder="Tim Hortons" value={{locationQuery}} oninput={{action (pipe (action (mut locationQuery)) (perform locations)) value="target.value"}}>
      </div>
    </div>
  </div>
</section>
<section class="section">
	<div class="container">
  {{#if locations.isRunning}}
  	<div class="columns is-centered">
    	<div class="column is-narrow">
     		<div class="spinning-circle"></div>
      </div>
    </div>
	{{else}}
    <table class="table">
      <thead>
        <tr>
          <th>Place</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        {{#each locationResult as |row|}}
          <tr>
            <td>{{row.name}}</td>
            <td>{{row.contacts.website.firstObject.value}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
	{{/if}}

  </div>
</section>

templates.components.main-page.hbs

{{locations-section appID=settings.appID appCode=settings.appCode}}
<section class="section">
  <div class="container">
    <h1 class="title">
    	Credentials
    </h1> 
    <h2 class="subtitle">
    	Using here.com API
    </h2>
    <div class="field">
      <label class="label">App ID</label>
      <div class="control">
        <input class="input" type="text" placeholder="te7yt8y1t873" value={{settings.appID}} oninput={{action (mut settings.appID) value="target.value"}}>
      </div>
    </div>
    <div class="field">
      <label class="label">App Code</label>
      <div class="control">
        <input class="input" type="text" placeholder="DjsdSD8123j9df81j1238Fj182" value={{settings.appCode}} oninput={{action (mut settings.appCode) value="target.value"}}>
      </div>
    </div>
  </div>
</section>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "bulma": "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-fetch": "6.4.0",
    "ember-local-storage": "1.5.0",
    "ember-cli-geo": "4.0.0",
    "ember-concurrency": "0.8.21",
    "ember-composable-helpers": "2.1.0"
  }
}