skylar-anderson · August 11, 2016 19:50
diff --git a/adapters.application.js b/adapters.application.js
 import JSONAPIAdapter from 'ember-data/adapters/json-api';

 export default JSONAPIAdapter.extend({
  host: 'https://app-3642.on-aptible.com'
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
 });
diff --git a/controllers.contacts.js b/controllers.contacts.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
 });
diff --git a/controllers.contacts.new.js b/controllers.contacts.new.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  actions: {
    addContact() {
    	// Complete me
    }
  }
 });
diff --git a/models.contact.js b/models.contact.js
 import Model from "ember-data/model";
 import attr from "ember-data/attr";
 import { belongsTo, hasMany } from "ember-data/relationships";

 export default Model.extend({
  firstName: attr('string'),
  lastName: attr('string'),
  bio: attr('string'),
  email: attr('string'),
  
  phoneNumbers: hasMany('phone-number')
 });
diff --git a/models.phone-number.js b/models.phone-number.js
 import Model from "ember-data/model";
 import attr from "ember-data/attr";
 import { belongsTo, hasMany } from "ember-data/relationships";

 export default Model.extend({
  phoneNumber: attr('string'),
  contact: belongsTo('contact')
 });
diff --git a/router.js b/router.js
 import Ember from 'ember';
 import config from './config/environment';

 const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
 });

 Router.map(function() {
  this.route('contacts', function() {
  	this.route('contact', { path: ':contact_id' });
    this.route('new');
  });
 });

 export default Router;
diff --git a/routes.contacts.contact.js b/routes.contacts.contact.js
 import Ember from 'ember';

 export default Ember.Route.extend({
  model(params) {
  	return this.store.find('contact', params.contact_id);
  },
  
  actions: {
  	addNumber() {
 			// Complete me
    }
  }
 });
diff --git a/routes.contacts.js b/routes.contacts.js
 import Ember from 'ember';

 export default Ember.Route.extend({
  model() {
  	return this.store.findAll('contact')
  }
 });
diff --git a/routes.contacts.new.js b/routes.contacts.new.js
 import Ember from 'ember';

 export default Ember.Route.extend({
  model() {
  	return this.store.createRecord('contact');
  }
 });
diff --git a/serializers.application.js b/serializers.application.js
 import JSONAPISerializer from 'ember-data/serializers/json-api';

 export default JSONAPISerializer.extend({
 	normalizeResponse() {
    let json = this._super(...arguments);
  	return json;
  },
  
  normalize() {
  	let json = this._super(...arguments);
    return json;
  }
 });
diff --git a/templates.application.hbs b/templates.application.hbs
 {{link-to 'Contact Management System' 'application' tagName="h1" class="logo"}}


 <style type="text/css">

 	header {
  	border-bottom: 1px solid #f0f0f0;
    margin-bottom: 50px;
  }

 	a.nav-item {
  	display: inline-block;
    padding: 8px 10px;
    margin: 10px;
  }
  
  a.nav-item.active {
  	background: #eaeaea;
    border-radius: 5px;
  }
  
 	.sidebar {
  	float: left;
    padding: 15px;
  	width:200px;
    background: #f9f9f9;
  }
  
  .sidebar ul {
  	margin: 0;
    padding: 0;
  }
  
  .sidebar li {
  	list-style-type: none;
    border-bottom: 1px solid #fafafa;
  }
  
  .sidebar li > a {
  	display: block;
    padding: 8px;
  }
  
  .sidebar li > a.active {
  	background: #f0f0f0;
    color: #333;
  }
  
  .primary {
  	float:left;
    padding: 15px;
  	border-left: 1px solid #e0e0e0;
  }
  
 	h1.logo {
  	cursor: pointer;
  }
  
  h1.logo:hover {
  	color: blue
  }
  
 	label {
  	display: block;
  }
  
  form > div {
  	margin: 15px 0;
  }
 </style>

 {{outlet}}
