From 4fea996d7ab5a23f88358fdbae918058e330d74d Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 13 Jun 2017 15:31:36 -0700 Subject: [PATCH 01/23] created model and collection for movies --- src/collections/movie_list.js | 20 ++++++++++++++++++++ src/models/movie.js | 10 ++++++++++ 2 files changed, 30 insertions(+) create mode 100644 src/collections/movie_list.js create mode 100644 src/models/movie.js diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..715eb4c71 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; + +import Movie from 'app/models/movie'; + +var MovieList = Backbone.Collection.extend({ + model: Movie, + url: "http://localhost:3000/movies", + parse: function(data) { + return data; + }, + nonEmptyNames: function() { + var filtered = this.filter(function(movie) { + var name = movie.get("name"); + return name !== "" && name !== undefined && name !== null; + }); + return new MovieList(filtered); + } +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..65b12ad9e --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,10 @@ + +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + initialize: function(params) { + + } +}); + +export default Movie; From 20e1608ad2bee0badf2702566390ae7bf23f8678 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 13 Jun 2017 15:44:34 -0700 Subject: [PATCH 02/23] movie_list_view for movie list --- build/index.html | 41 +++++++++++------ src/views/movie_list_view.js | 87 ++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 13 deletions(-) create mode 100644 src/views/movie_list_view.js diff --git a/build/index.html b/build/index.html index 03869595f..e4f9cb6f1 100644 --- a/build/index.html +++ b/build/index.html @@ -1,15 +1,30 @@ - - - - - - Backbone Baseline - - - - - - - + + + + + + Backbone Baseline + + + +
+

Movies!

+
+
+
+
+
+
+ + + + + + + + + diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..2268453a2 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,87 @@ +import Backbone from 'backbone'; + +import MovieView from './movie_view'; + +var MovieListView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + this.detailsTemplate = params.detailsTemplate; + this.newMovieTemplate = params.newMovieTemplate; + // this.$('#movie').hide(); + // + // this.listenTo(this.model, "update", this.render); + // + // var that = this; + // this.model.fetch(); + // + }, + // events: { + // "click .alert": "deleteMovie", + // "click #saveMovie": "saveMovie", + // "click #updateButton": 'updateMovie' + // }, + // updateMovie: function() { + // let checked = this.$('input[title="vaccinated"]').is(":checked"); + // this.detailsMovie.set("vaccinated", checked); + // this.detailsMovie.save(); + // + // this.$("#movie").hide(); + // }, + getMovieForm: function() { + var formTitle = this.$('#movieTitle').val(); + this.$('#movieTitle').val(''); + + // var formBreed = this.$('#movieBreed').val(); + // this.$('#movieBreed').val(''); + // + // var formAge = this.$('#movieAge').val(); + // this.$('#movieAge').val(''); + + // var formChecked = this.$('#newMovieVaccinated').is(":checked"); + + return { + title: formTitle, + // age: formAge, + // breed: formBreed, + // vaccinated: formChecked + }; + }, + // saveMovie: function(e) { + // e.preventDefault(); + // this.model.create(this.getMovieForm()); + // }, + // deleteMovie: function() { + // if (this.detailsMovie) { + // this.detailsMovie.destroy(); + // this.$('#movie').hide(); + // this.detailsMovie = undefined; + // } + // }, + render: function() { + this.$('#movie-list').empty(); + var that = this; + this.model.nonEmptyTitles().each((movie) => { + var movieView = new MovieView({ + model: movie, + template: that.template + }); + this.$('#movie-list').append(movieView.render().$el); + // this.listenTo(movieView, "selected", this.showDetails); + }); + + if (that.$('#new-movie').is(':empty')) { + console.log("empty"); + that.$('#new-movie').empty(); + that.$('#new-movie').html(that.newMovieTemplate({})); + } + return this; + }, + // showDetails: function(model) { + // this.detailsMovie = model; + // var compiledTemplate = this.detailsTemplate({movie: model.toJSON()}); + // this.$('#movie').html(compiledTemplate); + // this.$('#movie').show(); + // } +}); + +export default MovieListView; From 78f7d973f6380fd0b2f3337a374f424070146eb1 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 13 Jun 2017 17:02:23 -0700 Subject: [PATCH 03/23] fixed error, list doesn't show --- build/index.html | 12 ++--- src/app.js | 18 ++++++-- src/collections/movie_list.js | 24 +++++----- src/views/movie_list_view.js | 86 ++++++----------------------------- src/views/movie_view.js | 24 ++++++++++ 5 files changed, 68 insertions(+), 96 deletions(-) create mode 100644 src/views/movie_view.js diff --git a/build/index.html b/build/index.html index e4f9cb6f1..bf0012cfa 100644 --- a/build/index.html +++ b/build/index.html @@ -14,15 +14,15 @@

Movies!

-
+
+
+
- - - + diff --git a/src/app.js b/src/app.js index 58b77997c..6e5b4caf0 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,20 @@ -// /src/app.js - -// Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; -// ready to go +import MovieList from 'collections/movie_list'; +import MovieListView from 'views/movie_list_view'; + $(document).ready(function() { - $('section.main-content').append('

Hello World!

