From a2cfde805b3d4947472a47db4d54da2711ec7aae Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 18 Dec 2017 13:40:17 -0800 Subject: [PATCH 01/17] created store movie and store library models --- dist/index.html | 11 ++++++++++- src/app.js | 17 +++++++++++++++-- src/collections/store_library.js | 9 +++++++++ src/models/store_movie.js | 9 +++++++++ 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 src/collections/store_library.js create mode 100644 src/models/store_movie.js diff --git a/dist/index.html b/dist/index.html index 559b18ecd..9c77beae3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,8 +6,17 @@
- +

Open Orders

+
+
    +
+
+
+ diff --git a/src/app.js b/src/app.js index 30c00d594..d09864971 100644 --- a/src/app.js +++ b/src/app.js @@ -6,9 +6,22 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; -// ready to go +import StoreLibrary from 'collections/store_library'; +import StoreMovie from 'models/store_movie'; + + $(document).ready(function() { + let libraryTemplate = _.template($('#store-movie-template').html()); + + const storeLibrary = new StoreLibrary(); + storeLibrary.fetch(); + + console.log(storeLibrary.attributes); + + storeLibrary.attributes.forEach((storeMovie) => { + $('#store-library').append(libraryTemplate(storeMovie.attributes)); + }); + - $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/store_library.js b/src/collections/store_library.js new file mode 100644 index 000000000..9db53f5b2 --- /dev/null +++ b/src/collections/store_library.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import StoreMovie from 'models/store_movie'; + +const StoreLibrary = Backbone.Collection.extend({ + model: StoreMovie, + urlRoot: 'http://localhost:3000/movies', +}); + +export default StoreMovie; diff --git a/src/models/store_movie.js b/src/models/store_movie.js new file mode 100644 index 000000000..abe4eaba2 --- /dev/null +++ b/src/models/store_movie.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; + +const StoreMovie = Backbone.Model.extend({ + idAttribute: 'title', + urlRoot: 'http://localhost:3000/movies', + +}); + +export default StoreMovie; From 88e9540c59dff5836b20a2a00009e0b37fcc07ab Mon Sep 17 00:00:00 2001 From: Kimberley Mackenzie Date: Mon, 18 Dec 2017 14:38:02 -0800 Subject: [PATCH 02/17] Views and models, ability to view movie library. --- src/app.js | 19 +++++++++++----- src/collections/store_library.js | 10 +++++++-- src/models/store_movie.js | 12 ++++++++-- src/views/store_library_view.js | 38 ++++++++++++++++++++++++++++++++ src/views/store_movie_view.js | 20 +++++++++++++++++ 5 files changed, 90 insertions(+), 9 deletions(-) create mode 100644 src/views/store_library_view.js create mode 100644 src/views/store_movie_view.js diff --git a/src/app.js b/src/app.js index d09864971..4e7af28df 100644 --- a/src/app.js +++ b/src/app.js @@ -9,18 +9,27 @@ import _ from 'underscore'; import StoreLibrary from 'collections/store_library'; import StoreMovie from 'models/store_movie'; +import StoreLibraryView from 'views/store_library_view'; +import StoreMovieView from 'views/store_movie_view'; + $(document).ready(function() { - let libraryTemplate = _.template($('#store-movie-template').html()); const storeLibrary = new StoreLibrary(); storeLibrary.fetch(); - console.log(storeLibrary.attributes); - - storeLibrary.attributes.forEach((storeMovie) => { - $('#store-library').append(libraryTemplate(storeMovie.attributes)); + const storeLibraryView = new StoreLibraryView({ + model: storeLibrary, + template: _.template($('#store-movie-template').html()), + el: 'main' }); + storeLibraryView.render(); + + // console.log(storeLibrary.attributes); + // + // storeLibrary.attributes.forEach((storeMovie) => { + // $('#store-library').append(libraryTemplate(storeMovie.attributes)); + // }); diff --git a/src/collections/store_library.js b/src/collections/store_library.js index 9db53f5b2..5fb1b3913 100644 --- a/src/collections/store_library.js +++ b/src/collections/store_library.js @@ -3,7 +3,13 @@ import StoreMovie from 'models/store_movie'; const StoreLibrary = Backbone.Collection.extend({ model: StoreMovie, - urlRoot: 'http://localhost:3000/movies', + sync: function(method, model, options) { + switch(method) { + case 'read': + options.url = 'http://localhost:3000/movies'; + return Backbone.sync(method, model, options); + } + } }); -export default StoreMovie; +export default StoreLibrary; diff --git a/src/models/store_movie.js b/src/models/store_movie.js index abe4eaba2..1353bc51e 100644 --- a/src/models/store_movie.js +++ b/src/models/store_movie.js @@ -1,8 +1,16 @@ import Backbone from 'backbone'; const StoreMovie = Backbone.Model.extend({ - idAttribute: 'title', - urlRoot: 'http://localhost:3000/movies', + + sync: function(method, model, options) { + switch(method) { + case 'read': + options.url = 'http://localhost:3000/movies' + model.get('title'); + return Backbone.sync(method, model, options); + } + } + // idAttribute: 'title', + // urlRoot: 'http://localhost:3000/movies', }); diff --git a/src/views/store_library_view.js b/src/views/store_library_view.js new file mode 100644 index 000000000..d0b34b229 --- /dev/null +++ b/src/views/store_library_view.js @@ -0,0 +1,38 @@ +import Backbone from 'backbone'; +import StoreMovieView from '../views/store_movie_view'; +import StoreMovie from 'models/store_movie'; + + +const StoreLibraryView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + // render() { + // Object.keys(this.model.attributes).map(function(key) { + // console.log(key); + // const storeMovieView = new StoreMovieView({ + // model: key, + // template: this.template, + // className: 'storeMovie', + // }); + // this.$('#store-library').append(storeMovieView.render().$el); + // }); + // return this; + // }, + + render() { + this.model.each((storeMovie) => { + const storeMovieView = new StoreMovieView({ + model: storeMovie, + template: this.template, + className: 'storeMovie', + }); + this.$('#store-library').append(storeMovieView.render().$el); + }); + return this; + }, + +}); + +export default StoreLibraryView; diff --git a/src/views/store_movie_view.js b/src/views/store_movie_view.js new file mode 100644 index 000000000..b6ecf9dd2 --- /dev/null +++ b/src/views/store_movie_view.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; + +const StoreMovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + + }, +}); + +export default StoreMovieView; From c00e4c85b22b0e931a979ea9a97e66a04797ac98 Mon Sep 17 00:00:00 2001 From: Kimberley Mackenzie Date: Mon, 18 Dec 2017 14:39:23 -0800 Subject: [PATCH 03/17] Comented out unnecessary sync in store movie view. --- src/models/store_movie.js | 14 +++++++------- src/views/store_library_view.js | 13 ------------- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/src/models/store_movie.js b/src/models/store_movie.js index 1353bc51e..5bc886870 100644 --- a/src/models/store_movie.js +++ b/src/models/store_movie.js @@ -2,13 +2,13 @@ import Backbone from 'backbone'; const StoreMovie = Backbone.Model.extend({ - sync: function(method, model, options) { - switch(method) { - case 'read': - options.url = 'http://localhost:3000/movies' + model.get('title'); - return Backbone.sync(method, model, options); - } - } + // sync: function(method, model, options) { + // switch(method) { + // case 'read': + // options.url = 'http://localhost:3000/movies' + model.get('title'); + // return Backbone.sync(method, model, options); + // } + // } // idAttribute: 'title', // urlRoot: 'http://localhost:3000/movies', diff --git a/src/views/store_library_view.js b/src/views/store_library_view.js index d0b34b229..8da24259c 100644 --- a/src/views/store_library_view.js +++ b/src/views/store_library_view.js @@ -8,19 +8,6 @@ const StoreLibraryView = Backbone.View.extend({ this.template = params.template; this.listenTo(this.model, 'update', this.render); }, - // render() { - // Object.keys(this.model.attributes).map(function(key) { - // console.log(key); - // const storeMovieView = new StoreMovieView({ - // model: key, - // template: this.template, - // className: 'storeMovie', - // }); - // this.$('#store-library').append(storeMovieView.render().$el); - // }); - // return this; - // }, - render() { this.model.each((storeMovie) => { const storeMovieView = new StoreMovieView({ From bcabc47a65044aaaa558437bfdd2aefcac1976c3 Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 18 Dec 2017 14:40:42 -0800 Subject: [PATCH 04/17] adding changes before pulling --- src/models/store_movie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/models/store_movie.js b/src/models/store_movie.js index abe4eaba2..73310fccb 100644 --- a/src/models/store_movie.js +++ b/src/models/store_movie.js @@ -2,7 +2,7 @@ import Backbone from 'backbone'; const StoreMovie = Backbone.Model.extend({ idAttribute: 'title', - urlRoot: 'http://localhost:3000/movies', + urlRoot: 'http://localhost:3000/movies' }); From cd97f372943b9f934eda71ade0cf0c07b7a21215 Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 18 Dec 2017 14:52:41 -0800 Subject: [PATCH 05/17] added the search form to the html --- dist/index.html | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9c77beae3..5401374dd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,6 +6,17 @@
+
+

