FrontlineOscar/controllers.application.js

## controllers.application.js
import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Geoapp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/geoapp.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="assets/vendor.js"></script>
    <script src="assets/geoapp.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

## routes.demo.js
import Ember from 'ember';
var google = window.google; // jshint ignore:line

export default Ember.Route.extend({

  // this is what will provide the model to your .hbs file
  model() {
    var prepopulatedCounties = Ember.A();
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Collier" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Hillsborough" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Lee" }));

    return Ember.Object.create({
      counties       : prepopulatedCounties,
      selectedCounty : undefined,
      address        : undefined,
      email          : undefined,
      latitude       : undefined,
      longitude      : undefined,
    });
  },

  actions: {
    codeAddress() {
      var geocoder = new google.maps.Geocoder();
      var address  = this.get('currentModel.address');
      alert("Address entered:" + address);

      geocoder.geocode( {'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        {
          var latitude  = results[0].geometry.location.lat();
          var longitude = results[0].geometry.location.lng();

          this.set('currentModel.latitude', latitude);
          this.set('currentModel.longitude', longitude);
        }
        else
        {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    },

    setEmail() {
      var dataValue = this.get('currentModel.selectedCounty');

      if(dataValue==="1"){
          this.set('currentModel.email', "first@email.com");
      }
      else if(dataValue==="2"){
          this.set('currentModel.email', "second@email.com");
      }
      else if (dataValue==="3"){
          this.set('currentModel.email', "third@email.com");
      }
      else{
          this.set('currentModel.email', "None Selected");
      }
    }
  }
});

## templates.application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

## templates.demo.hbs
{{!-- find me in app/templates/demo.hbs --}}
<form name="myform">
    <div>
        Address:
        <br>
        {{input type="text" name="address" value=model.address}}
        <button class="button" {{action "codeAddress"}}>Code Address</button>
    </div>
    <div>
        <br>
        Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
        <br>
        {{input type="text" value=model.latitude readonly='readonly'}}
        {{input type="text" value=model.longitude readonly='readonly'}}
    </div>
    <br>
    <div>
        <br>
        Email:
        <br>
        {{input type="text" value=model.email readonly='readonly'}}
    </div>
    <div>
        <br>
        Counties:
        <br>

        {{!-- in order for this to work you must install emberx-select --}}
        {{!-- ember install emberx-select --}}
        {{#x-select value=model.selectedCounty as |xs|}}
          {{#xs.option value="0"}}Choose One{{/xs.option}}
          {{#each model.counties as |county|}}
            {{#xs.option value=county.value}}{{ county.display }}{{/xs.option}}
          {{/each}}
        {{/x-select}}
    </div>
</form>

## twiddle.json
{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Geoapp</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	{{content-for "head"}}

	<link rel="stylesheet" href="assets/vendor.css">
	<link rel="stylesheet" href="assets/geoapp.css">

	{{content-for "head-footer"}}
	</head>
	<body>
	{{content-for "body"}}

	<script src="assets/vendor.js"></script>
	<script src="assets/geoapp.js"></script>

	{{content-for "body-footer"}}
	</body>
	</html>
	import Ember from 'ember';
	var google = window.google; // jshint ignore:line

	export default Ember.Route.extend({

	// this is what will provide the model to your .hbs file
	model() {
	var prepopulatedCounties = Ember.A();
	prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" }));
	prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Collier" }));
	prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Hillsborough" }));
	prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Lee" }));

	return Ember.Object.create({
	counties : prepopulatedCounties,
	selectedCounty : undefined,
	address : undefined,
	email : undefined,
	latitude : undefined,
	longitude : undefined,
	});
	},

	actions: {
	codeAddress() {
	var geocoder = new google.maps.Geocoder();
	var address = this.get('currentModel.address');
	alert("Address entered:" + address);

	geocoder.geocode( {'address': address}, function(results, status) {
	if (status === google.maps.GeocoderStatus.OK)
	{
	var latitude = results[0].geometry.location.lat();
	var longitude = results[0].geometry.location.lng();

	this.set('currentModel.latitude', latitude);
	this.set('currentModel.longitude', longitude);
	}
	else
	{
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	},

	setEmail() {
	var dataValue = this.get('currentModel.selectedCounty');

	if(dataValue==="1"){
	this.set('currentModel.email', "first@email.com");
	}
	else if(dataValue==="2"){
	this.set('currentModel.email', "second@email.com");
	}
	else if (dataValue==="3"){
	this.set('currentModel.email', "third@email.com");
	}
	else{
	this.set('currentModel.email', "None Selected");
	}
	}
	}
	});
	{{!-- find me in app/templates/demo.hbs --}}
	<form name="myform">
	<div>
	Address:
	<br>
	{{input type="text" name="address" value=model.address}}
	<button class="button" {{action "codeAddress"}}>Code Address</button>
	</div>
	<div>
	<br>
	Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
	<br>
	{{input type="text" value=model.latitude readonly='readonly'}}
	{{input type="text" value=model.longitude readonly='readonly'}}
	</div>
	<br>
	<div>
	<br>
	Email:
	<br>
	{{input type="text" value=model.email readonly='readonly'}}
	</div>
	<div>
	<br>
	Counties:
	<br>

	{{!-- in order for this to work you must install emberx-select --}}
	{{!-- ember install emberx-select --}}
	{{#x-select value=model.selectedCounty as \|xs\|}}
	{{#xs.option value="0"}}Choose One{{/xs.option}}
	{{#each model.counties as \|county\|}}
	{{#xs.option value=county.value}}{{ county.display }}{{/xs.option}}
	{{/each}}
	{{/x-select}}
	</div>
	</form>
	{
	"version": "0.8.1",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": false,
	"enable-testing": false
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
	"ember": "2.5.1",
	"ember-data": "2.5.2",
	"ember-template-compiler": "2.5.1"
	}
	}