'); + var movieList = new MovieList(); + movieList.fetch(); + + var movieListViewParams = { + el: $('main'), + model: movieList + }; + + var myMovieListView = new MovieListView(movieListViewParams); + // myMovieListView.render(); //Don't want the render to happen until there's an update event triggered by the return of the API call. Taken care of by backbone(using AJAX), which adds the results of the API call to the collection. Then handled by an event listener on the pet_list_view to listen for updates to the collection, and call render at that time. }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 715eb4c71..fdb9bd722 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -1,20 +1,20 @@ import Backbone from 'backbone'; -import Movie from 'app/models/movie'; +import Movie from 'models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: "http://localhost:3000/movies", - parse: function(data) { - return data; - }, - nonEmptyNames: function() { - var filtered = this.filter(function(movie) { - var name = movie.get("name"); - return name !== "" && name !== undefined && name !== null; - }); - return new MovieList(filtered); - } + url: "http://localhost:3000/movies" + // parse: function(data) { + // return data; + // }, + // nonEmptyNames: function() { + // var filtered = this.filter(function(movie) { + // var title = movie.get("title"); + // return title !== "" && title !== undefined && title !== null; + // }); + // return new MovieList(filtered); + // } }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 2268453a2..ab2425700 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,87 +1,27 @@ +import $ from 'jquery'; +import _ from 'underscore'; import Backbone from 'backbone'; - import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ initialize: function(params) { - this.template = params.template; - this.detailsTemplate = params.detailsTemplate; - this.newMovieTemplate = params.newMovieTemplate; - // this.$('#movie').hide(); - // - // this.listenTo(this.model, "update", this.render); - // - // var that = this; - // this.model.fetch(); - // - }, - // events: { - // "click .alert": "deleteMovie", - // "click #saveMovie": "saveMovie", - // "click #updateButton": 'updateMovie' - // }, - // updateMovie: function() { - // let checked = this.$('input[title="vaccinated"]').is(":checked"); - // this.detailsMovie.set("vaccinated", checked); - // this.detailsMovie.save(); - // - // this.$("#movie").hide(); - // }, - getMovieForm: function() { - var formTitle = this.$('#movieTitle').val(); - this.$('#movieTitle').val(''); - - // var formBreed = this.$('#movieBreed').val(); - // this.$('#movieBreed').val(''); - // - // var formAge = this.$('#movieAge').val(); - // this.$('#movieAge').val(''); - - // var formChecked = this.$('#newMovieVaccinated').is(":checked"); + var self = this; - return { - title: formTitle, - // age: formAge, - // breed: formBreed, - // vaccinated: formChecked - }; + this.templateList = _.template($('#movie-card-template').html()); + this.movieViewList = []; }, - // saveMovie: function(e) { - // e.preventDefault(); - // this.model.create(this.getMovieForm()); - // }, - // deleteMovie: function() { - // if (this.detailsMovie) { - // this.detailsMovie.destroy(); - // this.$('#movie').hide(); - // this.detailsMovie = undefined; - // } - // }, + render: function() { - this.$('#movie-list').empty(); - var that = this; - this.model.nonEmptyTitles().each((movie) => { - var movieView = new MovieView({ - model: movie, - template: that.template - }); - this.$('#movie-list').append(movieView.render().$el); - // this.listenTo(movieView, "selected", this.showDetails); + + var self = this; + self.$('.movie-cards').empty(); + this.movieViewList.forEach(function(movieView) { + MovieView.render(); + self.$('.movie-cards').append(movieView.$el); }); - if (that.$('#new-movie').is(':empty')) { - console.log("empty"); - that.$('#new-movie').empty(); - that.$('#new-movie').html(that.newMovieTemplate({})); - } return this; - }, - // showDetails: function(model) { - // this.detailsMovie = model; - // var compiledTemplate = this.detailsTemplate({movie: model.toJSON()}); - // this.$('#movie').html(compiledTemplate); - // this.$('#movie').show(); - // } + } }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..bafe83c9d --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,24 @@ +import Backbone from 'backbone'; + +var MovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + // this.listenTo(this.model, "search", this.render); + }, + // events: { + // "click": "searchMovie" + // }, + render: function() { + var compiledTemplate = this.template({movie: this.model.toJSON()}); + this.$el.html(compiledTemplate); + + // this.delegateEvents(); + return this; + } + // searchMovie: function(event) { + // this.trigger("selected", this.model); + // } + +}); + +export default MovieView; From 815f9854132415f0599605a11c9a2f9ee4c28a9e Mon Sep 17 00:00:00 2001 From: laura Date: Tue, 13 Jun 2017 18:35:21 -0700 Subject: [PATCH 04/23] List of movie's titles displayed --- .gitignore | 2 ++ src/app.js | 7 +++---- src/collections/movie_list.js | 12 +----------- src/views/movie_list_view.js | 37 +++++++++++++++++++++++------------ src/views/movie_view.js | 14 +++++-------- 5 files changed, 35 insertions(+), 37 deletions(-) diff --git a/.gitignore b/.gitignore index a360e4d75..1da5cb9f5 100644 --- a/.gitignore +++ b/.gitignore @@ -71,3 +71,5 @@ Icon Network Trash Folder Temporary Items .apdisk + +.env diff --git a/src/app.js b/src/app.js index 6e5b4caf0..2c5f9d793 100644 --- a/src/app.js +++ b/src/app.js @@ -1,8 +1,8 @@ import $ from 'jquery'; import _ from 'underscore'; -import MovieList from 'collections/movie_list'; -import MovieListView from 'views/movie_list_view'; +import MovieList from './collections/movie_list'; +import MovieListView from './views/movie_list_view'; $(document).ready(function() { @@ -15,6 +15,5 @@ $(document).ready(function() { }; var myMovieListView = new MovieListView(movieListViewParams); - // myMovieListView.render(); //Don't want the render to happen until there's an update event triggered by the return of the API call. Taken care of by backbone(using AJAX), which adds the results of the API call to the collection. Then handled by an event listener on the pet_list_view to listen for updates to the collection, and call render at that time. - + myMovieListView.render(); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index fdb9bd722..2e883b17b 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,17 +4,7 @@ import Movie from 'models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: "http://localhost:3000/movies" - // parse: function(data) { - // return data; - // }, - // nonEmptyNames: function() { - // var filtered = this.filter(function(movie) { - // var title = movie.get("title"); - // return title !== "" && title !== undefined && title !== null; - // }); - // return new MovieList(filtered); - // } + 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 ab2425700..771848c85 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,27 +1,38 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; + import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ initialize: function(params) { - var self = this; + this.movieTemplate = _.template($('#movie-card-template').html()); + this.movieList = []; - this.templateList = _.template($('#movie-card-template').html()); - this.movieViewList = []; - }, + this.model.forEach(function(rawMovie){ + this.addMovie(rawMovie); + }, this); - render: function() { + this.listenTo(this.model, 'add', this.addMovie); + this.listenTo(this.model, 'update', this.render); +}, - var self = this; - self.$('.movie-cards').empty(); - this.movieViewList.forEach(function(movieView) { - MovieView.render(); - self.$('.movie-cards').append(movieView.$el); - }); +render: function() { + $('#movie-list').empty(); + this.movieList.forEach(function(movie){ + movie.render(); + $('#movie-list').append(movie.$el); + }, this); + return this; +}, - return this; - } +addMovie: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.movieList.push(movie); +} }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index bafe83c9d..9cf7020c7 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,24 +1,20 @@ import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; var MovieView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; - // this.listenTo(this.model, "search", this.render); + this.listenTo(this.model, "change", this.render); }, - // events: { - // "click": "searchMovie" - // }, + render: function() { var compiledTemplate = this.template({movie: this.model.toJSON()}); this.$el.html(compiledTemplate); - // this.delegateEvents(); + this.delegateEvents(); return this; } - // searchMovie: function(event) { - // this.trigger("selected", this.model); - // } - }); export default MovieView; From dc0c0e8a49622475b5d299c8618e0bb601a4c829 Mon Sep 17 00:00:00 2001 From: laura Date: Wed, 14 Jun 2017 10:58:33 -0700 Subject: [PATCH 05/23] Added click events to add movies, claer fiels in form as well --- build/index.html | 21 +++++++++ src/views/movie_list_view.js | 88 +++++++++++++++++++++++++++--------- 2 files changed, 87 insertions(+), 22 deletions(-) diff --git a/build/index.html b/build/index.html index bf0012cfa..265603b67 100644 --- a/build/index.html +++ b/build/index.html @@ -13,6 +13,27 @@

Movies!

