From 65c69b6ac6ada0aee9d96bdaa1784c37e19e8684 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 13:03:20 -0800 Subject: [PATCH 01/40] Finish setup first commit --- dist/index.html | 7 ++++++- src/collections/movie_list.js | 8 ++++++++ src/models/movie.js | 13 +++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/collections/movie_list.js create mode 100644 src/models/movie.js diff --git a/dist/index.html b/dist/index.html index 559b18ecd..209b0b283 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,10 +6,15 @@
- +
+ + + + + diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..da1f6a3cd --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Movie from './models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..c4fed8b67 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ +}); + +export default Movie; + + + + +// Search all Movies +// Add a movie to the rental library - Add a movie, need a form +// List all movies the rental library - Movie Collection From b8d804f76372566bd2250bc5e0567ad0d2142f7a Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 13:39:30 -0800 Subject: [PATCH 02/40] Add some view --- dist/index.html | 24 +++++++++++++++++++++--- src/views/movie_list_view.js | 7 +++++++ 2 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 src/views/movie_list_view.js diff --git a/dist/index.html b/dist/index.html index 209b0b283..fef211dc1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,16 +5,34 @@ Backbone Baseline +
+

VIDEO STORE PLUS!

+
- +
+ +
+ +
+ + + + +
+ + - - diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..b786dcba6 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; +import Movie from './models/movie'; + +const MovieListView = Backbone.View.extend({ +}); + +export default MovieListView; From 7dbb5fecc51eeeef688cbea2c695370388b5b25f Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 14:14:30 -0800 Subject: [PATCH 03/40] Add templates to app.js --- dist/index.html | 5 +++-- src/app.js | 14 +++++++++++++- src/collections/movie_list.js | 2 +- src/views/movie_list_view.js | 5 ++++- src/views/movie_view.js | 10 ++++++++++ 5 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 src/views/movie_view.js diff --git a/dist/index.html b/dist/index.html index fef211dc1..0774170f3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,11 +9,12 @@

VIDEO STORE PLUS!

-
+
+ -
+ diff --git a/src/app.js b/src/app.js index 30c00d594..d46b509bd 100644 --- a/src/app.js +++ b/src/app.js @@ -6,9 +6,21 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; -// ready to go +import Movie from 'models/movie'; +import MovieList from 'collections/movie_list'; +import MovieView from 'views/movie_view'; +import MovieListView from 'views/movie_list_view'; + +let movieList = new MovieList; + +let movieTemplate; +let movieDetailTemplate; + $(document).ready(function() { + movieTemplate = _.template($('#movie-template').html()); + movieDetailTemplate = _.template($('#movie-detail-template').html()); + $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index da1f6a3cd..72d4e3d67 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -1,5 +1,5 @@ import Backbone from 'backbone'; -import Movie from './models/movie'; +import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index b786dcba6..6c4a2d632 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,7 +1,10 @@ import Backbone from 'backbone'; -import Movie from './models/movie'; +import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ + initialize(params) { + + } }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..16e7b1057 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + + } +}); + +export default MovieView; From 7321781d2850d3c6bfd88e2c4b515fff6640d079 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 14:28:07 -0800 Subject: [PATCH 04/40] Add url to request from rails API --- dist/index.html | 2 +- src/app.js | 12 +++++++++--- src/collections/movie_list.js | 1 + src/models/movie.js | 9 +++++++++ src/views/movie_list_view.js | 1 - 5 files changed, 20 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0774170f3..645d68718 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,7 +10,7 @@

VIDEO STORE PLUS!

- +
diff --git a/src/app.js b/src/app.js index d46b509bd..8dc279a90 100644 --- a/src/app.js +++ b/src/app.js @@ -11,15 +11,21 @@ import MovieList from 'collections/movie_list'; import MovieView from 'views/movie_view'; import MovieListView from 'views/movie_list_view'; -let movieList = new MovieList; +let movieList = new MovieList(); let movieTemplate; -let movieDetailTemplate; +// let movieDetailTemplate; $(document).ready(function() { + + movieList.fetch({ + success: (model, response) => { + console.log(model, response); + } + }) movieTemplate = _.template($('#movie-template').html()); - movieDetailTemplate = _.template($('#movie-detail-template').html()); + // movieDetailTemplate = _.template($('#movie-detail-template').html()); $('#main-content').append('

Hello World!

'); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 72d4e3d67..91b69d931 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,6 +3,7 @@ import Movie from '../models/movie'; const 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 index c4fed8b67..b77d96948 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,6 +1,7 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ + }); export default Movie; @@ -11,3 +12,11 @@ export default Movie; // Search all Movies // Add a movie to the rental library - Add a movie, need a form // List all movies the rental library - Movie Collection + + +// singleTrip.fetch({ +// success: (model, response) => { +// console.log('Model: ' + singleTrip.parse(model)); +// console.log('Response: ' + response); +// showTrip(model); +// }, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 6c4a2d632..0f6bc63d4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -3,7 +3,6 @@ import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ initialize(params) { - } }); From 04c3bbc305e602586b0cac8cf46a85a9fc52c5e2 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 15:54:19 -0800 Subject: [PATCH 05/40] Rendered movie list views --- dist/index.html | 10 ++++--- src/app.js | 54 +++++++++++++++++++++++++++++++----- src/models/movie.js | 2 +- src/views/movie_list_view.js | 24 ++++++++++++++-- src/views/movie_view.js | 10 +++++-- 5 files changed, 84 insertions(+), 16 deletions(-) diff --git a/dist/index.html b/dist/index.html index 645d68718..a3d9f85f7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,8 +9,10 @@

VIDEO STORE PLUS!

-
- +
+
    + +
@@ -29,9 +31,9 @@

<%- title %>

- --> diff --git a/src/app.js b/src/app.js index 8dc279a90..84dcad8d5 100644 --- a/src/app.js +++ b/src/app.js @@ -14,19 +14,59 @@ import MovieListView from 'views/movie_list_view'; let movieList = new MovieList(); let movieTemplate; -// let movieDetailTemplate; $(document).ready(function() { - + + let bus = {}; + bus = _.extend(bus, Backbone.Events); + movieList.fetch({ success: (model, response) => { - console.log(model, response); - } + console.log(response); + response.forEach((movie) => { + movieList.add(movie); + }); + }, + error: (model, reponse) => { + console.log(`This is the model: ${model}`); + console.log(`This is the response: ${reponse}`); + }, }) movieTemplate = _.template($('#movie-template').html()); - // movieDetailTemplate = _.template($('#movie-detail-template').html()); - $('#main-content').append('

Hello World!

'); + const movieListView = new MovieListView({ + el: '#main-content', + template: movieTemplate, + model: movieList, + bus: bus, + }); + + console.log(movieList.length); + + movieListView.render(); + +}); // DOCUMENT READY -}); +// RETURNS BACK +// +// attributes +// : +// external_id +// : +// null +// id +// : +// 196 +// image_url +// : +// "/psJb2NQKUWDQyhMRV3hoEWk60gS.jpg" +// overview +// : +// "The discovery of a severed human ear found in a field leads a young man on an investigation related to a beautiful, mysterious nightclub singer and a group of criminals who have kidnapped her child." +// release_date +// : +// "1986-08-01" +// title +// : +// "Blue Velvet" diff --git a/src/models/movie.js b/src/models/movie.js index b77d96948..1b0b42dde 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,7 +1,7 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - + }); export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 0f6bc63d4..37dd9a185 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -3,7 +3,27 @@ import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ initialize(params) { - } -}); + this.template = params.template; + this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); + }, + + render() { + this.$('#movie-list').empty(); + console.log(this.model.length); + this.model.each((movie) => { + const movieView = new MovieView({ + tagName: 'li', + template: this.template, + model: movie, + bus: this.bus, + }); + this.$('#movie-list').append(movieView.render().$el); + }); + + return this; + }, + +}); // MovieListView export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 16e7b1057..3fa99fbef 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -3,8 +3,14 @@ import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ initialize(params) { - - } + this.template = params.template; + this.bus = params.bus; + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, }); export default MovieView; From e2e908f94cd0c82d0358913e142ddb07027c6ac0 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Mon, 18 Dec 2017 16:01:34 -0800 Subject: [PATCH 06/40] Change foundation file --- dist/index.html | 16 +++++++++------- package-lock.json | 6 +++--- package.json | 2 +- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/dist/index.html b/dist/index.html index a3d9f85f7..e5be5febe 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,19 +9,21 @@

VIDEO STORE PLUS!

