Carmen - completed wave 3

src/app.js

@@ -1,9 +1,51 @@
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+import RolodexView from 'app/views/rolodex_view';
+import Rolodex from 'app/collections/rolodex';
 
 var application = new Application();
 
 var appView = new ApplicationView({
   el: '#application',
   model: application
 });
+
+var contactData = [
+  {
+    name: 'Charles',
+    email: 'charles@email.com',
+    phone: '0987654321'
+  },
+  {
+    name: 'Chris',
+    email: 'chris@email.com',
+    phone: '3216540987'
+  }
+];
+
+var contactModel = new Rolodex(contactData);
+var rolView = new RolodexView({
+  el: 'body',
+  model: contactModel
+});
+rolView.render();
+
+
+
+// var charlesmodel = new Contact(contactData[0]);
+//
+// var contactTemplate = _.template($('#tmpl-contact-card').html());
+// // console.log("contact Template: ", contactTemplate);
+//
+// var charlesview = new ContactView({
+//   model: charlesmodel,
+//   template: contactTemplate
+// });
+// console.log("charlesview: ", charlesview);
+
+// $('#contact-cards').append(charlesview.render().$el);

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/contact.js

@@ -1,8 +1,20 @@
+// contact.js
+
 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: "Person",
+    phone: "1234567890",
+    email: "email@email.com"
+  },
+
+  initialize: function() {
+    // console.log("contact created: " + this.name);
+  }
 });
 
 export default Contact;

src/app/views/contact_view.js

@@ -1,6 +1,31 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+import _ from 'underscore';
+import $ from 'jquery';
 
 const ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    // this.contact = options.contact;
+    this.template = options.template;
+  },
+
+  render: function() {
+    this.delegateEvents();
+    var html = this.template({name: this.model.get("name")});
+    this.$el.html(html);
+
+    // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click': 'showDetail'
+  },
+
+  showDetail: function(){
+    this.trigger( 'contactInfo', this.model);
+    event.stopPropagation();
+  }
 });
 
 export default ContactView;

src/app/views/detail_view.js

@@ -0,0 +1,26 @@
+// detail_view.js
+
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+const DetailView = Backbone.View.extend({
+  initialize: function(options){
+    this.template = options.template;
+  },
+
+  render: function(){
+    var html = this.template({
+      name: this.model.get("name"),
+      email: this.model.get("email"),
+      phone: this.model.get("phone"),
+    });
+    this.$el.html(html);
+
+    return this;
+  },
+
+
+});
+
+export default DetailView;

src/app/views/rolodex_view.js

@@ -1,6 +1,128 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import ContactView from 'app/views/contact_view';
+import DetailView from 'app/views/detail_view';
 
 const RolodexView = Backbone.View.extend({
+  initialize: function(options) {
+
+    // Store a the full list of tasks
+    // this.contactData = options.contactData;
+
+    // Compile a template to be shared between the individual tasks
+    this.contactTemplate = _.template($('#tmpl-contact-card').html());
+
+    this.contactDetailTemplate = _.template($('#tmpl-contact-details').html());
+
+    // Keep track of the <ul> element
+    this.listElement = this.$('#contact-cards');
+
+    // Create a TaskView for each task
+    this.cardList = [];
+    this.model.models.forEach(function(contact) {
+      this.addContact(contact);
+    }, this); // bind `this` so it's available inside forEach
+
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[name="email"]'),
+      phone: this.$('.contact-form input[name="phone"]')
+
+    };
+  },
+
+  render: function() {
+
+  // Make sure the list in the DOM is empty
+  // before we start appending items
+  this.listElement.empty();
+
+  // Loop through the data assigned to this view
+  this.cardList.forEach(function(card) {
+    // Cause the task to render
+    card.render();
+
+    // Add that HTML to our task list
+    this.listElement.append(card.$el);
+  }, this);
+
+  return this; // enable chained calls
+},
+
+
+  events: {
+    'click .btn-save': 'createContact',
+    'click .btn-cancel': 'clearInput',
+    'click': 'hideDetail'
+  },
+
+  clearInput: function(event) {
+    this.input.name.val('');
+    this.input.email.val('');
+    this.input.phone.val('');
+  },
+
+  createContact: function(event) {
+    // Normally a form submission will refresh the page.
+    // Suppress that behavior.
+    event.preventDefault();
+
+    // Get the input data from the form and turn it into a task
+    var contact = this.getInput();
+
+    // Add the new task to our list of tasks
+    //  gotta figure out where the data is stored
+   this.model.push(contact);
+
+    // Create a card for the new task, and add it to our card list
+    // var card = new ContactView({
+    //   model: contact,
+    //   template: this.contactTemplate
+    // });
+    // this.cardList.push(card);
+    this.addContact(contact);
+
+    // Re-render the whole list, now including the new card
+    this.render();
+
+    // Clear the input form so the user can add another task
+    this.clearInput();
+  }, // end createTast();
+
+  addContact: function(contact){
+    var card = new ContactView({
+      model: contact,
+      template: this.contactTemplate
+    });
+    this.cardList.push(card);
+    this.listenTo(card, "contactInfo", this.showDetail);
+  },
+
+  getInput: function() {
+    var contact = {
+      name: this.input.name.val(),
+      email: this.input.email.val(),
+      phone: this.input.phone.val(),
+    };
+    return contact;
+  }, // end getInput();
+
+  showDetail: function(model){
+    this.detail = new DetailView({
+      model: model,
+      template: this.contactDetailTemplate,
+      el: $('#contact-details')
+    });
+    $('#contact-details').show();
+    this.detail.render();
+  },
+
+  hideDetail: function(){
+    console.log("hidedetail");
+    $('#contact-details').hide();
+    this.render();
+  }
 });
 
 export default RolodexView;