+
+ + + + + + + + + + + + + + + + + + + +
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 771848c85..d9516a05a 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -11,28 +11,72 @@ var MovieListView = Backbone.View.extend({ this.model.forEach(function(rawMovie){ this.addMovie(rawMovie); - }, this); - - this.listenTo(this.model, 'add', this.addMovie); - this.listenTo(this.model, 'update', this.render); -}, - -render: function() { - $('#movie-list').empty(); - this.movieList.forEach(function(movie){ - movie.render(); - $('#movie-list').append(movie.$el); - }, this); - return this; -}, - -addMovie: function(movie){ - var movie = new MovieView ({ - model: movie, - template: this.movieTemplate - }); - this.movieList.push(movie); -} + }); + + this.input = { + title: this.$('.new-movie-form input[name="title"]'), + overview: this.$('.new-movie-form input[name="overview"]'), + release_date: this.$('.new-movie-form input[name="release_date"]'), + image_url: this.$('.new-movie-form input[name="image_url"]'), + external_id: this.$('.new-movie-form input[name="external_id"]') + }; + + this.listenTo(this.model, 'add', this.addMovie); + this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + $('#movie-list').empty(); + this.movieList.forEach(function(movie){ + movie.render(); + $('#movie-list').append(movie.$el); + }); + return this; + }, + + events: { + 'click .add-movie': 'createMovie', + 'click .cancel-add-movie': 'clearInput', + 'click .movie-list': 'showList' + }, + + addMovie: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.movieList.push(movie); + }, + getInput: function() { + var movie = { + title: this.input.title.val(), + overview: this.input.overview.val(), + release_date: this.input.release_date.val(), + image_url: this.input.image_url.val(), + external_id: this.input.external_id.val() + }; + return movie; + }, + createMovie: function(event) { + event.preventDefault(); + + var rawMovie = this.getInput(); + console.log(rawMovie); + + this.model.create(rawMovie); + + alert("You have added a movie named: "+rawMovie.name); + this.clearInput(); + }, + + clearInput: function(event) { + console.log("clearInput called!"); + this.input.title.val(''); + this.input.overview.val(''); + this.input.release_date.val(''); + this.input.image_url.val(''); + this.input.external_id.val(''); + }, }); export default MovieListView; From bcf642a424fba065c85d53feae4d1f93c22c7e8f Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Wed, 14 Jun 2017 16:57:16 -0700 Subject: [PATCH 06/23] Revert "Added click events to add movies, claer fiels in form as well" This reverts commit dc0c0e8a49622475b5d299c8618e0bb601a4c829. --- build/index.html | 21 --------- src/views/movie_list_view.js | 88 +++++++++--------------------------- 2 files changed, 22 insertions(+), 87 deletions(-) diff --git a/build/index.html b/build/index.html index 265603b67..bf0012cfa 100644 --- a/build/index.html +++ b/build/index.html @@ -13,27 +13,6 @@

Movies!

-
- - - - - - - - - - - - - - - - - - - -
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index d9516a05a..771848c85 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -11,72 +11,28 @@ var MovieListView = Backbone.View.extend({ this.model.forEach(function(rawMovie){ this.addMovie(rawMovie); - }); - - this.input = { - title: this.$('.new-movie-form input[name="title"]'), - overview: this.$('.new-movie-form input[name="overview"]'), - release_date: this.$('.new-movie-form input[name="release_date"]'), - image_url: this.$('.new-movie-form input[name="image_url"]'), - external_id: this.$('.new-movie-form input[name="external_id"]') - }; - - this.listenTo(this.model, 'add', this.addMovie); - this.listenTo(this.model, 'update', this.render); - }, - - render: function() { - $('#movie-list').empty(); - this.movieList.forEach(function(movie){ - movie.render(); - $('#movie-list').append(movie.$el); - }); - return this; - }, - - events: { - 'click .add-movie': 'createMovie', - 'click .cancel-add-movie': 'clearInput', - 'click .movie-list': 'showList' - }, - - addMovie: function(movie){ - var movie = new MovieView ({ - model: movie, - template: this.movieTemplate - }); - this.movieList.push(movie); - }, - getInput: function() { - var movie = { - title: this.input.title.val(), - overview: this.input.overview.val(), - release_date: this.input.release_date.val(), - image_url: this.input.image_url.val(), - external_id: this.input.external_id.val() - }; - return movie; - }, - createMovie: function(event) { - event.preventDefault(); - - var rawMovie = this.getInput(); - console.log(rawMovie); - - this.model.create(rawMovie); - - alert("You have added a movie named: "+rawMovie.name); - this.clearInput(); - }, - - clearInput: function(event) { - console.log("clearInput called!"); - this.input.title.val(''); - this.input.overview.val(''); - this.input.release_date.val(''); - this.input.image_url.val(''); - this.input.external_id.val(''); - }, + }, this); + + this.listenTo(this.model, 'add', this.addMovie); + this.listenTo(this.model, 'update', this.render); +}, + +render: function() { + $('#movie-list').empty(); + this.movieList.forEach(function(movie){ + movie.render(); + $('#movie-list').append(movie.$el); + }, this); + return this; +}, + +addMovie: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.movieList.push(movie); +} }); export default MovieListView; From e1140bddc1ffd2356675560d247db1c0ee45d6b6 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Wed, 14 Jun 2017 17:00:52 -0700 Subject: [PATCH 07/23] search movie --- build/index.html | 8 ++++ src/app.js | 2 + src/collections/movie_list.js | 3 +- src/collections/search.js | 16 ++++++++ src/views/movie_list_view.js | 71 ++++++++++++++++++++++++----------- 5 files changed, 78 insertions(+), 22 deletions(-) create mode 100644 src/collections/search.js diff --git a/build/index.html b/build/index.html index bf0012cfa..248a513b0 100644 --- a/build/index.html +++ b/build/index.html @@ -13,6 +13,14 @@

Movies!

+
+
+ + +
+ + +
diff --git a/src/app.js b/src/app.js index 2c5f9d793..ae49aa974 100644 --- a/src/app.js +++ b/src/app.js @@ -4,6 +4,7 @@ import _ from 'underscore'; import MovieList from './collections/movie_list'; import MovieListView from './views/movie_list_view'; + $(document).ready(function() { var movieList = new MovieList(); @@ -16,4 +17,5 @@ $(document).ready(function() { var myMovieListView = new MovieListView(movieListViewParams); myMovieListView.render(); + //initializing a new view }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 2e883b17b..40416ad95 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,7 +4,8 @@ import Movie from 'models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies' + url: "http://localhost:3000/movies" + }); export default MovieList; diff --git a/src/collections/search.js b/src/collections/search.js new file mode 100644 index 000000000..3787e6efd --- /dev/null +++ b/src/collections/search.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; + +import Movie from 'models/movie'; + +var SearchMovie = Backbone.Collection.extend({ + model: Movie, + initialize: function(models, options) { + this.query = options.query; + }, + url: function() { + return "http://localhost:3000/movies" + "/" + this.query; + } +}); + + +export default SearchMovie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 771848c85..da84b278e 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; - +import SearchMovie from '../collections/search'; import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ @@ -13,26 +13,55 @@ var MovieListView = Backbone.View.extend({ this.addMovie(rawMovie); }, this); - this.listenTo(this.model, 'add', this.addMovie); - this.listenTo(this.model, 'update', this.render); -}, - -render: function() { - $('#movie-list').empty(); - this.movieList.forEach(function(movie){ - movie.render(); - $('#movie-list').append(movie.$el); - }, this); - return this; -}, - -addMovie: function(movie){ - var movie = new MovieView ({ - model: movie, - template: this.movieTemplate - }); - this.movieList.push(movie); -} + this.input = { + title: this.$('.search-movie-form input[name="title"]') + }; + + this.listenTo(this.model, 'add', this.addMovie); + this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + $('#movie-list').empty(); + this.movieList.forEach(function(movie){ + movie.render(); + $('#movie-list').append(movie.$el); + }, this); + return this; + }, + + addMovie: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.movieList.push(movie); + }, + + events: { + 'click .search-movie': 'searchMovie' + }, + + getInput: function() { + var movie = { + title: this.input.title.val() + }; + return movie; + }, + + searchMovie: function(movie) { + var _this = this; + var searchMovie = new SearchMovie([], {query:this.getInput()["title"]}); + searchMovie.fetch({ + success: function(collection, response, options){ + var movie = collection.shift(); + _this.addMovie(movie); + _this.render(); + // $('#movie-list').append(movie.$el); + } + }); + + } }); export default MovieListView; From e1012e42be2e7841b654d5f72897c5c2fe4a4173 Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 12:06:20 -0700 Subject: [PATCH 08/23] update files names and added 'rental' model and collection in order to add to the movie list --- build/index.html | 66 +++++++++++++++++++++++----------- src/app.js | 41 ++++++++++++++++++--- src/collections/movie_list.js | 2 +- src/collections/rental_list.js | 13 +++++++ src/collections/search.js | 16 --------- src/models/movie.js | 5 ++- src/models/rental.js | 16 +++++++++ src/views/movie_list_view.js | 37 ++++--------------- src/views/movie_view.js | 9 +++-- src/views/rental_list_view.js | 38 ++++++++++++++++++++ src/views/rental_view.js | 28 +++++++++++++++ 11 files changed, 190 insertions(+), 81 deletions(-) create mode 100644 src/collections/rental_list.js delete mode 100644 src/collections/search.js create mode 100644 src/models/rental.js create mode 100644 src/views/rental_list_view.js create mode 100644 src/views/rental_view.js diff --git a/build/index.html b/build/index.html index 248a513b0..a83528b9c 100644 --- a/build/index.html +++ b/build/index.html @@ -13,26 +13,52 @@

Movies!

-
-
- - -
- - -
-
-
-
-
-
-
- - - - + + +
+
    +
  • +
    • +
+
+
+
    +
  • +
    • +
+
+
+ + + + + + + + + diff --git a/src/app.js b/src/app.js index ae49aa974..f8e3a0f69 100644 --- a/src/app.js +++ b/src/app.js @@ -10,12 +10,43 @@ $(document).ready(function() { var movieList = new MovieList(); movieList.fetch(); - var movieListViewParams = { - el: $('main'), + var params = { + el: $('main'), model: movieList }; - var myMovieListView = new MovieListView(movieListViewParams); - myMovieListView.render(); - //initializing a new view + var application = new MovieListView(params); + application.render(); + + // var search = new MovieList(); + // search.fetch(); + // + // var searchViewParams = { + // el: $('main'), + // model: search + // }; + // + // var myMovieListView = new MovieListView(params); + // myMovieListView.render(); + // //initializing a new view + // + // $("form").submit(function(event) { + // event.preventDefault(); + // var search = new Search(); + // console.log($('#movieTitle').val()); + // if ($('#movieTitle').val() === ""){ + // alert("Please type a movie title") + // // console.log("Please type a movie title") + // } + // else{ + // search.fetch({data: {query: $('#movieTitle').val() }}); + // } + // + // var options = { + // el: $('#all-movie-list'), + // model: search + // }; + // var mlv = new SearchView(options); + // mlv.render(); + // }); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 40416ad95..914b0a045 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -1,6 +1,6 @@ import Backbone from 'backbone'; -import Movie from 'models/movie'; +import Movie from '../models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js new file mode 100644 index 000000000..9a36da2db --- /dev/null +++ b/src/collections/rental_list.js @@ -0,0 +1,13 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +import Rental from '../models/rental'; + + +var RentalList = Backbone.Collection.extend({ + model: Rental, + url: 'http://localhost:3000/movies?query=' +}); + +export default RentalList; diff --git a/src/collections/search.js b/src/collections/search.js deleted file mode 100644 index 3787e6efd..000000000 --- a/src/collections/search.js +++ /dev/null @@ -1,16 +0,0 @@ -import Backbone from 'backbone'; - -import Movie from 'models/movie'; - -var SearchMovie = Backbone.Collection.extend({ - model: Movie, - initialize: function(models, options) { - this.query = options.query; - }, - url: function() { - return "http://localhost:3000/movies" + "/" + this.query; - } -}); - - -export default SearchMovie; diff --git a/src/models/movie.js b/src/models/movie.js index 65b12ad9e..9854d39b5 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,9 +1,8 @@ - import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ - initialize: function(params) { - + initialize: function() { + console.log("Created new movie"); } }); diff --git a/src/models/rental.js b/src/models/rental.js new file mode 100644 index 000000000..d41ed5d00 --- /dev/null +++ b/src/models/rental.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; + +var Rental = Backbone.Model.extend({ + defaults :{ + title: " ", + overview: " ", + release_date: " ", + image_url: " " + }, + initialize: function() { + // this.query = params; + console.log("New rental to add"); + } +}); + +export default Rental; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index da84b278e..ef70579e7 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,24 +1,23 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; -import SearchMovie from '../collections/search'; + import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ + initialize: function(params) { - this.movieTemplate = _.template($('#movie-card-template').html()); + this.movieTemplate = _.template($('#movie-template').html()); this.movieList = []; this.model.forEach(function(rawMovie){ this.addMovie(rawMovie); }, this); - this.input = { - title: this.$('.search-movie-form input[name="title"]') - }; - this.listenTo(this.model, 'add', this.addMovie); this.listenTo(this.model, 'update', this.render); + + this.listenTo(Backbone.pubSub, 'addToMovie', this.createMovie); }, render: function() { @@ -35,32 +34,8 @@ var MovieListView = Backbone.View.extend({ model: movie, template: this.movieTemplate }); - this.movieList.push(movie); - }, - - events: { - 'click .search-movie': 'searchMovie' - }, - - getInput: function() { - var movie = { - title: this.input.title.val() - }; - return movie; - }, - - searchMovie: function(movie) { - var _this = this; - var searchMovie = new SearchMovie([], {query:this.getInput()["title"]}); - searchMovie.fetch({ - success: function(collection, response, options){ - var movie = collection.shift(); - _this.addMovie(movie); - _this.render(); - // $('#movie-list').append(movie.$el); - } - }); + this.movieList.push(movie); } }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 9cf7020c7..c4c8cf4d7 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,17 +1,16 @@ -import Backbone from 'backbone'; import $ from 'jquery'; import _ from 'underscore'; +import Backbone from 'backbone'; var MovieView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; - this.listenTo(this.model, "change", this.render); + this.listenTo(this.model, 'change', this.render); }, render: function() { - var compiledTemplate = this.template({movie: this.model.toJSON()}); - this.$el.html(compiledTemplate); - + var html = this.template({movie: this.model.attributes}); + this.$el.html(html); this.delegateEvents(); return this; } diff --git a/src/views/rental_list_view.js b/src/views/rental_list_view.js new file mode 100644 index 000000000..9e90a3707 --- /dev/null +++ b/src/views/rental_list_view.js @@ -0,0 +1,38 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +import RentalView from './rental_view'; + +var RentalListView = Backbone.View.extend({ + initialize: function(params) { + this.rentalTemplate = _.template($('#rental-template').html()); + this.rentalList = []; + + this.model.forEach(function(rawRental){ + this.addRental(rawRental); + }, this); + + this.listenTo(this.model, 'add', this.addRental); + this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + $('#rental-list').empty(); + this.rentalList.forEach(function(rental){ + rental.render(); + $('#rental-list').append(rental.$el); + }, this); + return this; + }, + + addRental: function(rental){ + var rental = new RentalView ({ + model: rental, + template: this.rentalTemplate + }); + this.rentalList.push(rental); + } +}); + +export default RentalListView; diff --git a/src/views/rental_view.js b/src/views/rental_view.js new file mode 100644 index 000000000..657d18745 --- /dev/null +++ b/src/views/rental_view.js @@ -0,0 +1,28 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; + +var RentalView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + }, + + events: { + 'click #add-button': 'rentalResult' + }, + + render: function() { + var html = this.template({rental: this.model.attributes}); + this.$el.html(html); + this.delegateEvents(); + return this; + }, + + // rentalResult: function(event) { + // console.log("AAAAAAAAA rentalResult:") + // Backbone.pubSub.trigger('addToInventory', this.model) + // } +}); + +export default RentalView; From 32523e346e00b29c73c3b90ccde4cc1e0871d806 Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 12:42:24 -0700 Subject: [PATCH 09/23] Added form for the search --- build/index.html | 93 ++++++++++++++++++++++++------------------------ src/app.js | 41 ++++++--------------- 2 files changed, 56 insertions(+), 78 deletions(-) diff --git a/build/index.html b/build/index.html index a83528b9c..8575e4c98 100644 --- a/build/index.html +++ b/build/index.html @@ -8,57 +8,56 @@ Backbone Baseline -

Movies!

- - -
-
    -
  • -
    • -
-
-
-
    -
  • -
    • -
-
-
- - - - - - - - - +
+
+ +
+ +
+ +
+
    +
  • +
    • +
+
+ + +
+ + + + + + + + + diff --git a/src/app.js b/src/app.js index f8e3a0f69..199e4ba01 100644 --- a/src/app.js +++ b/src/app.js @@ -18,35 +18,14 @@ $(document).ready(function() { var application = new MovieListView(params); application.render(); - // var search = new MovieList(); - // search.fetch(); - // - // var searchViewParams = { - // el: $('main'), - // model: search - // }; - // - // var myMovieListView = new MovieListView(params); - // myMovieListView.render(); - // //initializing a new view - // - // $("form").submit(function(event) { - // event.preventDefault(); - // var search = new Search(); - // console.log($('#movieTitle').val()); - // if ($('#movieTitle').val() === ""){ - // alert("Please type a movie title") - // // console.log("Please type a movie title") - // } - // else{ - // search.fetch({data: {query: $('#movieTitle').val() }}); - // } - // - // var options = { - // el: $('#all-movie-list'), - // model: search - // }; - // var mlv = new SearchView(options); - // mlv.render(); - // }); + var rentalList = new RentalList(); + rentalList.fetch(); + + var params = { + el: $('#all-rentals'), + model: rentalList + }; + + var rentalListView = new RentalListView(params); + rentalListView.render(); }); From 80eec62c768470063265275c2a19da14803c71ec Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 13:59:37 -0700 Subject: [PATCH 10/23] Trying to get query to work, but 500 error showing in console :( --- build/index.html | 2 +- src/app.js | 31 +++++++++++++++++++++---------- src/collections/rental_list.js | 10 ++++++++-- src/models/rental.js | 14 +++++++------- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/build/index.html b/build/index.html index 8575e4c98..b62c03c96 100644 --- a/build/index.html +++ b/build/index.html @@ -14,7 +14,7 @@

Movies!

- +
diff --git a/src/app.js b/src/app.js index 199e4ba01..66e44df9e 100644 --- a/src/app.js +++ b/src/app.js @@ -3,7 +3,8 @@ import _ from 'underscore'; import MovieList from './collections/movie_list'; import MovieListView from './views/movie_list_view'; - +import RentalList from './collections/rental_list'; +import RentalListView from './views/rental_list_view'; $(document).ready(function() { @@ -18,14 +19,24 @@ $(document).ready(function() { var application = new MovieListView(params); application.render(); - var rentalList = new RentalList(); - rentalList.fetch(); + // var rentalList = new RentalList(); + // rentalList.fetch(); + // - var params = { - el: $('#all-rentals'), - model: rentalList - }; - var rentalListView = new RentalListView(params); - rentalListView.render(); -}); + $('form').submit(function(event){ + console.log("HEREEEEE!!!!!!!!!!!"); + event.preventDefault(); + + var rentalList = new RentalList(); + rentalList.fetch({data: {query: $("#rentalTitle").val()}}); + + var params = { + el: $('#all-rentals'), + model: rentalList + }; + + var rentalListView = new RentalListView(params); + rentalListView.render(); + }); +}); //closing documento listo. diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js index 9a36da2db..ae28c193c 100644 --- a/src/collections/rental_list.js +++ b/src/collections/rental_list.js @@ -4,10 +4,16 @@ import Backbone from 'backbone'; import Rental from '../models/rental'; - var RentalList = Backbone.Collection.extend({ model: Rental, - url: 'http://localhost:3000/movies?query=' + initialize: function(params) { + params || (params = {}); + this.query = params.query; + }, + url: function() { + return 'http://localhost:3000/movies?' + this.query + } + }); export default RentalList; diff --git a/src/models/rental.js b/src/models/rental.js index d41ed5d00..e0c8f041c 100644 --- a/src/models/rental.js +++ b/src/models/rental.js @@ -1,14 +1,14 @@ import Backbone from 'backbone'; var Rental = Backbone.Model.extend({ - defaults :{ - title: " ", - overview: " ", - release_date: " ", - image_url: " " + defaults: { + title: "", + overview: "", + release_date: "", + image_url: "" }, - initialize: function() { - // this.query = params; + initialize: function(params) { + this.query = params; console.log("New rental to add"); } }); From dd9d00f140e0621005eea5cb3c026e527614f83a Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 14:05:37 -0700 Subject: [PATCH 11/23] change url to try to get query to work --- src/collections/rental_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js index ae28c193c..910a56686 100644 --- a/src/collections/rental_list.js +++ b/src/collections/rental_list.js @@ -11,7 +11,7 @@ var RentalList = Backbone.Collection.extend({ this.query = params.query; }, url: function() { - return 'http://localhost:3000/movies?' + this.query + return 'http://localhost:3000/movies?query=' + this.query } }); From 83a857a54ae1bd1b260532ecc8956b5f2d1d1bd3 Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 14:24:41 -0700 Subject: [PATCH 12/23] Query is not working --- src/collections/rental_list.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js index 910a56686..83e04b0f6 100644 --- a/src/collections/rental_list.js +++ b/src/collections/rental_list.js @@ -6,12 +6,11 @@ import Rental from '../models/rental'; var RentalList = Backbone.Collection.extend({ model: Rental, - initialize: function(params) { - params || (params = {}); - this.query = params.query; - }, - url: function() { - return 'http://localhost:3000/movies?query=' + this.query + // initialize: function(params) { + // this.query = params.query; + // }, + url: function(title) { + return 'http://localhost:3000/movies?query=' + title } }); From d66dbd64a7a961146990efe732db902a5a5ebaf2 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Mon, 19 Jun 2017 15:33:04 -0700 Subject: [PATCH 13/23] fixing internal error --- src/app.js | 5 +++-- src/collections/rental_list.js | 3 ++- src/views/rental_list_view.js | 2 +- src/views/rental_view.js | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app.js b/src/app.js index 66e44df9e..9f273ee43 100644 --- a/src/app.js +++ b/src/app.js @@ -28,8 +28,9 @@ $(document).ready(function() { console.log("HEREEEEE!!!!!!!!!!!"); event.preventDefault(); - var rentalList = new RentalList(); - rentalList.fetch({data: {query: $("#rentalTitle").val()}}); + var rentalList = new RentalList( {query:$("#rentalTitle").val()} ); + rentalList.fetch(); + // var params = { el: $('#all-rentals'), diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js index 910a56686..98d9f9986 100644 --- a/src/collections/rental_list.js +++ b/src/collections/rental_list.js @@ -8,10 +8,11 @@ var RentalList = Backbone.Collection.extend({ model: Rental, initialize: function(params) { params || (params = {}); + console.log(params); this.query = params.query; }, url: function() { - return 'http://localhost:3000/movies?query=' + this.query + return 'http://localhost:3000/movies/' + this.query } }); diff --git a/src/views/rental_list_view.js b/src/views/rental_list_view.js index 9e90a3707..ded4a1200 100644 --- a/src/views/rental_list_view.js +++ b/src/views/rental_list_view.js @@ -8,7 +8,7 @@ var RentalListView = Backbone.View.extend({ initialize: function(params) { this.rentalTemplate = _.template($('#rental-template').html()); this.rentalList = []; - + console.log(this); this.model.forEach(function(rawRental){ this.addRental(rawRental); }, this); diff --git a/src/views/rental_view.js b/src/views/rental_view.js index 657d18745..8e9385c1a 100644 --- a/src/views/rental_view.js +++ b/src/views/rental_view.js @@ -13,7 +13,7 @@ var RentalView = Backbone.View.extend({ }, render: function() { - var html = this.template({rental: this.model.attributes}); + var html = this.template({movie: this.model.attributes}); this.$el.html(html); this.delegateEvents(); return this; From b659b2d19977e5c168c8bda0b46e59744cba69b7 Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 16:14:46 -0700 Subject: [PATCH 14/23] fixing merge conflict --- src/app.js | 6 ++++-- src/collections/rental_list.js | 12 +++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app.js b/src/app.js index 66e44df9e..23f18f3a8 100644 --- a/src/app.js +++ b/src/app.js @@ -28,8 +28,10 @@ $(document).ready(function() { console.log("HEREEEEE!!!!!!!!!!!"); event.preventDefault(); - var rentalList = new RentalList(); - rentalList.fetch({data: {query: $("#rentalTitle").val()}}); + var rentalList = new RentalList( {query:$("#rentalTitle").val()} ); + // rentalList.fetch({data: {query: $("#rentalTitle").val()}}); + rentalList.fetch(); + var params = { el: $('#all-rentals'), diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js index 83e04b0f6..98d9f9986 100644 --- a/src/collections/rental_list.js +++ b/src/collections/rental_list.js @@ -6,11 +6,13 @@ import Rental from '../models/rental'; var RentalList = Backbone.Collection.extend({ model: Rental, - // initialize: function(params) { - // this.query = params.query; - // }, - url: function(title) { - return 'http://localhost:3000/movies?query=' + title + initialize: function(params) { + params || (params = {}); + console.log(params); + this.query = params.query; + }, + url: function() { + return 'http://localhost:3000/movies/' + this.query } }); From 6d9790e615cdeff1cd18bf33d664604b26f04055 Mon Sep 17 00:00:00 2001 From: laura Date: Mon, 19 Jun 2017 16:16:29 -0700 Subject: [PATCH 15/23] merge conflict --- src/app.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/app.js b/src/app.js index f036a3855..3edd1955e 100644 --- a/src/app.js +++ b/src/app.js @@ -29,14 +29,8 @@ $(document).ready(function() { event.preventDefault(); var rentalList = new RentalList( {query:$("#rentalTitle").val()} ); -<<<<<<< HEAD - // rentalList.fetch({data: {query: $("#rentalTitle").val()}}); rentalList.fetch(); -======= - rentalList.fetch(); - // ->>>>>>> d66dbd64a7a961146990efe732db902a5a5ebaf2 var params = { el: $('#all-rentals'), From 348d7c08b37f52ef7994959eda3a36cec3f91b02 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 20 Jun 2017 13:58:08 -0700 Subject: [PATCH 16/23] add video store model --- src/models/video_store.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/models/video_store.js diff --git a/src/models/video_store.js b/src/models/video_store.js new file mode 100644 index 000000000..9e1a86579 --- /dev/null +++ b/src/models/video_store.js @@ -0,0 +1,11 @@ + +import Backbone from 'backbone'; + +var VideoStore = Backbone.Model.extend({ + initialize: function(params) { + this.set("library", params.library); + this.set("searchResults", params.searchResults); + } +}); + +export default VideoStore; From 814315388f3f6a5960a5d997a559f1ce188eb484 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 20 Jun 2017 14:38:17 -0700 Subject: [PATCH 17/23] make movie_list_view use video_store model --- src/app.js | 11 ++++++++++- src/models/video_store.js | 4 ++-- src/views/movie_list_view.js | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index ae49aa974..58e85a05b 100644 --- a/src/app.js +++ b/src/app.js @@ -3,6 +3,7 @@ import _ from 'underscore'; import MovieList from './collections/movie_list'; import MovieListView from './views/movie_list_view'; +import VideoStore from './models/video_store'; $(document).ready(function() { @@ -10,12 +11,20 @@ $(document).ready(function() { var movieList = new MovieList(); movieList.fetch(); + var searchList = new MovieList(); + + var videoStore = new VideoStore({ + library: movieList, + searchResults: searchList + }); + var movieListViewParams = { el: $('main'), - model: movieList + model: videoStore }; var myMovieListView = new MovieListView(movieListViewParams); myMovieListView.render(); //initializing a new view + }); diff --git a/src/models/video_store.js b/src/models/video_store.js index 9e1a86579..050b6fe7c 100644 --- a/src/models/video_store.js +++ b/src/models/video_store.js @@ -3,8 +3,8 @@ import Backbone from 'backbone'; var VideoStore = Backbone.Model.extend({ initialize: function(params) { - this.set("library", params.library); - this.set("searchResults", params.searchResults); + // this.set("library", params.library); + // this.set("searchResults", params.searchResults); } }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index da84b278e..12477ba15 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -9,7 +9,7 @@ var MovieListView = Backbone.View.extend({ this.movieTemplate = _.template($('#movie-card-template').html()); this.movieList = []; - this.model.forEach(function(rawMovie){ + this.model.get("library").forEach(function(rawMovie){ this.addMovie(rawMovie); }, this); @@ -17,8 +17,8 @@ var MovieListView = Backbone.View.extend({ title: this.$('.search-movie-form input[name="title"]') }; - this.listenTo(this.model, 'add', this.addMovie); - this.listenTo(this.model, 'update', this.render); + this.listenTo(this.model.get("library"), 'add', this.addMovie); + this.listenTo(this.model.get("library"), 'update', this.render); }, render: function() { From 1bcc0b81c33935a9106f5e739055c82e2fb2acb2 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Tue, 20 Jun 2017 15:49:09 -0700 Subject: [PATCH 18/23] search function added --- build/index.html | 1 + src/collections/movie_list.js | 13 +++++++-- src/collections/search.js | 16 ----------- src/views/movie_list_view.js | 51 ++++++++++++++++++++++++++--------- 4 files changed, 51 insertions(+), 30 deletions(-) delete mode 100644 src/collections/search.js diff --git a/build/index.html b/build/index.html index 248a513b0..001450784 100644 --- a/build/index.html +++ b/build/index.html @@ -30,6 +30,7 @@

Movies!

diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 40416ad95..b9c171d12 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,8 +4,17 @@ import Movie from 'models/movie'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: "http://localhost:3000/movies" - + initialize: function() { + this.query = undefined; + }, + url: function() { + var url = "http://localhost:3000/movies"; + if (this.query !== undefined) { + return url + "?query=" + this.query; + } else { + return url; + } + } }); export default MovieList; diff --git a/src/collections/search.js b/src/collections/search.js deleted file mode 100644 index 3787e6efd..000000000 --- a/src/collections/search.js +++ /dev/null @@ -1,16 +0,0 @@ -import Backbone from 'backbone'; - -import Movie from 'models/movie'; - -var SearchMovie = Backbone.Collection.extend({ - model: Movie, - initialize: function(models, options) { - this.query = options.query; - }, - url: function() { - return "http://localhost:3000/movies" + "/" + this.query; - } -}); - - -export default SearchMovie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 12477ba15..29c165105 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,7 +1,6 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; -import SearchMovie from '../collections/search'; import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ @@ -19,11 +18,26 @@ var MovieListView = Backbone.View.extend({ this.listenTo(this.model.get("library"), 'add', this.addMovie); this.listenTo(this.model.get("library"), 'update', this.render); + + this.searchList = []; + + this.listenTo(this.model.get("searchResults"), 'add', this.addSearchResult); + this.listenTo(this.model.get("searchResults"), 'update', this.render); + + this.showSearchResults = false; + }, render: function() { $('#movie-list').empty(); - this.movieList.forEach(function(movie){ + var movieList; + if (this.showSearchResults){ + movieList = this.searchList; + } else { + movieList = this.movieList; + } + + movieList.forEach(function(movie){ movie.render(); $('#movie-list').append(movie.$el); }, this); @@ -38,6 +52,14 @@ var MovieListView = Backbone.View.extend({ this.movieList.push(movie); }, + addSearchResult: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.searchList.push(movie); + }, + events: { 'click .search-movie': 'searchMovie' }, @@ -50,16 +72,21 @@ var MovieListView = Backbone.View.extend({ }, searchMovie: function(movie) { - var _this = this; - var searchMovie = new SearchMovie([], {query:this.getInput()["title"]}); - searchMovie.fetch({ - success: function(collection, response, options){ - var movie = collection.shift(); - _this.addMovie(movie); - _this.render(); - // $('#movie-list').append(movie.$el); - } - }); + this.searchList = []; + this.showSearchResults = true; + this.model.get("searchResults").query = this.getInput()["title"]; + this.model.get("searchResults").fetch(); + + // var _this = this; + // var searchMovie = new SearchMovie([], {query:this.getInput()["title"]}); + // searchMovie.fetch({ + // success: function(collection, response, options){ + // var movie = collection.shift(); + // _this.addMovie(movie); + // _this.render(); + // // $('#movie-list').append(movie.$el); + // } + // }); } }); From 4531614e33787abd3784c9b48781cade05f55afd Mon Sep 17 00:00:00 2001 From: laura Date: Tue, 20 Jun 2017 20:18:35 -0700 Subject: [PATCH 19/23] commiting to check out another branch --- src/app.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/app.js b/src/app.js index 58dbfb532..ff3f38db7 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,4 @@ + import $ from 'jquery'; import _ from 'underscore'; @@ -18,20 +19,10 @@ $(document).ready(function() { searchResults: searchList }); -<<<<<<< HEAD - $('form').submit(function(event){ - console.log("HEREEEEE!!!!!!!!!!!"); - event.preventDefault(); - - var rentalList = new RentalList( {query:$("#rentalTitle").val()} ); - rentalList.fetch(); - -======= var movieListViewParams = { el: $('main'), model: videoStore }; ->>>>>>> 98a3320b0647f526a37fe6690d50bd4a27af1363 var myMovieListView = new MovieListView(movieListViewParams); myMovieListView.render(); From da1aa62021a6c99291391e9ba618b73d2f7bc697 Mon Sep 17 00:00:00 2001 From: laura Date: Tue, 20 Jun 2017 21:46:45 -0700 Subject: [PATCH 20/23] search working, and display all the movies related with the search term --- src/views/movie_list_view.js | 1 + src/views/movie_view.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 29c165105..2875a5a99 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,6 +4,7 @@ import Backbone from 'backbone'; import MovieView from './movie_view'; var MovieListView = Backbone.View.extend({ + initialize: function(params) { this.movieTemplate = _.template($('#movie-card-template').html()); this.movieList = []; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index c4c8cf4d7..9017c4eb2 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -6,6 +6,7 @@ var MovieView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; this.listenTo(this.model, 'change', this.render); + this.render(); }, render: function() { @@ -14,6 +15,7 @@ var MovieView = Backbone.View.extend({ this.delegateEvents(); return this; } + }); export default MovieView; From 494880619b296a82dc8d2aa5933f2e68210902a3 Mon Sep 17 00:00:00 2001 From: Sofia Kim Date: Wed, 21 Jun 2017 11:18:57 -0700 Subject: [PATCH 21/23] add button created working on create function --- build/index.html | 2 ++ src/views/movie_list_view.js | 17 ++++++++++++++++- src/views/movie_view.js | 10 ++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/build/index.html b/build/index.html index 001450784..7e08f37a9 100644 --- a/build/index.html +++ b/build/index.html @@ -29,8 +29,10 @@

Movies!

diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 29c165105..8257f798f 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -37,13 +37,28 @@ var MovieListView = Backbone.View.extend({ movieList = this.movieList; } + movieList.forEach(function(movie){ movie.render(); $('#movie-list').append(movie.$el); + // this.$('#movie-list').append(MovieView.render().$el); + this.listenTo(movie, 'add', this.addToLibrary); }, this); return this; }, + addToLibrary: function(movie) { + var addMovie = { + image_url: movie.get('image_url'), + overview: movie.get('overview'), + release_date: movie.get('release_date'), + title: movie.get('title') + }; + console.log(this.model); + this.model.create(addMovie); + + }, + addMovie: function(movie){ var movie = new MovieView ({ model: movie, @@ -61,7 +76,7 @@ var MovieListView = Backbone.View.extend({ }, events: { - 'click .search-movie': 'searchMovie' + 'click .search-movie': 'searchMovie', }, getInput: function() { diff --git a/src/views/movie_view.js b/src/views/movie_view.js index c4c8cf4d7..03d0d1063 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -13,7 +13,17 @@ var MovieView = Backbone.View.extend({ this.$el.html(html); this.delegateEvents(); return this; + }, + + events: { + 'click .add-movie': 'addMovieRental' + }, + + addMovieRental: function() { + this.trigger('add', this.model); + event.stopPropagation(); } + }); export default MovieView; From dbedbca2e7db30a588d4a7698b2596d0689ed835 Mon Sep 17 00:00:00 2001 From: laura Date: Wed, 21 Jun 2017 12:30:19 -0700 Subject: [PATCH 22/23] finish base requirements --- build/index.html | 9 +++++++- src/models/rental.js | 18 +++++++++++++++ src/views/movie_list_view.js | 21 +++++++++-------- src/views/rental_view.js | 44 ++++++++++++++++++++++++++++++++++++ 4 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 src/models/rental.js create mode 100644 src/views/rental_view.js diff --git a/build/index.html b/build/index.html index 7e08f37a9..1c56a7967 100644 --- a/build/index.html +++ b/build/index.html @@ -28,13 +28,20 @@

Movies!

- + + diff --git a/src/models/rental.js b/src/models/rental.js new file mode 100644 index 000000000..9adbca67f --- /dev/null +++ b/src/models/rental.js @@ -0,0 +1,18 @@ +import Backbone from 'backbone'; + +var Rental = Backbone.Model.extend({ + + url: 'http://localhost:3000/rentals/', + + checkoutUrl: function(movieTitle){ + this.url = this.url + movieTitle + "/check-out"; + return this; + }, + + checkinUrl: function(movieTitle){ + this.url = this.url + movieTitle + "/return"; + return this; + } +}); + +export default Rental; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index aa45a563b..712274c23 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -2,11 +2,14 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; import MovieView from './movie_view'; +import Movie from '../models/movie'; var MovieListView = Backbone.View.extend({ initialize: function(params) { this.movieTemplate = _.template($('#movie-card-template').html()); + this.movieSearchTemplate = _.template($('#movie-search-card-template').html()); + this.movieList = []; this.model.get("library").forEach(function(rawMovie){ @@ -49,14 +52,14 @@ var MovieListView = Backbone.View.extend({ }, addToLibrary: function(movie) { - var addMovie = { - image_url: movie.get('image_url'), - overview: movie.get('overview'), - release_date: movie.get('release_date'), - title: movie.get('title') - }; - console.log(this.model); - this.model.create(addMovie); + + var that = this; + movie.save(undefined, { + success: function(){ + that.showSearchResults = false; + that.model.get('library').fetch(); + } + }); }, @@ -71,7 +74,7 @@ var MovieListView = Backbone.View.extend({ addSearchResult: function(movie){ var movie = new MovieView ({ model: movie, - template: this.movieTemplate + template: this.movieSearchTemplate }); this.searchList.push(movie); }, diff --git a/src/views/rental_view.js b/src/views/rental_view.js new file mode 100644 index 000000000..5ad39e366 --- /dev/null +++ b/src/views/rental_view.js @@ -0,0 +1,44 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +var RentalView = Backbone.View.extend({ + + initialize: function(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + // this.render(); + }, + + render: function() { + var html = this.template({movie: this.model.attributes}); + this.$el.html(html); + this.delegateEvents(); + return this; + }, + + events: { + 'click .btn-checkout': 'checkout' + }, + + checkout: function(){ + console.log("inside of checkout function"); + var movieTitle = this.$('#rental-title').val(); + this.model.checkoutUrl(movieTitle); + + // var that = this; + this.model.save({}, { + success: function(model, response){ + alert("Movie Checked Out!"); + }, + + error: function(model, response){ + console.log(response); + alert( "Something went wrong:\n" + response.responseText); + } + }); + this.model.url = 'http://localhost:3000/rentals/'; + } +}); + +export default RentalView; From 0a9cf50388caf50d397f1fb600fe4b852bb50db3 Mon Sep 17 00:00:00 2001 From: laura Date: Tue, 27 Jun 2017 08:32:01 -0700 Subject: [PATCH 23/23] Working on check out, but could not make it work --- build/css/styles.css | 36 ++++++++++++++++++++++++++++++++-- build/index.html | 34 ++++++++++++++++++++------------ src/collections/rental_list.js | 16 +++++++++++++++ src/models/movie.js | 2 +- src/models/rental.js | 10 ++++++++++ src/views/movie_list_view.js | 2 -- src/views/movie_view.js | 2 +- src/views/rental_view.js | 5 +++-- 8 files changed, 87 insertions(+), 20 deletions(-) create mode 100644 src/collections/rental_list.js diff --git a/build/css/styles.css b/build/css/styles.css index 68a79a569..c73aed84c 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -1,12 +1,44 @@ @include foundation-everything; main { - background: lightblue; + background: lightgrey; } header { - background-color: lightgreen; + background-color: darkblue; padding: 0.5rem; + color: white; + align-content: center; +} + +#to-the-right { + /*float: right;*/ + font-family: cursive; +} + +#word-to-search { + font-size: 2em; + color: darkblue; + font-style: italic; +} + +.search-movie { + float: right; + /*padding: 20px;*/ + /*margin: right 50px;*/ + margin: 20px; + +} + +.add-movie { + +} + +li { + font-size: 2em; + color: darkblue; + font-style: oblique; + font-family: fantasy; } #completed-checkbox { diff --git a/build/index.html b/build/index.html index 1c56a7967..602ed858b 100644 --- a/build/index.html +++ b/build/index.html @@ -10,36 +10,46 @@
-

Movies!

+

Movies!!

- +
-
-
-
+
+
+
- diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js new file mode 100644 index 000000000..a9488c39c --- /dev/null +++ b/src/collections/rental_list.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; +import Rental from '../models/rental'; + +var RentalsList = Backbone.Collection.extend({ + model: Rental, + + url: 'http://localhost:3000/rentals/', + + overdueUrl: function() { + this.url = this.url + "overdue"; + return this; + } + +}); + +export default RentalsList; diff --git a/src/models/movie.js b/src/models/movie.js index 9854d39b5..a53e927c5 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -2,7 +2,7 @@ import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ initialize: function() { - console.log("Created new movie"); + // console.log("Created new movie"); } }); diff --git a/src/models/rental.js b/src/models/rental.js index 9adbca67f..1944f8304 100644 --- a/src/models/rental.js +++ b/src/models/rental.js @@ -4,13 +4,23 @@ var Rental = Backbone.Model.extend({ url: 'http://localhost:3000/rentals/', + initialize: function(params) { + if (!this.has('due_date')) { + var dueDate= new Date(); + dueDate.setDate(dueDate.getDate() + 5); + this.set('due_date', dueDate); + } + }, + checkoutUrl: function(movieTitle){ this.url = this.url + movieTitle + "/check-out"; + console.log("Inside of checkoutUrl"); return this; }, checkinUrl: function(movieTitle){ this.url = this.url + movieTitle + "/return"; + console.log("Inside of checkinUrl"); return this; } }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 712274c23..72811d962 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -41,7 +41,6 @@ var MovieListView = Backbone.View.extend({ movieList = this.movieList; } - movieList.forEach(function(movie){ movie.render(); $('#movie-list').append(movie.$el); @@ -52,7 +51,6 @@ var MovieListView = Backbone.View.extend({ }, addToLibrary: function(movie) { - var that = this; movie.save(undefined, { success: function(){ diff --git a/src/views/movie_view.js b/src/views/movie_view.js index ba5911bed..9e43d5281 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -6,7 +6,7 @@ var MovieView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; this.listenTo(this.model, 'change', this.render); - this.render(); + // this.render(); }, render: function() { diff --git a/src/views/rental_view.js b/src/views/rental_view.js index 5ad39e366..1b49c1e30 100644 --- a/src/views/rental_view.js +++ b/src/views/rental_view.js @@ -18,11 +18,12 @@ var RentalView = Backbone.View.extend({ }, events: { - 'click .btn-checkout': 'checkout' + 'click .checkout-movie': 'checkout', + 'click .checkin-movie': 'checkin' }, checkout: function(){ - console.log("inside of checkout function"); + console.log("Inside of checkout"); var movieTitle = this.$('#rental-title').val(); this.model.checkoutUrl(movieTitle);