From cfc1a250a2290fb9ef6553fcb257ffe85811006b Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 14:53:09 -0700 Subject: [PATCH 01/22] Starting Project --- build/index.html | 17 ++++++++++++----- src/app.js | 5 +++++ src/collections/movie-list.js | 10 ++++++++++ src/models/movie.js | 13 +++++++++++++ 4 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/collections/movie-list.js create mode 100644 src/models/movie.js diff --git a/build/index.html b/build/index.html index 03869595f..d1ebe7f2a 100644 --- a/build/index.html +++ b/build/index.html @@ -1,15 +1,22 @@ - + + Backbone Baseline - - + + +
+
+

Heyyo~!

+
+
- - + + + diff --git a/src/app.js b/src/app.js index 58b77997c..9b8b7b052 100644 --- a/src/app.js +++ b/src/app.js @@ -4,9 +4,14 @@ import $ from 'jquery'; import _ from 'underscore'; +import MovieList from 'collections/movie-list'; +// import MovieListView from '/views/movie_list_view'; + +var movieList = new MovieList(); // ready to go $(document).ready(function() { + console.log(movieList.model); $('section.main-content').append('

Hello World!

'); }); diff --git a/src/collections/movie-list.js b/src/collections/movie-list.js new file mode 100644 index 000000000..75b84bd98 --- /dev/null +++ b/src/collections/movie-list.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; + +import Movie from '../models/movie'; + +var MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies' +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..1555e919e --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + defaults: { + 'title': 'Tofu the Fluffer II', + 'overview': 'The fluff is back and she is fluffier than ever!', + 'release_date': 'Fluffer', + 'image_url': 'https://vignette2.wikia.nocookie.net/zomg/images/0/03/Air_Fluff.PNG/revision/latest?cb=20090214043923', + 'external_id': null + } +}); + +export default Movie; From 6a5de0a9ac7aa5bd938f7fc626027d3f631e33d6 Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 15:13:28 -0700 Subject: [PATCH 02/22] Some views/models --- build/index.html | 8 +++++++- src/app.js | 8 ++++++-- src/views/movie_list_view.js | 29 +++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/views/movie_list_view.js diff --git a/build/index.html b/build/index.html index d1ebe7f2a..dd7a59ba2 100644 --- a/build/index.html +++ b/build/index.html @@ -12,9 +12,15 @@
-

Heyyo~!

+
+ + + diff --git a/src/app.js b/src/app.js index 9b8b7b052..a5e845cc9 100644 --- a/src/app.js +++ b/src/app.js @@ -5,13 +5,17 @@ import $ from 'jquery'; import _ from 'underscore'; import MovieList from 'collections/movie-list'; -// import MovieListView from '/views/movie_list_view'; +import MovieListView from '/views/movie_list_view'; var movieList = new MovieList(); +var movielistView = new MovieListView({ + model: movieList, + template: _.template($('#movie-list-template').html()), + el: '.main-content' +}); // ready to go $(document).ready(function() { - console.log(movieList.model); $('section.main-content').append('

Hello World!

'); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..d4ce2fe49 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,29 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import MovieView from './movie_view'; +import Movie from '../models/movie.js' + +var MovieListView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + this.listenTo(this.model, "update", this.render); + + }, + render: function(){ + this.$('#movie-list').empty(); + + var that = this; + + this.model.each(function(movie){ + + var movieView = new MovieView({ + model: movie, + template: that.template, + }); + + that.$('').append(movieView.render().$el); + }); + return this; + }, From ebec40f54c7f9982db85593bea630ab66582150d Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Tue, 13 Jun 2017 15:19:12 -0700 Subject: [PATCH 03/22] Add MovieView with initialize and render functions --- build/index.html | 2 +- src/views/movie_view.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/views/movie_view.js diff --git a/build/index.html b/build/index.html index dd7a59ba2..0bd3bb1e0 100644 --- a/build/index.html +++ b/build/index.html @@ -17,7 +17,7 @@ diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..902a6d4a0 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,18 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; + +var MovieView = Backbone.View.extend({ + tagName: 'li', + initialize: function(params) { + this.template = params.template; + // this.listenTo(this.model, 'change', this.render); + }, + + render: function() { + var movieHTML = this.template({movie: this.model.attributes}); + this.$el.html(movieHTML); + return this; + } +}); + +export default MovieView; From e4a5db60512581dd2787e0638251e0459e3c67dc Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 15:21:21 -0700 Subject: [PATCH 04/22] Merging --- src/app.js | 2 ++ src/views/movie_list_view.js | 10 ++++++---- src/views/splash.js | 16 ++++++++++++++++ 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/views/splash.js diff --git a/src/app.js b/src/app.js index a5e845cc9..96a2f789b 100644 --- a/src/app.js +++ b/src/app.js @@ -8,6 +8,7 @@ import MovieList from 'collections/movie-list'; import MovieListView from '/views/movie_list_view'; var movieList = new MovieList(); + var movielistView = new MovieListView({ model: movieList, template: _.template($('#movie-list-template').html()), @@ -16,6 +17,7 @@ var movielistView = new MovieListView({ // ready to go $(document).ready(function() { + movielistView.render(); $('section.main-content').append('

Hello World!

'); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index d4ce2fe49..e615b1da7 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,9 +13,8 @@ var MovieListView = Backbone.View.extend({ }, render: function(){ this.$('#movie-list').empty(); - var that = this; - + console.log(this.model); this.model.each(function(movie){ var movieView = new MovieView({ @@ -23,7 +22,10 @@ var MovieListView = Backbone.View.extend({ template: that.template, }); - that.$('').append(movieView.render().$el); + that.$('#movie-list').append(movieView.render().$el); }); return this; - }, + } +}); + +export default MovieListView; diff --git a/src/views/splash.js b/src/views/splash.js new file mode 100644 index 000000000..ff385de15 --- /dev/null +++ b/src/views/splash.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +var MovieView = 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 MovieView; From 42a200363a205af0c79487870a116aacf18e400a Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 15:48:27 -0700 Subject: [PATCH 05/22] List all Rental Library --- build/index.html | 3 ++- src/app.js | 4 +--- src/views/splash.js | 16 ---------------- 3 files changed, 3 insertions(+), 20 deletions(-) delete mode 100644 src/views/splash.js diff --git a/build/index.html b/build/index.html index 0bd3bb1e0..a6adb33c5 100644 --- a/build/index.html +++ b/build/index.html @@ -12,13 +12,14 @@
+

Rental Library

diff --git a/src/app.js b/src/app.js index 96a2f789b..39e156451 100644 --- a/src/app.js +++ b/src/app.js @@ -17,7 +17,5 @@ var movielistView = new MovieListView({ // ready to go $(document).ready(function() { - movielistView.render(); - $('section.main-content').append('

Hello World!

'); - + movieList.fetch(); }); diff --git a/src/views/splash.js b/src/views/splash.js deleted file mode 100644 index ff385de15..000000000 --- a/src/views/splash.js +++ /dev/null @@ -1,16 +0,0 @@ -import Backbone from 'backbone'; -import _ from 'underscore'; -import $ from 'jquery'; - -var MovieView = 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 MovieView; From 3a1e8f33128ff57fa4170c8381af0671aae9db43 Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 16:09:26 -0700 Subject: [PATCH 06/22] Search bar --- build/index.html | 6 ++++++ src/collections/movie-list.js | 8 +++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/build/index.html b/build/index.html index a6adb33c5..8eba96279 100644 --- a/build/index.html +++ b/build/index.html @@ -13,6 +13,12 @@

Rental Library

+ + +
diff --git a/src/collections/movie-list.js b/src/collections/movie-list.js index 75b84bd98..f9c98cd39 100644 --- a/src/collections/movie-list.js +++ b/src/collections/movie-list.js @@ -4,7 +4,13 @@ import Movie from '../models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies' + url: function(search){ + var url = 'http://localhost:3000/movies' + if(search){ + url += '?query=' + search + } + return url +} }); export default MovieList; From 74c18b3d3bcc07a530ed6e2fde027c210aae1bff Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Tue, 13 Jun 2017 16:24:31 -0700 Subject: [PATCH 07/22] Search bar works --- build/index.html | 2 +- src/app.js | 2 +- src/collections/movie-list.js | 8 +------- src/views/movie_list_view.js | 9 +++++++++ 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/build/index.html b/build/index.html index 8eba96279..13ac43db8 100644 --- a/build/index.html +++ b/build/index.html @@ -15,7 +15,7 @@

