I'm trying to measure distance from the user to an address in each model object. Thus far I've got the code working with hardcoded data but having a really tough time getting model data in my controller and updating my model. Files below...(also happy to hear of any alternative ways to do this i.e. a helper, etc etc)
/routes/homepage.js
import Ember from 'ember';
import { later } from '@ember/runloop';
import { inject as service } from '@ember/service';
const { Route, set } = Ember;
export default Route.extend({
model() {
return this.store.findAll('homepage');
},
setupController(controller, model) {
set(controller, 'homepage', model);
},
activate() {
this.controllerFor('homepage').send('distanceFrom');
}
});
controllers/homepage.js
import Ember from 'ember';
import { inject as service } from '@ember/service';
export default Ember.Controller.extend({
userLocation: null,
endLocation: null,
milesAway: null,
locationIsLoading: true,
googleMapsApi: service(),
geolocation: service(),
userLocationChanged: function () {
this.get('homepage').forEach(model => {
this.set('endLocation', model.get('address'));
}),
this.get('userLocation');
this.toggleProperty('locationIsLoading');
console.log("User's location recieved.")
this.send('getDistance');
}.observes('userLocation'),
actions: {
distanceFrom: function() {
this.get('geolocation').trackLocation().then((geoObject) => {
let currentLocation = this.get('geolocation').get('currentLocation');
this.set('userLocation', currentLocation);
}, (reason) => {
console.log('Geolocation failed because ' + reason);
});
},
getDistance: function(){
console.log("Getting Distance");
this._super(...arguments);
this.get('googleMapsApi.google').then((google) => {
let endLocation = this.get('endLocation');
let userLocationLat = this.get('userLocation')[0];
let userLocationLon = this.get('userLocation')[1];
let userLocation = "" + userLocationLat + ',' + userLocationLon
console.log(userLocation);
let distanceMatrixService = new google.maps.DistanceMatrixService();
$(function() {
function calculateDistance(origin, destination) {
distanceMatrixService.getDistanceMatrix({
origins: [userLocation],
destinations: [endLocation],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$('#result').html(err);
} else {
var origin = response.originAddresses[0];
var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
console.log("No Results");
} else {
var distance = response.rows[0].elements[0].distance;
var distance_value = distance.value;
var distance_text = distance.text;
var miles = distance_text.substring(0, distance_text.length - 3);
console.log(miles);
}
}
};
calculateDistance();
});
});
}
}
});
models/homepage.js
import DS from 'ember-data';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';
import Contentful from 'ember-data-contentful/models/contentful';
export default Contentful.extend({
logo: belongsTo('contentful-asset'),
backgroundImage: belongsTo('contentful-asset'),
rating: attr('number'),
description: attr('string'),
address: attr('string'),
distanceFrom: attr(),
});
I know it's a lot but those are all the necessary files. I'd like to use the 'address' from each model object to update the distanceFrom with 'miles' for each model object. Thus having a list of points of interest with miles away showed. Make sense? Thanks!!
Aucun commentaire:
Enregistrer un commentaire