Ada-C7 · amb54 · May 31, 2017 · May 31, 2017 · May 31, 2017 · May 31, 2017
diff --git a/build/css/app.css b/build/css/app.css
@@ -61,6 +61,6 @@ header {
     background-color: #538ca3;
 }
 
-.contact-card:hover h3 {
+.contact-card:hover h4 {
   color: white;
 }
diff --git a/build/index.html b/build/index.html
@@ -9,24 +9,27 @@
     <link rel="stylesheet" href="css/app.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
   </head>
+
+
   <body>
     <div id="application">
+
       <header>
         <h1>Rolodex</h1>
         <section class="row contact-form">
           <h3>Add A New Contact</h3>
           <div class="columns">
             <label>
               Name
-              <input type="text" name="name">
+              <input type="text" name="name" id = 'name'>
             </label>
             <label>
               Email
-              <input type="text" name="email">
+              <input type="text" name="email" id = 'email'>
             </label>
             <label>
               Phone
-              <input type="text" name="phone">
+              <input type="text" name="phone" id = 'phone'>
             </label>
             <h3 class="button btn-save">Save</h3>
             <h3 class="button btn-cancel">Cancel</h3>
@@ -40,11 +43,14 @@ <h3 class="button btn-cancel">Cancel</h3>
       </main>
     </div>
 
+
+
+
     <!-- Underscore Templates -->
     <script type="text/template" id="tmpl-contact-card">
-      <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
+      <!-- <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns"> -->
         <h4><%- name %></h4>
-      </li>
+      <!-- </li> -->
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
@@ -53,6 +59,7 @@ <h4><%- email %></h4>
       <h4><%- phone %></h4>
     </script>
 
+
     <!-- Entire JS project built by Webpack -->
     <script src="/app.bundle.js" charset="utf-8"></script>
   </body>

diff --git a/src/app.js b/src/app.js
@@ -1 +1,123 @@
 import $ from 'jquery';
+import _ from 'underscore';
+
+// import MODELS
+import Contact from 'app/models/contact'
+import Rolodex from 'app/collections/rolodex'
+
+// import VIEWS
+import ContactView from 'app/views/contact_view'
+import RolodexView from 'app/views/rolodex_view'
+
+// GLOBAL variables
+var contactCardTemplate;
+var contactDetailsTemplate;
+var rolodexList;
+
+
+
+var contactData = [
+  {
+    name: 'Donald Duck',
+    phone: '206 111 1111',
+    email: 'donalds@email.com'
+  },
+  {
+    name: 'Minnie Mouse',
+    phone: '206 111 2222',
+    email: 'minnies@email.com'
+  }
+]
+
+var oneContact = new Contact(contactData[0]);
+
+// var readForm = function(){
+//   var formName = $('#name').val();
+//   $('#name').val('');
+//
+//   var formEmail = $('#email').val();
+//   $('#email').val('');
+//
+//   var formPhone = $('#phone').val();
+//   $('#phone').val('');
+//
+//   var formData = {};
+//   if (formName && formName != "") {
+//     formData["name"] = formName
+//   }
+//   if (formEmail && formEmail != "") {
+//     formData["email"] = formEmail
+//   }
+//   if (formPhone && formPhone != "") {
+//     formData["phone"] = formPhone
+//   }
+//   return formData;
+// };
+
+// var renderContact = function(contact){
+//   var jsonContact = contact.toJSON();
+//   var generateHTML = contactCardTemplate(jsonContact);
+//   $('#contact-cards').append(generateHTML);
+// };
+
+
+// REMOVE use VIEW instead ******************
+// var renderRolodex = function(rolodexList){
+//   $('#contact-cards').empty();
+//   rolodexList.each(function(contact){
+//     // renderContact(contact);
+//     var contactView = new ContactView({
+//       model: contact,
+//       template: _.template($('#tmpl-contact-card').html())
+//     });
+//     $('#contact-cards').append(contactView.render().$el);
+//   });
+// };
+  // *****************************************
+
+
+
+$(document).ready(function() {
+  contactCardTemplate = _.template($('#tmpl-contact-card').html());
+  contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+  // var generateHTML1 = contactCardTemplate(oneContact.toJSON());
+  // $('#contact-cards').append(generateHTML1);
+  rolodexList = new Rolodex(contactData);
+
+  // REMOVE use VIEW instead ******************
+  // rolodexList.on('update', function(){
+  //   renderRolodex(rolodexList);
+  // })
+  // renderRolodex(rolodexList);
+
+  // $('.btn-save').click(function(event){
+  //   var formData = readForm();
+  //   var newContact = new Contact(formData);
+  //   rolodexList.add(newContact);
+  // });
+  // *****************************************
+
+  var rolodexView = new RolodexView({
+    cardTemplate: _.template($('#tmpl-contact-card').html()),
+    detailTemplate: _.template($('#tmpl-contact-details').html()),
+    model: rolodexList,
+    el: $('#application')
+  });
+  rolodexView.render();
+
+
+  $('#contact-details').hide()
+
+  $(window).click(function(event) {
+    // console.log(event.target.id);
+    // console.log(event.target.id === 'contact-details');
+    if( event.target.id !== 'contact-details'){
+      $('#contact-details').hide()
+    }
+  });
+
+  // contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+  // var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
+  // $('#contact-details').append(generateHTML2);
+
+});
diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from '../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;
diff --git a/src/app/models/contact.js b/src/app/models/contact.js
@@ -3,6 +3,11 @@ 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': 'default Name',    
+    'email': 'defaultEmail',
+    'phone': 'defaultPhone',
+  }
 });
 
 export default Contact;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