Rental Library

diff --git a/src/app.js b/src/app.js index 39e156451..d0627e872 100644 --- a/src/app.js +++ b/src/app.js @@ -5,7 +5,7 @@ import $ from 'jquery'; import _ from 'underscore'; import MovieList from 'collections/movie-list'; -import MovieListView from '/views/movie_list_view'; +import MovieListView from 'views/movie_list_view'; var movieList = new MovieList(); diff --git a/src/collections/movie-list.js b/src/collections/movie-list.js index f9c98cd39..75b84bd98 100644 --- a/src/collections/movie-list.js +++ b/src/collections/movie-list.js @@ -4,13 +4,7 @@ import Movie from '../models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: function(search){ - var url = 'http://localhost:3000/movies' - if(search){ - url += '?query=' + search - } - return url -} + url: 'http://localhost:3000/movies' }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e615b1da7..74e806a8e 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -25,6 +25,15 @@ var MovieListView = Backbone.View.extend({ that.$('#movie-list').append(movieView.render().$el); }); return this; + }, + events: { + 'submit #searchbar' : 'searchMovies' + }, + searchMovies: function(){ + event.preventDefault(); + + this.model.url = 'http://localhost:3000/movies' + '?query=' + ($('#search').val()); + this.model.fetch(); } }); From ad7d6c12bac48574aceeb23c41c2b9b1eabcdbe7 Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Tue, 13 Jun 2017 16:52:15 -0700 Subject: [PATCH 08/22] Move search params inside fetch so collection url is unchanged --- src/views/movie_list_view.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 74e806a8e..a9af6b9ce 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -32,8 +32,11 @@ var MovieListView = Backbone.View.extend({ searchMovies: function(){ event.preventDefault(); - this.model.url = 'http://localhost:3000/movies' + '?query=' + ($('#search').val()); - this.model.fetch(); + var queryParams = $('#search').val(); + + this.model.fetch({ + data: { 'query': queryParams } + }); } }); From bf96469530a108da71a5bf894c17de321483baec Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Wed, 14 Jun 2017 10:16:18 -0700 Subject: [PATCH 09/22] Figuring Out Add button --- build/index.html | 1 + src/views/movie_list_view.js | 15 ++++++++++++--- src/views/movie_view.js | 6 ++++++ 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/build/index.html b/build/index.html index 13ac43db8..2a3588129 100644 --- a/build/index.html +++ b/build/index.html @@ -26,6 +26,7 @@

Rental Library

diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 74e806a8e..d58fb4bf7 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -8,13 +8,12 @@ import Movie from '../models/movie.js' var MovieListView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; + this.rentals = this.model this.listenTo(this.model, "update", this.render); - }, render: function(){ this.$('#movie-list').empty(); var that = this; - console.log(this.model); this.model.each(function(movie){ var movieView = new MovieView({ @@ -27,13 +26,23 @@ var MovieListView = Backbone.View.extend({ return this; }, events: { - 'submit #searchbar' : 'searchMovies' + 'submit #searchbar' : 'searchMovies', + 'click .btn-add': 'addRental' }, searchMovies: function(){ event.preventDefault(); this.model.url = 'http://localhost:3000/movies' + '?query=' + ($('#search').val()); this.model.fetch(); + }, + addRental: function(event){ + let movie = event.currentTarget.id; + + let addedMovie = this.model.findWhere({external_id: movie}); + + console.log(addedMovie); + console.log(this.model); + console.log(event.currentTarget.id); } }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 902a6d4a0..52479e9de 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -13,6 +13,12 @@ var MovieView = Backbone.View.extend({ this.$el.html(movieHTML); return this; } + // events: { + // 'click .btn-add': 'addRental' + // }, + // addRental: function(){ + // console.log(this.model); + // } }); export default MovieView; From 14706c4cf0e504b5b6fc6750fcb285342195a98e Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Wed, 14 Jun 2017 10:56:24 -0700 Subject: [PATCH 10/22] Add functionality to add a movie to the rental library from backbone --- build/index.html | 4 ++-- src/views/movie_list_view.js | 42 +++++++++++++++++++++++++----------- src/views/movie_view.js | 15 +++++++------ 3 files changed, 41 insertions(+), 20 deletions(-) diff --git a/build/index.html b/build/index.html index 2a3588129..34ba78946 100644 --- a/build/index.html +++ b/build/index.html @@ -25,8 +25,8 @@

Rental Library

diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index fe8cf9dba..ddd54981f 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -11,41 +11,59 @@ var MovieListView = Backbone.View.extend({ this.rentals = this.model this.listenTo(this.model, "update", this.render); }, - render: function(){ + + render: function() { this.$('#movie-list').empty(); var that = this; this.model.each(function(movie){ - var movieView = new MovieView({ model: movie, template: that.template, }); that.$('#movie-list').append(movieView.render().$el); + that.listenTo(movieView, 'add', that.addToLibrary) }); return this; }, + events: { 'submit #searchbar' : 'searchMovies', 'click .btn-add': 'addRental' }, - searchMovies: function(){ + + searchMovies: function(event) { event.preventDefault(); - var queryParams = $('#search').val(); + var queryParams = $('#search').val(); - this.model.fetch({ - data: { 'query': queryParams } + this.model.fetch({ + data: { 'query': queryParams } + }); }, - addRental: function(event){ - let movie = event.currentTarget.id; - let addedMovie = this.model.findWhere({external_id: movie}); + addToLibrary: function(movie) { + var newMovie = { + title: movie.get("title"), + overview: movie.get("overview"), + release_date: movie.get("release_date"), + image_url: movie.get("image_url"), + external_id: movie.get("external_id") + } - console.log(addedMovie); - console.log(this.model); - console.log(event.currentTarget.id); + this.model.create(newMovie); } + + + // addRental: function(event){ + // let movie = event.currentTarget.id; + // + // let addedMovie = this.model.findWhere({external_id: movie}); + // + // console.log(addedMovie); + // console.log(this.model); + // console.log(event.currentTarget.id); + // } }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 52479e9de..e938e0118 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -12,13 +12,16 @@ var MovieView = Backbone.View.extend({ var movieHTML = this.template({movie: this.model.attributes}); this.$el.html(movieHTML); return this; + }, + + events: { + 'click .btn-add': 'addRental' + }, + + addRental: function() { + this.trigger('add', this.model); + event.stopPropagation(); } - // events: { - // 'click .btn-add': 'addRental' - // }, - // addRental: function(){ - // console.log(this.model); - // } }); export default MovieView; From b912b3247dbeadcacdbf93e4ed92ef8cfae20361 Mon Sep 17 00:00:00 2001 From: Danielle Birbal Date: Wed, 14 Jun 2017 11:00:31 -0700 Subject: [PATCH 11/22] Merge --- src/views/movie_list_view.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index fe8cf9dba..335c69905 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -36,15 +36,19 @@ var MovieListView = Backbone.View.extend({ this.model.fetch({ data: { 'query': queryParams } + }); }, addRental: function(event){ let movie = event.currentTarget.id; - let addedMovie = this.model.findWhere({external_id: movie}); + let addedMovie = this.model.filter(function(model){ + if (model.attributes.external_id == movie) { + console.log(model.attributes.external_id); + return model + } + }); - console.log(addedMovie); - console.log(this.model); - console.log(event.currentTarget.id); + this.model.create(addedMovie); } }); From 0173916a1fa07cfca19e3714115954784410f987 Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Wed, 14 Jun 2017 14:33:11 -0700 Subject: [PATCH 12/22] Fix loading of images of movies added to lib --- build/index.html | 2 +- src/views/movie_list_view.js | 13 ++----------- src/views/movie_view.js | 2 +- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/build/index.html b/build/index.html index 34ba78946..0e95283a8 100644 --- a/build/index.html +++ b/build/index.html @@ -25,7 +25,7 @@

Rental Library

diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index ddd54981f..d51b68df7 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -16,6 +16,7 @@ var MovieListView = Backbone.View.extend({ this.$('#movie-list').empty(); var that = this; this.model.each(function(movie){ + console.log(movie); var movieView = new MovieView({ model: movie, template: that.template, @@ -52,18 +53,8 @@ var MovieListView = Backbone.View.extend({ } this.model.create(newMovie); + // , { dataType: 'jsonp' } } - - - // addRental: function(event){ - // let movie = event.currentTarget.id; - // - // let addedMovie = this.model.findWhere({external_id: movie}); - // - // console.log(addedMovie); - // console.log(this.model); - // console.log(event.currentTarget.id); - // } }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index e938e0118..43aa90567 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -18,7 +18,7 @@ var MovieView = Backbone.View.extend({ 'click .btn-add': 'addRental' }, - addRental: function() { + addRental: function(event) { this.trigger('add', this.model); event.stopPropagation(); } From 00120cdd941ae25ba8171c0f7907209ab848b19a Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Wed, 14 Jun 2017 14:51:19 -0700 Subject: [PATCH 13/22] Add movieListView function to view rental library --- build/index.html | 2 +- src/views/movie_list_view.js | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/build/index.html b/build/index.html index 0e95283a8..72b4c9ab3 100644 --- a/build/index.html +++ b/build/index.html @@ -12,7 +12,7 @@
-

Rental Library

+

Rental Library

@@ -29,6 +43,15 @@

Title: <%- movie.title %>

+ + diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..85cc06337 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -37,8 +37,59 @@ aside label { div { display: inline; } + +/*.popup-backdrop { + width:100%; + height:100%; + display:none; + position:fixed; + top:0px; + left:0px; + background:rgba(0,0,0,0.50); + background-image: url("../assets/map.jpg"); + background-size: cover; + background-position: center; +} + +.popup { + max-width:80%; + max-height: 80%; + overflow-y: scroll; + width:90%; + padding:40px; + position: absolute; + top:50%; + left:50%; + -webkit-transform:translate(-50%, -50%); + transform:translate(-50%, -50%); + box-shadow:0px 2px 4px rgba(0,0,0,1); + border-radius:3px; + background:#fff; +}*/ + +.close-modal { + float: right !important; +} /* * { border-style: solid; } */ + +/*#movie-list { + z-index: 5; +}*/ + +/*#movie-details { + z-index: 10; + position: fixed; + width: 30%; + height: 30%; + top: 30%; + left: 30%; + background-color: #538ca3; + text-align: center; + border: 1em solid white; + margin-left: 20%; + border-radius: 20%; +}*/ diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 5aac6fe96..70607de3e 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -7,6 +7,8 @@ import Movie from '../models/movie.js' var MovieListView = Backbone.View.extend({ initialize: function(params) { + this.movieDetailsTemplate = _.template($('#movie-details-template').html()); + // fix this.template = params.template; this.rentals = this.model this.listenTo(this.model, "update", this.render); @@ -22,7 +24,8 @@ var MovieListView = Backbone.View.extend({ }); that.$('#movie-list').append(movieView.render().$el); - that.listenTo(movieView, 'add', that.addToLibrary) + that.listenTo(movieView, 'add', that.addToLibrary); + that.listenTo(movieView, 'show', that.showDetails) }); return this; }, @@ -47,7 +50,7 @@ var MovieListView = Backbone.View.extend({ release_date: movie.get("release_date"), image_url: movie.get("image_url") } - + this.model.create(newMovie, {error: function (model, response){ if (response.status == 500) { @@ -63,6 +66,15 @@ var MovieListView = Backbone.View.extend({ viewLibrary: function(event) { this.model.fetch(); + }, + + showDetails: function(movie) { + console.log(movie); + var movieHTML = this.movieDetailsTemplate({ movie: movie.attributes }); + $('#movie-details').html(movieHTML); + // $('#popup-backdrop').fadeIn(500); + // $('#movie-details').foundation('reveal', 'open'); + $('#movie-details').show(); } }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index e7a980bb0..c82f589d7 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -3,6 +3,7 @@ import $ from 'jquery'; var MovieView = Backbone.View.extend({ tagName: 'li', + attributes: { 'data-open': "movie-details"}, initialize: function(params) { this.template = params.template; // this.listenTo(this.model, 'change', this.render); @@ -15,17 +16,22 @@ var MovieView = Backbone.View.extend({ if (!(this.model.attributes.external_id)) { this.$('.btn-add').hide(); } - + return this; }, events: { - 'click .btn-add': 'addRental' + 'click .btn-add': 'addRental', + 'click': 'showDetails' }, addRental: function(event) { this.trigger('add', this.model); - event.stopPropagation(); + // event.stopPropagation(); + }, + + showDetails: function(event) { + this.trigger('show', this.model) } }); From 73e0734c086381edbff5c9b671bc2cfee64d0dde Mon Sep 17 00:00:00 2001 From: Cara Comfort Date: Fri, 16 Jun 2017 10:31:17 -0700 Subject: [PATCH 20/22] Fix movie details modal --- build/css/styles.css | 20 ++++- build/index.html | 17 +---- src/app.js | 2 +- src/css/styles.css | 143 ++++++++++++++++++++++++++++------- src/views/movie_list_view.js | 14 +++- src/views/movie_view.js | 3 +- 6 files changed, 143 insertions(+), 56 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index dd3e78119..2fb96c9f9 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -147,8 +147,20 @@ button.success.btn-add:hover{ background-color: #ff6f00; } -/* -* { - border-style: solid; +.close-modal { + float: right; + color: #3f51b5; + font-weight: bold; +} + +#movie-details { + background-color: #ffb300; + color: black; + position: fixed; + z-index: 2; + left: 50%; + margin-left: -37.5%; + width: 75%; +} + } -*/ diff --git a/build/index.html b/build/index.html index 27267e197..b0188e16d 100644 --- a/build/index.html +++ b/build/index.html @@ -20,22 +20,8 @@

Comfort's Comfortable Movies

-
- - - - -
    @@ -48,8 +34,7 @@

    <%- movie.title %>

    - + diff --git a/src/app.js b/src/app.js index 1e08f2af4..96d55dd80 100644 --- a/src/app.js +++ b/src/app.js @@ -38,7 +38,7 @@ var imageData = context.createImageData(width, height); $(document).ready(function() { - $('#rental-library').click(function(){ + $('#rental-library').click(function(event){ movieList.fetch(); }) movieList.fetch(); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index bb20d33a0..aa3888027 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -39,7 +39,6 @@ var MovieListView = Backbone.View.extend({ events: { 'submit #searchbar' : 'searchMovies', 'click .btn-add': 'addRental', - 'click #rental-library': 'viewLibrary', 'click .close-modal' : 'closeDetails' }, @@ -72,11 +71,6 @@ var MovieListView = Backbone.View.extend({ }); }, - viewLibrary: function(event) { - this.closeDetails(); - this.model.fetch(); - }, - showDetails: function(movie) { console.log(movie); var movieHTML = this.movieDetailsTemplate({ movie: movie.attributes }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 912070197..6ca41fe0b 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -27,6 +27,7 @@ var MovieView = Backbone.View.extend({ addRental: function(event) { this.trigger('add', this.model); + event.stopPropagation(); }, showDetails: function(event) {