From 8791af6e5142dd55911420137348ad7f1c08262f Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 10:56:32 -0800 Subject: [PATCH 01/30] Add files for movie model, collection, and relevant views --- src/collections/movie_list.js | 0 src/models/movie.js | 0 src/views/movie_list_view.js | 0 src/views/movie_view.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/collections/movie_list.js create mode 100644 src/models/movie.js create mode 100644 src/views/movie_list_view.js create mode 100644 src/views/movie_view.js diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..e69de29bb From 678370f28c77dc7a878247c48f3bbc1a52d3d3c2 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 10:59:38 -0800 Subject: [PATCH 02/30] add ul and movie template to index.html --- dist/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 559b18ecd..7d2e84919 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,9 +6,19 @@
- +
+
    +
+
+
+ + From ae298db41f4c780ce7eb1e965d1be9fa3dc37f53 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 11:13:20 -0800 Subject: [PATCH 03/30] Add necessary code to render list of movies once it's called from the API --- dist/index.html | 6 ++++-- src/app.js | 17 +++++++++++++---- src/collections/movie_list.js | 8 ++++++++ src/models/movie.js | 10 ++++++++++ src/views/movie_list_view.js | 27 +++++++++++++++++++++++++++ src/views/movie_view.js | 15 +++++++++++++++ 6 files changed, 77 insertions(+), 6 deletions(-) diff --git a/dist/index.html b/dist/index.html index 7d2e84919..a125c9a96 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,6 +5,7 @@ Backbone Baseline +
    @@ -13,9 +14,10 @@
- diff --git a/src/app.js b/src/app.js index 30c00d594..96e53cc54 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,23 @@ +// Import jQuery & Underscore +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + import 'css/_settings.css'; import 'foundation-sites/dist/css/foundation.css'; import './css/styles.css'; -// Import jQuery & Underscore -import $ from 'jquery'; -import _ from 'underscore'; +// Import collections and views +import MovieList from 'collections/movie_list'; +import MovieListView from 'views/movie_list_view'; + + +let eventBus = {}; +eventBus = _.extend(eventBus, Backbone.Events); // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

