From dcefb011c4f57c267c6f58c9bc8eec13739297bf Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Wed, 31 May 2017 11:16:47 -0700 Subject: [PATCH 1/8] Wave one: showed basic contact info --- src/app.js | 40 +++++++++++++++++++++++++++++++++++++++ src/app/models/contact.js | 8 +++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 854f991..b13d3de 100644 --- a/src/app.js +++ b/src/app.js @@ -1 +1,41 @@ import $ from 'jquery'; +import _ from 'underscore'; + +import Contact from 'app/models/contact'; +var contactTemplate; + +var contactData= [ + { + name: "TJ O'Pootertoot", + email: "tj@pootertoots.com", + phone: "666-666-6666" + }, { + name: "Francisca Fernandez", + email: "francesca@gmail.com", + phone: "555-555-5555" + } +]; + +var newContact = new Contact(contactData[0]); + +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); + // }); +}; + +console.log(newContact); + +$(document).ready(function() { + + contactTemplate = _.template($("#tmpl-contact-details").html()); + + render(newContact) + + + +}); diff --git a/src/app/models/contact.js b/src/app/models/contact.js index 395f247..bbfad80 100644 --- a/src/app/models/contact.js +++ b/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. }); From 84b90e1ce9f588c77bde17dae167afa368dc1824 Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Wed, 31 May 2017 16:21:08 -0700 Subject: [PATCH 2/8] added rolodex collection functionality --- src/app.js | 19 +++++++++++++------ src/app/collections/rolodex.js | 6 ++---- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app.js b/src/app.js index b13d3de..7fda5d0 100644 --- a/src/app.js +++ b/src/app.js @@ -2,21 +2,22 @@ import $ from 'jquery'; import _ from 'underscore'; import Contact from 'app/models/contact'; +import Rolodex from './app/collections/rolodex'; var contactTemplate; -var contactData= [ +var contactData = [ { name: "TJ O'Pootertoot", email: "tj@pootertoots.com", phone: "666-666-6666" }, { - name: "Francisca Fernandez", + name: "Francesca Fernandez", email: "francesca@gmail.com", phone: "555-555-5555" } ]; -var newContact = new Contact(contactData[0]); +var rolodex = new Rolodex(contactData); var render = function(contact) { var generatedHTML = $(contactTemplate(contact.toJSON())); @@ -28,14 +29,20 @@ var render = function(contact) { // }); }; -console.log(newContact); $(document).ready(function() { - contactTemplate = _.template($("#tmpl-contact-details").html()); + contactTemplate = _.template($("#tmpl-contact-card").html()); - render(newContact) + var renderRolodex = function(rolodex) { + // Clear the unordered list + $('#contact-cards').empty(); + rolodex.each(function(contact) { + render(contact); + }); + }; + renderRolodex(rolodex); }); diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js index cc11371..ded769e 100644 --- a/src/app/collections/rolodex.js +++ b/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; From c62b73be12dbd24465cd4b5bc1ede760b42f619b Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Wed, 31 May 2017 16:57:28 -0700 Subject: [PATCH 3/8] added update function --- src/app.js | 11 +++++++++++ src/app/views/contact_view.js | 3 +++ 2 files changed, 14 insertions(+) diff --git a/src/app.js b/src/app.js index 7fda5d0..03fb813 100644 --- a/src/app.js +++ b/src/app.js @@ -17,6 +17,12 @@ var contactData = [ } ]; +var newContact = new Contact ({ + name: "Fabio McMuffin", + email: "mcmuffin@yahoo.com", + phone: "111-111-1111" +}); + var rolodex = new Rolodex(contactData); var render = function(contact) { @@ -45,4 +51,9 @@ $(document).ready(function() { renderRolodex(rolodex); + rolodex.on("update", function() { + renderRolodex(rolodex); + }); + rolodex.add(newContact); + }); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index 2d76cc9..ca88fdf 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -1,4 +1,7 @@ import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; +import Task from '../models/task.js'; const ContactView = Backbone.View.extend({ }); From c7a9cb1c396a0467868cabd60253f14ac85ae3fa Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Thu, 1 Jun 2017 15:16:49 -0700 Subject: [PATCH 4/8] updated app.js to call render from contactListView --- src/app.js | 24 +++++++++++++++--------- src/app/views/contact_view.js | 14 +++++++++++++- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/app.js b/src/app.js index 03fb813..d6203c5 100644 --- a/src/app.js +++ b/src/app.js @@ -40,16 +40,22 @@ $(document).ready(function() { contactTemplate = _.template($("#tmpl-contact-card").html()); - var renderRolodex = function(rolodex) { - // Clear the unordered list - $('#contact-cards').empty(); + // var renderRolodex = function(rolodex) { + // // Clear the unordered list + // $('#contact-cards').empty(); + // + // rolodex.each(function(contact) { + // render(contact); + // }); + // }; + // + // renderRolodex(rolodex); - rolodex.each(function(contact) { - render(contact); - }); - }; - - renderRolodex(rolodex); + var rolodexView = new RolodexView ({ + contactTemplate: contactTemplate, + model: taskList, + el: $('main') + }) rolodex.on("update", function() { renderRolodex(rolodex); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index ca88fdf..e380e47 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -1,9 +1,21 @@ import Backbone from 'backbone'; import _ from 'underscore'; import $ from 'jquery'; -import Task from '../models/task.js'; +import Contact from '../models/contact'; const ContactView = Backbone.View.extend({ + + initialize: function(params) { + this.template = params.template; + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } + }); + + }); export default ContactView; From 20de57013c0daa8a4dc6513a21e6767eb7d79dae Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Thu, 1 Jun 2017 15:43:55 -0700 Subject: [PATCH 5/8] created rolodex_view --- src/app.js | 36 +++++++++++++++++++---------------- src/app/views/contact_view.js | 21 -------------------- src/app/views/rolodex_view.js | 22 +++++++++++++++++++++ 3 files changed, 42 insertions(+), 37 deletions(-) create mode 100644 src/app/views/rolodex_view.js diff --git a/src/app.js b/src/app.js index d6203c5..b8e48d3 100644 --- a/src/app.js +++ b/src/app.js @@ -3,6 +3,9 @@ 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 = [ @@ -35,27 +38,28 @@ var render = function(contact) { // }); }; +var rolodexView = new RolodexView ({ + contactTemplate: contactTemplate, + model: rolodex, + el: $('main') +}); $(document).ready(function() { contactTemplate = _.template($("#tmpl-contact-card").html()); - // var renderRolodex = function(rolodex) { - // // Clear the unordered list - // $('#contact-cards').empty(); - // - // rolodex.each(function(contact) { - // render(contact); - // }); - // }; - // - // renderRolodex(rolodex); - - var rolodexView = new RolodexView ({ - contactTemplate: contactTemplate, - model: taskList, - el: $('main') - }) + var renderRolodex = function(rolodex) { + // Clear the unordered list + $('#contact-cards').empty(); + + rolodex.each(function(contact) { + render(contact); + }); + }; + + renderRolodex(rolodex); + + rolodex.on("update", function() { renderRolodex(rolodex); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index e380e47..e69de29 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -1,21 +0,0 @@ -import Backbone from 'backbone'; -import _ from 'underscore'; -import $ from 'jquery'; -import Contact from '../models/contact'; - -const ContactView = Backbone.View.extend({ - - initialize: function(params) { - this.template = params.template; - }, - render: function() { - var compiledTemplate = this.template(this.model.toJSON()); - this.$el.html(compiledTemplate); - return this; - } - }); - - -}); - -export default ContactView; diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js new file mode 100644 index 0000000..73c83e2 --- /dev/null +++ b/src/app/views/rolodex_view.js @@ -0,0 +1,22 @@ +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; + }, + render: function() { + // console.log('INSIDE RolodexView Render'); + var compiledTemplate = this.template(this.model.toJSON()); + // console.log("THIS MODEL IS" + this.model); + + this.$el.html(compiledTemplate); + + return this; + } + }); + +export default RolodexView; From c513eeb41a4b7c262bed07f1605b6fd1fab54326 Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Thu, 1 Jun 2017 15:55:51 -0700 Subject: [PATCH 6/8] added contact view --- src/app/views/contact_view.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index e69de29..519e471 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -0,0 +1,20 @@ +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); + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } + }); + +export default ContactView; From e2ad6bd1e8476dc15658db4b0daa207bf09071f2 Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Thu, 1 Jun 2017 17:34:39 -0700 Subject: [PATCH 7/8] form working --- build/index.html | 8 ++-- src/app.js | 57 ++++++++++++---------- src/app/views/contact_view.js | 3 ++ src/app/views/rolodex_view.js | 89 +++++++++++++++++++++++++++++++---- 4 files changed, 119 insertions(+), 38 deletions(-) diff --git a/build/index.html b/build/index.html index 1c01ae4..e48a5df 100644 --- a/build/index.html +++ b/build/index.html @@ -18,15 +18,17 @@