@@ -1,6 +1,35 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
 
 const ContactView = Backbone.View.extend({
+  tagName: 'li',
+  className: "contact-card small-11 medium-4 large-2 medium-offset-1 columns",
+  initialize: function(params) {
+    this.cardTemplate = params.cardTemplate;
+    this.detailTemplate = params.detailTemplate;
+    // this.listenTo(this.model, "change", this.render);   // will listen to a change in the individual contact info
+  },
+
+  render: function() {  // called when we want it to load into DOM
+    var compiledTemplate1 = this.cardTemplate(this.model.toJSON());
+    this.$el.html(compiledTemplate1);
+    return this;
+  },
+
+  events: {
+    'click ': "showDetails"
+  },
+
+  showDetails: function(e) {
+    e.stopPropagation();
+    $('#contact-details').show();
+    this.trigger('select', this)
+  }
+
+
+
 });
 
 export default ContactView;
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
@@ -0,0 +1,78 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import ContactView from '../views/contact_view.js';
+import Contact from '../models/contact.js';
+
+var RolodexView = Backbone.View.extend({
+
+  initialize: function(params){
+    this.cardTemplate = params.cardTemplate;
+    this.detailTemplate = params.detailTemplate;
+    this.listenTo(this.model,'update', this.render);
+  },
+
+  render: function(){
+    var self = this;
+    this.$('#contact-cards').empty();
+    this.model.each(function(contact){
+      var contactView = new ContactView({
+        model: contact,
+        cardTemplate: self.cardTemplate,
+        detailTemplate: self.detailTemplate
+      });
+      self.$('#contact-cards').append(contactView.render().$el);
+      self.listenTo(contactView,'select', self.show_details)
+    });
+    return this;
+  },
+
+  events: {
+    'click .btn-save': 'addContact',
+    'click .btn-cancel': 'clearForm'
+  },
+
+  addContact: function(){
+    var formData = this.readForm();
+    var newContact = new Contact(formData);
+    this.model.add(newContact);
+    // this.model.add(formData);
+  },
+
+  clearForm: function(){
+    this.$('#name').val('');
+    this.$('#email').val('');
+    this.$('#phone').val('');
+  },
+
+  readForm: function(){
+    var formName = this.$('#name').val();
+    var formEmail = this.$('#email').val();
+    var formPhone = this.$('#phone').val();
+    this.clearForm();
+
+    var formData = {};
+    if (formName && formName != "") {
+      formData["name"] = formName
+    }
+    if (formEmail && formEmail != "") {
+      formData["email"] = formEmail
+    }
+    if (formPhone && formPhone != "") {
+      formData["phone"] = formPhone
+    }
+    return formData;
+  },
+
+  show_details: function(contactView){
+
+    // console.log('Click of button for ' + this.model.get('name'));
+    console.log('Click of button for ' + contactView.model.get('name'));
+    var compiledTemplate2 = this.detailTemplate(contactView.model.toJSON());
+    $('#contact-details').html(compiledTemplate2);
+    return this;
+
+  }
+});
+
+export default RolodexView;