Rolodex [natasha]

src/app.js

@@ -1,9 +1,51 @@
+import $ from 'jquery';
+import Backbone from 'backbone';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
 
-var application = new Application();
+var rawContact = [
+  {
+    name: 'Crispin Jockers',
+    email: 'crispy@me.com',
+    phone: '2062823396'
+  }, {
+    name: 'Royale King',
+    email: 'royal@me.com',
+    phone: '2062823200'
+  }, {
+    name: 'Chelsea Kennedy',
+    email: 'chel@me.com',
+    phone: '2062829980'
+  },
+  {
+    name: 'Jihan Zencirli',
+    email: 'witwijs@me.com',
+    phone: '2062821212'
+  }
+];
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+$(document).ready(function() {
+  var rolodex = new Rolodex(rawContact);//rawContact
+  var rolodexView = new RolodexView({
+    el: $('#contact-cards'),
+    model: rolodex
+  });
+   var application = new Application({myRolodex:rolodex});
+   var applicationView = new ApplicationView({
+     el: $('#application'),
+     model: application
+   });
+   var contact = new Contact({myRolodex:rolodex});
+   var contactView = new ContactView({
+     el: $('#contact-details'),
+     model: contact
+   });
+   contactView.render();
+   rolodexView.render();
+   applicationView.render();
 });

src/app/collections/rolodex.js

@@ -1,10 +1,9 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+import Application from 'app/models/application';
 
 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.
+    contact: Contact,
+    application: Application
 });
-
-export default Rolodex;
+  export default Rolodex;

src/app/models/application.js

@@ -1,7 +1,15 @@
 import Backbone from 'backbone';
 
 const Application = Backbone.Model.extend({
-  // This model represents the overall application.
+
+  defaults: {
+    name: "No Name",
+    email: "me@me.com",
+    phone: "206888888"
+  },
+
+  initialize: function() {
+  },
 });
 
 export default Application;

src/app/models/contact.js

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

src/app/views/application_view.js

@@ -1,13 +1,53 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+
+
+
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
-    this.render();
+  initialize: function(options){
+    this.form = this.$('.contact-form');
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[name="email"]'),
+      phone: this.$('.contact-form input[name="phone"]')
+    };
+      this.listenTo(this.model, 'add', this.addContact);
+      this.listenTo(this.model, 'change', this.render);
+  },
+  render: function() { },
+
+  events: {
+    'click .btn-save': 'createContact',
+    'click .btn-cancel': 'clearInput',
   },
 
-  render: function() {
-    return this;
-  }
+  createContact: function(event) {
+    event.preventDefault();
+    var rawContact = this.getInput();
+    this.model.attributes.myRolodex.add(rawContact);
+    this.clearInput();
+  },
+
+  getInput: function() {
+    var contact = {
+      name: this.input.name.val(),
+      email: this.input.email.val(),
+      phone: this.input.phone.val(),
+    };
+    return contact;
+  },
+
+  clearInput: function(event) {
+    this.input.name.val('');
+    this.input.email.val('');
+    this.input.phone.val('');
+  },
 });
 
 export default ApplicationView;

src/app/views/contact_view.js

@@ -1,6 +1,36 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+import Contact from 'app/models/contact';
 
-const ContactView = Backbone.View.extend({
+
+var ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    _.bindAll(this, 'render', 'toggleContactView');
+    this.listenTo(this.model, 'show-details', this.showModal);
+    this.contactTemplate = _.template($('#tmpl-contact-details').html());
+    this.details = ($('#contact-details'));
+    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());
+  },
+
+  toggleContactView: function(event) {
+    this.details.empty();
+    this.singleItem=  $(this.contactTemplate(this.model.attributes));
+    this.singleItem.appendTo(this.details);
+    this.details.show();
+  },
+
+  render: function(){
+    this.details.hide();
+    var card = {name: (this.model.attributes.name)};
+    var html = this.rolodexTemplate(card);
+    this.CardItem = $(html);
+    this.CardItem.appendTo(this.$el);
+    this.CardItem.on('click', this.toggleContactView);
+    this.delegateEvents();
+  },
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,63 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+import Application from 'app/models/application';
+import ApplicationView from 'app/views/application_view';
 
-const RolodexView = Backbone.View.extend({
+
+var RolodexView = Backbone.View.extend({
+  initialize: function(options) {
+    this.cardTemplate = _.template($('#tmpl-contact-card').html());
+    this.contactList = [];
+    this.model.forEach(function(newContact) {
+      this.addContact(newContact);
+    }, this);
+
+
+    this.listenTo(this.model, 'click', this.render);
+    this.listenTo(this.model, 'change', this.render);
+    this.listenTo(this.model, 'add', this.addContact);
+    },
+
+  render: function(){
+    this.$el.empty();
+    this.contactList.forEach(function(contactCard) {
+      contactCard.render();
+      this.delegateEvents();
+    }, this);
+    return this;
+  },
+
+  addContact: function(contact) {
+    var contactCard = new ContactView({
+      model: contact,
+      el:this.$el,
+      template: this.cardTemplate
+    });
+    this.contactList.push(contactCard);
+    this.render();
+  },
+
+//did not get to this optional button functionality
+  removeContact: function(contact){
+    var desirables = [];
+    this.contactList.forEach(function(contactCard){
+      if (contactCard.model != contact) {
+        undesirables.push(contact);
+      }
+    });
+    this.contactList = desirables;
+  },
+
+  createContact: function(event) {
+    event.preventDefault();
+    var newContact = this.getInput();
+    this.model.add(newContact);
+    this.clearInput();
+  }
 });
 
 export default RolodexView;