Alison Z's Rolodex

build/index.html

@@ -18,18 +18,18 @@ <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>
+            <h3 class="button" id="save">Save</h3>
+            <h3 class="button" id="cancel">Cancel</h3>
           </div>
         </section>
       </header>
@@ -45,12 +45,13 @@ <h3 class="button btn-cancel">Cancel</h3>
       <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
         <h4><%- name %></h4>
       </li>
+
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
       <h3><%- name %></h3>
       <h4><%- email %></h4>
-      <h4><%- phone %></h4>
+      <h4><%- phoneNumber %></h4>
     </script>
 
     <!-- Entire JS project built by Webpack -->

src/app.js

@@ -1,9 +1,42 @@
-import Application from 'app/models/application';
-import ApplicationView from 'app/views/application_view';
+// import Application from 'app/models/application';
+// import ApplicationView from 'app/views/application_view';
+import $ from 'jQuery';
+import _ from 'underscore';
+import Contact from './app/models/contact.js';
+import ContactList from './app/collections/contact_list.js';
+import ContactView from './app/views/contact_view.js';
+import ContactListView from './app/views/contact_list_view.js';
 
-var application = new Application();
+var contactData = [{
+    name: 'Drew',
+    phoneNumber: 304,
+    email: 'drew@gmail.com'
+},
+{
+    name: 'Dad',
+    phoneNumber: 987,
+    email: 'bob@gmail.com'
+},
+{
+    name: 'Mom',
+    phoneNumber: 609,
+    email: 'jan@gmail.com'
+},
+{
+    name: 'Jeff',
+    phoneNumber: 215,
+    email: 'jeff@gmail.com'
+}]
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+var myContacts = new ContactList(contactData);
+
+var myContactListView = new ContactListView({
+    model: myContacts,
+    template: _.template($('#tmpl-contact-card').html()),
+    detailsTemplate: _.template($('#tmpl-contact-details').html()),
+    el: 'div#application'
+})
+
+$(document).ready(function(){
+    myContactListView.render();
 });

src/app/collections/rolodex.js → src/app/collections/contact_list.js

@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from '../models/contact.js'
 
-const Rolodex = Backbone.Collection.extend({
+const ContactList = Backbone.Collection.extend({
+    model: Contact
   // This Rolodex represents a collection of Contacts
   // and should include any methods or attributes
   // that are involved in working with more than one
   // Contact.
 });
 
-export default Rolodex;
+export default ContactList;

src/app/models/contact.js

@@ -1,8 +1,26 @@
 import Backbone from 'backbone';
 
 const Contact = Backbone.Model.extend({
-  // This model should have the attributes for
-  // a single contact: name, phone number, and email.
+    // This model should have the attributes for
+    // a single contact: name, phone number, and email.
+
+    defaults: {
+        name: '',
+        phoneNumber: '',
+        email: ''
+    },
+
+    logStatus: function(){
+        console.log('Model' + this.cid);
+        console.log('Name' + this.get('name'));
+        console.log('Phone' + this.get('phoneNumber'));
+        console.log('Email' + this.get('email'));
+    },
+
+    initialize: function(params){
+        console.log('Starting');
+        this.logStatus();
+    }
 });
 
 export default Contact;

src/app/views/contact_list_view.js

@@ -0,0 +1,82 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
+import ContactView from '../views/contact_view.js';
+
+
+const ContactListView = Backbone.View.extend({
+    //this params has the model which is a list of Contacts
+    // params also has the template for a contact view lsit
+    // and has the el as application
+    //params are defined in app.js in the call
+    initialize: function(params){
+          this.template = params.template;
+          this.detailsTemplate = params.detailsTemplate;
+          this.listenTo(this.model, 'update', this.render);
+      },
+
+  render: function() {
+      this.$('#contact-cards').empty();
+      this.$("#contact-details").hide();
+      var that = this;
+
+      this.model.each(function(contact){
+          var myContactView = new ContactView({
+              model: contact,
+              template: that.template,
+              detailsTemplate: that.detailsTemplate
+            //   tagName: 'li'
+          });
+          that.$('#contact-cards').append(myContactView.render().el);
+
+          that.listenTo(myContactView, 'selected', function(view){
+              this.$('#contact-details').html(myContactView.renderCardDetails());
+              this.$("#contact-details").show();
+
+              //
+            //   var myContactDetail = new ContactDetail({
+            //       model: view.model,
+            //       template:_.template($('#contact-details').html()),
+            //   });
+          });
+      });
+      return this;
+  },
+    events:{
+        'click #save': 'addContact',
+        'click #cancel': 'cancelContact'
+    },
+
+    getFormData: function(){
+        var formName = this.$('#name').val();
+        this.$('#name').val('');
+
+        var formPhone = this.$('#phone').val();
+        this.$('#phone').val('');
+
+        var formEmail = this.$('#email').val();
+        this.$('#email').val('');
+
+
+        return {
+            name: formName,
+            phoneNumber: formPhone,
+            email: formEmail
+        };
+    },
+
+    addContact: function(){
+        var contact = new Contact(this.getFormData());
+        this.model.add(contact);
+
+    },
+
+    cancelContact: function(){
+        // this.$('#name').val('');
+        // this.$('#phone').val('');
+        // this.$('#email').val('');
+    }
+});
+
+export default ContactListView;

src/app/views/contact_view.js

@@ -1,6 +1,37 @@
+//contact_view
+
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
+
 
 const ContactView = Backbone.View.extend({
+    initialize: function(params){
+        //need to add more stuff here about adding class and listening events
+        this.template = params.template;
+        this.detailsTemplate = params.detailsTemplate;
+        this.listenTo(this.model, 'update', this.render);
+    },
+
+    render: function(){
+        var contactHTML = this.template(this.model.toJSON());
+        this.$el.html(contactHTML);
+        return this;
+    },
+
+    events: {
+        'click li': 'cardDetails'
+    },
+
+    renderCardDetails: function(){
+        var detailsHTML = this.detailsTemplate(this.model.toJSON());
+        return detailsHTML;
+    },
+
+    cardDetails: function(){
+        this.trigger('selected', this);
+    }
 });
 
 export default ContactView;