Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stacks - Jackie - Rolodex #32

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Stacks - Jackie - Rolodex #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
da75685
able to display one static contact
jackiewatanabe May 30, 2017
11e0690
added defaults and initialize to Contact.js and also added Contact_view
jackiewatanabe May 31, 2017
ea7374f
added initial code for rolodex_view.js
jackiewatanabe May 31, 2017
4138557
added get form, render and initialize functions to Rolodex_view
jackiewatanabe May 31, 2017
1783dac
added events and saveContact function to rolodex_view
jackiewatanabe May 31, 2017
f82b94d
removed the add class in initialize in contact_view
jackiewatanabe May 31, 2017
6ac8bc8
got the save contact function to actually work by changing the el in …
jackiewatanabe Jun 1, 2017
c4391ea
clicking on one contact now shows details of contact
jackiewatanabe Jun 3, 2017
6e096de
changed css so modal container is clickable
jackiewatanabe Jun 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions build/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,12 @@ header {
.contact-card:hover h3 {
color: white;
}

.modal-container {
Copy link

@CheezItMan CheezItMan Jun 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clever to do it this way so your View picks up the click to hide it.

width: 100vw;
height: 100vh;
z-index: 9;
position: fixed;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
12 changes: 8 additions & 4 deletions build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,23 @@
</head>
<body>
<div id="application">

<header>
<h1>Rolodex</h1>
<section class="row contact-form">
<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>
Expand All @@ -36,8 +37,11 @@ <h3 class="button btn-cancel">Cancel</h3>

<main>
<ul id="contact-cards" class="row align-center"></ul>
<section id="contact-details"></section>
<div class="modal-container">
<section id="contact-details"></section>
</div>
</main>

</div>

<!-- Underscore Templates -->
Expand Down
132 changes: 128 additions & 4 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,133 @@
import $ from 'jquery';
import _ from 'underscore';
import Contact from 'app/models/contact.js';
import Application from 'app/models/application';
import ApplicationView from 'app/views/application_view';
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 application = new Application();
//
// var appView = new ApplicationView({
// el: '#application',
// model: application
// });

var contactsData = [{
name: "Jill",
email: "blabla@blabla.com",
phone: "2394039403"
},
{
name: "Jackie",
email: "weeea@blabla.com",
phone: "2394039403"
},
{
name: "Your Mom",
email: "yourmom@blabla.com",
phone: "1234639403"
}
];

var myContact = new Contact({
name: "Jill",
email: "blabla@blabla.com",
phone: "2394039403"
});

// var render = function(contact) {
// var templateText = $('#tmpl-contact-card').html();
//
// // create an underscore template object
// var templateObject = _.template(templateText);
//
// // Fill in the ERB wth data from our task
// var compiledHTML = templateObject(contact.toJSON());
//
// // append the result to the DOM
// $('#contact-cards').append(compiledHTML);
// // console.log(compiledHTML);
// };

var renderDetails = function() {
console.log(this);
var contact = this.get(id);
var templateText1 = $('#tmpl-contact-details').html();
// create an underscore template object
var templateObject1 = _.template(templateText1);
// Fill in the ERB wth data from our task
var compiledHTML1 = templateObject1(contact.toJSON());

$('#contact-details').html(compiledHTML1);
};


// var renderContacts = function(rolodex) {
// $('#contact-cards').empty();
// $('#contact-details').hide();
//
// rolodex.each(function(contactCard){
// render(contactCard);
// $(".contact-card").click(function() {
// // console.log(contactCard);
// $('#contact-details').show();
// console.log(this);
// renderDetails(this);
// });
// });
// };

var getFormData = function() {
var formName = $("#name").val();
$("#name").val('');

// get checkbox and find out if it's checked - true/false
var formEmail = $("email").val();
$("email").val('');

// clear checkbox get the property 'checked' and force is to false
var formPhone = $('#phone').val();
$('#phone').val('');

return {
name: formName,
email: formEmail,
phone: formPhone
};
};

var myContacts = new Rolodex(contactsData);

// var myContact = new Contact(taskData);

$(document).ready(function() {
// renderContacts(myContacts);

// var myContactView = new ContactView({
// model: myContact,
// template: _.template($('#tmpl-contact-card').html()),
// el: 'ul'
// });
//
// myContactView.render();


var myRolodexView = new RolodexView({
model: myContacts,
template: _.template($('#tmpl-contact-card').html()),
el: 'div#application'
// el: 'div#application'
});

myRolodexView.render();

// $(".btn-save").click(function() {
// var contact = new Contact(getFormData());
//
// myContacts.add(contact);
// // console.log(myTaskList);
// });

var appView = new ApplicationView({
el: '#application',
model: application
});
2 changes: 2 additions & 0 deletions src/app/collections/rolodex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import Backbone from 'backbone';
import Contact from '../models/contact.js';

const Rolodex = 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
Expand Down
17 changes: 17 additions & 0 deletions src/app/models/contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import Backbone from 'backbone';

const Contact = Backbone.Model.extend({
defaults: {
name: 'Default',
phone: '',
email: ''
},

logStatus: function() {
console.log("Model: " + this.cid);
console.log("Name: " + this.get("name"));
console.log("Phone: " + this.get("phone"));
console.log("Email: " + this.get("email"));
},

initialize: function(params) {
console.log("Starting", params);
this.logStatus();
}
// This model should have the attributes for
// a single contact: name, phone number, and email.
});
Expand Down
45 changes: 45 additions & 0 deletions src/app/views/contact_details_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import Backbone from 'backbone';
import _ from 'underscore';
import $ from 'jquery';
import RolodexView from '../views/rolodex_view.js';


var ContactDetailsView = Backbone.View.extend({
initialize: function(params){
this.template = params.template;

console.log("something happened in contact-details");
// this.listenTo(RolodexView, "selected", this.render);
// this.$('#contact-details').show();
},
render: function(){
// this.$('#contact-cards').empty();
// this.$('#contact-details').show();

console.log("render in contact-details");

var compiledTemplate = this.template(this.model.toJSON());

this.$("#contact-details").html(compiledTemplate);
this.$el.show();

return this;
},

events: {
"click": "hideDetails"
},

hideDetails: function(){
console.log("hide-details clicked");
// console.log(this);
this.$el.hide();
}


});

export default ContactDetailsView;

// import Contact from '../models/contact.js';
// import ContactView from '../views/contact_view.js';
29 changes: 29 additions & 0 deletions src/app/views/contact_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,35 @@
import Backbone from 'backbone';
import Contact from '../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");

this.listenTo(this.model, "change", this.render);
},
render: function() {
var compiledTemplate = this.template(this.model.toJSON());

this.$el.html(compiledTemplate);

return this;
},
events: {
"click li": "loadContact"
},

loadContact: function() {
console.log("blabala");
// this.$('#contact-details').show();
console.log(this);

this.trigger("selected", this);


}

});

export default ContactView;
Loading