Yasmin's Rolodex

src/app.js

@@ -1,9 +1,36 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+
+var contactData = [
+  {
+    name: "Yasmin",
+    phone: "555-5555",
+    email: "you_wish@gmail.com"
+  }, {
+    name: "Erin",
+    phone: "777-7777",
+    email: "oshkosh@yahoo.com"
+  }
+];
 
 var application = new Application();
 
 var appView = new ApplicationView({
-  el: '#application',
-  model: application
+  el: $('#application'),
+  model : application
+});
+
+
+$(document).ready(function() {
+  var contactList = new Rolodex(contactData);
+  var contactListView = new RolodexView({
+    el: ("#application"),
+    model: contactList
+  });
+  contactListView.render();
 });

src/app/collections/rolodex.js

@@ -1,10 +1,13 @@
 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/application.js

@@ -1,7 +1,16 @@
 import Backbone from 'backbone';
+// import ApplicationView from 'app/views/application_view'
+import Rolodex from 'app/collections/rolodex'
+import Contact from 'app/models/contact'
+
 
 const Application = Backbone.Model.extend({
   // This model represents the overall application.
+  // 
+  // initialize: function() {
+  //   console.log("Created new contactList");
+  //   this.staticContact = new Rolodex(contactData);
+  // }
 });
 
 export default Application;

src/app/models/contact.js

@@ -3,6 +3,16 @@ 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: "Jane Doe",
+    phone: "(555)555-5555",
+    email: "jane_doe@gmail.com"
+  },
+
+  initialize: function() {
+    console.log("created a new contact for " + this.name);
+  }
+
 });
 
 export default Contact;

src/app/views/application_view.js

@@ -1,13 +1,55 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import ContactView from 'app/views/contact_view';
+import Contact from 'app/models/contact';
+
+// import RolodexView from 'app/views/contact_view';
 
 const ApplicationView = Backbone.View.extend({
   initialize: function() {
-    this.render();
-  },
+    // Compile a template to be shared between the contacts
+    // this.cardTemplate = _.template($('#tmpl-contact-card').html());
+    //
+    // // Keep track of the <ul> element
+    // this.listElement = this.$('#contact-cards');
+    //
+    // this.cardList = [];
+    //
+    // this.model.contactList.forEach(function(contact) {
+    //   this.addContact(contact);
+    // }, this); // bind `this` so it's available inside forEach
+
+   },
+
+   render: function() {
+    //  this.listElement.empty();
+     //
+    //  this.cardList.forEach(function(card) {
+    //    card.render();
+     //
+    //    this.listElement.append(card.$el);
+    //  }, this);
+
+     return this;
+   },
+
+  //  addContact: function(contact) {
+  //    // create a card for the contact
+  //    var card = new ContactView({
+  //      model: contact,
+  //      template: this.contactTemplate
+  //    });
+   //
+  //    // add the card to the card list
+  //    this.cardList.push(card);
+   //
+  //    return this;
+  //  },
+
+
 
-  render: function() {
-    return this;
-  }
 });
 
 export default ApplicationView;

src/app/views/contact_view.js

@@ -1,6 +1,33 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
 
 const ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = _.template($('#tmpl-contact-card').html());
+    this.contact = options.model;
+  },
+
+  render: function() {
+    console.log(this.model.attributes);
+
+    var html = this.template({
+      name: this.model.get("name")
+    });
+    this.$el.html(html);
+
+  // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click .contact-card': 'clickCard'
+  },
+
+  clickCard: function() {
+    this.trigger('showContactDeets', this);
+  }
+
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,103 @@
 import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+import Rolodex from 'app/collections/rolodex';
 
 const RolodexView = Backbone.View.extend({
+
+  initialize: function(options) {
+    this.contactTemplate = _.template($("#tmpl-contact-card").html());
+    this.contactDetailTemplate = _.template($('#tmpl-contact-details').html());
+
+    this.cardsSection = this.$("#contact-cards");
+    this.cardList = [];
+    // hide the contact details section
+    this.$('#contact-details').hide();
+
+    this.model.forEach(function(contact) {
+      this.addContactCard(contact);
+    }, this);
+
+    // Keep track of our form input fields
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[name="email"]'),
+      phone: this.$('.contact-form input[name="phone"]')
+    };
+
+    // when a model is added to the collection, create a card
+    // for the model and add it to our list of cards
+    this.listenTo(this.model, 'add', this.addContactCard);
+
+    // when the model collection updates, re-render the list of cards
+    this.listenTo(this.model, 'update', this.render);
+
+  },
+
+  render: function() {
+    this.cardList.forEach(function(card) {
+      card.render();
+      this.cardsSection.append(card.$el);
+    }, this);
+
+    return this;
+  },
+
+  addContactCard: function(contact) {
+    var card = new ContactView({
+      template: this.contactTemplate,
+      model: contact
+    });
+
+    this.cardList.push(card);
+
+    this.listenTo(card, 'showContactDeets', this.popUpModal);
+  },
+
+  events: {
+    'click .btn-save': 'createNewContact',
+    'click .btn-cancel': 'clearInput'
+  },
+
+  getInput: function() {
+    var contact = {
+      name: this.input.name.val(),
+      email: this.input.email.val(),
+      phone: this.input.phone.val()
+    };
+    return contact;
+  },
+
+  createNewContact: function(event) {
+    // Normally a form submission will refresh the page.
+    // Suppress that behavior.
+    event.preventDefault();
+    var rawContact = this.getInput();
+    this.model.add(rawContact); // add triggers two events automatically, the add event and finally the update event
+    this.clearInput();
+  },
+
+  clearInput: function(event) {
+    console.log("clearInput called");
+    this.input.name.val('');
+    this.input.email.val('');
+    this.input.phone.val('');
+  },
+
+  popUpModal: function(card) {
+    var name = card.model.get('name');
+    var email = card.model.get('email');
+    var phone = card.model.get('phone');
+
+    console.log("name: " + name + " | email: " + email + " | phone: " + phone);
+
+    this.$('#contact-details').html(this.contactDetailTemplate({name: name, email: email, phone: phone}));
+    this.$('#contact-details').show();
+  }
+
 });
 
 export default RolodexView;