Add A New Contact

Save

Cancel

diff --git a/src/app.js b/src/app.js index b8e48d3..205ec37 100644 --- a/src/app.js +++ b/src/app.js @@ -26,43 +26,48 @@ var newContact = new Contact ({ phone: "111-111-1111" }); -var rolodex = new Rolodex(contactData); -var render = function(contact) { - var generatedHTML = $(contactTemplate(contact.toJSON())); +// 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); +// }); +// }; - $('#contact-cards').append(generatedHTML); - - // generatedHTML.find("button.alert").click({task: task}, function(params) { - // taskList.remove(params.data.task); - // }); -}; - -var rolodexView = new RolodexView ({ - contactTemplate: contactTemplate, - model: rolodex, - el: $('main') -}); $(document).ready(function() { contactTemplate = _.template($("#tmpl-contact-card").html()); - var renderRolodex = function(rolodex) { - // Clear the unordered list - $('#contact-cards').empty(); - - rolodex.each(function(contact) { - render(contact); - }); - }; - - renderRolodex(rolodex); + 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() { - renderRolodex(rolodex); + rolodexView.render(); }); rolodex.add(newContact); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index 519e471..3203963 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -10,8 +10,11 @@ const ContactView = Backbone.View.extend({ this.listenTo(this.model, "change", this.render); }, + render: function() { var compiledTemplate = this.template(this.model.toJSON()); + console.log("CONTACT VIEW" + this.model.toJSON()); + this.$el.html(compiledTemplate); return this; } diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js index 73c83e2..b074f38 100644 --- a/src/app/views/rolodex_view.js +++ b/src/app/views/rolodex_view.js @@ -6,17 +6,88 @@ import ContactView from './contact_view.js'; const RolodexView = Backbone.View.extend({ initialize: function(rolodexParams) { - this.template = rolodexParams.template; - }, - render: function() { - // console.log('INSIDE RolodexView Render'); - var compiledTemplate = this.template(this.model.toJSON()); - // console.log("THIS MODEL IS" + this.model); + this.template = rolodexParams.template; + this.listenTo(this.model, "update",this.render); + }, - this.$el.html(compiledTemplate); + render: function() { + console.log("Inside RV.render()"); + var self = this; - return 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. + self.$('#contact-cards').append(contactView.render().$el); + + // equivalent to + // self.$el.find('.todo-items').whatever + }); + + // Rules of backbone: always return `this` from `render()` + return this; + }, + events: { + 'click': 'consoleLog', + 'click .btn-save': 'addContact', + 'click .btn-cancel': 'clearForm' + }, + +consoleLog : function(){ + console.log("TEST"); +}, + 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; + } +}); export default RolodexView; From 1637a0515696356ad1b9e25dc45fe922f6a6a069 Mon Sep 17 00:00:00 2001 From: EricaJCase Date: Tue, 6 Jun 2017 13:23:11 -0700 Subject: [PATCH 8/8] detailed contact information working; wave 3 complete --- src/app/views/contact_view.js | 10 +++++++++- src/app/views/rolodex_view.js | 34 ++++++++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index 3203963..aa4ce76 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -7,10 +7,18 @@ 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()); diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js index b074f38..1682ce6 100644 --- a/src/app/views/rolodex_view.js +++ b/src/app/views/rolodex_view.js @@ -28,24 +28,27 @@ const RolodexView = Backbone.View.extend({ // Then render the ContactView // And append the resulting HTML to the DOM. - self.$('#contact-cards').append(contactView.render().$el); // 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': 'consoleLog', + 'click': 'hideModal', 'click .btn-save': 'addContact', - 'click .btn-cancel': 'clearForm' + 'click .btn-cancel': 'clearForm', + 'click formData': 'consoleLog' }, -consoleLog : function(){ - console.log("TEST"); -}, + consoleLog : function(){ + console.log(this); + }, addContact: function(event) { console.log("In add contact, form data:"); @@ -87,6 +90,25 @@ consoleLog : function(){ 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() { } });