samedi 12 mai 2018

Issues with Ember Functionality

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