Order Entry Form

+
+ + + +
+
+
+
+

Open Orders

    @@ -14,8 +25,8 @@

    Open Orders

From 52380d1ebe256fda743710aaec5362b7047976b8 Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 18 Dec 2017 15:16:27 -0800 Subject: [PATCH 06/17] created apimovie and apimovies models and associated views --- dist/index.html | 21 +++++++++++++++++---- src/app.js | 7 +------ src/collections/api_movies.js | 17 +++++++++++++++++ src/models/api_movie.js | 20 ++++++++++++++++++++ src/views/api_movie_view.js | 30 ++++++++++++++++++++++++++++++ src/views/api_movies_view.js | 30 ++++++++++++++++++++++++++++++ 6 files changed, 115 insertions(+), 10 deletions(-) create mode 100644 src/collections/api_movies.js create mode 100644 src/models/api_movie.js create mode 100644 src/views/api_movie_view.js create mode 100644 src/views/api_movies_view.js diff --git a/dist/index.html b/dist/index.html index 5401374dd..6dbf34080 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,9 +6,9 @@
-
-

Order Entry Form

-
+
+

Search for Movies:

+ @@ -17,18 +17,31 @@

Order Entry Form

-

Open Orders

+

Search Results

+
+
    +
+
+ +

Store Library