'); + $('#show-rental-library').on('click', eventBus.trigger, 'showRentalLibrary'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index e69de29bb..c0e72dcc8 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Movie from 'models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js index e69de29bb..397e532df 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + initialize(params) { + this.title = params.title; + this.bus = params.bus; + }, +}); + +export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e69de29bb..a197ca0d8 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -0,0 +1,27 @@ +import Backbone from 'backbone'; +import MovieView from './movie_view'; + +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); + }, + render() { + const list = this.$('#movies'); + list.empty(); + this.model.each((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie', + bus: this.bus, + }); + 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 e69de29bb..820df1132 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } +}) + +export default MovieView; From deb05bcf21784ec9eccce6f3c6b1cc64e9ad1206 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 12:07:44 -0800 Subject: [PATCH 04/30] render rental library when click on rental library button --- dist/index.html | 3 +-- src/app.js | 17 ++++++++++++++++- src/collections/movie_list.js | 1 + src/views/movie_list_view.js | 5 ++++- 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index a125c9a96..fc19b27dd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,8 +16,7 @@ diff --git a/src/app.js b/src/app.js index 96e53cc54..21b782655 100644 --- a/src/app.js +++ b/src/app.js @@ -18,6 +18,21 @@ eventBus = _.extend(eventBus, Backbone.Events); // ready to go $(document).ready(function() { - $('#show-rental-library').on('click', eventBus.trigger, 'showRentalLibrary'); + const movieList = new MovieList(); + movieList.bus = eventBus; + movieList.fetch(); + console.log(movieList); + + const movieListView = new MovieListView({ + model: movieList, + template: _.template($('#library-movie-template').html()), + el: 'main', + bus: eventBus, + }); + + $('#show-rental-library').on('click', function(event) { + event.preventDefault(); + eventBus.trigger('showRentalLibrary'); + }); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index c0e72dcc8..1b83206ff 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,6 +3,7 @@ import Movie from 'models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, + url: 'http://localhost:3000/movies/', }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index a197ca0d8..b7a36a1c3 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,9 +5,11 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - this.listenTo(this.model, 'update', this.render); + // this.listenTo(this.model, 'update', this.render); + this.listenTo(this.bus, 'showRentalLibrary', this.render); }, render() { + console.log('RENDERING'); const list = this.$('#movies'); list.empty(); this.model.each((movie) => { @@ -18,6 +20,7 @@ const MovieListView = Backbone.View.extend({ className: 'movie', bus: this.bus, }); + console.log(movie); list.append(movieView.render().$el); }); return this; From a5df649e1022d63ce0d9e3b75d4079fac2329cc5 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 12:26:24 -0800 Subject: [PATCH 05/30] Rental library renders as a list --- src/app.js | 12 ++++++------ src/models/movie.js | 1 + src/views/movie_list_view.js | 3 --- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/app.js b/src/app.js index 21b782655..cbd25177c 100644 --- a/src/app.js +++ b/src/app.js @@ -18,13 +18,13 @@ eventBus = _.extend(eventBus, Backbone.Events); // ready to go $(document).ready(function() { - const movieList = new MovieList(); - movieList.bus = eventBus; - movieList.fetch(); - console.log(movieList); + const rentalLibraryList = new MovieList(); + rentalLibraryList.bus = eventBus; + rentalLibraryList.fetch(); + console.log(rentalLibraryList); - const movieListView = new MovieListView({ - model: movieList, + const rentalLibraryListView = new MovieListView({ + model: rentalLibraryList, template: _.template($('#library-movie-template').html()), el: 'main', bus: eventBus, diff --git a/src/models/movie.js b/src/models/movie.js index 397e532df..47a1a2e23 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -3,6 +3,7 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ initialize(params) { this.title = params.title; + this.image_url = params.image_url; this.bus = params.bus; }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index b7a36a1c3..a27fecb5d 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,11 +5,9 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - // this.listenTo(this.model, 'update', this.render); this.listenTo(this.bus, 'showRentalLibrary', this.render); }, render() { - console.log('RENDERING'); const list = this.$('#movies'); list.empty(); this.model.each((movie) => { @@ -20,7 +18,6 @@ const MovieListView = Backbone.View.extend({ className: 'movie', bus: this.bus, }); - console.log(movie); list.append(movieView.render().$el); }); return this; From 323c516926e0dc9d164e1eabebf31f7543c8dac9 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 12:47:33 -0800 Subject: [PATCH 06/30] Display picture in movie template, remove extraneous console.log --- dist/index.html | 3 ++- src/app.js | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index fc19b27dd..5dfb9110b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,7 +16,8 @@ diff --git a/src/app.js b/src/app.js index cbd25177c..e7ed1ca2a 100644 --- a/src/app.js +++ b/src/app.js @@ -21,7 +21,6 @@ $(document).ready(function() { const rentalLibraryList = new MovieList(); rentalLibraryList.bus = eventBus; rentalLibraryList.fetch(); - console.log(rentalLibraryList); const rentalLibraryListView = new MovieListView({ model: rentalLibraryList, From 519f4c9f72678f045ec3a770cfb51d5d841d363f Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 13:21:55 -0800 Subject: [PATCH 07/30] Move event listening onto instance of movie list view instead of initialize --- src/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app.js b/src/app.js index e7ed1ca2a..3b8125b05 100644 --- a/src/app.js +++ b/src/app.js @@ -28,6 +28,7 @@ $(document).ready(function() { el: 'main', bus: eventBus, }); + rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.render); $('#show-rental-library').on('click', function(event) { event.preventDefault(); From f10233bb8a916465996a7647f965c73fcd368d73 Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Mon, 18 Dec 2017 15:36:44 -0800 Subject: [PATCH 08/30] Add instace of MovieList for search results. Add method to MovieList to reset the URL with the query parameter added. --- src/app.js | 12 +++++++++++- src/collections/movie_list.js | 4 ++++ src/views/movie_list_view.js | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 3b8125b05..7242ba5c7 100644 --- a/src/app.js +++ b/src/app.js @@ -22,6 +22,7 @@ $(document).ready(function() { rentalLibraryList.bus = eventBus; rentalLibraryList.fetch(); + const rentalLibraryListView = new MovieListView({ model: rentalLibraryList, template: _.template($('#library-movie-template').html()), @@ -30,9 +31,18 @@ $(document).ready(function() { }); rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.render); + const searchList = new MovieList(); + searchList.bus = eventBus; + + const searchListView = new MovieListView({ + model: searchList, + template: _.template($('#library-movie-template').html()), + el: 'main', + bus: eventBus, + }); + $('#show-rental-library').on('click', function(event) { event.preventDefault(); eventBus.trigger('showRentalLibrary'); }); - }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 1b83206ff..8f4bc2660 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,6 +4,10 @@ import Movie from 'models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies/', + baseUrl: 'http://localhost:3000/movies/search?query=', + resetUrl(query) { + this.url = this.baseUrl + query; + }, }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index a27fecb5d..e407031ae 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,11 +5,11 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - this.listenTo(this.bus, 'showRentalLibrary', this.render); }, render() { const list = this.$('#movies'); list.empty(); + this.model.each((movie) => { const movieView = new MovieView({ model: movie, From dffd82abb0e9c20bd0a081e896ab482b9ddbbbdb Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 15:53:54 -0800 Subject: [PATCH 09/30] Build custom event to handle an IMDB query --- src/app.js | 1 + src/views/movie_list_view.js | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 7242ba5c7..939cc86a9 100644 --- a/src/app.js +++ b/src/app.js @@ -40,6 +40,7 @@ $(document).ready(function() { el: 'main', bus: eventBus, }); + searchListView.listenTo(eventBus, 'searchMovies', searchListView.searchMovies) $('#show-rental-library').on('click', function(event) { event.preventDefault(); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e407031ae..ae9ccd555 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,11 +5,12 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); }, render() { const list = this.$('#movies'); list.empty(); - + this.model.each((movie) => { const movieView = new MovieView({ model: movie, @@ -22,6 +23,10 @@ const MovieListView = Backbone.View.extend({ }); return this; }, + searchMovies(searchTerm) { + this.model.resetUrl(searchTerm); + this.model.fetch() + }, }); export default MovieListView; From dc1cf9e0283540b5e14c76c30915f5c26fb0a475 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 16:02:01 -0800 Subject: [PATCH 10/30] Implement event handling with a form for searching IMDB movies --- dist/index.html | 5 +++++ src/app.js | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/dist/index.html b/dist/index.html index 5dfb9110b..a312750c8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,6 +6,11 @@ +
+ + + +
    diff --git a/src/app.js b/src/app.js index 939cc86a9..02b63cf01 100644 --- a/src/app.js +++ b/src/app.js @@ -46,4 +46,10 @@ $(document).ready(function() { event.preventDefault(); eventBus.trigger('showRentalLibrary'); }); + + $('#search-imdb-movies').on('submit', function(event) { + event.preventDefault(); + const searchTerm = $('#searchTerm').val(); + eventBus.trigger('searchMovies', searchTerm); + }); }); From a0f9179c050f0672ad20e17c1d15dd314731a4e2 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 16:05:16 -0800 Subject: [PATCH 11/30] Prevent automatic rendering of rental library --- src/app.js | 1 + src/views/movie_list_view.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 02b63cf01..65e190809 100644 --- a/src/app.js +++ b/src/app.js @@ -41,6 +41,7 @@ $(document).ready(function() { bus: eventBus, }); searchListView.listenTo(eventBus, 'searchMovies', searchListView.searchMovies) + searchListView.listenTo(searchListView.model, 'update', searchListView.render); $('#show-rental-library').on('click', function(event) { event.preventDefault(); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index ae9ccd555..9c5449c65 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,7 +5,6 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; - this.listenTo(this.model, 'update', this.render); }, render() { const list = this.$('#movies'); From bb91138c27fbc73b6abb773093054f471d54cd30 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Mon, 18 Dec 2017 16:27:30 -0800 Subject: [PATCH 12/30] Add separate template for library movies and search movies --- dist/index.html | 9 +++++++++ src/app.js | 10 +++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index a312750c8..3d5bda90d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -26,6 +26,15 @@ + + diff --git a/src/app.js b/src/app.js index 65e190809..fd8f33cf2 100644 --- a/src/app.js +++ b/src/app.js @@ -3,14 +3,14 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; -import 'css/_settings.css'; -import 'foundation-sites/dist/css/foundation.css'; -import './css/styles.css'; - // Import collections and views import MovieList from 'collections/movie_list'; import MovieListView from 'views/movie_list_view'; +import 'css/_settings.css'; +import 'foundation-sites/dist/css/foundation.css'; +import './css/styles.css'; + let eventBus = {}; eventBus = _.extend(eventBus, Backbone.Events); @@ -36,7 +36,7 @@ $(document).ready(function() { const searchListView = new MovieListView({ model: searchList, - template: _.template($('#library-movie-template').html()), + template: _.template($('#imdb-movie-template').html()), el: 'main', bus: eventBus, }); From 88146c69a72463eba4a39cf48c267d0f9fb7d31f Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Tue, 19 Dec 2017 03:59:41 -0800 Subject: [PATCH 13/30] Add styling. Add events and slide animation for details and add rental form in movie view. Form is not showing in the right place. --- dist/index.html | 80 ++++++++++++++++++++++++------------- src/css/styles.css | 87 +++++++++++++++++++++++++++++------------ src/views/movie_view.js | 13 +++++- 3 files changed, 127 insertions(+), 53 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3d5bda90d..0aca24354 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,41 +1,65 @@ - - - Backbone Baseline - - + + + Backbone Baseline + + +
    +

    Hometown

    +

    Video Store

    +
    +
    -
    -
    -
      -
    -
    +
    +
    +
    +
      +
    +
    -
    +
- + - + - + - - + + diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..9d95d6e8a 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,44 +1,83 @@ @include foundation-everything; -main { - background: lightblue; +body { + background: #ececec; } header { - background-color: lightgreen; - padding: 0.5rem; + background: #2f2f2f; + color: #ffcf00; + padding: 1em; } -#completed-checkbox { - display: inline; +.actions { + padding: 1em; } -label { - display: inline; +#show-rental-library { + display: inline-block; + margin: 1em; } -button.success { - margin-right: 1.2rem; - display: inline; +#search-imdb-movies { + display: inline-block; + float: right; + margin: 1em; + width: 35%; } -aside.create-tasklist { - background-color: navy; - color: #FFFFFF; +#main-content{ + clear: both; } -aside label { - color: #FFFFFF; + +#movies { + list-style-type: none; + margin-left: 4em; + width: 85%; +} + +.movie { + background: #2f2f2f; + border: solid 5px #ffcf00; + border-radius: 5px; + height: 360px; + margin: 1em; + padding: 1em; +} + +.movie img { + border: 4px solid white; + display: inline-block; + float: left; + margin: 1em; +} + +.listing-info { + float: left; + margin: 1em 1em 1em .5em; +} + +.listing-info, .details, .add-rental-form { + color: white; + display: inline-block; } -.completed { - text-decoration: line-through; +.listing-info p { + color: #afafaf; } -div { - display: inline; +.listing-info button { + background: #ffcf00; + color: #2f2f2f; + margin: 6px; } -/* -* { - border-style: solid; + +.slide { + display: none; + width: 27em; + height: 318px; +} + +.details { + overflow: auto; } -*/ diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 820df1132..c134d3cef 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -5,11 +5,22 @@ const MovieView = Backbone.View.extend({ this.template = params.template; this.bus = params.bus; }, + events: { + 'click button.show-details': 'slideView', + 'click button.show-form': 'slideView', + }, render() { const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; - } + }, + slideView(event) { + if (this.$(event.target).attr('class').includes('details')) { + this.$('.details').toggle({direction: 'right'}, 350); + } else { + this.$('.add-rental-form').toggle({direction: 'right'}, 350); + } + }, }) export default MovieView; From 4072930d89486bc5822d26e48a247128c7edc52a Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Tue, 19 Dec 2017 04:09:25 -0800 Subject: [PATCH 14/30] Remove duration argument from toggle function to make it run at default speed. Add hide function to remove the other div if displayed when the button is clicked. --- src/views/movie_view.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/views/movie_view.js b/src/views/movie_view.js index c134d3cef..4b96dcf94 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -16,9 +16,11 @@ const MovieView = Backbone.View.extend({ }, slideView(event) { if (this.$(event.target).attr('class').includes('details')) { - this.$('.details').toggle({direction: 'right'}, 350); + this.$('.add-rental-form').hide(); + this.$('.details').toggle({direction: 'right'}); } else { - this.$('.add-rental-form').toggle({direction: 'right'}, 350); + this.$('.details').hide(); + this.$('.add-rental-form').toggle({direction: 'right'}); } }, }) From f19d8c9c12f64f7a71e8f25245ea6835e430d5e4 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Tue, 19 Dec 2017 11:00:47 -0800 Subject: [PATCH 15/30] Remove height property on product cards and replace with min height, change product cards from a ul to a section --- dist/index.html | 4 ++-- src/css/styles.css | 4 ++-- src/views/movie_list_view.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0aca24354..c628e8d27 100644 --- a/dist/index.html +++ b/dist/index.html @@ -19,8 +19,8 @@

Hometown

-
    -
+
+
diff --git a/src/css/styles.css b/src/css/styles.css index 9d95d6e8a..6e4fa3efc 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -40,7 +40,7 @@ header { background: #2f2f2f; border: solid 5px #ffcf00; border-radius: 5px; - height: 360px; + min-height: 360px; margin: 1em; padding: 1em; } @@ -75,7 +75,7 @@ header { .slide { display: none; width: 27em; - height: 318px; + /* height: 318px; */ } .details { diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 9c5449c65..c6fac9e52 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -14,7 +14,7 @@ const MovieListView = Backbone.View.extend({ const movieView = new MovieView({ model: movie, template: this.template, - tagName: 'li', + tagName: 'article', className: 'movie', bus: this.bus, }); From 23f27db8827a33ab4f577b1b2c76de41eea1205c Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Tue, 19 Dec 2017 11:06:52 -0800 Subject: [PATCH 16/30] Styling changes --- dist/index.html | 2 +- src/css/styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0aca24354..89b44675e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -54,7 +54,7 @@
Add Movie to Inventory
- +
diff --git a/src/css/styles.css b/src/css/styles.css index 9d95d6e8a..0a0540d39 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -69,7 +69,7 @@ header { .listing-info button { background: #ffcf00; color: #2f2f2f; - margin: 6px; + margin: 4px; } .slide { From 02c471571d78da3f9260b7efd1fa1054c14b679d Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Tue, 19 Dec 2017 13:22:14 -0800 Subject: [PATCH 17/30] Add events for adding a rental to the rental library from the IMDB list form. --- src/app.js | 2 +- src/models/movie.js | 5 +++++ src/views/movie_list_view.js | 15 +++++++++++++++ src/views/movie_view.js | 6 ++++++ 4 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index fd8f33cf2..3041467b1 100644 --- a/src/app.js +++ b/src/app.js @@ -22,7 +22,6 @@ $(document).ready(function() { rentalLibraryList.bus = eventBus; rentalLibraryList.fetch(); - const rentalLibraryListView = new MovieListView({ model: rentalLibraryList, template: _.template($('#library-movie-template').html()), @@ -30,6 +29,7 @@ $(document).ready(function() { bus: eventBus, }); rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.render); + rentalLibraryListView.listenTo(eventBus, 'addInventory', rentalLibraryListView.addRental); const searchList = new MovieList(); searchList.bus = eventBus; diff --git a/src/models/movie.js b/src/models/movie.js index 47a1a2e23..dad6ece12 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -5,6 +5,11 @@ const Movie = Backbone.Model.extend({ this.title = params.title; this.image_url = params.image_url; this.bus = params.bus; + this.listenTo(this.bus, 'addInventory', this.addInventory); + }, + addInventory(quantity) { + console.log('in addInventory'); + console.log(quantity); }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 9c5449c65..62404cc9a 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,6 +5,7 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); }, render() { const list = this.$('#movies'); @@ -26,6 +27,20 @@ const MovieListView = Backbone.View.extend({ this.model.resetUrl(searchTerm); this.model.fetch() }, + addRental(model, quantity) { + console.log(model); + const newRental = { + title: model.get('title'), + overview: model.get('overview'), + release_date: model.get('release_date'), + image_url: model.get('image_url'), + external_id: model.get('id'), + inventory: quantity, + }; + console.log(newRental); + this.model.add(newRental); + console.log(this.model.models); + }, }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 4b96dcf94..af3f1e64e 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -8,6 +8,7 @@ const MovieView = Backbone.View.extend({ events: { 'click button.show-details': 'slideView', 'click button.show-form': 'slideView', + 'submit #add-rental': 'newInventory', }, render() { const compiledTemplate = this.template(this.model.toJSON()); @@ -23,6 +24,11 @@ const MovieView = Backbone.View.extend({ this.$('.add-rental-form').toggle({direction: 'right'}); } }, + newInventory(event) { + event.preventDefault(); + let quantity = this.$('#add-rental [name="inventory"]').val(); + this.bus.trigger('addInventory', this.model, quantity); + }, }) export default MovieView; From 5d8691e7670079c98e8a38ddd530722d5130261a Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Tue, 19 Dec 2017 13:26:00 -0800 Subject: [PATCH 18/30] Display details on library movies --- dist/index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/dist/index.html b/dist/index.html index 89b44675e..aa62b7dfa 100644 --- a/dist/index.html +++ b/dist/index.html @@ -33,6 +33,15 @@

Hometown

<%- title %>

<%- release_date.slice(0, 4) %>

+
+

<%- title %>

+

<%- release_date.slice(0, 4) %>

+ +
+
+
Overview
+

<%- overview %>

+
+ + diff --git a/src/app.js b/src/app.js index 3fa58a19b..7bf55b678 100644 --- a/src/app.js +++ b/src/app.js @@ -6,6 +6,8 @@ import Backbone from 'backbone'; // Import collections and views import MovieList from 'collections/movie_list'; import MovieListView from 'views/movie_list_view'; +import CustomerList from 'collections/customer_list'; +import CustomerListView from 'views/customer_list_view'; import 'css/_settings.css'; import 'foundation-sites/dist/css/foundation.css'; @@ -43,6 +45,17 @@ $(document).ready(function() { searchListView.listenTo(eventBus, 'searchMovies', searchListView.searchMovies) searchListView.listenTo(searchListView.model, 'update', searchListView.render); + const customerList = new CustomerList(); + customerList.bus = eventBus; + + const customerListView = new CustomerListView({ + model: customerList, + template: _.template($('#customer-template').html()), + el: 'main', + bus: eventBus, + }); + customerList.fetch(); + $('#show-rental-library').on('click', function(event) { event.preventDefault(); eventBus.trigger('showRentalLibrary'); diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js new file mode 100644 index 000000000..f4dd1fcb3 --- /dev/null +++ b/src/collections/customer_list.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import Customer from 'models/customer'; + +const CustomerList = Backbone.Collection.extend({ + model: Customer, + url: 'http://localhost:3000/customers/', +}); + +export default CustomerList; diff --git a/src/models/customer.js b/src/models/customer.js new file mode 100644 index 000000000..e0e2bf22b --- /dev/null +++ b/src/models/customer.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Customer = Backbone.Model.extend({ + +}); + +export default Customer; diff --git a/src/views/customer_list_view.js b/src/views/customer_list_view.js new file mode 100644 index 000000000..09f936afd --- /dev/null +++ b/src/views/customer_list_view.js @@ -0,0 +1,28 @@ +import Backbone from 'backbone'; +import CustomerView from './customer_view'; + +const CustomerListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + this.listenTo(this.model, 'update', this.render); + }, + render() { + const list = this.$('#customers'); + list.empty(); + + this.model.each((customer) => { + const customerView = new CustomerView({ + model: customer, + template: this.template, + tagName: 'li', + className: 'customer', + bus: this.bus, + }); + list.append(customerView.render().$el); + }); + return this; + }, +}); + +export default CustomerListView; diff --git a/src/views/customer_view.js b/src/views/customer_view.js new file mode 100644 index 000000000..f6e9d5e12 --- /dev/null +++ b/src/views/customer_view.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +const CustomerView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, +}); + +export default CustomerView; From fdbe9fe88014bf23763adf4d886d43078ca76d11 Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Wed, 20 Dec 2017 11:12:29 -0800 Subject: [PATCH 25/30] Adjust html to have $ in front of account credit, show registration year, and condense address. --- dist/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0b7db461a..4a515e309 100644 --- a/dist/index.html +++ b/dist/index.html @@ -80,13 +80,13 @@
Add Movie to Inventory
From c6a2e57228e0a3f56077a9904862b952a0323bf6 Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Wed, 20 Dec 2017 13:07:13 -0800 Subject: [PATCH 26/30] Add radio buttons to movie search form --- dist/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/dist/index.html b/dist/index.html index 4a515e309..aff3a414f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,6 +17,12 @@

Hometown

+ + + + + + From 6e88f153afe9cc1addbb799b5d84fe4bcfd8dd6e Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Wed, 20 Dec 2017 13:32:01 -0800 Subject: [PATCH 27/30] Create a rental display list, use the rental list as the referencelist for the rental list view --- src/app.js | 10 +++++++--- src/views/movie_list_view.js | 4 ++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/app.js b/src/app.js index 7bf55b678..554d23037 100644 --- a/src/app.js +++ b/src/app.js @@ -24,13 +24,17 @@ $(document).ready(function() { rentalLibraryList.bus = eventBus; rentalLibraryList.fetch(); + const rentalDisplayList = new MovieList(); + rentalDisplayList.bus = eventBus; + const rentalLibraryListView = new MovieListView({ - model: rentalLibraryList, + model: rentalDisplayList, template: _.template($('#library-movie-template').html()), el: 'main', bus: eventBus, + referenceList: rentalLibraryList, }); - rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.render); + rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.completeList); rentalLibraryListView.listenTo(eventBus, 'addInventory', rentalLibraryListView.addRental); const searchList = new MovieList(); @@ -67,7 +71,7 @@ $(document).ready(function() { eventBus.trigger('searchMovies', searchTerm); }); - $('nav a').click(function(event) { + $('nav a').click(function() { let divId = $(this).attr('id'); let n = divId.indexOf('-'); divId = `${divId.substring(0, n)}-container`; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index ca8cdc42e..09735071c 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -5,6 +5,7 @@ const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + this.referenceList = params.referenceList; this.listenTo(this.model, 'update', this.render); }, render() { @@ -23,6 +24,9 @@ const MovieListView = Backbone.View.extend({ }); return this; }, + completeList() { + this.model.set(this.referenceList.models); + }, searchMovies(searchTerm) { this.model.resetUrl(searchTerm); this.model.fetch() From 6bdb153f3c97ad26f3f37cf473ababc01ccaf9ab Mon Sep 17 00:00:00 2001 From: Victoria Sawchuk Date: Wed, 20 Dec 2017 13:58:18 -0800 Subject: [PATCH 28/30] Choose between imdb and rental library for searching purposes --- dist/index.html | 2 +- src/app.js | 8 +++++--- src/css/styles.css | 2 +- src/views/movie_list_view.js | 8 +++++++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/dist/index.html b/dist/index.html index aff3a414f..107ceb0d4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,7 +16,7 @@

Hometown

- + diff --git a/src/app.js b/src/app.js index 554d23037..071d79bcd 100644 --- a/src/app.js +++ b/src/app.js @@ -36,6 +36,7 @@ $(document).ready(function() { }); rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.completeList); rentalLibraryListView.listenTo(eventBus, 'addInventory', rentalLibraryListView.addRental); + rentalLibraryListView.listenTo(eventBus, 'searchlibrary', rentalLibraryListView.searchLibrary); const searchList = new MovieList(); searchList.bus = eventBus; @@ -46,7 +47,7 @@ $(document).ready(function() { el: 'main', bus: eventBus, }); - searchListView.listenTo(eventBus, 'searchMovies', searchListView.searchMovies) + searchListView.listenTo(eventBus, 'searchimdb', searchListView.searchIMDB) searchListView.listenTo(searchListView.model, 'update', searchListView.render); const customerList = new CustomerList(); @@ -65,10 +66,11 @@ $(document).ready(function() { eventBus.trigger('showRentalLibrary'); }); - $('#search-imdb-movies').on('submit', function(event) { + $('#search-movies').on('submit', function(event) { event.preventDefault(); + const location = $('#search-movies [name="searchList"]:checked').val(); const searchTerm = $('#searchTerm').val(); - eventBus.trigger('searchMovies', searchTerm); + eventBus.trigger(`search${location}`, searchTerm); }); $('nav a').click(function() { diff --git a/src/css/styles.css b/src/css/styles.css index c59904a9c..0ecdad1e9 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -31,7 +31,7 @@ header a { margin: 1em; } -#search-imdb-movies { +#search-movies { display: inline-block; float: right; margin: 1em; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 09735071c..6bedb4b28 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import Backbone from 'backbone'; import MovieView from './movie_view'; @@ -27,10 +28,15 @@ const MovieListView = Backbone.View.extend({ completeList() { this.model.set(this.referenceList.models); }, - searchMovies(searchTerm) { + searchIMDB(searchTerm) { this.model.resetUrl(searchTerm); this.model.fetch() }, + searchLibrary(searchTerm) { + this.model.set(_.filter(this.referenceList.models, function(movie) { + return movie.get('title').toLowerCase().includes(searchTerm.toLowerCase()); + })); + }, addRental(model, quantity) { const newRental = { title: model.get('title'), From 09344f1f7564245afaf5413de5f2a1db0c4907fa Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Thu, 21 Dec 2017 02:16:31 -0800 Subject: [PATCH 29/30] Adjust styling for customers and movie lists. --- dist/index.html | 38 +++++++++++++++++++++----------------- src/css/styles.css | 45 +++++++++++++++++++++++++++++++-------------- 2 files changed, 52 insertions(+), 31 deletions(-) diff --git a/dist/index.html b/dist/index.html index 107ceb0d4..1a61572ac 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,7 +2,10 @@ - Backbone Baseline + Hometown Video + + +
@@ -14,22 +17,23 @@

Hometown

Movies | Customers | Rentals
-
- - - - - - - - - - - -
+
+ +
+ + + + + + + + + +
+
@@ -40,7 +44,7 @@

Hometown

@@ -64,7 +68,7 @@
Overview
<%- title %> -
+

<%- title %>

<%- release_date.slice(0, 4) %>

@@ -78,7 +82,7 @@
Overview
Add Movie to Inventory
- +
diff --git a/src/css/styles.css b/src/css/styles.css index 0ecdad1e9..6bab44f5b 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -10,6 +10,18 @@ header { padding: 1em; } +header h1 { + margin-bottom: 0; + line-height: 1em; + font-family: 'Bungee Inline', cursive; +} + +header p { + margin-top: 0; + margin-left: 3px; + line-height: 1em; +} + nav { text-align: right; } @@ -38,25 +50,27 @@ header a { width: 35%; } -#main-content{ - clear: both; -} - #movies { - list-style-type: none; - margin-left: 4em; - width: 85%; + clear: both; + margin: 0 auto; } -.movie { +.movie, .customer { background: #2f2f2f; border: solid 5px #ffcf00; border-radius: 5px; - min-height: 360px; margin: 1em; padding: 1em; } +.movie { + min-height: 360px; +} + +.customer { + color: #ffcf00; +} + .movie img { border: 4px solid white; display: inline-block; @@ -69,12 +83,12 @@ header a { margin: 1em 1em 1em .5em; } -.listing-info, .details, .add-rental-form { +.listing-info, .slide { color: white; display: inline-block; } -.listing-info p { +.listing-info p, .customer p, #add-rental label { color: #afafaf; } @@ -86,10 +100,13 @@ header a { .slide { display: none; - width: 27em; - /* height: 318px; */ + padding: 1em; } .details { - overflow: auto; + overflow: scroll; +} + +#add-rental input[name="inventory"] { + width: 3em; } From 3af31ea603ede6fe1701bf52457854ca4cacf2f1 Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Thu, 21 Dec 2017 02:19:42 -0800 Subject: [PATCH 30/30] Set a min-width to the listing-info div for uniform appearance. --- src/css/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/styles.css b/src/css/styles.css index 6bab44f5b..19d966b59 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -81,6 +81,7 @@ header a { .listing-info { float: left; margin: 1em 1em 1em .5em; + min-width: 35%; } .listing-info, .slide {