-
+
- - - - - - +
+
+ + + + +
+
- + + diff --git a/src/app.js b/src/app.js index f149cdeb5..f71e929d1 100644 --- a/src/app.js +++ b/src/app.js @@ -34,9 +34,10 @@ $(document).ready(function() { }) movieTemplate = _.template($('#movie-template').html()); + returnedMovieTemplate = _.template($('#returned-movie-template').html()); const movieListView = new MovieListView({ - el: '#main-content', + el: '#current-rentals-view', template: movieTemplate, model: movieList, bus: bus, @@ -61,26 +62,3 @@ $(document).ready(function() { // }); }); // DOCUMENT READY - -// RETURNS BACK -// -// attributes -// : -// external_id -// : -// null -// id -// : -// 196 -// image_url -// : -// "/psJb2NQKUWDQyhMRV3hoEWk60gS.jpg" -// overview -// : -// "The discovery of a severed human ear found in a field leads a young man on an investigation related to a beautiful, mysterious nightclub singer and a group of criminals who have kidnapped her child." -// release_date -// : -// "1986-08-01" -// title -// : -// "Blue Velvet" diff --git a/src/collections/movie_search.js b/src/collections/movie_search.js deleted file mode 100644 index 3ae937a8e..000000000 --- a/src/collections/movie_search.js +++ /dev/null @@ -1,9 +0,0 @@ -import Backbone from 'backbone'; -import Movie from '../models/movie'; - -const MovieSearch = Backbone.Collection.extend({ - model: Movie, - // url: `http://localhost:3000/movies?query=`, -}); - -export default MovieSearch; diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js new file mode 100644 index 000000000..df9c960cb --- /dev/null +++ b/src/collections/returned_movie_list.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import ReturnedMovie from '../models/returned_movie'; + +const returnedMovieList = Backbone.Collection.extend({ + model: ReturnedMovie, + // url: `http://localhost:3000/movies?query=`, +}); + +export default returnedMovieList; diff --git a/src/models/movie.js b/src/models/movie.js index 28d589bd5..2fa8cda0a 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -9,7 +9,6 @@ const Movie = Backbone.Model.extend({ title: response['title'], overview: response['overview'] } - //console.log(`the movie is ${movie.title}`); return movie }, }); diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js new file mode 100644 index 000000000..dc9cc62ab --- /dev/null +++ b/src/models/returned_movie.js @@ -0,0 +1,6 @@ +import Backbone from 'backbone'; + +const returnedMovie = Backbone.Model.extend({ +}); + +export default returnedMovie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 32403c220..631c37c40 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -3,7 +3,7 @@ import Movie from '../models/movie'; import MovieList from '../collections/movie_list'; import MovieView from '../views/movie_view'; import ReturnedMovieView from '../views/returned_movie_view'; -// import MovieSearch from '../collections/movie_search'; +// import returnedMovieList from '../collections/movie_search'; const MovieListView = Backbone.View.extend({ initialize(params) { @@ -18,9 +18,7 @@ const MovieListView = Backbone.View.extend({ render() { this.$('#movie-list').empty(); - // console.log(this.model.length); const lastMovie = this.model.at(this.model.length -1); - // console.log(lastMovie); const movieView = new MovieView({ tagName: 'li', template: this.template, @@ -39,8 +37,8 @@ const MovieListView = Backbone.View.extend({ this.$('#movie-list').empty(); const movieTitle = this.getFormData(); - const movieSearch = new Movie({title: movieTitle}) - const results = movieSearch.fetch({ + const returnedMovieList = new Movie({title: movieTitle}) + const results = returnedMovieList.fetch({ success: (model, response) => { response.forEach((movieData) => { const newMovie = new Movie(movieData); diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js new file mode 100644 index 000000000..5d72c5079 --- /dev/null +++ b/src/views/returned_movie_list_view.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; +import ReturnedMovieView from '../views/returned_movie_view'; + +const ReturnedMovieListView = Backbone.View.extend({ +}); + +export default ReturnedMovieListView; diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 56a7270da..8386c578b 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -1,8 +1,8 @@ import Backbone from 'backbone'; -import Movie from '../models/movie'; +import ReturnedMovie from '../models/returned_movie'; const ReturnedMovieView = Backbone.View.extend({ - model: Movie, + model: ReturnedMovie, }); export default ReturnedMovieView; From edcb485d8685e2401f5f9fa1310a6e95c3cf85f5 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Tue, 19 Dec 2017 14:33:37 -0800 Subject: [PATCH 14/40] Added search function to the returned movie list views --- src/app.js | 34 +++++++++--------- src/collections/returned_movie_list.js | 3 +- src/models/movie.js | 11 +----- src/models/returned_movie.js | 10 ++++++ src/views/movie_list_view.js | 48 ------------------------- src/views/returned_movie_list_view.js | 49 +++++++++++++++++++++++++- src/views/returned_movie_view.js | 11 ++++++ 7 files changed, 87 insertions(+), 79 deletions(-) diff --git a/src/app.js b/src/app.js index f71e929d1..86dfe4823 100644 --- a/src/app.js +++ b/src/app.js @@ -6,14 +6,23 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; +// Models and Collection import Movie from 'models/movie'; +import ReturnedMovie from 'models/returned_movie'; import MovieList from 'collections/movie_list'; +import ReturnedMovieList from 'collections/returned_movie_list'; + +// Views import MovieView from 'views/movie_view'; import MovieListView from 'views/movie_list_view'; +import ReturnedMovieView from 'views/returned_movie_view'; // TODO: Do I need this? +import ReturnedMovieListView from 'views/returned_movie_list_view'; -let movieList = new MovieList(); +const movieList = new MovieList(); +const returnedList = new ReturnedMovieList(); let movieTemplate; +let returnedMovieTemplate; $(document).ready(function() { @@ -43,22 +52,11 @@ $(document).ready(function() { bus: bus, }); - // const returnedMovieView = new ReturnedMovieView({ - // el: 'li', - // template: - // }); - - //console.log(movieList.length); - - // movieListView.render(); - - // $('#search-form button').on('click', function () { - // let query = $('#search-form input').val(); - // let url = movieListView.search(query); - // - // movieList.set('url', url); - // result = movieList.fetch(); - // // console.log(`the result is ${result}`); - // }); + const returnedMovieListView = new ReturnedMovieListView({ + el: '#returned-movies-view', + template: returnedMovieTemplate, + model: returnedMovieTemplate, + bus: bus, + }); }); // DOCUMENT READY diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js index df9c960cb..df41fd625 100644 --- a/src/collections/returned_movie_list.js +++ b/src/collections/returned_movie_list.js @@ -2,8 +2,7 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; const returnedMovieList = Backbone.Collection.extend({ - model: ReturnedMovie, - // url: `http://localhost:3000/movies?query=`, + }); export default returnedMovieList; diff --git a/src/models/movie.js b/src/models/movie.js index 2fa8cda0a..810768768 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,9 +1,7 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - url: function() { - return 'http://localhost:3000/movies/?query=' + this.get('title'); - }, + // TODO: DO I need this parse function? parse: function(response){ let movie = { title: response['title'], @@ -14,10 +12,3 @@ const Movie = Backbone.Model.extend({ }); export default Movie; - -// singleTrip.fetch({ -// success: (model, response) => { -// console.log('Model: ' + singleTrip.parse(model)); -// console.log('Response: ' + response); -// showTrip(model); -// }, diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index dc9cc62ab..fb656b187 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,6 +1,16 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ + url: function() { + return 'http://localhost:3000/movies/?query=' + this.get('title'); + }, + parse: function(response){ + let movie = { + title: response['title'], + overview: response['overview'] + } + return movie + }, }); export default returnedMovie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 631c37c40..d28cc2e55 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -12,10 +12,6 @@ const MovieListView = Backbone.View.extend({ this.listenTo(this.model, 'update', this.render); }, - events: { - 'click form .btn-search': 'searchMovies', - }, - render() { this.$('#movie-list').empty(); const lastMovie = this.model.at(this.model.length -1); @@ -30,50 +26,6 @@ const MovieListView = Backbone.View.extend({ return this; }, - - searchMovies(event) { - event.preventDefault(); - // console.log('This is the searchMovies function'); - this.$('#movie-list').empty(); - - const movieTitle = this.getFormData(); - const returnedMovieList = new Movie({title: movieTitle}) - const results = returnedMovieList.fetch({ - success: (model, response) => { - response.forEach((movieData) => { - const newMovie = new Movie(movieData); - // TODO: This needs to be a ReturnedMovieView - const movieView = new MovieView({ - tagName: 'li', - template: this.template, - model: newMovie, - bus: this.bus, - }); - this.$('#matching-movies').append(movieView.render().$el); - }); - }, - error: (model, response) => { - console.log(`This is the model: ${model} in the movie list view`); - console.log(`This is the response: ${reponse} in the movie list view`); - } - }); - }, - - getFormData() { - const data = {}; - data['title'] = this.$('form input[name=title]').val(); - return data; - }, - - // TODO: ADD CLEARFORM DATA FUNCTION }); // MovieListView - // - // - // clearFormData() { - // this.$('form input[name=price-target]').val(''); - // this.$('form-errors').empty(); - // }, - - export default MovieListView; diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 5d72c5079..f6f1ea3c8 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -1,7 +1,54 @@ import Backbone from 'backbone'; +import ReturnedMovie from '../models/returned_movie'; import ReturnedMovieView from '../views/returned_movie_view'; const ReturnedMovieListView = Backbone.View.extend({ -}); + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + events: { + 'click form .btn-search': 'matchingMovies', + }, + + matchingMovies(event) { + console.log('why the eff is this not working') + event.preventDefault(); + + const movieTitle = this.getFormData(); + + const searchedMovie = new ReturnedMovie({title: movieTitle}) + const results = searchedMovie.fetch({ + success: (model, response) => { + response.forEach((movieData) => { + let newMovie = new ReturnedMovie(movieData); + + let returnedMovieView = new ReturnedMovieView({ + tagName: 'li', + template: this.template, + model: newMovie, + bus: this.bus, + }); + this.$('#matching-movies').append(returnedMovieView.render().$el); + }); + }, + error: (model, response) => { + console.log(`This is the model: ${model} in the movie list view`); + console.log(`This is the response: ${reponse} in the movie list view`); + } + }); + }, + getFormData() { + const data = {}; + data['title'] = this.$('form input[name=title]').val(); + return data; + }, + // TODO: implement this + clearFormData() { + this.$('form input[name=price-target]').val(''); + this.$('form-errors').empty(); + }, + +}); // ReturnedMovieListView export default ReturnedMovieListView; diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 8386c578b..3d49fe11e 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -2,7 +2,18 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; const ReturnedMovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + model: ReturnedMovie, + + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, }); export default ReturnedMovieView; From 4fa805fe82c068d73cf5e2f19d67ef4715c4b7d0 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Tue, 19 Dec 2017 15:01:10 -0800 Subject: [PATCH 15/40] Fix url call to api for the matchingMovies method --- src/app.js | 2 +- src/collections/returned_movie_list.js | 12 +++++++++++- src/models/returned_movie.js | 11 +---------- src/views/returned_movie_list_view.js | 11 +++++++---- src/views/returned_movie_view.js | 5 +++-- 5 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/app.js b/src/app.js index 86dfe4823..8c995fa9d 100644 --- a/src/app.js +++ b/src/app.js @@ -55,7 +55,7 @@ $(document).ready(function() { const returnedMovieListView = new ReturnedMovieListView({ el: '#returned-movies-view', template: returnedMovieTemplate, - model: returnedMovieTemplate, + model: returnedList, bus: bus, }); diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js index df41fd625..6e01cb522 100644 --- a/src/collections/returned_movie_list.js +++ b/src/collections/returned_movie_list.js @@ -2,7 +2,17 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; const returnedMovieList = Backbone.Collection.extend({ - + model: ReturnedMovie, + url: 'http://localhost:3000/movies/?query=', + parse: function(response) { + let movie = { + title: response['title'], + overview: response['overview'] + } + return movie + }, }); + + export default returnedMovieList; diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index fb656b187..29356df5a 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,16 +1,7 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ - url: function() { - return 'http://localhost:3000/movies/?query=' + this.get('title'); - }, - parse: function(response){ - let movie = { - title: response['title'], - overview: response['overview'] - } - return movie - }, + }); export default returnedMovie; diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index f6f1ea3c8..bbf17b74b 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -12,13 +12,15 @@ const ReturnedMovieListView = Backbone.View.extend({ }, matchingMovies(event) { - console.log('why the eff is this not working') + // console.log('why the eff is this not working') event.preventDefault(); const movieTitle = this.getFormData(); - - const searchedMovie = new ReturnedMovie({title: movieTitle}) - const results = searchedMovie.fetch({ + // console.log('This is the movie title: ' + movieTitle.title); + // console.log(this.model.url); + this.model.url += movieTitle.title; + // console.log(url); + const results = this.model.fetch({ success: (model, response) => { response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); @@ -37,6 +39,7 @@ const ReturnedMovieListView = Backbone.View.extend({ console.log(`This is the response: ${reponse} in the movie list view`); } }); + this.model.url = 'http://localhost:3000/movies/?query='; }, getFormData() { const data = {}; diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 3d49fe11e..754d32c26 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -2,14 +2,15 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; const ReturnedMovieView = Backbone.View.extend({ + model: ReturnedMovie, + initialize(params) { this.template = params.template; this.bus = params.bus; }, - model: ReturnedMovie, - render() { + console.log(this.model); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; From eab4625449cd3ecf73552f438e7ff974f3786ade Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Tue, 19 Dec 2017 15:24:08 -0800 Subject: [PATCH 16/40] adding button to search results --- dist/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/dist/index.html b/dist/index.html index 65399daad..41090de6f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -57,6 +57,7 @@

<%- title %>

<%- release_date %>

<%- image_url %>

<%- overview %>

+

From ae915283f70a7b75a78a3d6f334acc9777719cc0 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Tue, 19 Dec 2017 15:47:43 -0800 Subject: [PATCH 17/40] adding feature to add movies to collection --- src/app.js | 1 + src/views/returned_movie_list_view.js | 10 ++++++++++ src/views/returned_movie_view.js | 8 ++++++++ 3 files changed, 19 insertions(+) diff --git a/src/app.js b/src/app.js index 8c995fa9d..83c1ddbde 100644 --- a/src/app.js +++ b/src/app.js @@ -59,4 +59,5 @@ $(document).ready(function() { bus: bus, }); + }); // DOCUMENT READY diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index bbf17b74b..91e49b90c 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -6,11 +6,20 @@ const ReturnedMovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + this.listenTo(this.bus, 'addMovie', this.addInventory); }, events: { 'click form .btn-search': 'matchingMovies', + 'click .btn-add': 'addMovie' }, + addMovie(attributes){ + //console.log(this.model.length); + //console.log(`attributes are ${attributes}`); + this.model.add(attributes); + this.render(); + //console.log(`the model is ${this.model.length}`); + }, matchingMovies(event) { // console.log('why the eff is this not working') event.preventDefault(); @@ -41,6 +50,7 @@ const ReturnedMovieListView = Backbone.View.extend({ }); this.model.url = 'http://localhost:3000/movies/?query='; }, + getFormData() { const data = {}; data['title'] = this.$('form input[name=title]').val(); diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 754d32c26..c790498f0 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -15,6 +15,14 @@ const ReturnedMovieView = Backbone.View.extend({ this.$el.html(compiledTemplate); return this; }, + addMovie(event){ + event.preventDefault; + let data = this.model.attributes; + data['bus'] = this.bus; + const newRecord = new Movie(data); + console.log(this.bus); + this.bus.trigger('addMovie', newRecord.attributes); + }, }); export default ReturnedMovieView; From 54cbacf08468b650928a290ada8fdffd53e0fa38 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Tue, 19 Dec 2017 15:51:21 -0800 Subject: [PATCH 18/40] adding console logging message: --- src/views/returned_movie_list_view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 91e49b90c..64ae5f0a8 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -13,10 +13,11 @@ const ReturnedMovieListView = Backbone.View.extend({ 'click .btn-add': 'addMovie' }, addMovie(attributes){ - //console.log(this.model.length); + //console.log(this); //console.log(`attributes are ${attributes}`); this.model.add(attributes); this.render(); + console.log('movie has been added to inventory'); //console.log(`the model is ${this.model.length}`); }, From 16ed1151387caa3bac924860f90bf15d66946e70 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Tue, 19 Dec 2017 19:41:02 -0800 Subject: [PATCH 19/40] so you can see --- src/models/movie.js | 4 ++- src/models/returned_movie.js | 5 +++- src/views/movie_list_view.js | 2 ++ src/views/returned_movie_list_view.js | 35 +++++++++++++++++++++------ src/views/returned_movie_view.js | 8 ------ 5 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/models/movie.js b/src/models/movie.js index 810768768..9fa757b20 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,7 +1,9 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - // TODO: DO I need this parse function? + initialize(attributes){ + url: 'http://localhost:3000/movies' + }, parse: function(response){ let movie = { title: response['title'], diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index 29356df5a..dafb84fde 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,7 +1,10 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ - + url: 'http://localhost:3000/movies/', + parse: function(response){ + return response.responseJSON; + }, }); export default returnedMovie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index d28cc2e55..f0fe9b981 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -10,6 +10,7 @@ const MovieListView = Backbone.View.extend({ this.template = params.template; this.bus = params.bus; this.listenTo(this.model, 'update', this.render); + //this.listenTo(this.bus, 'addMovie', this.addMovie); }, render() { @@ -26,6 +27,7 @@ const MovieListView = Backbone.View.extend({ return this; }, + }); // MovieListView export default MovieListView; diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 64ae5f0a8..44675d255 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -1,25 +1,44 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; import ReturnedMovieView from '../views/returned_movie_view'; +import Movie from '../models/movie'; const ReturnedMovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - this.listenTo(this.bus, 'addMovie', this.addInventory); + this.listenTo(this.bus, 'addMovie', this.addMovie); + }, events: { 'click form .btn-search': 'matchingMovies', 'click .btn-add': 'addMovie' }, - addMovie(attributes){ - //console.log(this); - //console.log(`attributes are ${attributes}`); - this.model.add(attributes); - this.render(); - console.log('movie has been added to inventory'); - //console.log(`the model is ${this.model.length}`); + addMovie(event){ + console.log('in add movie method'); + console.log(this.model); + const attributes = { + title: 'test movie', + release_date: '1972-10-09', + image_url: 'https://image.tmdb.org/t/p/w185/eruhq6kmjV7wopA7GjNDHrmAl89.jpg', + overview: 'A tomboyish girl disguises herself as a young man so she can fight with the Imperial Chinese Army against the invading Huns. With help from wise-cracking dragon Mushu, Mulan just might save her country -- and win the heart of handsome Captain Li Shang.' + } + const testMovie = new ReturnedMovie(attributes); + console.log(testMovie.url); + testMovie.save({}, { + success: (model, response) => { + console.log('save worked'); + }, + error: (model, response) => { + console.log('save failed'); + console.log(model); + console.log(response); + } + }); + /*console.log(this.model.models); + const newMovie = new Movie(this.model.models[0]); + console.log(`The new movie is ${newMovie.title}`);*/ }, matchingMovies(event) { // console.log('why the eff is this not working') diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index c790498f0..754d32c26 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -15,14 +15,6 @@ const ReturnedMovieView = Backbone.View.extend({ this.$el.html(compiledTemplate); return this; }, - addMovie(event){ - event.preventDefault; - let data = this.model.attributes; - data['bus'] = this.bus; - const newRecord = new Movie(data); - console.log(this.bus); - this.bus.trigger('addMovie', newRecord.attributes); - }, }); export default ReturnedMovieView; From 76e44c64e6c1ddac8fcd92bc0d02e92de2f7c690 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Tue, 19 Dec 2017 23:57:18 -0800 Subject: [PATCH 20/40] finishing movie save and add feature --- src/models/returned_movie.js | 5 ++++- src/views/movie_list_view.js | 13 ++++++++++-- src/views/returned_movie_list_view.js | 29 ++++++++++----------------- src/views/returned_movie_view.js | 7 +++++++ 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index dafb84fde..1833190db 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,7 +1,10 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ - url: 'http://localhost:3000/movies/', + initalize(bus){ + this.bus = bus; + }, + urlRoot: 'http://localhost:3000/movies', parse: function(response){ return response.responseJSON; }, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index f0fe9b981..b555839d4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -10,9 +10,18 @@ const MovieListView = Backbone.View.extend({ this.template = params.template; this.bus = params.bus; this.listenTo(this.model, 'update', this.render); - //this.listenTo(this.bus, 'addMovie', this.addMovie); + this.listenTo(this.bus, 'addToCollection', this.addToCollection); + }, + addToCollection(movie){ + console.log(`The movie in the view method is ${movie}`); + const movieView = new MovieView({ + tagName: 'li', + template: this.template, + model: movie, + bus: this.bus + }); + this.$('#movies-in-store').append(movieView.render().$el); }, - render() { this.$('#movie-list').empty(); const lastMovie = this.model.at(this.model.length -1); diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 44675d255..d5c4cea96 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -2,33 +2,28 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; import ReturnedMovieView from '../views/returned_movie_view'; import Movie from '../models/movie'; +import $ from 'jquery'; const ReturnedMovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; this.listenTo(this.bus, 'addMovie', this.addMovie); - }, events: { - 'click form .btn-search': 'matchingMovies', - 'click .btn-add': 'addMovie' + 'click form .btn-search': 'matchingMovies' }, - addMovie(event){ + addMovie(movie){ console.log('in add movie method'); - console.log(this.model); - const attributes = { - title: 'test movie', - release_date: '1972-10-09', - image_url: 'https://image.tmdb.org/t/p/w185/eruhq6kmjV7wopA7GjNDHrmAl89.jpg', - overview: 'A tomboyish girl disguises herself as a young man so she can fight with the Imperial Chinese Army against the invading Huns. With help from wise-cracking dragon Mushu, Mulan just might save her country -- and win the heart of handsome Captain Li Shang.' - } - const testMovie = new ReturnedMovie(attributes); - console.log(testMovie.url); + console.log(movie); + + const newMovie = new ReturnedMovie(movie); + console.log(newMovie); - testMovie.save({}, { + newMovie.save({}, { success: (model, response) => { console.log('save worked'); + this.bus.trigger('addToCollection', newMovie); }, error: (model, response) => { console.log('save failed'); @@ -36,9 +31,6 @@ const ReturnedMovieListView = Backbone.View.extend({ console.log(response); } }); - /*console.log(this.model.models); - const newMovie = new Movie(this.model.models[0]); - console.log(`The new movie is ${newMovie.title}`);*/ }, matchingMovies(event) { // console.log('why the eff is this not working') @@ -53,14 +45,15 @@ const ReturnedMovieListView = Backbone.View.extend({ success: (model, response) => { response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); - let returnedMovieView = new ReturnedMovieView({ tagName: 'li', template: this.template, model: newMovie, bus: this.bus, }); + this.$('#matching-movies').append(returnedMovieView.render().$el); + }); }, error: (model, response) => { diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 754d32c26..77939688e 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -2,6 +2,13 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; const ReturnedMovieView = Backbone.View.extend({ + tagName: 'button', + events: { + 'click': 'sendMovieData' + }, + sendMovieData: function(){ + this.bus.trigger('addMovie', this.model.attributes); + }, model: ReturnedMovie, initialize(params) { From 8807db2562c4b5b5acb2b37d24668cf3b8fc5c4a Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 00:57:23 -0800 Subject: [PATCH 21/40] adding search bar --- dist/index.html | 31 ++++++++++++++++++------------- src/app.js | 17 ++++++++++++++--- src/views/movie_list_view.js | 1 + src/views/returned_movie_view.js | 2 ++ 4 files changed, 35 insertions(+), 16 deletions(-) diff --git a/dist/index.html b/dist/index.html index 41090de6f..ebacd969f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,6 +9,24 @@

VIDEO STORE PLUS!

+
+ + + +
+

Search for movies on the web!

+
    + +
+
+
@@ -26,20 +44,7 @@

Available Movies for Checkout!

-
- - -
-
    - -
-
-
diff --git a/src/app.js b/src/app.js index 83c1ddbde..191ecd91a 100644 --- a/src/app.js +++ b/src/app.js @@ -28,8 +28,10 @@ $(document).ready(function() { let bus = {}; bus = _.extend(bus, Backbone.Events); - + movieTemplate = _.template($('#movie-template').html()); + returnedMovieTemplate = _.template($('#returned-movie-template').html()); // Fetches all movies currently in the rental store + $('#imdb-section').hide(); movieList.fetch({ success: (model, response) => { response.forEach((movie) => { @@ -42,8 +44,7 @@ $(document).ready(function() { }, }) - movieTemplate = _.template($('#movie-template').html()); - returnedMovieTemplate = _.template($('#returned-movie-template').html()); + const movieListView = new MovieListView({ el: '#current-rentals-view', @@ -59,5 +60,15 @@ $(document).ready(function() { bus: bus, }); + $('input[type=radio][name=searchLocation]').change(function(){ + console.log(this.value); + if (this.value === 'imdb'){ + $('#imdb-section').show(); + $('#current-rentals-view').hide(); + } else { + $('#imdb-section').hide(); + $('#current-rentals-view').show(); + } + }); }); // DOCUMENT READY diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index b555839d4..f27036b22 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -3,6 +3,7 @@ import Movie from '../models/movie'; import MovieList from '../collections/movie_list'; import MovieView from '../views/movie_view'; import ReturnedMovieView from '../views/returned_movie_view'; +import $ from 'jquery'; // import returnedMovieList from '../collections/movie_search'; const MovieListView = Backbone.View.extend({ diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 77939688e..5fd5d02be 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -1,5 +1,6 @@ import Backbone from 'backbone'; import ReturnedMovie from '../models/returned_movie'; +import $ from 'jquery'; const ReturnedMovieView = Backbone.View.extend({ tagName: 'button', @@ -20,6 +21,7 @@ const ReturnedMovieView = Backbone.View.extend({ console.log(this.model); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); + console.log($('#current-rentals-view').html()); return this; }, }); From 2535d4b3fed2a5afcee457190c2b75d811e32cf4 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 01:28:56 -0800 Subject: [PATCH 22/40] validations: --- spec/models/movie_spec.js | 33 +++++++++++++++++++++++++++++++++ src/models/movie.js | 26 +++++++++++++++++++++++++- src/models/returned_movie.js | 27 +++++++++++++++++++++++++-- 3 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 spec/models/movie_spec.js diff --git a/spec/models/movie_spec.js b/spec/models/movie_spec.js new file mode 100644 index 000000000..a10a5fb99 --- /dev/null +++ b/spec/models/movie_spec.js @@ -0,0 +1,33 @@ +import Movie from 'models/movie'; + +describe('Quote spec', () => { + let movie; + beforeEach(() => { + movie = new movie({ + title: 'Test Movie', + release_date: '1998-10-10', + overview: 'some overview text here', + image_url: 'https://image.tmdb.org/t/p/w185/eruhq6kmjV7wopA7GjNDHrmAl89.jpg' + }); + }); + + describe('Buy function', () => { + it('increases the price by $1.00', () => { + const startPrice = quote.get('price'); + + quote.buy(); + + expect(quote.get('price')).toEqual(startPrice + 1.00); + }); + }); + + describe('Sell function', () => { + it('decreases the price by $1.00', () => { + const startPrice = quote.get('price'); + + quote.sell(); + + expect(quote.get('price')).toEqual(startPrice - 1.00); + }); + }); +}); diff --git a/src/models/movie.js b/src/models/movie.js index 9fa757b20..6282881cd 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -2,7 +2,12 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ initialize(attributes){ - url: 'http://localhost:3000/movies' + this.title = attributes.title, + this.overview = attributes.overview, + this.release_date = attributes.release_date, + this.image_url = attributes.image_url, + this.bus = attributes.bus, + this.url = 'http://localhost:3000/movies' }, parse: function(response){ let movie = { @@ -11,6 +16,25 @@ const Movie = Backbone.Model.extend({ } return movie }, + validate(attributes){ + const errors = {} + + if (!attributes.title){ + errors['title'] = 'The title can not be blank'; + } + + if (!attributes.overview){ + errors['title'] = 'The overview can not be blank'; + } + + if (!attributes.release_date){ + errors['title'] = 'The release date can not be blank'; + } + + if (!attributes.image_url){ + errors['title'] = 'The image url can not be blank'; + } + }, }); export default Movie; diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index 1833190db..0ff542308 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,13 +1,36 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ - initalize(bus){ - this.bus = bus; + initalize(attributes){ + this.bus = attributes.bus; + this.title = attributes.title, + this.overview = attributes.overview, + this.release_date = attributes.release_date, + this.image_url = attributes.image_url }, urlRoot: 'http://localhost:3000/movies', parse: function(response){ return response.responseJSON; }, + validate(attributes){ + const errors = {} + + if (!attributes.title){ + errors['title'] = 'The title can not be blank'; + } + + if (!attributes.overview){ + errors['title'] = 'The overview can not be blank'; + } + + if (!attributes.release_date){ + errors['title'] = 'The release date can not be blank'; + } + + if (!attributes.image_url){ + errors['title'] = 'The image url can not be blank'; + } + }, }); export default returnedMovie; From 77ae9129ccee9229793dc56f0236cc6b76b20ece Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 01:33:11 -0800 Subject: [PATCH 23/40] adding images --- dist/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index ebacd969f..9a335171b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -60,7 +60,7 @@

<%- title %>

From 24b4b763be3621acbd85316d7c9336713804e3fa Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 09:46:38 -0800 Subject: [PATCH 24/40] clearing section before adding new results --- src/views/returned_movie_list_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index d5c4cea96..73b5f8e53 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -35,7 +35,7 @@ const ReturnedMovieListView = Backbone.View.extend({ matchingMovies(event) { // console.log('why the eff is this not working') event.preventDefault(); - + this.$('#matching-movies').empty(); const movieTitle = this.getFormData(); // console.log('This is the movie title: ' + movieTitle.title); // console.log(this.model.url); From f92bdd4e96a82f963d5e7cc3a88a558fb79a8654 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 09:54:42 -0800 Subject: [PATCH 25/40] fixing search button display --- src/app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app.js b/src/app.js index 191ecd91a..9fb326d9f 100644 --- a/src/app.js +++ b/src/app.js @@ -64,9 +64,11 @@ $(document).ready(function() { console.log(this.value); if (this.value === 'imdb'){ $('#imdb-section').show(); + $('#search').show(); $('#current-rentals-view').hide(); } else { $('#imdb-section').hide(); + $('#search').hide(); $('#current-rentals-view').show(); } }); From 87776b0d63def8ebf3768228c828f4cfff8833cb Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 10:14:04 -0800 Subject: [PATCH 26/40] Add styling to header --- dist/index.html | 6 ++++-- src/css/styles.css | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9a335171b..9553558bc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,8 +5,10 @@ Backbone Baseline -
-

VIDEO STORE PLUS!

+
+
+

Video Store Plus

+
diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..f9ef193e4 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,6 +1,34 @@ @include foundation-everything; +@import url('https://fonts.googleapis.com/css?family=Secular+One'); -main { +/*********** ALL STYLES ***********/ + +h1, h2 { + font-family: 'Secular One', sans-serif; +} +/*********** HEADER ***********/ + +.main-header { + text-align: center; + background-color: #232f3e; + color: white; + padding: 10px; + /* height: 15vh; */ +} + +.main-h1-wrapper { + border: 2px white solid; +} + +.main-h1-wrapper h1 { + margin: 0; +} + + +/*********** MAIN ***********/ + + +/* main { background: lightblue; } @@ -36,7 +64,7 @@ aside label { div { display: inline; -} +} */ /* * { border-style: solid; From 90d8bb5638293ddb31cb4ba0a9b959ac5dc27064 Mon Sep 17 00:00:00 2001 From: VirtualLindsey Date: Wed, 20 Dec 2017 10:28:05 -0800 Subject: [PATCH 27/40] adding model.isValid() checks --- src/views/movie_list_view.js | 16 +++++----- src/views/returned_movie_list_view.js | 43 ++++++++++++++------------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index f27036b22..5296bf829 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -15,13 +15,15 @@ const MovieListView = Backbone.View.extend({ }, addToCollection(movie){ console.log(`The movie in the view method is ${movie}`); - const movieView = new MovieView({ - tagName: 'li', - template: this.template, - model: movie, - bus: this.bus - }); - this.$('#movies-in-store').append(movieView.render().$el); + if (movie.isValid()){ + const movieView = new MovieView({ + tagName: 'li', + template: this.template, + model: movie, + bus: this.bus + }); + this.$('#movies-in-store').append(movieView.render().$el); + } }, render() { this.$('#movie-list').empty(); diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 73b5f8e53..9cca95a14 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -19,18 +19,19 @@ const ReturnedMovieListView = Backbone.View.extend({ const newMovie = new ReturnedMovie(movie); console.log(newMovie); - - newMovie.save({}, { - success: (model, response) => { - console.log('save worked'); - this.bus.trigger('addToCollection', newMovie); - }, - error: (model, response) => { - console.log('save failed'); - console.log(model); - console.log(response); - } - }); + if (newMovie.isValid()){ + newMovie.save({}, { + success: (model, response) => { + console.log('save worked'); + this.bus.trigger('addToCollection', newMovie); + }, + error: (model, response) => { + console.log('save failed'); + console.log(model); + console.log(response); + } + }); + } }, matchingMovies(event) { // console.log('why the eff is this not working') @@ -45,15 +46,15 @@ const ReturnedMovieListView = Backbone.View.extend({ success: (model, response) => { response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); - let returnedMovieView = new ReturnedMovieView({ - tagName: 'li', - template: this.template, - model: newMovie, - bus: this.bus, - }); - - this.$('#matching-movies').append(returnedMovieView.render().$el); - + if (newMovie.isValid()){ + let returnedMovieView = new ReturnedMovieView({ + tagName: 'li', + template: this.template, + model: newMovie, + bus: this.bus, + }); + this.$('#matching-movies').append(returnedMovieView.render().$el); + } }); }, error: (model, response) => { From e39e5d66d1fdce3850156a9cb74513361063b1b8 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 10:53:18 -0800 Subject: [PATCH 28/40] Fix show images on load for current movies --- dist/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/dist/index.html b/dist/index.html index 9553558bc..c81295117 100644 --- a/dist/index.html +++ b/dist/index.html @@ -53,6 +53,7 @@

Available Movies for Checkout!

diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 649eabf0a..1c444ce72 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -16,7 +16,7 @@ const MovieListView = Backbone.View.extend({ addToCollection(movie){ console.log(`The movie in the view method is ${movie}`); const movieView = new MovieView({ - tagName: 'li', + tagName: 'tr', template: this.template, model: movie, bus: this.bus diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 73b5f8e53..e83709cf8 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -14,15 +14,15 @@ const ReturnedMovieListView = Backbone.View.extend({ 'click form .btn-search': 'matchingMovies' }, addMovie(movie){ - console.log('in add movie method'); - console.log(movie); + // console.log('in add movie method'); + // console.log(movie); const newMovie = new ReturnedMovie(movie); - console.log(newMovie); + // console.log(newMovie); newMovie.save({}, { success: (model, response) => { - console.log('save worked'); + // console.log('save worked'); this.bus.trigger('addToCollection', newMovie); }, error: (model, response) => { @@ -46,7 +46,7 @@ const ReturnedMovieListView = Backbone.View.extend({ response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); let returnedMovieView = new ReturnedMovieView({ - tagName: 'li', + tagName: 'tr', template: this.template, model: newMovie, bus: this.bus, From 6d664bce0e873e11af041f2b65d307755ad201dd Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 11:17:44 -0800 Subject: [PATCH 31/40] Add meta tag --- dist/index.html | 60 +++++++++++----------------------------------- src/css/styles.css | 6 +++-- 2 files changed, 18 insertions(+), 48 deletions(-) diff --git a/dist/index.html b/dist/index.html index e2ec9c029..801ea6c68 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,15 +3,21 @@ Backbone Baseline + +

Video Store Plus

+
+
+

Search for movies on the web!

+
- -
-

Search for movies on the web!

+
@@ -32,26 +36,19 @@

Search for movies on the web!

- + +
Movie Add Movie to Store
-
-
-

Available Movies for Checkout!

+
+

Available Movies for Checkout!

- - @@ -59,13 +56,13 @@

Available Movies for Checkout!

- + +
Movie Overview
-
@@ -99,38 +96,9 @@

Available Movies for Checkout!

- - - - + diff --git a/src/css/styles.css b/src/css/styles.css index f9ef193e4..2e85fe362 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -3,7 +3,7 @@ /*********** ALL STYLES ***********/ -h1, h2 { +h1, h2, h3, h4 { font-family: 'Secular One', sans-serif; } /*********** HEADER ***********/ @@ -24,8 +24,10 @@ h1, h2 { margin: 0; } +/******* MAIN SECTION HEADERS *******/ + + -/*********** MAIN ***********/ /* main { From 819de7ef976f53764c0d45e9b87f3a6f807f0472 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 12:43:41 -0800 Subject: [PATCH 32/40] Fix styling --- dist/index.html | 59 ++++++++++++++++++++++++++-------------------- src/app.js | 13 ++++------ src/css/styles.css | 38 +++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 35 deletions(-) diff --git a/dist/index.html b/dist/index.html index 801ea6c68..adc1ac819 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,27 +13,32 @@

Video Store Plus

+
+
+ + +
-
-

Search for movies on the web!

+
+

Search for Movies to Add

-
+
- - - - - + + + + + @@ -41,19 +46,19 @@

Search for movies on the web!

MovieRelease DateOverviewAdd Movie to Store
MovieRelease DateOverviewAdd
-
+
-
-

Available Movies for Checkout!

+
+

Available Movies for Checkout

- - - - + + + + @@ -62,18 +67,17 @@

Available Movies for Checkout!

MovieRelease DateOverview
MovieRelease DateOverview
-
+ + diff --git a/src/app.js b/src/app.js index 9fb326d9f..19de472f7 100644 --- a/src/app.js +++ b/src/app.js @@ -31,7 +31,7 @@ $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); returnedMovieTemplate = _.template($('#returned-movie-template').html()); // Fetches all movies currently in the rental store - $('#imdb-section').hide(); + $('#imdb-section, #search-btn').hide(); movieList.fetch({ success: (model, response) => { response.forEach((movie) => { @@ -44,8 +44,6 @@ $(document).ready(function() { }, }) - - const movieListView = new MovieListView({ el: '#current-rentals-view', template: movieTemplate, @@ -61,14 +59,13 @@ $(document).ready(function() { }); $('input[type=radio][name=searchLocation]').change(function(){ - console.log(this.value); if (this.value === 'imdb'){ - $('#imdb-section').show(); - $('#search').show(); + $('#imdb-section, #search-btn').show(); + // $('#search').show(); $('#current-rentals-view').hide(); } else { - $('#imdb-section').hide(); - $('#search').hide(); + $('#imdb-section, #search-btn').hide(); + // $('#search').hide(); $('#current-rentals-view').show(); } }); diff --git a/src/css/styles.css b/src/css/styles.css index 2e85fe362..9e164d35f 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,23 +1,48 @@ @include foundation-everything; @import url('https://fonts.googleapis.com/css?family=Secular+One'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); /*********** ALL STYLES ***********/ h1, h2, h3, h4 { font-family: 'Secular One', sans-serif; } + +body { + font-family: 'Open Sans', sans-serif; + font-size: 12px; +} + +.align-center { + text-align: center; +} + +.aqua-bg { + background-color: #ABEBC6; + /* color: #E8E8E8; */ +} + +.button { + background-color: #ABEBC6; + color: #232f3e; +} + +td .overflow-auto { + overflow: scroll; + height: 200px; +} /*********** HEADER ***********/ .main-header { text-align: center; background-color: #232f3e; - color: white; + color: #E8E8E8; padding: 10px; /* height: 15vh; */ } .main-h1-wrapper { - border: 2px white solid; + /* border: 2px white solid; */ } .main-h1-wrapper h1 { @@ -26,8 +51,17 @@ h1, h2, h3, h4 { /******* MAIN SECTION HEADERS *******/ +.section-header { + border: 1px #B8B8B8 solid; + border-radius: 5px; + margin: 20px 0 20px 0; +} +.section-header h4 { + padding: 10px; + margin: 0; +} /* main { From 99377258979a941416038ce9d5bfc24aee63c115 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 12:53:41 -0800 Subject: [PATCH 33/40] Fix styling on radio buttons and header --- dist/index.html | 10 ++++------ src/css/styles.css | 6 ++---- src/views/returned_movie_list_view.js | 2 +- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/dist/index.html b/dist/index.html index adc1ac819..6a1de49cc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,8 +16,6 @@

Video Store Plus

- -
@@ -26,14 +24,14 @@

Search for Movies to Add

- +
@@ -54,7 +52,7 @@

Search for Movies to Add

Available Movies for Checkout

-
Movie Release Date
+
diff --git a/src/css/styles.css b/src/css/styles.css index 9e164d35f..40e9a8366 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -19,7 +19,6 @@ body { .aqua-bg { background-color: #ABEBC6; - /* color: #E8E8E8; */ } .button { @@ -29,7 +28,7 @@ body { td .overflow-auto { overflow: scroll; - height: 200px; + height: 220px; } /*********** HEADER ***********/ @@ -38,11 +37,10 @@ td .overflow-auto { background-color: #232f3e; color: #E8E8E8; padding: 10px; - /* height: 15vh; */ } .main-h1-wrapper { - /* border: 2px white solid; */ + border: 2px #ABEBC6 solid; } .main-h1-wrapper h1 { diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 7ebb19239..aedb17264 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -11,7 +11,7 @@ const ReturnedMovieListView = Backbone.View.extend({ this.listenTo(this.bus, 'addMovie', this.addMovie); }, events: { - 'click form .btn-search': 'matchingMovies' + 'click form #search-btn': 'matchingMovies' }, addMovie(movie){ // console.log('in add movie method'); From 450a375976de81ef2f771b543173e014a6575561 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 13:27:00 -0800 Subject: [PATCH 34/40] Switch to other branch that is not master --- dist/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/dist/index.html b/dist/index.html index 6a1de49cc..45d1395ea 100644 --- a/dist/index.html +++ b/dist/index.html @@ -31,6 +31,9 @@

Search for Movies to Add

+
+

Movies that Match your Search

+
Movie Release Date
From 754bb0db0f303912529ea740894a6299df0bbc40 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 13:42:15 -0800 Subject: [PATCH 35/40] Fix comments, clean up code --- src/app.js | 10 +++++----- src/collections/returned_movie_list.js | 14 +++++++------- src/css/styles.css | 1 + src/models/returned_movie.js | 6 ++---- src/views/movie_list_view.js | 23 +++++++++++------------ src/views/returned_movie_list_view.js | 24 ++++++++++++------------ src/views/returned_movie_view.js | 16 ++++++---------- 7 files changed, 44 insertions(+), 50 deletions(-) diff --git a/src/app.js b/src/app.js index 19de472f7..201e08c18 100644 --- a/src/app.js +++ b/src/app.js @@ -24,14 +24,17 @@ const returnedList = new ReturnedMovieList(); let movieTemplate; let returnedMovieTemplate; -$(document).ready(function() { +$(document).ready(function() { let bus = {}; bus = _.extend(bus, Backbone.Events); + movieTemplate = _.template($('#movie-template').html()); returnedMovieTemplate = _.template($('#returned-movie-template').html()); - // Fetches all movies currently in the rental store + $('#imdb-section, #search-btn').hide(); + + // Fetches all movies currently in the rental store movieList.fetch({ success: (model, response) => { response.forEach((movie) => { @@ -61,13 +64,10 @@ $(document).ready(function() { $('input[type=radio][name=searchLocation]').change(function(){ if (this.value === 'imdb'){ $('#imdb-section, #search-btn').show(); - // $('#search').show(); $('#current-rentals-view').hide(); } else { $('#imdb-section, #search-btn').hide(); - // $('#search').hide(); $('#current-rentals-view').show(); } }); - }); // DOCUMENT READY diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js index 6e01cb522..f2e953562 100644 --- a/src/collections/returned_movie_list.js +++ b/src/collections/returned_movie_list.js @@ -4,13 +4,13 @@ import ReturnedMovie from '../models/returned_movie'; const returnedMovieList = Backbone.Collection.extend({ model: ReturnedMovie, url: 'http://localhost:3000/movies/?query=', - parse: function(response) { - let movie = { - title: response['title'], - overview: response['overview'] - } - return movie - }, + // parse: function(response) { + // let movie = { + // title: response['title'], + // overview: response['overview'] + // } + // return movie + // }, }); diff --git a/src/css/styles.css b/src/css/styles.css index 40e9a8366..9c2783cd3 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -24,6 +24,7 @@ body { .button { background-color: #ABEBC6; color: #232f3e; + border-radius: 5px; } td .overflow-auto { diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index 0ff542308..c91ef30de 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -1,6 +1,8 @@ import Backbone from 'backbone'; const returnedMovie = Backbone.Model.extend({ + urlRoot: 'http://localhost:3000/movies', + initalize(attributes){ this.bus = attributes.bus; this.title = attributes.title, @@ -8,10 +10,6 @@ const returnedMovie = Backbone.Model.extend({ this.release_date = attributes.release_date, this.image_url = attributes.image_url }, - urlRoot: 'http://localhost:3000/movies', - parse: function(response){ - return response.responseJSON; - }, validate(attributes){ const errors = {} diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e242a9db6..ef44bfd14 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,18 +13,6 @@ const MovieListView = Backbone.View.extend({ this.listenTo(this.model, 'update', this.render); this.listenTo(this.bus, 'addToCollection', this.addToCollection); }, - addToCollection(movie){ - console.log(`The movie in the view method is ${movie}`); - if (movie.isValid()){ - const movieView = new MovieView({ - tagName: 'tr', - template: this.template, - model: movie, - bus: this.bus - }); - this.$('#movies-in-store').append(movieView.render().$el); - } - }, render() { this.$('#movie-list').empty(); const lastMovie = this.model.at(this.model.length -1); @@ -39,6 +27,17 @@ const MovieListView = Backbone.View.extend({ return this; }, + addToCollection(movie) { + if (movie.isValid()) { + const movieView = new MovieView({ + tagName: 'tr', + template: this.template, + model: movie, + bus: this.bus + }); + this.$('#movies-in-store').append(movieView.render().$el); + } + }, }); // MovieListView diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index aedb17264..82a9b345e 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -13,16 +13,12 @@ const ReturnedMovieListView = Backbone.View.extend({ events: { 'click form #search-btn': 'matchingMovies' }, - addMovie(movie){ - // console.log('in add movie method'); - // console.log(movie); + addMovie(movie){ const newMovie = new ReturnedMovie(movie); - console.log(newMovie); if (newMovie.isValid()){ newMovie.save({}, { success: (model, response) => { - console.log('save worked'); this.bus.trigger('addToCollection', newMovie); }, error: (model, response) => { @@ -33,19 +29,22 @@ const ReturnedMovieListView = Backbone.View.extend({ }); } }, + matchingMovies(event) { - // console.log('why the eff is this not working') event.preventDefault(); this.$('#matching-movies').empty(); + const movieTitle = this.getFormData(); - // console.log('This is the movie title: ' + movieTitle.title); - // console.log(this.model.url); + this.clearFormData(); + + // Set URL this.model.url += movieTitle.title; - // console.log(url); + const results = this.model.fetch({ success: (model, response) => { response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); + if (newMovie.isValid()){ let returnedMovieView = new ReturnedMovieView({ tagName: 'tr', @@ -62,6 +61,7 @@ const ReturnedMovieListView = Backbone.View.extend({ console.log(`This is the response: ${reponse} in the movie list view`); } }); + // Reset URL this.model.url = 'http://localhost:3000/movies/?query='; }, @@ -70,10 +70,10 @@ const ReturnedMovieListView = Backbone.View.extend({ data['title'] = this.$('form input[name=title]').val(); return data; }, - // TODO: implement this + clearFormData() { - this.$('form input[name=price-target]').val(''); - this.$('form-errors').empty(); + this.$('form input[name=title]').val(''); + // this.$('form-errors').empty(); }, }); // ReturnedMovieListView diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index 5fd5d02be..d920d6313 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -3,27 +3,23 @@ import ReturnedMovie from '../models/returned_movie'; import $ from 'jquery'; const ReturnedMovieView = Backbone.View.extend({ - tagName: 'button', - events: { - 'click': 'sendMovieData' - }, - sendMovieData: function(){ - this.bus.trigger('addMovie', this.model.attributes); - }, model: ReturnedMovie, initialize(params) { this.template = params.template; this.bus = params.bus; }, - + events: { + 'click': 'sendMovieData' + }, render() { - console.log(this.model); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); - console.log($('#current-rentals-view').html()); return this; }, + sendMovieData: function(){ + this.bus.trigger('addMovie', this.model.attributes); + }, }); export default ReturnedMovieView; From c84b4174c64bc7d81d6d2c908a7adfa8c9caf5d5 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 14:01:55 -0800 Subject: [PATCH 36/40] Removed creation of a ReturnedMovie --- dist/index.html | 9 ++++--- src/models/movie.js | 27 +++++++++---------- src/views/movie_list_view.js | 38 ++++++++++++++++++++++----- src/views/returned_movie_list_view.js | 35 ++++++++++++------------ src/views/returned_movie_view.js | 3 ++- 5 files changed, 71 insertions(+), 41 deletions(-) diff --git a/dist/index.html b/dist/index.html index 45d1395ea..3fdcf4669 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,14 +13,14 @@

Video Store Plus

-
-
-

Search for Movies to Add

+
+
+ @@ -55,6 +55,9 @@

Movies that Match your Search

Available Movies for Checkout

+
+
+
Movie
diff --git a/src/models/movie.js b/src/models/movie.js index 6282881cd..f02a63b7b 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -9,30 +9,29 @@ const Movie = Backbone.Model.extend({ this.bus = attributes.bus, this.url = 'http://localhost:3000/movies' }, - parse: function(response){ - let movie = { - title: response['title'], - overview: response['overview'] - } - return movie - }, validate(attributes){ const errors = {} - if (!attributes.title){ + if (!attributes.title) { errors['title'] = 'The title can not be blank'; } - if (!attributes.overview){ - errors['title'] = 'The overview can not be blank'; + if (!attributes.overview) { + errors['overview'] = 'The overview can not be blank'; + } + + if (!attributes.release_date) { + errors['release_date'] = 'The release date can not be blank'; } - if (!attributes.release_date){ - errors['title'] = 'The release date can not be blank'; + if (!attributes.image_url) { + errors['image_url'] = 'The image url can not be blank'; } - if (!attributes.image_url){ - errors['title'] = 'The image url can not be blank'; + if ( Object.keys(errors).length > 0 ) { + return errors; + } else { + return false; } }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index ef44bfd14..1c371e6d4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,18 +4,21 @@ import MovieList from '../collections/movie_list'; import MovieView from '../views/movie_view'; import ReturnedMovieView from '../views/returned_movie_view'; import $ from 'jquery'; -// import returnedMovieList from '../collections/movie_search'; const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; this.listenTo(this.model, 'update', this.render); - this.listenTo(this.bus, 'addToCollection', this.addToCollection); + this.listenTo(this.bus, 'addMovie', this.addToCollection); + + // this.listenTo(this.bus, 'addToCollection', this.addToCollection); }, render() { this.$('#movie-list').empty(); + const lastMovie = this.model.at(this.model.length -1); + const movieView = new MovieView({ tagName: 'tr', template: this.template, @@ -27,18 +30,41 @@ const MovieListView = Backbone.View.extend({ return this; }, - addToCollection(movie) { - if (movie.isValid()) { + addToCollection(attributes) { + const newMovie = new Movie(attributes); + if (newMovie.isValid()) { const movieView = new MovieView({ tagName: 'tr', template: this.template, - model: movie, + model: newMovie, bus: this.bus }); this.$('#movies-in-store').append(movieView.render().$el); + } else { + let errors = movie.validationError + Object.keys(errors).forEach((key) => { + this.$('#returned-movies-errors').append(`

${errors[key]}

`); + }); } }, - }); // MovieListView + // addToCollection(movie) { + // if (movie.isValid()) { + // const movieView = new MovieView({ + // tagName: 'tr', + // template: this.template, + // model: movie, + // bus: this.bus + // }); + // this.$('#movies-in-store').append(movieView.render().$el); + // } else { + // let errors = movie.validationError + // Object.keys(errors).forEach((key) => { + // this.$('#returned-movies-errors').append(`

${errors[key]}

`); + // }); + // } + // }, + + export default MovieListView; diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 82a9b345e..f9264eb68 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -8,27 +8,28 @@ const ReturnedMovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - this.listenTo(this.bus, 'addMovie', this.addMovie); + + // this.listenTo(this.bus, 'addMovie', this.addMovie); }, events: { 'click form #search-btn': 'matchingMovies' }, - addMovie(movie){ - const newMovie = new ReturnedMovie(movie); - if (newMovie.isValid()){ - newMovie.save({}, { - success: (model, response) => { - this.bus.trigger('addToCollection', newMovie); - }, - error: (model, response) => { - console.log('save failed'); - console.log(model); - console.log(response); - } - }); - } - }, + // addMovie(movie){ + // const newMovie = new ReturnedMovie(movie); + // if (newMovie.isValid()) { + // newMovie.save({}, { + // success: (model, response) => { + // this.bus.trigger('addToCollection', newMovie); + // }, + // error: (model, response) => { + // console.log('save failed'); + // console.log(model); + // console.log(response); + // } + // }); + // } + // }, matchingMovies(event) { event.preventDefault(); @@ -44,7 +45,7 @@ const ReturnedMovieListView = Backbone.View.extend({ success: (model, response) => { response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); - + if (newMovie.isValid()){ let returnedMovieView = new ReturnedMovieView({ tagName: 'tr', diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index d920d6313..a4093a07d 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -10,13 +10,14 @@ const ReturnedMovieView = Backbone.View.extend({ this.bus = params.bus; }, events: { - 'click': 'sendMovieData' + 'click .btn-add': 'sendMovieData' }, render() { const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; }, + // Triggers the function in Movie List View sendMovieData: function(){ this.bus.trigger('addMovie', this.model.attributes); }, From 4badf8ddd70148495a3ed9787fd06cf3a28733c1 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 14:33:14 -0800 Subject: [PATCH 37/40] Movie persists in returned collection --- src/collections/returned_movie_list.js | 7 ------ src/views/returned_movie_list_view.js | 35 ++++++++++++-------------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js index f2e953562..703b84808 100644 --- a/src/collections/returned_movie_list.js +++ b/src/collections/returned_movie_list.js @@ -4,13 +4,6 @@ import ReturnedMovie from '../models/returned_movie'; const returnedMovieList = Backbone.Collection.extend({ model: ReturnedMovie, url: 'http://localhost:3000/movies/?query=', - // parse: function(response) { - // let movie = { - // title: response['title'], - // overview: response['overview'] - // } - // return movie - // }, }); diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index f9264eb68..7a66b50ff 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -8,29 +8,26 @@ const ReturnedMovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - - // this.listenTo(this.bus, 'addMovie', this.addMovie); + this.listenTo(this.bus, 'addMovie', this.addMovie); }, events: { 'click form #search-btn': 'matchingMovies' }, - - // addMovie(movie){ - // const newMovie = new ReturnedMovie(movie); - // if (newMovie.isValid()) { - // newMovie.save({}, { - // success: (model, response) => { - // this.bus.trigger('addToCollection', newMovie); - // }, - // error: (model, response) => { - // console.log('save failed'); - // console.log(model); - // console.log(response); - // } - // }); - // } - // }, - + addMovie(movie){ + const newMovie = new ReturnedMovie(movie); + if (newMovie.isValid()) { + newMovie.save({}, { + success: (model, response) => { + this.bus.trigger('addToCollection', newMovie); + }, + error: (model, response) => { + console.log('save failed'); + console.log(model); + console.log(response); + } + }); + } + }, matchingMovies(event) { event.preventDefault(); this.$('#matching-movies').empty(); From 8efec6875fdc643430b1569fdfd953870214f26d Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 15:13:09 -0800 Subject: [PATCH 38/40] Clean up functions --- src/collections/returned_movie_list.js | 2 -- src/models/returned_movie.js | 6 +++++ src/views/movie_list_view.js | 34 ++++++++------------------ src/views/returned_movie_list_view.js | 11 +++------ src/views/returned_movie_view.js | 2 +- 5 files changed, 20 insertions(+), 35 deletions(-) diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js index 703b84808..afda3eb7a 100644 --- a/src/collections/returned_movie_list.js +++ b/src/collections/returned_movie_list.js @@ -6,6 +6,4 @@ const returnedMovieList = Backbone.Collection.extend({ url: 'http://localhost:3000/movies/?query=', }); - - export default returnedMovieList; diff --git a/src/models/returned_movie.js b/src/models/returned_movie.js index c91ef30de..29f2a643f 100644 --- a/src/models/returned_movie.js +++ b/src/models/returned_movie.js @@ -28,6 +28,12 @@ const returnedMovie = Backbone.Model.extend({ if (!attributes.image_url){ errors['title'] = 'The image url can not be blank'; } + + if ( Object.keys(errors).length > 0 ) { + return errors; + } else { + return false; + } }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 1c371e6d4..05274f03c 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -18,7 +18,6 @@ const MovieListView = Backbone.View.extend({ this.$('#movie-list').empty(); const lastMovie = this.model.at(this.model.length -1); - const movieView = new MovieView({ tagName: 'tr', template: this.template, @@ -27,7 +26,6 @@ const MovieListView = Backbone.View.extend({ }); this.$('#movies-in-store').append(movieView.render().$el); - return this; }, addToCollection(attributes) { @@ -39,32 +37,20 @@ const MovieListView = Backbone.View.extend({ model: newMovie, bus: this.bus }); - this.$('#movies-in-store').append(movieView.render().$el); + this.$('#movies-in-store').prepend(movieView.render().$el); } else { - let errors = movie.validationError - Object.keys(errors).forEach((key) => { - this.$('#returned-movies-errors').append(`

${errors[key]}

`); - }); + this.displayOrderErrors(this.validationError); } }, -}); // MovieListView + displayOrderErrors(errors) { + const $errorDisplay = this.$('#available-movies-errors'); + $errorDisplay.empty(); - // addToCollection(movie) { - // if (movie.isValid()) { - // const movieView = new MovieView({ - // tagName: 'tr', - // template: this.template, - // model: movie, - // bus: this.bus - // }); - // this.$('#movies-in-store').append(movieView.render().$el); - // } else { - // let errors = movie.validationError - // Object.keys(errors).forEach((key) => { - // this.$('#returned-movies-errors').append(`

${errors[key]}

`); - // }); - // } - // }, + Object.keys(errors).forEach((key) => { + $errorDisplay.append(`

${errors[key]}

`); + }); + }, +}); // MovieListView export default MovieListView; diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 7a66b50ff..9397045cc 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -21,9 +21,7 @@ const ReturnedMovieListView = Backbone.View.extend({ this.bus.trigger('addToCollection', newMovie); }, error: (model, response) => { - console.log('save failed'); - console.log(model); - console.log(response); + this.$('#returned-movies-errors').append('

There was something wrong with your request!

') } }); } @@ -43,7 +41,7 @@ const ReturnedMovieListView = Backbone.View.extend({ response.forEach((movieData) => { let newMovie = new ReturnedMovie(movieData); - if (newMovie.isValid()){ + if (newMovie.isValid()) { let returnedMovieView = new ReturnedMovieView({ tagName: 'tr', template: this.template, @@ -55,8 +53,7 @@ const ReturnedMovieListView = Backbone.View.extend({ }); }, error: (model, response) => { - console.log(`This is the model: ${model} in the movie list view`); - console.log(`This is the response: ${reponse} in the movie list view`); + this.$('#returned-movies-errors').append('

There was something wrong with your request!

') } }); // Reset URL @@ -71,9 +68,7 @@ const ReturnedMovieListView = Backbone.View.extend({ clearFormData() { this.$('form input[name=title]').val(''); - // this.$('form-errors').empty(); }, - }); // ReturnedMovieListView export default ReturnedMovieListView; diff --git a/src/views/returned_movie_view.js b/src/views/returned_movie_view.js index a4093a07d..a93a75261 100644 --- a/src/views/returned_movie_view.js +++ b/src/views/returned_movie_view.js @@ -4,7 +4,7 @@ import $ from 'jquery'; const ReturnedMovieView = Backbone.View.extend({ model: ReturnedMovie, - + initialize(params) { this.template = params.template; this.bus = params.bus; From d6cedd877c4737ed8fbca18ed015f50a2c1fdb17 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 15:19:59 -0800 Subject: [PATCH 39/40] Add notification to user if a movie is added --- dist/index.html | 3 ++- src/views/returned_movie_list_view.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 3fdcf4669..a25ff93eb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -28,6 +28,8 @@

Search for Movies to Add


+
+
@@ -66,7 +68,6 @@

Available Movies for Checkout

 -
Movie
diff --git a/src/views/returned_movie_list_view.js b/src/views/returned_movie_list_view.js index 9397045cc..d7fc0a45c 100644 --- a/src/views/returned_movie_list_view.js +++ b/src/views/returned_movie_list_view.js @@ -18,6 +18,7 @@ const ReturnedMovieListView = Backbone.View.extend({ if (newMovie.isValid()) { newMovie.save({}, { success: (model, response) => { + this.$('#success-movie-add').append(`

Added ${newMovie.get('title')} to Your Rentals!

`); this.bus.trigger('addToCollection', newMovie); }, error: (model, response) => { From 89c39509a2ead05067356575270a5354e036b9f2 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 20 Dec 2017 15:53:41 -0800 Subject: [PATCH 40/40] Add comment in app.js --- src/app.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app.js b/src/app.js index 201e08c18..c1d8ee279 100644 --- a/src/app.js +++ b/src/app.js @@ -61,6 +61,9 @@ $(document).ready(function() { bus: bus, }); + // TODO: Event if the button to search is not showing, it is still possible to + // Search for a movie if you press center + // Need to figure out how to prevent this from happening $('input[type=radio][name=searchLocation]').change(function(){ if (this.value === 'imdb'){ $('#imdb-section, #search-btn').show();