+ + + + diff --git a/src/app.js b/src/app.js index 4e7af28df..bb6d4c297 100644 --- a/src/app.js +++ b/src/app.js @@ -25,12 +25,7 @@ $(document).ready(function() { }); storeLibraryView.render(); - // console.log(storeLibrary.attributes); - // - // storeLibrary.attributes.forEach((storeMovie) => { - // $('#store-library').append(libraryTemplate(storeMovie.attributes)); - // }); - + }); diff --git a/src/collections/api_movies.js b/src/collections/api_movies.js new file mode 100644 index 000000000..b6b81e861 --- /dev/null +++ b/src/collections/api_movies.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; +import APIMovie from 'models/api_movie'; +import StoreMovie from 'models/store_movie'; +import StoreLibrary from 'collections/store_library'; + +const APIMovies = Backbone.Collection.extend({ + model: APIMovie, + sync: function(method, model, options) { + switch(method) { + case 'read': + options.url = 'http://localhost:3000/movies' + 'search' + params['query']; + return Backbone.sync(method, model, options); + } + } +}); + +export default APIMovies; diff --git a/src/models/api_movie.js b/src/models/api_movie.js new file mode 100644 index 000000000..b82278eb6 --- /dev/null +++ b/src/models/api_movie.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; + +import APIMovies from 'collections/api_movies'; + +const APIMovie = Backbone.Model.extend({ + + sync: function(method, model, options) { + // switch(method) { + // case 'read': + // options.url = 'http://localhost:3000/movies' + model.get('title'); + // return Backbone.sync(method, model, options); + // } + } + // idAttribute: 'title', + // urlRoot: 'http://localhost:3000/movies', + + +}); + +export default APIMovie; diff --git a/src/views/api_movie_view.js b/src/views/api_movie_view.js new file mode 100644 index 000000000..bd537b316 --- /dev/null +++ b/src/views/api_movie_view.js @@ -0,0 +1,30 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; + +import StoreMovie from 'models/store_movie'; +import StoreMoviesView from 'models/store_movies'; +import APIMovie from 'models/api_movie' + +import APIMoviesView from '../views/api_movies' +import StoreMovieView from '../views/store_movie_view'; + +import APIMovies from 'collections/api_movies' +import StoreMovies from '/collections/store_movies'; + +const APIMovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + + }, +}); + +export default APIMovieView; diff --git a/src/views/api_movies_view.js b/src/views/api_movies_view.js new file mode 100644 index 000000000..35de92bc0 --- /dev/null +++ b/src/views/api_movies_view.js @@ -0,0 +1,30 @@ +import Backbone from 'backbone'; +// import StoreMovieView from '../views/store_movie_view'; +// import StoreMovie from 'models/store_movie'; +// import StoreMovies from '/collections/store_movies'; +// import StoreMoviesView from 'models/store_movies'; +import APIMovieView from '../views/api_movie_view'; +import APIMovie from 'models/api_movie'; +import APIMovies from 'models/api_movies'; + + +const APIMoviesView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.model.each((apiMovie) => { + const apiMovieView = new APIMovieView({ + model: apiMovie, + template: this.template, + className: 'apiMovie', + }); + this.$('#api-movies').append(apiMovieView.render().$el); + }); + return this; + }, + +}); + +export default APIMoviesView; From 74a061557ed42e162f4a5ff7fb954067a72f9429 Mon Sep 17 00:00:00 2001 From: Kimberley Mackenzie Date: Mon, 18 Dec 2017 16:31:42 -0800 Subject: [PATCH 07/17] Search all movies functionality WORKING. --- dist/index.html | 2 +- src/app.js | 24 +++++++++++++++++++++++- src/collections/api_movies.js | 4 +++- src/models/api_movie.js | 10 +++++----- src/views/api_movie_view.js | 8 ++++---- src/views/api_movies_view.js | 25 ++++++++++++++++++++++++- 6 files changed, 60 insertions(+), 13 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6dbf34080..9406d318a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,7 +10,7 @@