diff --git a/templates.contacts.contact.hbs b/templates.contacts.contact.hbs

 <h3>{{model.firstName}} {{model.lastName}}</h3>

 <p>{{model.bio}}</p>

 <h4>Phone Numbers:</h4>
 <ul>
  {{#each model.phoneNumbers as |phone|}}
    <li>{{phone.phoneNumber}} <button>Delete</button></li>
  {{else}}
    <li>No Phone Numbers</li>
  {{/each}}
 </ul>

 <div class="add-number">
  {{input value=newNumber}}
  <button {{action 'addNumber'}}>Add Number</button>
 </div>

 <div class="delete-contact">
 	<button>Delete {{model.firstName}}</button>
 </div>
diff --git a/templates.contacts.hbs b/templates.contacts.hbs
 <header>
 	<h2>My Contacts</h2>
 	{{link-to 'Add New' 'contacts.new' class='nav-item'}}
  {{link-to 'All Contacts' 'contacts.index' class='nav-item'}}
 </header>

 <div class="sidebar">
 	<ul>
  	{{#each model as |contact|}}
    	<li>
    		{{link-to contact.firstName 'contacts.contact' contact.id}}
    	</li>
  	{{else}}
 	    <li>No Contacts!</li>
  	{{/each}}
 	</ul>
 </div>

 <div class="primary">
 	{{outlet}}
 </div>
diff --git a/templates.contacts.new.hbs b/templates.contacts.new.hbs
 <h3>Add New Contact</h3>

 <form>
 	<div>
 		<label>First Name</label>
 		{{input value=model.firstName}}
  </div>
  
  <div>
 		<label>Last Name</label>
 		{{input value=model.lastName}}
  </div>
  
  <div>
 		<label>Email</label>
 		{{input value=model.email}}
  </div>
  
  <div>
 		<label>Bio</label>
 		{{textarea value=model.bio}}
  </div>
  
  <div>
  	<button type="submit" {{action 'addContact'}}>Add Contact</button>
    <button type="cancel" {{action 'cancel'}}>Cancel</button>
  </div>
 </form>
diff --git a/templates.index.hbs b/templates.index.hbs

 {{link-to 'View My Contacts' 'contacts'}}
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
 }
	import JSONAPIAdapter from 'ember-data/adapters/json-api';

	export default JSONAPIAdapter.extend({
	host: 'https://app-3642.on-aptible.com'
	});
	import Ember from 'ember';

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

	export default Ember.Controller.extend({
	actions: {
	addContact() {
	// Complete me
	}
	}
	});
	import Model from "ember-data/model";
	import attr from "ember-data/attr";
	import { belongsTo, hasMany } from "ember-data/relationships";

	export default Model.extend({
	firstName: attr('string'),
	lastName: attr('string'),
	bio: attr('string'),
	email: attr('string'),

	phoneNumbers: hasMany('phone-number')
	});
	import Ember from 'ember';
	import config from './config/environment';

	const Router = Ember.Router.extend({
	location: 'none',
	rootURL: config.rootURL
	});

	Router.map(function() {
	this.route('contacts', function() {
	this.route('contact', { path: ':contact_id' });
	this.route('new');
	});
	});

	export default Router;
	import Ember from 'ember';

	export default Ember.Route.extend({
	model(params) {
	return this.store.find('contact', params.contact_id);
	},

	actions: {
	addNumber() {
	// Complete me
	}
	}
	});
	import Ember from 'ember';

	export default Ember.Route.extend({
	model() {
	return this.store.findAll('contact')
	}
	});
	import JSONAPISerializer from 'ember-data/serializers/json-api';

	export default JSONAPISerializer.extend({
	normalizeResponse() {
	let json = this._super(...arguments);
	return json;
	},

	normalize() {
	let json = this._super(...arguments);
	return json;
	}
	});
	{{link-to 'Contact Management System' 'application' tagName="h1" class="logo"}}


	<style type="text/css">

	header {
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 50px;
	}

	a.nav-item {
	display: inline-block;
	padding: 8px 10px;
	margin: 10px;
	}

	a.nav-item.active {
	background: #eaeaea;
	border-radius: 5px;
	}

	.sidebar {
	float: left;
	padding: 15px;
	width:200px;
	background: #f9f9f9;
	}

	.sidebar ul {
	margin: 0;
	padding: 0;
	}

	.sidebar li {
	list-style-type: none;
	border-bottom: 1px solid #fafafa;
	}

	.sidebar li > a {
	display: block;
	padding: 8px;
	}

	.sidebar li > a.active {
	background: #f0f0f0;
	color: #333;
	}

	.primary {
	float:left;
	padding: 15px;
	border-left: 1px solid #e0e0e0;
	}

	h1.logo {
	cursor: pointer;
	}

	h1.logo:hover {
	color: blue
	}

	label {
	display: block;
	}

	form > div {
	margin: 15px 0;
	}
	</style>

	{{outlet}}

	<h3>{{model.firstName}} {{model.lastName}}</h3>

	<p>{{model.bio}}</p>

	<h4>Phone Numbers:</h4>
	<ul>
	{{#each model.phoneNumbers as \|phone\|}}
	<li>{{phone.phoneNumber}} <button>Delete</button></li>
	{{else}}
	<li>No Phone Numbers</li>
	{{/each}}
	</ul>

	<div class="add-number">
	{{input value=newNumber}}
	<button {{action 'addNumber'}}>Add Number</button>
	</div>

	<div class="delete-contact">
	<button>Delete {{model.firstName}}</button>
	</div>