Ada-C6 · Trishthedish · Nov 30, 2016 · Nov 30, 2016 · Nov 30, 2016 · Dec 1, 2016
diff --git a/build/index.html b/build/index.html
@@ -1,3 +1,4 @@
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -14,7 +15,10 @@
       <header>
         <h1>Rolodex</h1>
         <section class="row contact-form">
+
           <h3>Add A New Contact</h3>
+
+        <form class="new-contact">
           <div class="columns">
             <label>
               Name
@@ -31,7 +35,10 @@ <h3>Add A New Contact</h3>
             <h3 class="button btn-save">Save</h3>
             <h3 class="button btn-cancel">Cancel</h3>
           </div>
+        </form>
+
         </section>
+
       </header>
 
       <main>

diff --git a/src/app.js b/src/app.js
@@ -1,9 +1,84 @@
+//app.js
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
 
-var application = new Application();
+import $ from 'jquery';
+
+import _ from 'underscore';
+// model
+import Contact from 'app/models/contact';
+
+//collections/ views
+import ContactView from 'app/views/contact_view';
+import RolodexView from 'app/views/rolodex_view';
+
+// do I need this one? from collections
+import Rolodex from 'app/collections/rolodex';
+
+// contacts to start with with.
+// spacing used to disquish diff. parts of code. ok to use this arrangement?
+var contactData = [
+  {
+    name: "Albus Dumbldore",
+    email: "headmaster@wizzard.edu",
+    phone: "1112223344"
+  },
+  {
+    name: "Professor Snape",
+    email: "Ilovedlilly@aol.com",
+    phone: "2062224444"
+  },
+
+  {
+    name: "Frida Kahlo",
+    email: "artist@mexico.org",
+    phone: "0002223333"
+  },
+
+    {
+      name: "Sonia Sotomayor",
+      email: "judge@supreme.org",
+      phone: "3334445555"
+    }
+
+];
+
+// starts at 1st load.
+$(document).ready(function (){
+  // var application = new Application();
+  // practice hiding things.
+  // $("#contact-details").hide(); // no details to hide yet.
+  var rolodex = new Rolodex(contactData);
+
+  var appView = new RolodexView({
+    el: $('#application'),
+    // abstraction.. introducing.
+    // contactData: contactData,
+    model: rolodex
+  });
+  appView.render();
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
 });
+
+
+
+
+
+
+//
+// var dumbledoreModel = new Contact(contactList[0]);
+//
+// var contactTemplate = _.template($('#tmpl-contact-card').html());
+//
+// console.log("contact__>", contactTemplate);
+//
+// var dumbledoreView = new ContactView({
+//   model: dumbledoreModel,
+//   template: contactTemplate
+// });
+// console.log("d-View -->", dumbledoreView);
+//
+//
+// console.log("in dumble: ",dumbledoreView.render().$el);
+//
+// $('#contact-cards').append(dumbledoreView.render().$el);
diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
@@ -1,10 +1,16 @@
+//rolodex.js
+// similiar to task_list. Collection of things. 
 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;
diff --git a/src/app/models/application.js b/src/app/models/application.js
@@ -2,6 +2,9 @@ import Backbone from 'backbone';
 
 const Application = Backbone.Model.extend({
   // This model represents the overall application.
+
+
+
 });
 
 export default Application;
diff --git a/src/app/models/contact.js b/src/app/models/contact.js
@@ -1,8 +1,23 @@
+// contact.js
+// equivlant task.js
 import Backbone from 'backbone';
+// Troubleshooting, will I need to other imports here?
+
 
 const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
+  defaults: {
+    name: "Person",
+    phone: "6029970009",
+    email: "yolo@aol.com"
+  },
+
+  initialize: function() {
+    // this works now! its displaying and grabbing name properly. Needed:  this.get("name")
+    console.log("Created a new contact: " + this.get("name")); // remaining undefined.
+  }
+
 });
 
 export default Contact;
diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
@@ -1,13 +1,27 @@
+// application_view.js
 import Backbone from 'backbone';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
-    this.render();
+  // added options to function params. ala erin. Erros?
+  initialize: function(options) {
+
+    // this.render(); removed this doesn't seem to have broken it.
   },
 
   render: function() {
     return this;
+  },
+  // add contact?
+  addContact: function(contact) {
+    var card = new ContactView({
+      model: contact,
+      template: this.contactTemplate
+    });
+    // contactBox not list?
+    this.contactBox.push(contact);
   }
+
+
 });
 
 export default ApplicationView;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