Search for Movies:

- +
diff --git a/src/app.js b/src/app.js index bb6d4c297..d608ec894 100644 --- a/src/app.js +++ b/src/app.js @@ -8,9 +8,13 @@ import _ from 'underscore'; import StoreLibrary from 'collections/store_library'; import StoreMovie from 'models/store_movie'; +import APIMovies from 'collections/api_movies'; +import APIMovie from 'models/api_movie'; import StoreLibraryView from 'views/store_library_view'; import StoreMovieView from 'views/store_movie_view'; +import APIMoviesView from 'views/api_movies_view'; +import APIMovieView from 'views/api_movie_view'; $(document).ready(function() { @@ -25,7 +29,25 @@ $(document).ready(function() { }); storeLibraryView.render(); - + const apiMovies = new APIMovies(); + + $('.submit-btn').on('click', function(e) { + e.preventDefault(); + const query = $('input[name=query]').val(); + apiMovies.fetch({data: {query:`${query}`}}); + }); + + + const apiMoviesView = new APIMoviesView({ + model: apiMovies, + template: _.template($('#api-movie-template').html()), + el: 'main' + }); + apiMoviesView.render(); + + + + }); diff --git a/src/collections/api_movies.js b/src/collections/api_movies.js index b6b81e861..d0282bee2 100644 --- a/src/collections/api_movies.js +++ b/src/collections/api_movies.js @@ -8,7 +8,9 @@ const APIMovies = Backbone.Collection.extend({ sync: function(method, model, options) { switch(method) { case 'read': - options.url = 'http://localhost:3000/movies' + 'search' + params['query']; + options.url = 'http://localhost:3000/movies'; + + // options.url = 'http://localhost:3000/movies/' + 'search'; return Backbone.sync(method, model, options); } } diff --git a/src/models/api_movie.js b/src/models/api_movie.js index b82278eb6..1b1f98d9e 100644 --- a/src/models/api_movie.js +++ b/src/models/api_movie.js @@ -5,11 +5,11 @@ import APIMovies from 'collections/api_movies'; const APIMovie = Backbone.Model.extend({ sync: function(method, model, options) { - // switch(method) { - // case 'read': - // options.url = 'http://localhost:3000/movies' + model.get('title'); - // return Backbone.sync(method, model, options); - // } + switch(method) { + case 'read': + options.url = 'http://localhost:3000/movies'; + return Backbone.sync(method, model, options); + } } // idAttribute: 'title', // urlRoot: 'http://localhost:3000/movies', diff --git a/src/views/api_movie_view.js b/src/views/api_movie_view.js index bd537b316..2a4f51a2d 100644 --- a/src/views/api_movie_view.js +++ b/src/views/api_movie_view.js @@ -2,15 +2,15 @@ import Backbone from 'backbone'; import $ from 'jquery'; import _ from 'underscore'; -import StoreMovie from 'models/store_movie'; -import StoreMoviesView from 'models/store_movies'; +// import StoreMovie from 'models/store_movie'; +// import StoreMoviesView from 'models/store_movies'; import APIMovie from 'models/api_movie' -import APIMoviesView from '../views/api_movies' +import APIMoviesView from '../views/api_movies_view' import StoreMovieView from '../views/store_movie_view'; import APIMovies from 'collections/api_movies' -import StoreMovies from '/collections/store_movies'; +import StoreLibrary from '/collections/store_library'; const APIMovieView = Backbone.View.extend({ initialize(params) { diff --git a/src/views/api_movies_view.js b/src/views/api_movies_view.js index 35de92bc0..e0f122188 100644 --- a/src/views/api_movies_view.js +++ b/src/views/api_movies_view.js @@ -1,15 +1,20 @@ import Backbone from 'backbone'; + +import _ from 'underscore'; +import $ from 'jquery'; + // import StoreMovieView from '../views/store_movie_view'; // import StoreMovie from 'models/store_movie'; // import StoreMovies from '/collections/store_movies'; // import StoreMoviesView from 'models/store_movies'; import APIMovieView from '../views/api_movie_view'; import APIMovie from 'models/api_movie'; -import APIMovies from 'models/api_movies'; +import APIMovies from 'collections/api_movies'; const APIMoviesView = Backbone.View.extend({ initialize(params) { + console.log(params); this.template = params.template; this.listenTo(this.model, 'update', this.render); }, @@ -24,7 +29,25 @@ const APIMoviesView = Backbone.View.extend({ }); return this; }, + events: { + 'click .submit-btn': 'keywordSearch', + + }, +// keywordSearch: function(event) { +// // event.preventDefault(); +// // console.log('in search'); +// // const query = this.$('input[name=query]').val(); +// // APIMoviesView.query = query; +// // console.log(APIMoviesView.query); +// // console.log(query); +// // this.trigger('sendSearch', query); +// // this.query = query; +// // this.trigger('sendSearch', this.query); +// // +// // +// // } +// }); export default APIMoviesView; From f936e995e4b51c26a93bc568c83d341f231fcf33 Mon Sep 17 00:00:00 2001 From: Julia Date: Mon, 18 Dec 2017 16:32:07 -0800 Subject: [PATCH 08/17] minor changes --- dist/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6dbf34080..af3e67391 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,8 +9,7 @@

Search for Movies:

- - +