Alena's Rolodex

build/css/app.css

@@ -31,7 +31,7 @@ header {
   z-index: 10;
   position: fixed;
   width: 30%;
-  height: 30%;
+  height: auto;
   top: 30%;
   left: 30%;
   background-color: #538ca3;

build/index.html

@@ -42,9 +42,9 @@ <h3 class="button btn-cancel">Cancel</h3>
 
     <!-- Underscore Templates -->
     <script type="text/template" id="tmpl-contact-card">
-      <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
+      <!-- <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns"> -->
         <h4><%- name %></h4>
-      </li>
+      <!-- </li> -->
     </script>
 
     <script type="text/template" id="tmpl-contact-details">

src/app.js

@@ -1,9 +1,54 @@
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from 'app/models/contact.js';
+import Rolodex from 'app/collections/rolodex.js';
+import ContactView from 'app/views/contact_view.js';
+import DetailsView from 'app/views/details_view.js';
+import RolodexView from 'app/views/rolodex_view.js';
+//
+// var application = new Application();
+//
+// var appView = new ApplicationView({
+//   el: '#application',
+//   model: application
+// });
 
-var application = new Application();
+var contactData = [
+  {
+    name: "Bob Belcher",
+    phone: "12x3456",
+    email: "bob@burgers.com"
+  }, {
+    name: "Louise Belcher",
+    phone: "345x6789",
+    email: "louise@burgers.com"
+  }, {
+    name: "Tina Belcher",
+    phone: "0987654x",
+    email: "tina@burgers.com"
+  }
+];
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+var myContact = new Contact({
+  name: "Jimmy Pesto",
+  phone: "4958305s",
+  email: "jimmy@pesto.com"
+});
+
+var secondContact = new Contact({});
+
+var myRolodex = new Rolodex(contactData);
+
+$(document).ready(function(){
+
+  var myRolodexView = new RolodexView({
+    model: myRolodex,
+    template: _.template($('#tmpl-contact-card').html()),
+    detailsContactTemplate: _.template($('#tmpl-contact-details').html()),
+    el: 'body',
+  });
+
+  myRolodexView.render();
 });

src/app/collections/rolodex.js

@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
+
 
 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,11 @@
 import Backbone from 'backbone';
 
 const Contact = Backbone.Model.extend({
+  defaults: {
+    name: "",
+    phone: "",
+    email: ""
+  }
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
 });

src/app/views/contact_view.js

@@ -1,6 +1,28 @@
 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.$el.addClass("contact-card small-11 medium-4 large-2 medium-offset-1 columns");
+  },
+  render: function() {
+    var compiledTemplate = this.template(this.model.toJSON());
+
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+  events: {
+    'click': "clicked"
+  },
+  clicked: function() {
+    this.trigger("selected", this.model);
+    return false;
+  }
 });
 
 export default ContactView;

src/app/views/details_view.js

@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from 'app/models/contact.js';
+
+const DetailsView = 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 DetailsView;

src/app/views/rolodex_view.js

@@ -0,0 +1,68 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
+import ContactView from './contact_view.js';
+import DetailsView from './details_view.js';
+import Rolodex from '../collections/rolodex.js';
+
+var RolodexView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+    this.detailsTemplate = params.detailsContactTemplate;
+    this.listenTo(this.model, "update", this.render);
+  },
+  render: function() {
+    this.$("#contact-cards").empty();
+    var that = this;
+    this.model.each(function(contact) {
+      var contactView = new ContactView({
+        model: contact,
+        template: that.template,
+        tagName: 'li'
+      });
+
+      that.$("#contact-cards").append(contactView.render().$el);
+
+      that.listenTo(contactView, "selected", function(model) {
+        var detailsView = new DetailsView({
+          model: model,
+          template: that.detailsTemplate
+        });
+
+        that.$("#contact-details").html(detailsView.render().el);
+        that.$("#contact-details").show();
+      });
+    });
+    return this;
+  },
+  events: {
+    "click .btn-save" : "addContact",
+    "click" : "hideDetails"
+  },
+  getFormData: function() {
+    var formName = this.$("input[name=name]").val();
+    this.$("input[name=name]").val('');
+
+    var formEmail = this.$("input[name=email]").val();
+    this.$("input[name=email]").val('');
+
+    var formPhone = this.$("input[name=phone]").val();
+    this.$("input[name=phone]").val('');
+
+    return {
+      name: formName,
+      email: formEmail,
+      phone: formPhone
+    };
+  },
+  addContact: function() {
+    var contact = new Contact(this.getFormData());
+    this.model.add(contact);
+  },
+  hideDetails: function () {
+    this.$("#contact-details").hide();
+  }
+});
+
+export default RolodexView;