@@ -1,6 +1,160 @@
+//contact_view.js
+// handles the logic for single contact view.
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from 'app/models/contact';
 
 const ContactView = Backbone.View.extend({
-});
+  initialize: function(options){
+    console.log("options in contact_iew_>", options);
+    this.model = options.model;
+    this.template = options.template;
+    // do we need these 2 rangle these ?>
+    // this.email = options.contact.email;
+    // this.phone = options.contact.phone;
+
+    this.template = _.template($('#tmpl-contact-card').html());
+    this.listElement = this.$('.contact-card');
+
+    this.detailsTemplate = _.template($('#tmpl-contact-details').html());
+    this.element = $('#contact-details');
+
+    this.model.bind('change', this.render.bind(this));
+
+
+    },
+    events: {
+         'click .contact-card' : 'showDetails',
+         // 'click .btn cancel' : clearInput
+    },
+
+    showDetails: function() {
+      console.log("Clicked on contact you did.");
+      // probably should pull details from #'temp-contact-details'
+      var innerText = this.detailsTemplate({
+        name: this.model.get("name"),
+        email: this.model.get("email"),
+        phone: this.model.get("phone")
+      });
+      this.element.html(innerText);
+      $("#contact-details").show();
+      console.log("this model",this.model);
+    },
+
+    render: function(){
+    // Use the contact template to build some HTML, and
+    // add it to our DOM object
+    this.delegateEvents();
+    this.listElement.empty();
+
+    var html = this.template(this.model.toJSON());
+    this.$el.html(html);
+    // this.$el.html(this.template(this.model.attributes));
+
+    // Since the HTML elements are destroyed and re-created from
+    // scratch every time the list re-renders, we need to re-bind
+    // event handlers that listen to events on those elements.
+    // Enable chained calls
+    return this;
+
+    }
+  });
+
+/// Shall delete this once finalized.
+  //     render: function(){
+  //
+  //       // console.log("I'm here");
+  //       var html = this.template({name: this.name});
+  //       // console.log("I'm here htlm>", html);
+  //       // console.log("$el:  ", this.$el);
+  //       this.$el.html(html);
+  //       return this;
+  //     },
+  //
+  //
+    //store the full list of contacts
+    // this.contactData = options.contactData;
+    //
+    // // Compile a template to be shared between the individual tasks
+    // this.contactTemplate = _.template($('#tmpl-contact-card').html());
+    // // not sure if this is how its done.
+    // this.listElement = this.$('#contact-list');
+    //
+    // // model/template options.model
+    //  this.contactModel = options.model;
+    //
+    //
+    // //create a ContactView for each contact
+    // // this.modelList = [];
+    // this.cardList = [];
+
+    // this.contactData.forEach(function(contact){
+    //   var card = new ContactView({
+    //     contact: contact,
+    //     template: this.taskTemplate
+    //   });
+    //   this.cardList.push(card);
+    // }, this); // bind this
+    //
+    // this.input = {
+    //   name: this.$('.new-contact input[name="name"]'),
+    //   phone: this.$('.new-contact input[name="phone"]'),
+    //   email: this.$('.new-contact input[name="email"]')
+    // };
+
+ // end of initialize
+
+
+  // http://backbonejs.org/#View-render
+  // render: function(){
+  //   // this.$el.html(this.contactTemplate(this.contactModel.attributes));
+  //   // return this;
+  // // },
+  //
+  // events:  {
+  //   // right: name of function that insides page view.
+  //   'click btn-save' : 'createContact',
+  //   'click btn-cancel':'clearInput'
+  //
+  // },
+  //
+  // // clear input function
+  // clearInput: function(event) {
+  //   console.log("clear Input called!");
+  //   this.input.name.val('');
+  //   this.input.email.val('');
+  //   this.input.phone.val('');
+  // },
+  //
+  // // create Contact function
+  // createContact: function() {
+  //   event.preventDefault();
+  //   //get input data from the form. and turn it into contact.
+  //
+  //   var contact = this.getInput();
+  //
+  //   // add the dat
+  //   var card = new RolodexView({
+  //     contact: contact,
+  //     template: this.contactTemplate
+  //
+  //   });
+  //   this.cartList.push(card);
+  //
+  // },
+  //
+  // getInput: function() {
+  //   var contact = {
+  //     name: this.input.name.val(),
+  //     email: this.input.email.val(),
+  //     phone: this.input.phone.val()
+  //   };
+  //   return contact;
+  // },// end getInputl
+
+
+
+
 
 export default ContactView;