Queues - Erica J. Case - Rolodex

build/index.html

@@ -18,15 +18,17 @@ <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>

src/app.js

@@ -1 +1,74 @@
 import $ from 'jquery';
+import _ from 'underscore';
+
+import Contact from 'app/models/contact';
+import Rolodex from './app/collections/rolodex';
+
+import RolodexView from './app/views/rolodex_view.js';
+
+var contactTemplate;
+
+var contactData = [
+  {
+    name: "TJ O'Pootertoot",
+    email: "tj@pootertoots.com",
+    phone: "666-666-6666"
+  }, {
+    name: "Francesca Fernandez",
+    email: "francesca@gmail.com",
+    phone: "555-555-5555"
+  }
+];
+
+var newContact = new Contact ({
+  name: "Fabio McMuffin",
+  email: "mcmuffin@yahoo.com",
+  phone: "111-111-1111"
+});
+
+
+// var render = function(contact) {
+//   var generatedHTML = $(contactTemplate(contact.toJSON()));
+//
+//   $('#contact-cards').append(generatedHTML);
+//
+// generatedHTML.find("button.alert").click({task: task}, function(params) {
+//   taskList.remove(params.data.task);
+// });
+// };
+
+
+$(document).ready(function() {
+
+  contactTemplate = _.template($("#tmpl-contact-card").html());
+
+  var  rolodex = new Rolodex(contactData);
+
+  var rolodexView = new RolodexView ({
+    template: contactTemplate,
+    model: rolodex,
+    el: $('body')
+  });
+
+
+  rolodexView.render();
+
+  // var renderRolodex = function(rolodex) {
+  //   // Clear the unordered list
+  //   $('#contact-cards').empty();
+  //
+  //   rolodex.each(function(contact) {
+  //     render(contact);
+  //   });
+  // };
+  //
+  // renderRolodex(rolodex);
+  //
+  //
+  //
+  rolodex.on("update", function() {
+    rolodexView.render();
+  });
+  rolodex.add(newContact);
+
+});

src/app/collections/rolodex.js

@@ -1,10 +1,8 @@
 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;

src/app/models/contact.js

@@ -1,6 +1,12 @@
 import Backbone from 'backbone';
 
-const Contact = Backbone.Model.extend({
+var Contact = Backbone.Model.extend({
+  defaults: {
+    "name": "",
+    "email": "",
+    "phone": "000-000-0000"
+  }
+
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
 });

src/app/views/contact_view.js

@@ -1,6 +1,31 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact';
 
 const ContactView = Backbone.View.extend({
-});
+
+  initialize: function(contactParams) {
+      this.template =  contactParams.template;
+      this.listenTo(this.model, "change", this.render);
+    },
+
+    events: {
+      'click': 'selectContact'
+    },
+
+    selectContact: function(event) {
+      event.stopPropagation();
+      this.trigger("showDetails", this.model);
+    },
+
+    render: function() {
+    var compiledTemplate = this.template(this.model.toJSON());
+    console.log("CONTACT VIEW" + this.model.toJSON());
+
+    this.$el.html(compiledTemplate);
+    return this;
+    }
+  });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -0,0 +1,115 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import ContactView from './contact_view.js';
+
+const RolodexView = Backbone.View.extend({
+
+  initialize: function(rolodexParams) {
+    this.template =  rolodexParams.template;
+    this.listenTo(this.model, "update",this.render);
+  },
+
+  render: function() {
+    console.log("Inside RV.render()");
+    var self = this;
+
+    // Clear out any existing items (incase render
+    // is called multiple times)
+    self.$('#contact-cards').empty();
+
+    self.model.each(function(contact) {
+
+      // Create a new ContactView with the model & template
+      var contactView = new ContactView({
+        model: contact,
+        template: self.template
+      });
+
+      // Then render the ContactView
+      // And append the resulting HTML to the DOM.
+
+      // equivalent to
+      // self.$el.find('.todo-items').whatever
+      self.$('#contact-cards').append(contactView.render().$el);
+
+      self.listenTo(contactView, "showDetails", self.showModal);
+    });
+
+    // Rules of backbone: always return `this` from `render()`
+    return this;
+  },
+  events: {
+    'click':  'hideModal',
+    'click .btn-save': 'addContact',
+    'click .btn-cancel': 'clearForm',
+    'click  formData': 'consoleLog'
+  },
+
+  consoleLog : function(){
+    console.log(this);
+  },
+  addContact: function(event) {
+    console.log("In add contact, form data:");
+
+    var formData = this.readContactForm();
+
+    console.log(formData);
+
+    // Create a contact from the form data and add it to the collection
+    // var contact = new Contact(formData);
+    // this.model.add(contact);
+
+    // Can just pass the form data directly, because
+    // the collection knows what its model is
+    this.model.add(formData);
+  },
+
+  clearForm: function() {
+    this.$('input[name=name]').val('');
+    this.$('input[name=email]').val('');
+    this.$('input[name=phone]').val('');
+  },
+
+  readContactForm: function() {
+    var nameData = this.$('#name').val();
+    var emailData = this.$('#email').val();
+    var phoneData = this.$('#phone').val();
+
+    this.clearForm();
+
+
+    var formData = {};
+    if (nameData && nameData !== "") {
+      formData.name = nameData;
+    }
+    if (emailData && emailData !== "") {
+      formData.email = emailData;
+    }
+    if (phoneData && phoneData !== "") {
+      formData.phone = phoneData;
+    }
+    return formData;
+  },
+
+  showModal: function(contact) {
+    this.$("#contact-details").empty();
+
+    this.$("#contact-details").show();
+    var contactDetail = new ContactView( {
+      model: contact,
+      template: _.template($("#tmpl-contact-details").html()),
+    });
+    this.$("#contact-details").append(contactDetail.render().el);
+    return this;
+  },
+  // hide modal
+  hideModal: function() {
+    this.$("#contact-details").hide();
+  },
+  // other click
+  clickElsewhere: function() {
+  }
+});
+
+export default RolodexView;