Kelly Souza Rolodex

build/css/app.css

@@ -28,7 +28,7 @@ header {
 }
 
 #contact-details {
-  z-index: 10;
+  z-index: 1000;
   position: fixed;
   width: 30%;
   height: 30%;

build/index.html

@@ -18,15 +18,15 @@ <h3>Add A New Contact</h3>
           <div class="columns">
             <label>
               Name
-              <input type="text" name="name">
+              <input id="name" type="text" name="name">
             </label>
             <label>
               Email
-              <input type="text" name="email">
+              <input id="email" type="text" name="email">
             </label>
             <label>
               Phone
-              <input type="text" name="phone">
+              <input id="phone" type="text" name="phone">
             </label>
             <h3 class="button btn-save">Save</h3>
             <h3 class="button btn-cancel">Cancel</h3>
@@ -36,7 +36,7 @@ <h3 class="button btn-cancel">Cancel</h3>
 
       <main>
         <ul id="contact-cards" class="row align-center"></ul>
-        <section id="contact-details"></section>
+        <section id="contact-details" style="display: none" ></section>
       </main>
     </div>
 

src/app.js

@@ -1,9 +1,51 @@
 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 Rolodex from './app/collections/rolodex.js';
+import ContactView from './app/views/contact_view.js';
+import RolodexView from './app/views/rolodex_view.js';
 
 var application = new Application();
 
 var appView = new ApplicationView({
   el: '#application',
   model: application
 });
+
+var contactData = [
+  {
+    name: "Kevin",
+    email: "Kevin@kevin.com",
+    phone: "253-111-2222"
+  }, {
+    name: "Kyle",
+    email: "kyle@kyle.com",
+    phone: "253-222-3333"
+  }, {
+    name: "April",
+    email: "april@april.com",
+    phone: "253-333-4444"
+  }
+];
+
+var myRolodex = new Rolodex(contactData);
+
+
+$(document).ready(function() {
+
+  $(document).click( function(){
+    $('#contact-details').hide();
+  });
+
+  var contactListView = new RolodexView({
+    model: myRolodex,
+    template: _.template($('#tmpl-contact-card').html()),
+    detailTemplate: _.template($('#tmpl-contact-details').html()),
+    el: "#application",
+  });
+  // console.log(contactListView);
+  contactListView.render();
+
+});

src/app/models/contact.js

@@ -3,6 +3,7 @@ import Backbone from 'backbone';
 const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
+
 });
 
 export default Contact;

src/app/views/application_view.js

@@ -1,10 +1,10 @@
 import Backbone from 'backbone';
+import $ from 'jquery';
 
 const ApplicationView = Backbone.View.extend({
   initialize: function() {
     this.render();
   },
-
   render: function() {
     return this;
   }

src/app/views/contact_view.js

@@ -1,6 +1,31 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from 'app/models/contact.js';
 
 const ContactView = Backbone.View.extend({
+  initialize: function (params){
+    this.template = params.template;
+    this.detailTemplate = params.detailTemplate;
+  },
+  render: function(){
+    var compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+  renderDetails: function(){
+    var compiledTemplate = this.detailTemplate(this.model.toJSON());
+    return compiledTemplate;
+  },
+  events: {
+  'click li': "showDetails",
+  'click': "hideDetails"
+  },
+  showDetails: function() {
+    event.stopPropagation();
+    $('#contact-details').toggle();
+    this.trigger("contactCard", this);
+  }
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -0,0 +1,71 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
+import ContactView from '../views/contact_view.js';
+import Rolodex from '../collections/rolodex.js';
+
+
+var RolodexView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+    this.detailTemplate = params.detailTemplate;
+    this.listenTo(this.model, "update", this.render);
+  },
+  render: function() {
+    // Clear the unordered list
+    this.$('#contact-cards').empty();
+    // Iterate through the list rendering each Task
+    var that = this;
+    this.model.each(function(contact) {
+      // Create a new TaskView with the model & template
+      var contactView = new ContactView({
+        model: contact,
+        template: that.template,
+        detailTemplate: that.detailTemplate
+      });
+      that.listenTo(contactView, "contactCard", function(view){
+        that.$('#contact-details').html(contactView.renderDetails());
+      });
+      // Then render the TaskView
+      // And append the resulting HTML to the DOM.
+      that.$('#contact-cards').append(contactView.render().$el);
+    });
+    return this;
+  },
+  events: {
+    'click .btn-save': "saveContact",
+    'click .btn-cancel' : "clearForm",
+  },
+  saveContact: function() {
+    var newContact = new Contact(this.getFormData());
+     this.model.add(newContact);
+  },
+  getFormData: function() {
+
+    var formName = $("#name").val();
+    var formEmail = $("#email").val();
+    var formPhone = $("#phone").val();
+
+    this.clearForm();
+
+    return {
+      name: formName,
+      email: formEmail,
+      phone: formPhone
+    };
+  },
+  clearForm: function() {
+    $("#name").val('');
+    $("#email").val('');
+    $("#phone").val('');
+  }
+
+  // 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 RolodexView;