Skip to content

Instantly share code, notes, and snippets.

@k-fish
Last active January 15, 2019 02:08
Show Gist options
  • Save k-fish/973a0512add4710d4198b0ef7ba45479 to your computer and use it in GitHub Desktop.
Save k-fish/973a0512add4710d4198b0ef7ba45479 to your computer and use it in GitHub Desktop.
Location API
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()
});
import Ember from 'ember';
import { storageFor } from 'ember-local-storage';
export default Ember.Component.extend({
settings: storageFor('settings')
});
import StorageObject from 'ember-local-storage/local/object';
const Storage = StorageObject.extend();
export default Storage;
.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);
}
}
<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>
{{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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment