From 2471c2593dcf0262a5f59c3f5a8a215b0c6e1d33 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 13:59:28 -0800 Subject: [PATCH 01/24] made basic Movie model: --- src/app.js | 4 ++++ src/models/movie.js | 7 +++++++ 2 files changed, 11 insertions(+) create mode 100644 src/models/movie.js diff --git a/src/app.js b/src/app.js index 30c00d594..c280038f0 100644 --- a/src/app.js +++ b/src/app.js @@ -5,6 +5,10 @@ import './css/styles.css'; // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import Backbone from 'backbone'; + +// Import models and collections +import Movie from 'models/movie' // ready to go $(document).ready(function() { diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..8a2583c17 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Modle.extend({ + +}); + +export default Movie From 9f0136879942d92ee2b208df0adaf878694ae9fb Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:04:06 -0800 Subject: [PATCH 02/24] made basic collection for MOvieList --- src/app.js | 1 + src/collections/movie_list.js | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 src/collections/movie_list.js diff --git a/src/app.js b/src/app.js index c280038f0..3e18a1401 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,7 @@ import Backbone from 'backbone'; // Import models and collections import Movie from 'models/movie' +import MovieList from 'collections/movie_list' // ready to go $(document).ready(function() { diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..5c4c9fe28 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const MovieList = Backbone.Collection({ + model: Movie +}) // MovieList + +export default MovieList From 2402ed6b5ba2fc19d3d4331c9001fb1d586b08de Mon Sep 17 00:00:00 2001 From: Mariana Date: Mon, 18 Dec 2017 14:04:21 -0800 Subject: [PATCH 03/24] make template --- dist/index.html | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 559b18ecd..f0012a01c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,14 +2,36 @@ - Backbone Baseline + movies
- +
+

Movies!

+ + + + + + + +
TitleRelease Date
+
- + From 368a1666bc563c64a20be5509035528b0ff8a248 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:06:15 -0800 Subject: [PATCH 04/24] fixed bugs in Movie model and MovieList collection --- src/collections/movie_list.js | 5 +++-- src/models/movie.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 5c4c9fe28..760b1ea44 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -1,7 +1,8 @@ import Backbone from 'backbone'; +import Movie from '../models/movie'; -const MovieList = Backbone.Collection({ +const MovieList = Backbone.Collection.extend({ model: Movie }) // MovieList -export default MovieList +export default MovieList diff --git a/src/models/movie.js b/src/models/movie.js index 8a2583c17..fc9101b54 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,6 +1,6 @@ import Backbone from 'backbone'; -const Movie = Backbone.Modle.extend({ +const Movie = Backbone.Model.extend({ }); From 34a8e14d9c4ef0e73984a4a9dc38cf430c807b58 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:14:22 -0800 Subject: [PATCH 05/24] added url to MovieList collection --- src/collections/movie_list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 760b1ea44..1d06efd36 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -2,7 +2,8 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ - model: Movie + model: Movie, + url: 'http://localhost:3000/movies'; }) // MovieList export default MovieList From 22fbf92f36c10a2ee77e71e952ac0fb51a4bb76c Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:15:06 -0800 Subject: [PATCH 06/24] fixed url ; to , --- src/collections/movie_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 1d06efd36..480db962e 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,7 +3,7 @@ import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies'; + url: 'http://localhost:3000/movies', }) // MovieList export default MovieList From 2fd3b132a7c071f73dd782a2559dce7b3f83b0eb Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:26:50 -0800 Subject: [PATCH 07/24] made MovieView --- dist/index.html | 2 -- src/app.js | 1 - src/views/movie_view.js | 16 ++++++++++++++++ 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 src/views/movie_view.js diff --git a/dist/index.html b/dist/index.html index f0012a01c..f6934b520 100644 --- a/dist/index.html +++ b/dist/index.html @@ -21,7 +21,6 @@

Movies!

diff --git a/src/app.js b/src/app.js index 3e18a1401..dc9c65fa9 100644 --- a/src/app.js +++ b/src/app.js @@ -14,6 +14,5 @@ import MovieList from 'collections/movie_list' // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

'); }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..fb5027a24 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + }, // initialize + render() { + console.log('in MovieView render'); + + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate) + + return this; + }, // render +}) // MovieView From 0d3478da9dec9561b9bd38a9e233ee99220a4c63 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 14:39:07 -0800 Subject: [PATCH 08/24] last push before switching branches --- dist/index.html | 62 +++++++++++++++++++----------------- src/app.js | 3 ++ src/views/movie_list_view.js | 0 3 files changed, 35 insertions(+), 30 deletions(-) create mode 100644 src/views/movie_list_view.js diff --git a/dist/index.html b/dist/index.html index f6934b520..5a93017a1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,35 +1,37 @@ - - - movies - - -
-
+ + + movies + + +
+

Movies!

- - - - - - - -
TitleRelease Date
+
+ + + + + + + +
TitleRelease Date
+
-
+
- - - - + + + + diff --git a/src/app.js b/src/app.js index dc9c65fa9..1fb2e1304 100644 --- a/src/app.js +++ b/src/app.js @@ -14,5 +14,8 @@ import MovieList from 'collections/movie_list' // ready to go $(document).ready(function() { +const movieTemplate = _.template($('#all-movies-template').html()); + + }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..e69de29bb From deb8f2e77bdfa9b235a08ab487b1f76f3500b02d Mon Sep 17 00:00:00 2001 From: Mariana Date: Mon, 18 Dec 2017 15:44:44 -0800 Subject: [PATCH 09/24] Show list of movies --- src/app.js | 20 +++++++++++++++++++- src/views/movie_list_view.js | 29 +++++++++++++++++++++++++++++ src/views/movie_view.js | 2 ++ 3 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 1fb2e1304..b878e8bb6 100644 --- a/src/app.js +++ b/src/app.js @@ -10,11 +10,29 @@ import Backbone from 'backbone'; // Import models and collections import Movie from 'models/movie' import MovieList from 'collections/movie_list' +import MovieListView from './views/movie_list_view' // ready to go $(document).ready(function() { -const movieTemplate = _.template($('#all-movies-template').html()); + const movieTemplate = _.template($('#all-movies-template').html()); + + + const moviesList = new MovieList(); + + console.log("this is moesList"); + console.log(moviesList); + + const movieListView = new MovieListView({ + model: moviesList, + template: movieTemplate, + el: $('#list-movies'), + }); + + moviesList.fetch(); + // movieListView.render(); + + diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e69de29bb..7f6b234ce 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -0,0 +1,29 @@ +import Backbone from 'backbone'; +import MovieView from './movie_view'; + +const MovieListView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + // this.model = params.model; + this.listenTo(this.model, 'update', this.render); + }, + render() { + console.log("inside render in movie list view"); + console.log( this.model); + this.model.each((movie) => { + console.log("inside the loop"); + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'tr', + }); + this.$('#movies-list').append(movieView.render().$el); + }); + + + return this + } + +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index fb5027a24..854b53093 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -14,3 +14,5 @@ const MovieView = Backbone.View.extend({ return this; }, // render }) // MovieView + +export default MovieView; From e1988de75a976fefb960c92b209451b808097a47 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 15:55:49 -0800 Subject: [PATCH 10/24] added search bar --- dist/index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 5a93017a1..f19f5a0f0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,9 +6,16 @@
+
+
+ + + +
+

Movies!

-
+
From 26d194153ab406a8eb718d51a19291d49f1e7e4e Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 16:31:20 -0800 Subject: [PATCH 11/24] can click on the search button and get into searchForMovie --- dist/index.html | 2 +- src/app.js | 5 +++++ src/views/movie_list_view.js | 1 - src/views/search_view.js | 17 +++++++++++++++++ 4 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/views/search_view.js diff --git a/dist/index.html b/dist/index.html index f19f5a0f0..a68a59965 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,7 +10,7 @@
- +
diff --git a/src/app.js b/src/app.js index b878e8bb6..d7d306cfe 100644 --- a/src/app.js +++ b/src/app.js @@ -11,6 +11,7 @@ import Backbone from 'backbone'; import Movie from 'models/movie' import MovieList from 'collections/movie_list' import MovieListView from './views/movie_list_view' +import SearchView from './views/search_view' // ready to go $(document).ready(function() { @@ -23,6 +24,10 @@ $(document).ready(function() { console.log("this is moesList"); console.log(moviesList); + const searchView = new SearchView({ + el: $('#search-view'), + }); + const movieListView = new MovieListView({ model: moviesList, template: movieTemplate, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 7f6b234ce..30dafb571 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -11,7 +11,6 @@ const MovieListView = Backbone.View.extend({ console.log("inside render in movie list view"); console.log( this.model); this.model.each((movie) => { - console.log("inside the loop"); const movieView = new MovieView({ model: movie, template: this.template, diff --git a/src/views/search_view.js b/src/views/search_view.js new file mode 100644 index 000000000..a14456dba --- /dev/null +++ b/src/views/search_view.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; + +const SearchView = Backbone.View.extend({ + initialize(params) { + // NOTE: add template back in later when we need it + // this.template = params.template; + }, // initialize + events: { + 'click #search-button': 'searchForMovie', + }, // events + searchForMovie(event) { + event.preventDefault(); + console.log('in searchForMovie'); + }, // searchForMovie +}) + +export default SearchView From 97d326b479aef0a62d147c63272abb8b0fc47790 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Mon, 18 Dec 2017 16:56:00 -0800 Subject: [PATCH 12/24] can now pull out the form text in the searh input. End of the day on Monday --- dist/index.html | 2 +- src/views/search_view.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index a68a59965..a6ca0f9b1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@
- +
diff --git a/src/views/search_view.js b/src/views/search_view.js index a14456dba..920f5f811 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -11,6 +11,9 @@ const SearchView = Backbone.View.extend({ searchForMovie(event) { event.preventDefault(); console.log('in searchForMovie'); + console.log(this.$('#search-input').val()); + // this allows us to access the text input in the search form + this.$('#search-input').val(); }, // searchForMovie }) From 7d4c09422e09d0802df9295a558557c43dc04274 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Tue, 19 Dec 2017 10:54:52 -0800 Subject: [PATCH 13/24] can make a search query to the external api via the local api to get a list of moveis that match the search query. this is in the searchForMovie function --- src/views/search_view.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/views/search_view.js b/src/views/search_view.js index 920f5f811..114ebb825 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -1,4 +1,5 @@ import Backbone from 'backbone'; +import $ from 'jquery'; const SearchView = Backbone.View.extend({ initialize(params) { @@ -11,9 +12,17 @@ const SearchView = Backbone.View.extend({ searchForMovie(event) { event.preventDefault(); console.log('in searchForMovie'); - console.log(this.$('#search-input').val()); // this allows us to access the text input in the search form - this.$('#search-input').val(); + const title = this.$('#search-input').val(); + + // create the url to make the api request + const url = 'http://localhost:3000/movies?query=' + title ; + const encoded_url = encodeURI(url); + + // make a call to the url using only jQuery + // this will make a call to the local API's movies index action, which will then make a call to the external API to get all the movies that match the search query + const response = $.get(encoded_url) + console.log(response); }, // searchForMovie }) From 7de495cfd9632882631f01f5820761e3dbfd635e Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 19 Dec 2017 12:25:41 -0800 Subject: [PATCH 14/24] can show search results --- dist/index.html | 44 +++++++++++++++++++++--- src/app.js | 7 ++-- src/views/search_list_view.js | 64 +++++++++++++++++++++++++++++++++++ src/views/search_view.js | 34 ++++++------------- 4 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 src/views/search_list_view.js diff --git a/dist/index.html b/dist/index.html index a6ca0f9b1..82ced9746 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,11 +7,26 @@
-
- - - - +
+ + + + +
+

Results!

+
Title
+ + + + + + + + +
ImageTitleOverviewRelease Date
+
+ +

Movies!

@@ -40,5 +55,24 @@

Movies!

+ + + diff --git a/src/app.js b/src/app.js index d7d306cfe..a15d44941 100644 --- a/src/app.js +++ b/src/app.js @@ -11,21 +11,22 @@ import Backbone from 'backbone'; import Movie from 'models/movie' import MovieList from 'collections/movie_list' import MovieListView from './views/movie_list_view' -import SearchView from './views/search_view' +import SearchListView from './views/search_list_view' // ready to go $(document).ready(function() { const movieTemplate = _.template($('#all-movies-template').html()); - + const searchTemplate = _.template($('#search-results').html()); const moviesList = new MovieList(); console.log("this is moesList"); console.log(moviesList); - const searchView = new SearchView({ + const searchListView = new SearchListView({ el: $('#search-view'), + template: searchTemplate, }); const movieListView = new MovieListView({ diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js new file mode 100644 index 000000000..484ce86ce --- /dev/null +++ b/src/views/search_list_view.js @@ -0,0 +1,64 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import SearchView from './search_view'; + + +const SearchListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template + // NOTE: add template back in later when we need it + // this.template = params.template; + }, // initialize + events: { + 'click #search-button': 'searchForMovie', + }, // events + searchForMovie(event) { + event.preventDefault(); + console.log('in searchForMovie'); + // this allows us to access the text input in the search form + const title = this.$('#search-input').val(); + + // create the url to make the api request + const url = 'http://localhost:3000/movies?query=' + title ; + const encoded_url = encodeURI(url); + + // make a call to the url using only jQuery + // this will make a call to the local API's movies index action, which will then make a call to the external API to get all the movies that match the search query + // const APIresponse = $.get(encoded_url) + + $.get(encoded_url).done( (data) => { + const APIresponse = data; + // console.log(APIresponse["responseJSON"]); + this.render(APIresponse) + }) + + + + }, // searchForMovie + render(results){ + console.log("inside render in search list view"); + console.log(results[0]); + // make a new search view for each result in the search response. + // results.each((result) => { + // const searchView = new SearchView({ + // model: result, + // template: this.template, + // tagName: 'tr', + // }); + // this.$('#search-list').append(searchView.render().$el); + // }) + + + for (var result of results) { + const searchView = new SearchView({ + model: result, + template: this.template, + tagName: 'tr', + }); + this.$('#search-list').append(searchView.render().$el); +} + return this + } +}) //close view + +export default SearchListView diff --git a/src/views/search_view.js b/src/views/search_view.js index 114ebb825..2431e23bb 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -1,29 +1,15 @@ import Backbone from 'backbone'; -import $ from 'jquery'; -const SearchView = Backbone.View.extend({ - initialize(params) { - // NOTE: add template back in later when we need it - // this.template = params.template; - }, // initialize - events: { - 'click #search-button': 'searchForMovie', - }, // events - searchForMovie(event) { - event.preventDefault(); - console.log('in searchForMovie'); - // this allows us to access the text input in the search form - const title = this.$('#search-input').val(); - - // create the url to make the api request - const url = 'http://localhost:3000/movies?query=' + title ; - const encoded_url = encodeURI(url); - // make a call to the url using only jQuery - // this will make a call to the local API's movies index action, which will then make a call to the external API to get all the movies that match the search query - const response = $.get(encoded_url) - console.log(response); - }, // searchForMovie -}) +const SearchView = Backbone.View.extend({ + initialize(params){ + this.template = params.template + }, + render(){ + const compiledTemplate = this.template(this.model); //.toJSON()); + this.$el.html(compiledTemplate) + return this + } +}); export default SearchView From 2a3544577add303b89f3dc97b743c73e4c31a729 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Tue, 19 Dec 2017 13:53:25 -0800 Subject: [PATCH 15/24] status message appears if there are no results for the search --- dist/index.html | 1 + src/views/search_list_view.js | 26 +++++++++++--------------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/dist/index.html b/dist/index.html index 82ced9746..3e5d9f3f1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,6 +7,7 @@
+
diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index 484ce86ce..55ab25806 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -9,6 +9,10 @@ const SearchListView = Backbone.View.extend({ // NOTE: add template back in later when we need it // this.template = params.template; }, // initialize + statusMessage(message) { + this.$('#status-messages').empty(); + this.$('#status-messages').append(`

${message}

`) + }, // statusMessage events: { 'click #search-button': 'searchForMovie', }, // events @@ -28,26 +32,18 @@ const SearchListView = Backbone.View.extend({ $.get(encoded_url).done( (data) => { const APIresponse = data; - // console.log(APIresponse["responseJSON"]); + if (APIresponse.length < 1) { + console.log('no results'); + this.statusMessage(`No results found for ${title}`); + } this.render(APIresponse) - }) - - + }) }, // searchForMovie render(results){ console.log("inside render in search list view"); - console.log(results[0]); - // make a new search view for each result in the search response. - // results.each((result) => { - // const searchView = new SearchView({ - // model: result, - // template: this.template, - // tagName: 'tr', - // }); - // this.$('#search-list').append(searchView.render().$el); - // }) + this.$('#search-list').empty(); for (var result of results) { const searchView = new SearchView({ @@ -58,7 +54,7 @@ const SearchListView = Backbone.View.extend({ this.$('#search-list').append(searchView.render().$el); } return this - } + }, // render }) //close view export default SearchListView From 3dc69e2ecb3167a799b39887ad887d713f49c1d4 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Tue, 19 Dec 2017 14:34:25 -0800 Subject: [PATCH 16/24] was checking if we already have the movie by making another api call, but instead we are going to change our approach to check if we have the movie locally in our MovieList collection --- src/views/search_view.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/views/search_view.js b/src/views/search_view.js index 2431e23bb..189fde61a 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -1,14 +1,25 @@ import Backbone from 'backbone'; - +import $ from 'jquery'; const SearchView = Backbone.View.extend({ initialize(params){ this.template = params.template }, render(){ + this.doWeHaveMovie(this.model.title) const compiledTemplate = this.template(this.model); //.toJSON()); this.$el.html(compiledTemplate) return this + }, // render + doWeHaveMovie(movieTitle) { + $.get('http://localhost:3000/movies').done((data) => { + const allMovies = data; + console.log('in doWeHaveMovie'); + console.log(allMovies); + }) + console.log(`the movie title is ${movieTitle}`); + + } }); From 1149936624d59eb5b6b277df72970f3f4a870a79 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Tue, 19 Dec 2017 16:25:27 -0800 Subject: [PATCH 17/24] only adds the 'add to library' button if you don't already have the movie --- dist/index.html | 19 +++++++++++++------ src/app.js | 10 +++++----- src/views/movie_list_view.js | 22 +++++++++++++++++++--- src/views/search_list_view.js | 4 +++- src/views/search_view.js | 35 ++++++++++++++++++++++++----------- 5 files changed, 64 insertions(+), 26 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3e5d9f3f1..bb14ac43d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -70,10 +70,17 @@

Movies!

<%- release_date %> - - - - + + + + <% if (have) { %> + You have this movie + <% } %> + <% if (!have) { %> + + <% } %> + + - - + + diff --git a/src/app.js b/src/app.js index a15d44941..5b03db993 100644 --- a/src/app.js +++ b/src/app.js @@ -16,6 +16,9 @@ import SearchListView from './views/search_list_view' // ready to go $(document).ready(function() { + let bus = {}; + bus = _.extend(bus, Backbone.Events); + const movieTemplate = _.template($('#all-movies-template').html()); const searchTemplate = _.template($('#search-results').html()); @@ -27,19 +30,16 @@ $(document).ready(function() { const searchListView = new SearchListView({ el: $('#search-view'), template: searchTemplate, + bus: bus, }); const movieListView = new MovieListView({ model: moviesList, template: movieTemplate, el: $('#list-movies'), + bus: bus, }); moviesList.fetch(); - // movieListView.render(); - - - - }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 30dafb571..9580a694d 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,8 +4,12 @@ import MovieView from './movie_view'; const MovieListView = Backbone.View.extend({ initialize(params){ this.template = params.template; - // this.model = params.model; + this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); + + // listen for event from the searchView to check if the movie already exists in the local collection + this.listenTo(this.bus, 'lookForMovie', this.checkCollectionForMovie); }, render() { console.log("inside render in movie list view"); @@ -18,10 +22,22 @@ const MovieListView = Backbone.View.extend({ }); this.$('#movies-list').append(movieView.render().$el); }); + return this + }, // render + checkCollectionForMovie(movieData) { + console.log('in checkCollectionForMovie'); + console.log(movieData); + let haveIt = false; + this.model.each((movie) => { + if (movie.get('title') === movieData.title && movie.get('release_date') === movieData.release_date ) { + haveIt = true; + console.log('we have the movie'); + } // if + this.bus.trigger(`${movieData.title}${movieData.release_date}`, haveIt) + }) // .each - return this - } + }, // checkbox }); diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index 55ab25806..652e30d82 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -5,7 +5,8 @@ import SearchView from './search_view'; const SearchListView = Backbone.View.extend({ initialize(params) { - this.template = params.template + this.template = params.template; + this.bus = params.bus; // NOTE: add template back in later when we need it // this.template = params.template; }, // initialize @@ -50,6 +51,7 @@ const SearchListView = Backbone.View.extend({ model: result, template: this.template, tagName: 'tr', + bus: this.bus, }); this.$('#search-list').append(searchView.render().$el); } diff --git a/src/views/search_view.js b/src/views/search_view.js index 189fde61a..5ad9ee17f 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -3,24 +3,37 @@ import $ from 'jquery'; const SearchView = Backbone.View.extend({ initialize(params){ - this.template = params.template + this.template = params.template; + this.bus = params.bus; + + this.listenTo(this.bus,`${this.model.title}${this.model.release_date}`, this.setHave ) }, render(){ - this.doWeHaveMovie(this.model.title) + console.log('in render for search view'); + const movieData = { + title: this.model.title, + release_date: this.model.release_date} + this.doWeHaveMovie(movieData) const compiledTemplate = this.template(this.model); //.toJSON()); this.$el.html(compiledTemplate) return this }, // render - doWeHaveMovie(movieTitle) { - $.get('http://localhost:3000/movies').done((data) => { - const allMovies = data; - console.log('in doWeHaveMovie'); - console.log(allMovies); - }) - console.log(`the movie title is ${movieTitle}`); - + doWeHaveMovie(movieData) { + console.log('in doWeHaveMovie'); + console.log(movieData); + this.bus.trigger('lookForMovie', movieData) + }, // doWeHaveMovie + setHave(haveIt) { + console.log('in have it'); + if (haveIt) { + console.log('in if'); + console.log(this.model); + this.model['have'] = true; + } else { + this.model['have'] = false; + } // if + } // setHave - } }); export default SearchView From 0cfc2f3689c00973fd26e81482af65fac392f653 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 19 Dec 2017 16:52:44 -0800 Subject: [PATCH 18/24] few changes to save in data base --- src/views/search_view.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/views/search_view.js b/src/views/search_view.js index 5ad9ee17f..6169be991 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -8,6 +8,9 @@ const SearchView = Backbone.View.extend({ this.listenTo(this.bus,`${this.model.title}${this.model.release_date}`, this.setHave ) }, + events: { + 'click #add-movie' : 'makePost', + }, render(){ console.log('in render for search view'); const movieData = { @@ -32,7 +35,11 @@ const SearchView = Backbone.View.extend({ } else { this.model['have'] = false; } // if - } // setHave + }, // setHave + makePost(){ + // TODO .post request to the rails API, $.post( "test.php", { name: "John", time: "2pm" } ); + + }//makePost }); From 30a6fc035a1287136df552da25b7469f68907256 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Tue, 19 Dec 2017 21:48:30 -0800 Subject: [PATCH 19/24] can make a post request to the api now. Doesn't do what we want on the api side yet --- src/app.js | 1 + src/models/movie.js | 2 ++ src/views/search_list_view.js | 4 +++- src/views/search_view.js | 23 ++++++++++++++++++++++- 4 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 5b03db993..29eea24a4 100644 --- a/src/app.js +++ b/src/app.js @@ -31,6 +31,7 @@ $(document).ready(function() { el: $('#search-view'), template: searchTemplate, bus: bus, + movies: moviesList, }); const movieListView = new MovieListView({ diff --git a/src/models/movie.js b/src/models/movie.js index fc9101b54..9675c4c29 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,6 +1,8 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ + // set the url so we can make a post request on a model + url: 'http://localhost:3000/movies', }); diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index 652e30d82..b83cc8385 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -7,6 +7,7 @@ const SearchListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + this.movies = params.movies; // NOTE: add template back in later when we need it // this.template = params.template; }, // initialize @@ -51,7 +52,8 @@ const SearchListView = Backbone.View.extend({ model: result, template: this.template, tagName: 'tr', - bus: this.bus, + bus: this.bus, + movies: this.movies, }); this.$('#search-list').append(searchView.render().$el); } diff --git a/src/views/search_view.js b/src/views/search_view.js index 6169be991..6826416b7 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -1,10 +1,12 @@ import Backbone from 'backbone'; import $ from 'jquery'; +import Movie from '../models/movie'; const SearchView = Backbone.View.extend({ initialize(params){ this.template = params.template; this.bus = params.bus; + this.movies = params.movies; this.listenTo(this.bus,`${this.model.title}${this.model.release_date}`, this.setHave ) }, @@ -38,7 +40,26 @@ const SearchView = Backbone.View.extend({ }, // setHave makePost(){ // TODO .post request to the rails API, $.post( "test.php", { name: "John", time: "2pm" } ); - + // this.movies.add(this.model); + // create a model so we can make a post request on it + // from notes: $.post(url, formData, success: callback) + const newMovie = new Movie(this.model); + console.log('in makePost'); + // console.log(this.model); + // console.log(newMovie); + + // set the url + const url = 'http://localhost:3000/movies'; + + // pull out the external_id from the views model to pass to the api + const ex_id = this.model['external_id']; + + // make a post request to the api + $.post(url, {movie: {external_id: ex_id }}).done(function(data) { + console.log('successful api call'); + console.log(data); + }) + // TODO: deal with failure case! }//makePost }); From c329b53ed67258760525547c021be6381a2276a3 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Wed, 20 Dec 2017 11:49:41 -0800 Subject: [PATCH 20/24] can make a post request and get back a new instance of a movie from the api --- src/views/search_view.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/search_view.js b/src/views/search_view.js index 6826416b7..5a205922f 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -58,8 +58,10 @@ const SearchView = Backbone.View.extend({ $.post(url, {movie: {external_id: ex_id }}).done(function(data) { console.log('successful api call'); console.log(data); + }) - // TODO: deal with failure case! + // TODO: deal with failure case! + }//makePost }); From dcb6442583261e2cdc462389be73865f052a18b8 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 20 Dec 2017 13:59:54 -0800 Subject: [PATCH 21/24] clean the results table --- dist/index.html | 5 +++-- src/css/styles.css | 4 ++++ src/views/movie_list_view.js | 4 ++-- src/views/search_list_view.js | 34 +++++++++++++++------------------- src/views/search_view.js | 24 ++++++++++++++++-------- 5 files changed, 40 insertions(+), 31 deletions(-) diff --git a/dist/index.html b/dist/index.html index bb14ac43d..ac8f1b760 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,7 +13,7 @@ -
+

Results!

@@ -21,6 +21,7 @@

Results!

+ @@ -70,7 +71,7 @@

Movies!

-
Title Overview Release Date
<%- release_date %> + <% if (have) { %> diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..535cde6a2 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -37,6 +37,10 @@ aside label { div { display: inline; } + +.hide { + display: none; +} /* * { border-style: solid; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 9580a694d..fadff6723 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -12,8 +12,8 @@ const MovieListView = Backbone.View.extend({ this.listenTo(this.bus, 'lookForMovie', this.checkCollectionForMovie); }, render() { - console.log("inside render in movie list view"); - console.log( this.model); + // console.log("inside render in movie list view"); + // console.log( this.model); this.model.each((movie) => { const movieView = new MovieView({ model: movie, diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index b83cc8385..de1623b48 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -6,17 +6,12 @@ import SearchView from './search_view'; const SearchListView = Backbone.View.extend({ initialize(params) { this.template = params.template; - this.bus = params.bus; this.movies = params.movies; - // NOTE: add template back in later when we need it - // this.template = params.template; + this.bus = params.bus; }, // initialize - statusMessage(message) { - this.$('#status-messages').empty(); - this.$('#status-messages').append(`

${message}

`) - }, // statusMessage events: { 'click #search-button': 'searchForMovie', + 'click #clear-search': 'clearResults', }, // events searchForMovie(event) { event.preventDefault(); @@ -34,31 +29,32 @@ const SearchListView = Backbone.View.extend({ $.get(encoded_url).done( (data) => { const APIresponse = data; - if (APIresponse.length < 1) { - console.log('no results'); - this.statusMessage(`No results found for ${title}`); - } this.render(APIresponse) - }) - }, // searchForMovie - render(results){ - console.log("inside render in search list view"); - this.$('#search-list').empty(); + + }, // searchForMovie + render(results){ + // select element in html and toggle class + $('#results-table').toggleClass('hide') + // make a new search view for each result in the search response. for (var result of results) { const searchView = new SearchView({ model: result, template: this.template, tagName: 'tr', - bus: this.bus, movies: this.movies, + bus: this.bus, }); this.$('#search-list').append(searchView.render().$el); -} + } return this - }, // render + },//close render + clearResults(){ + $('#results-table').toggleClass('hide'); + $('#search-list').empty(); + }//clearResults }) //close view export default SearchListView diff --git a/src/views/search_view.js b/src/views/search_view.js index 5a205922f..473e7136e 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -1,13 +1,13 @@ import Backbone from 'backbone'; import $ from 'jquery'; import Movie from '../models/movie'; - +// import MovieList from '../collections/movie_list' const SearchView = Backbone.View.extend({ initialize(params){ this.template = params.template; this.bus = params.bus; this.movies = params.movies; - + this.listenTo(this.model, 'update', this.render); this.listenTo(this.bus,`${this.model.title}${this.model.release_date}`, this.setHave ) }, events: { @@ -24,15 +24,15 @@ const SearchView = Backbone.View.extend({ return this }, // render doWeHaveMovie(movieData) { - console.log('in doWeHaveMovie'); - console.log(movieData); - this.bus.trigger('lookForMovie', movieData) + // console.log('in doWeHaveMovie'); + // console.log(movieData); + this.bus.trigger('lookForMovie', movieData); }, // doWeHaveMovie setHave(haveIt) { console.log('in have it'); if (haveIt) { console.log('in if'); - console.log(this.model); + // console.log(this.model); this.model['have'] = true; } else { this.model['have'] = false; @@ -55,9 +55,17 @@ const SearchView = Backbone.View.extend({ const ex_id = this.model['external_id']; // make a post request to the api - $.post(url, {movie: {external_id: ex_id }}).done(function(data) { + $.post(url, {movie: {external_id: ex_id }}).done((data) => { console.log('successful api call'); - console.log(data); + // console.log(data); + const newMovieDB = new Movie(data); + console.log("making port to save"); + this.movies.add(newMovieDB) + this.$('#have-movie').empty(); + this.$('#have-movie').append('Movie added') + + + }) // TODO: deal with failure case! From 5f0cce7c5caa92069d794eb35e6a939edd59bfa8 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 20 Dec 2017 15:16:07 -0800 Subject: [PATCH 22/24] failure case to save movie --- dist/index.html | 1 + src/app.js | 4 +- src/views/movie_list_view.js | 2 - src/views/movie_view.js | 2 - src/views/search_list_view.js | 8 ++- src/views/search_view.js | 96 ++++++++++++++++------------------- 6 files changed, 53 insertions(+), 60 deletions(-) diff --git a/dist/index.html b/dist/index.html index ac8f1b760..ee7a02655 100644 --- a/dist/index.html +++ b/dist/index.html @@ -15,6 +15,7 @@

Results!

+
diff --git a/src/app.js b/src/app.js index 29eea24a4..fb1ef196b 100644 --- a/src/app.js +++ b/src/app.js @@ -24,9 +24,7 @@ $(document).ready(function() { const moviesList = new MovieList(); - console.log("this is moesList"); - console.log(moviesList); - + const searchListView = new SearchListView({ el: $('#search-view'), template: searchTemplate, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index fadff6723..81095d812 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -25,8 +25,6 @@ const MovieListView = Backbone.View.extend({ return this }, // render checkCollectionForMovie(movieData) { - console.log('in checkCollectionForMovie'); - console.log(movieData); let haveIt = false; this.model.each((movie) => { if (movie.get('title') === movieData.title && movie.get('release_date') === movieData.release_date ) { diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 854b53093..1dc2e4e84 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -6,8 +6,6 @@ const MovieView = Backbone.View.extend({ this.template = params.template; }, // initialize render() { - console.log('in MovieView render'); - const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate) diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index de1623b48..424c5980e 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -8,6 +8,7 @@ const SearchListView = Backbone.View.extend({ this.template = params.template; this.movies = params.movies; this.bus = params.bus; + this.listenTo(this.bus, 'errorSavingMovie', this.renderStatus); }, // initialize events: { 'click #search-button': 'searchForMovie', @@ -15,7 +16,6 @@ const SearchListView = Backbone.View.extend({ }, // events searchForMovie(event) { event.preventDefault(); - console.log('in searchForMovie'); // this allows us to access the text input in the search form const title = this.$('#search-input').val(); @@ -54,7 +54,11 @@ const SearchListView = Backbone.View.extend({ clearResults(){ $('#results-table').toggleClass('hide'); $('#search-list').empty(); - }//clearResults + },//clearResults + renderStatus(errorMessage){ + this.$('#search-status').empty(); + this.$('#search-status').append(errorMessage) + } }) //close view export default SearchListView diff --git a/src/views/search_view.js b/src/views/search_view.js index 473e7136e..aceb75504 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -11,67 +11,61 @@ const SearchView = Backbone.View.extend({ this.listenTo(this.bus,`${this.model.title}${this.model.release_date}`, this.setHave ) }, events: { + // trigger when user wants to add a movie to the rails DB 'click #add-movie' : 'makePost', }, render(){ - console.log('in render for search view'); const movieData = { title: this.model.title, release_date: this.model.release_date} - this.doWeHaveMovie(movieData) - const compiledTemplate = this.template(this.model); //.toJSON()); - this.$el.html(compiledTemplate) - return this - }, // render - doWeHaveMovie(movieData) { - // console.log('in doWeHaveMovie'); - // console.log(movieData); - this.bus.trigger('lookForMovie', movieData); - }, // doWeHaveMovie - setHave(haveIt) { - console.log('in have it'); - if (haveIt) { - console.log('in if'); - // console.log(this.model); - this.model['have'] = true; - } else { - this.model['have'] = false; - } // if - }, // setHave - makePost(){ - // TODO .post request to the rails API, $.post( "test.php", { name: "John", time: "2pm" } ); - // this.movies.add(this.model); - // create a model so we can make a post request on it - // from notes: $.post(url, formData, success: callback) - const newMovie = new Movie(this.model); - console.log('in makePost'); - // console.log(this.model); - // console.log(newMovie); + this.doWeHaveMovie(movieData) + const compiledTemplate = this.template(this.model); //.toJSON()); + this.$el.html(compiledTemplate) + return this + }, // render + doWeHaveMovie(movieData) { + this.bus.trigger('lookForMovie', movieData); + }, // doWeHaveMovie + setHave(haveIt) { + if (haveIt) { + this.model['have'] = true; + } else { + this.model['have'] = false; + } // if + }, // setHave + makePost(){ - // set the url - const url = 'http://localhost:3000/movies'; + // from notes: $.post(url, formData, success: callback) - // pull out the external_id from the views model to pass to the api - const ex_id = this.model['external_id']; + // set the url to make post request + const url = 'http://localhost:3000/movies'; - // make a post request to the api - $.post(url, {movie: {external_id: ex_id }}).done((data) => { - console.log('successful api call'); - // console.log(data); - const newMovieDB = new Movie(data); - console.log("making port to save"); - this.movies.add(newMovieDB) - this.$('#have-movie').empty(); - this.$('#have-movie').append('Movie added') + // pull out the external_id from the views model to pass to the api + const ex_id = this.model['external_id']; + // make a post request to the api, passing the external Id to the API + // this request goes to the create at the movies controller + $.post(url, {movie: {external_id: ex_id }}).done((data) => { + if (!data.empty()){ + // when the API was success create a new movie model with this data + const newMovieDB = new Movie(data); + // add the new movie model to the movie list collection + this.movies.add(newMovieDB) + // change the add movie buttom to movie added + this.$('#have-movie').empty(); + this.$('#have-movie').append('Movie added') + } else { + const noResults = `

Can not add movie to the library

` + this.bus.trigger('errorSavingMovie', noResults); + } + }).fail((data)=>{ + // if the API calls fails, shows error message + const error = '

Error adding movie to the library

' + this.bus.trigger('errorSavingMovie', error); + }) + }//makePost + }); - }) - // TODO: deal with failure case! - - }//makePost - -}); - -export default SearchView + export default SearchView From 155720853402e380a89609f0a4b67aad79146f70 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Wed, 20 Dec 2017 15:20:12 -0800 Subject: [PATCH 23/24] added back functionality to display error message if no search results were returned --- src/views/search_list_view.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index 424c5980e..81aa2e194 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -10,6 +10,10 @@ const SearchListView = Backbone.View.extend({ this.bus = params.bus; this.listenTo(this.bus, 'errorSavingMovie', this.renderStatus); }, // initialize + statusMessage(message) { + this.$('#status-messages').empty(); + this.$('#status-messages').append(`

${message}

`) + }, // statusMessage events: { 'click #search-button': 'searchForMovie', 'click #clear-search': 'clearResults', @@ -28,12 +32,14 @@ const SearchListView = Backbone.View.extend({ // const APIresponse = $.get(encoded_url) $.get(encoded_url).done( (data) => { - const APIresponse = data; - this.render(APIresponse) - }) - - + const APIresponse = data; + if (APIresponse.length < 1) { + console.log('no results'); + this.statusMessage(`No results found for ${title}`); + } + this.render(APIresponse) + }) }, // searchForMovie render(results){ // select element in html and toggle class From 90f2c7f8bd234c5a36e5dd5d21725776995a1480 Mon Sep 17 00:00:00 2001 From: Tamira Vojnar Date: Wed, 20 Dec 2017 15:28:03 -0800 Subject: [PATCH 24/24] fixed .done for post request to correctly check if the object returned was empty --- src/views/search_view.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/views/search_view.js b/src/views/search_view.js index aceb75504..fbb07da97 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -46,8 +46,11 @@ const SearchView = Backbone.View.extend({ // make a post request to the api, passing the external Id to the API // this request goes to the create at the movies controller $.post(url, {movie: {external_id: ex_id }}).done((data) => { - if (!data.empty()){ + console.log('data'); + console.log(data); + if (data !== {}){ // when the API was success create a new movie model with this data + console.log('in if for $.post'); const newMovieDB = new Movie(data); // add the new movie model to the movie list collection this.movies.add(newMovieDB)
Image