Beylul Kbreab

build/index.html

@@ -36,7 +36,7 @@ <h3 class="button btn-cancel">Cancel</h3>
 
       <main>
         <ul id="contact-cards" class="row align-center"></ul>
-        <section id="contact-details"></section>
+        <section id="contact-details"  hidden="true"></section>
       </main>
     </div>
 

src/app.js

@@ -1,9 +1,32 @@
-import Application from 'app/models/application';
-import ApplicationView from 'app/views/application_view';
+import $ from 'jquery';
+import _ from 'underscore';
+import backbone from 'backbone';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+import Contact from 'app/models/contact';
 
-var application = new Application();
+var contactData = [
+  {
+    name: 'charles',
+    phone: '206-111-2222',
+    email: "charles@gmail.com"
+  }, {
+    name: 'kari',
+    phone: '206-111-2222',
+    email: "kari@gmail.com"
+  }, {
+    name: 'dan',
+    phone: '206-111-2222',
+    email: "dan@gmail.com"
+  }
+];
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+$(document).ready(function() {
+  var contactList = new Rolodex(contactData);
+  var options = {
+    el: 'html',
+    model: contactList
+  };
+  var application = new RolodexView(options);
+  application.render();
 });

src/app/collections/rolodex.js

@@ -1,10 +1,11 @@
 import Backbone from 'backbone';
-
+import Contact from 'app/models/contact';
 const Rolodex = Backbone.Collection.extend({
   // This Rolodex represents a collection of Contacts
   // and should include any methods or attributes
   // that are involved in working with more than one
   // Contact.
+    model: Contact
 });
 
 export default Rolodex;

src/app/models/contact.js

@@ -1,8 +1,13 @@
 import Backbone from 'backbone';
 
 const Contact = Backbone.Model.extend({
-  // This model should have the attributes for
-  // a single contact: name, phone number, and email.
+  defaults: {
+  name: "name",
+  phone: "555-555-555",
+  email: "name@gmail.com"
+},
+initialize: function() {
+},
 });
 
 export default Contact;

src/app/views/contact_view.js

@@ -1,6 +1,35 @@
 import Backbone from 'backbone';
-
+import $ from 'jquery';
+import _ from 'underscore';
 const ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = options.template;
+    this.detailsTemplate = _.template($('#tmpl-contact-details').html());
+
+    this.listenTo(this.model, 'change', this.render);
+  },
+
+  render: function() {
+    console.log(this.model.attributes.name);
+    var html = this.template({name: this.model.attributes.name});
+    this.$el.html(html);
+
+    return this;
+  },
+
+  events: {
+    'click .contact-card': 'showDetail',
+  },
+
+  showDetail: function() {
+    var html = this.detailsTemplate({
+      name: this.model.attributes.name,
+      email: this.model.attributes.email,
+      phone: this.model.attributes.phone
+    });
+    $('#contact-details').show();
+    $('#contact-details').html(html);
+  },
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,81 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
 
 const RolodexView = Backbone.View.extend({
+  initialize: function(options) {
+
+    this.contactTemplate = _.template($('#tmpl-contact-card').html());
+    this.listElement = this.$('#contact-cards');
+
+    this.contactList = [];
+
+    this.model.forEach(function(contact) {
+      this.addContact(contact);
+    }, this);
+
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      phone: this.$('.contact-form input[name="phone"]'),
+      email: this.$('.contact-form input[name="email"]')
+    };
+
+    this.listenTo(this.model, 'add', this.addContact);
+
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render: function() {
+
+    this.contactList.forEach(function(contact) {
+      contact.render();
+      this.listElement.append(contact.$el);
+    }, this);
+
+    return this;
+  },
+
+  events: {
+    'click .btn-save': 'newContact',
+    'click .btn-cancel': 'cancelInputInfo',
+    'dblclick ': 'hideDetail'
+  },
+
+  getInput: function() {
+    var contact = {
+      name: this.input.name.val(),
+      phone: this.input.phone.val(),
+      email: this.input.email.val()
+    };
+    return contact;
+  },
+
+  newContact: function(event) {
+    event.preventDefault();
+    var rawContact = this.getInput();
+    this.model.add(rawContact);
+    this.cancelInputInfo();
+  },
+
+  cancelInputInfo: function(event) {
+    this.input.name.val('');
+    this.input.phone.val('');
+    this.input.email.val('');
+  },
+
+  addContact: function(contact) {
+    var card = new ContactView({
+      model: contact,
+      template: this.contactTemplate
+    });
+    this.contactList.push(card);
+  },
+
+  hideDetail: function() {
+    this.$('#contact-details').hide();
+  },
 });
 
 export default RolodexView;