From a101e49e7cc8976d190b79a8eccde1a91a4eb9a9 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Mon, 18 Dec 2017 13:35:24 -0800 Subject: [PATCH 01/19] Initial Setup: Added movie model, collection, and respective views --- .gitignore | 2 ++ src/collections/movie_list.js | 8 ++++++++ src/models/movie.js | 7 +++++++ src/views/movie_list_view.js | 10 ++++++++++ src/views/movie_view.js | 8 ++++++++ 5 files changed, 35 insertions(+) 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/.gitignore b/.gitignore index a360e4d75..1da5cb9f5 100644 --- a/.gitignore +++ b/.gitignore @@ -71,3 +71,5 @@ Icon Network Trash Folder Temporary Items .apdisk + +.env diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..c0e72dcc8 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Movie from 'models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..2e3c413ca --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + +}); + +export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..400f3aeff --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import Movie from '../models/movie'; +import MovieView from '../views/movie_view'; + +const MovieListView = Backbone.View.extend({ + +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..40bd7c437 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + +}); + +export default MovieView; From fa62cb506c0917f4bc91d24c9f9ae678db37fd5a Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Mon, 18 Dec 2017 13:38:07 -0800 Subject: [PATCH 02/19] imported models, collections and views for Movie and Movie List to app.js --- .gitignore | 2 ++ src/app.js | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/.gitignore b/.gitignore index a360e4d75..1da5cb9f5 100644 --- a/.gitignore +++ b/.gitignore @@ -71,3 +71,5 @@ Icon Network Trash Folder Temporary Items .apdisk + +.env diff --git a/src/app.js b/src/app.js index 30c00d594..fb0fbf363 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 Movie from 'models/movie'; +import MovieList from 'collects/movie_list'; +import MovieView from 'views/movie'; +import MovieListView from 'view/movie_list'; // ready to go $(document).ready(function() { From b3e4c0dbedc1ab0435503f265056a9ad6c6cb8d1 Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Mon, 18 Dec 2017 14:46:44 -0800 Subject: [PATCH 03/19] added templates for movie and movie details page --- dist/index.html | 40 ++++++++++++++++++++++++++++++++++- src/collections/movie_list.js | 8 +++++++ src/models/movie.js | 4 ++++ 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 559b18ecd..e6c794ac5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,10 +6,48 @@
- +
+

Movies

+
+
    +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ + diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index c0e72dcc8..81de726cc 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,6 +3,14 @@ import Movie from 'models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, + url: 'localhost:3000/movies', + parse(response) { + response.forEach(function(movieAttrs) { + if (movieAttrs.inventory == null) { + movieAttrs.inventory = 0; + } + }) + } }); export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js index 2e3c413ca..fbf1feff7 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,6 +1,10 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ + urlRoot: 'localhost:3000/movies', + defaults: { + inventory: 0, + }, }); From 1c7b12e1381774f6d99d91eca3ba32ff4b82902f Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Mon, 18 Dec 2017 15:33:45 -0800 Subject: [PATCH 04/19] now able to fetch movies from our VideoStoreAPI, need to work on rendering view for the movie list --- src/app.js | 9 ++++++--- src/collections/movie_list.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app.js b/src/app.js index fb0fbf363..c4e8da81d 100644 --- a/src/app.js +++ b/src/app.js @@ -6,12 +6,15 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; import Movie from 'models/movie'; -import MovieList from 'collects/movie_list'; -import MovieView from 'views/movie'; -import MovieListView from 'view/movie_list'; +import MovieList from 'collections/movie_list'; +import MovieView from 'views/movie_view'; +import MovieListView from 'views/movie_list_view'; // ready to go $(document).ready(function() { + const movies = new MovieList(); + const fetchedMovies = movies.fetch(); + console.log(fetchedMovies); $('#main-content').append('

Hello World!

'); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 81de726cc..9b4ec5ff2 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: 'localhost:3000/movies', + url: 'http://localhost:3000/movies', parse(response) { response.forEach(function(movieAttrs) { if (movieAttrs.inventory == null) { From aa2d766352c76389505ff31f7308cf612bda0183 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Mon, 18 Dec 2017 16:22:43 -0800 Subject: [PATCH 05/19] Added render & initialize methods in movie & movie_list views --- src/app.js | 22 +++++++++++++++++++--- src/models/movie.js | 7 +++++++ src/views/movie_list_view.js | 26 +++++++++++++++++++++++++- src/views/movie_view.js | 10 ++++++++++ 4 files changed, 61 insertions(+), 4 deletions(-) diff --git a/src/app.js b/src/app.js index c4e8da81d..ea025c0d0 100644 --- a/src/app.js +++ b/src/app.js @@ -10,11 +10,27 @@ import MovieList from 'collections/movie_list'; import MovieView from 'views/movie_view'; import MovieListView from 'views/movie_list_view'; -// ready to go +let bus = {}; +bus = _.extend(bus, Backbone.Events); + $(document).ready(function() { const movies = new MovieList(); - const fetchedMovies = movies.fetch(); - console.log(fetchedMovies); + movies.fetch(); + //movies.render(); + console.log('FETCHED MOVIES:'); + + movies.on('update', render, movies); + + // const movieData = fetchedMovies.responseJSON + // console.log('MOVIE DATA:'); + // console.log(movieData); + + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main', + }); + $('#main-content').append('

Hello World!

'); diff --git a/src/models/movie.js b/src/models/movie.js index fbf1feff7..92c2e6971 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -5,6 +5,13 @@ const Movie = Backbone.Model.extend({ defaults: { inventory: 0, }, + validate(attributes) { + // title: + // overview: + // release_date: + // image_url: + // external_id: + }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 400f3aeff..10f9fdffb 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,7 +4,31 @@ import Movie from '../models/movie'; import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ - + initialize(params) { + this.template = params.template; + this.quoteList = params.quoteList; + console.log('ORDERLIST VIEW FOR QUOTES'); + console.log(this.quoteList); + this.listenTo(this.model, 'update', this.render); + }, + render() { + console.log('INSIDE MOVIE LIST VIEW RENDER'); + // Clear the unordered list + this.$('#movies').empty(); + // Iterate through the list rendering each order + this.model.forEach((movie) => { + // Create a new OrderView with the model & template + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie', + }); + // Then render the OrderView and append the resulting HTML to the DOM. + this.$('#movies').append(movieView.render().$el); + }); + return this; + }, }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 40bd7c437..b74750b1e 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -2,7 +2,17 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + // Listen to changes in the model and call render when they occur. + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, }); export default MovieView; From 6b90f08940f9b3f06d39766740e8c3e77ecee576 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Mon, 18 Dec 2017 16:39:27 -0800 Subject: [PATCH 06/19] Updated movie and movie_list render methods to display all movies in rental library (and commented out movie_list.js parse method) --- dist/index.html | 4 ++-- src/app.js | 9 ++++----- src/collections/movie_list.js | 14 +++++++------- src/views/movie_list_view.js | 10 +++++----- src/views/movie_view.js | 2 +- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/dist/index.html b/dist/index.html index e6c794ac5..2c95a2e59 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,8 +9,8 @@

Movies

-
    -
+
    +
diff --git a/src/app.js b/src/app.js index ea025c0d0..d5aa9d010 100644 --- a/src/app.js +++ b/src/app.js @@ -16,10 +16,9 @@ bus = _.extend(bus, Backbone.Events); $(document).ready(function() { const movies = new MovieList(); movies.fetch(); - //movies.render(); - console.log('FETCHED MOVIES:'); - movies.on('update', render, movies); + console.log('FETCHED MOVIES:'); + console.log(movies); // const movieData = fetchedMovies.responseJSON // console.log('MOVIE DATA:'); @@ -31,7 +30,7 @@ $(document).ready(function() { el: 'main', }); - - $('#main-content').append('

Hello World!

'); + movieListView.render(); + // $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 9b4ec5ff2..cabd27d49 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,13 +4,13 @@ import Movie from 'models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', - parse(response) { - response.forEach(function(movieAttrs) { - if (movieAttrs.inventory == null) { - movieAttrs.inventory = 0; - } - }) - } + // parse(response) { + // response.forEach(function(movieAttrs) { + // if (movieAttrs.inventory == null) { + // movieAttrs.inventory = 0; + // } + // }) + // }, }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 10f9fdffb..e21b2da9b 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -6,24 +6,24 @@ import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; - this.quoteList = params.quoteList; - console.log('ORDERLIST VIEW FOR QUOTES'); - console.log(this.quoteList); + this.model = params.model; this.listenTo(this.model, 'update', this.render); }, render() { console.log('INSIDE MOVIE LIST VIEW RENDER'); + console.log(this.model); // Clear the unordered list this.$('#movies').empty(); // Iterate through the list rendering each order - this.model.forEach((movie) => { - // Create a new OrderView with the model & template + this.model.each((movie) => { + // Create a new view with the model & template const movieView = new MovieView({ model: movie, template: this.template, tagName: 'li', className: 'movie', }); + console.log('MAKING MOVIE VIEWS'); // Then render the OrderView and append the resulting HTML to the DOM. this.$('#movies').append(movieView.render().$el); }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index b74750b1e..aee95fdea 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -4,7 +4,7 @@ import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ initialize(params) { this.template = params.template; - + this.model = params.model; // Listen to changes in the model and call render when they occur. this.listenTo(this.model, "change", this.render); }, From 098e2be1dc978c62790165e214486220b537c2f1 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Tue, 19 Dec 2017 12:31:57 -0800 Subject: [PATCH 07/19] Added searchMovies() in movie_list_view.js and search(query) custom function in movie_list.js --- dist/index.html | 15 +++++++++------ src/app.js | 21 +++++++++++++-------- src/collections/movie_list.js | 13 ++++++------- src/views/movie_list_view.js | 12 ++++++++++++ 4 files changed, 40 insertions(+), 21 deletions(-) diff --git a/dist/index.html b/dist/index.html index 2c95a2e59..b002e3712 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,17 +7,20 @@
-

Movies

-
-
    -
-
+

Movies

+
+
    +
+
+
+
- + +
diff --git a/src/app.js b/src/app.js index d5aa9d010..427b83041 100644 --- a/src/app.js +++ b/src/app.js @@ -14,23 +14,28 @@ let bus = {}; bus = _.extend(bus, Backbone.Events); $(document).ready(function() { - const movies = new MovieList(); - movies.fetch(); + const rentalMovies = new MovieList(); + rentalMovies.fetch(); console.log('FETCHED MOVIES:'); - console.log(movies); - - // const movieData = fetchedMovies.responseJSON - // console.log('MOVIE DATA:'); - // console.log(movieData); + console.log(rentalMovies); const movieListView = new MovieListView({ - model: movies, + model: rentalMovies, template: _.template($('#movie-template').html()), el: 'main', }); movieListView.render(); + + const searchedMovies = new MovieList(); + + const resultsListView = new MovieListView({ + model: searchedMovies, + template: _.template($('#movie-template').html()), + el: 'main', + }); + // $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index cabd27d49..d50d71545 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,13 +4,12 @@ import Movie from 'models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', - // parse(response) { - // response.forEach(function(movieAttrs) { - // if (movieAttrs.inventory == null) { - // movieAttrs.inventory = 0; - // } - // }) - // }, + search(query) { + // this.url = `http://localhost:3000/movies/search?query=${query}` + console.log('INSIDE MOVIELIST search method'); + this.url = `http://localhost:3000/movies?query=${query}` + this.fetch(); + }, }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e21b2da9b..4bcc20dbe 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -29,6 +29,18 @@ const MovieListView = Backbone.View.extend({ }); return this; }, + events: { + 'click button.btn-search': 'searchMovies', + }, + searchMovies: function(event) { + event.preventDefault(); + console.log('IN searchMovies'); + console.log(this); + + const query = this.$('input[name=movie-query]').val(); + this.model.search(query); + }, + }); export default MovieListView; From b0ff2e185c7db07dab3bb051c2cee77a3d00ffb7 Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Tue, 19 Dec 2017 13:26:30 -0800 Subject: [PATCH 08/19] implemented viewRentalMovies function and view --- dist/index.html | 29 +++++++++++++++++++++++------ src/app.js | 4 +++- src/collections/movie_list.js | 6 ++++-- src/views/movie_list_view.js | 9 +++++++-- 4 files changed, 37 insertions(+), 11 deletions(-) diff --git a/dist/index.html b/dist/index.html index b002e3712..cf162aa95 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,6 +6,16 @@
+
+

Video Store

+ +
+
+ + +
+
+

Movies

@@ -13,16 +23,23 @@

Movies

+
-
-
- - -
-
diff --git a/src/app.js b/src/app.js index 427b83041..426e23c7d 100644 --- a/src/app.js +++ b/src/app.js @@ -19,6 +19,7 @@ $(document).ready(function() { console.log('FETCHED MOVIES:'); console.log(rentalMovies); + // $('#results-container').hide(); const movieListView = new MovieListView({ model: rentalMovies, @@ -33,7 +34,8 @@ $(document).ready(function() { const resultsListView = new MovieListView({ model: searchedMovies, template: _.template($('#movie-template').html()), - el: 'main', + // el: 'main', + el: '' }); // $('#main-content').append('

Hello World!

'); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index d50d71545..16edb4e79 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -5,11 +5,13 @@ const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', search(query) { - // this.url = `http://localhost:3000/movies/search?query=${query}` - console.log('INSIDE MOVIELIST search method'); this.url = `http://localhost:3000/movies?query=${query}` this.fetch(); }, + viewRentalMovies() { + this.url = 'http://localhost:3000/movies'; + this.fetch(); + } }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 4bcc20dbe..adf8dd5f8 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -31,15 +31,20 @@ const MovieListView = Backbone.View.extend({ }, events: { 'click button.btn-search': 'searchMovies', + 'click button.btn-rental-lib': 'viewMovies', }, searchMovies: function(event) { event.preventDefault(); - console.log('IN searchMovies'); - console.log(this); + this.$('.movies-container h2').html('Results'); + this.$('#results-container').show(); const query = this.$('input[name=movie-query]').val(); this.model.search(query); }, + viewMovies: function(event) { + this.$('.movies-container h2').html('Rental Library Movies'); + this.model.viewRentalMovies(); + } }); From 8836e080e2f94bdbd90e56200905e69cf1895d42 Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Tue, 19 Dec 2017 15:05:39 -0800 Subject: [PATCH 09/19] drafting logic for adding a movie to rental library --- dist/index.html | 2 +- src/app.js | 2 ++ src/collections/movie_list.js | 2 +- src/models/movie.js | 4 ++-- src/views/movie_details_view.js | 7 +++++++ src/views/movie_list_view.js | 14 +++++++++++++- src/views/movie_view.js | 15 +++++++++++++++ 7 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 src/views/movie_details_view.js diff --git a/dist/index.html b/dist/index.html index cf162aa95..1aeb04181 100644 --- a/dist/index.html +++ b/dist/index.html @@ -55,7 +55,7 @@

Results

<%- title %>

$<%- release_date %>
- + + diff --git a/src/app.js b/src/app.js index 711bd8ea5..fbcfaa16a 100644 --- a/src/app.js +++ b/src/app.js @@ -25,6 +25,7 @@ $(document).ready(function() { const movieListView = new MovieListView({ model: rentalMovies, template: _.template($('#movie-template').html()), + detailsTemplate: _.template($('#movie-details-template').html()), el: 'main', }); @@ -36,9 +37,11 @@ $(document).ready(function() { model: searchedMovies, libary: rentalMovies, template: _.template($('#movie-template').html()), + detailsTemplate: _.template($('#movie-details-template').html()), el: 'main', }); + // $('#main-content').append('

Hello World!

'); }); diff --git a/src/css/styles.css b/src/css/styles.css index d56848d8e..b816bcf92 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,12 +1,13 @@ @include foundation-everything; main { - background: lightblue; + background: snow; } header { - background-color: lightgreen; + background-color: black; padding: 0.5rem; + color: white; } #completed-checkbox { @@ -42,6 +43,21 @@ div { list-style-type: none; } +header h1, #search-form, header p, header button { + display: inline-block; +} + +#search-form { + padding-top: 20px; +} + +.float-right { + float: right; +} + +#rental-availability{ + color: red; +} /* * { border-style: solid; diff --git a/src/models/movie.js b/src/models/movie.js index fb91457d9..bb48d2f2a 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -2,9 +2,6 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ urlRoot: 'http://localhost:3000/movies', - defaults: { - inventory: 0, - }, validate(attributes) { // title: // overview: diff --git a/src/views/movie_details_view.js b/src/views/movie_details_view.js index 27b1212aa..1bc367d72 100644 --- a/src/views/movie_details_view.js +++ b/src/views/movie_details_view.js @@ -3,5 +3,40 @@ import _ from 'underscore'; import Movie from '../models/movie'; const MovieDetailsView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.model = params.model; + // Listen to changes in the model and call render when they occur. + this.listenTo(this.model, "change", this.render); + }, + events: { + 'click button.btn-all-movies': 'showRentalsLibrary', + 'click button.btn-add-movie': 'addMovie', + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + showRentalsLibrary(event) { + console.log(this.$el); + // hiding the Movie Details View + this.$el.hide(); + }, + addMovie() { + console.log('in Add Movie'); + // console.log(this.model); + + const movieData = this.model.attributes; + console.log('MOVIE DATA:'); + console.log(movieData); + + this.model.save(); + console.log('the movie saved'); + + alert(`Woohoo! ${this.model.attributes.title} is now added to the rental library!`) + }, }); + +export default MovieDetailsView; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 9c4e4def6..0905a7074 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -6,6 +6,7 @@ import MovieView from '../views/movie_view'; const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.detailsTemplate = params.detailsTemplate; this.model = params.model; this.listenTo(this.model, 'update', this.render); }, @@ -19,6 +20,7 @@ const MovieListView = Backbone.View.extend({ // Create a new view with the model & template const movieView = new MovieView({ model: movie, + detailsTemplate: this.detailsTemplate, template: this.template, tagName: 'li', className: 'movie row', @@ -33,6 +35,8 @@ const MovieListView = Backbone.View.extend({ events: { 'click button.btn-search': 'searchMovies', 'click button.btn-rental-lib': 'viewMovies', + 'click button.btn-movie-details': 'hideRentalsLibrary', + 'click button.btn-all-movies': 'showRentalsLibrary', }, searchMovies: function(event) { event.preventDefault(); @@ -45,7 +49,17 @@ const MovieListView = Backbone.View.extend({ viewMovies: function(event) { this.$('.movies-container h2').html('Rental Library Movies'); this.model.viewRentalMovies(); + this.$('.movies-container').show(); + this.$('#movie-details-container').hide(); }, + hideRentalsLibrary: function(event) { + this.$('.movies-container').hide(); + this.$('#movie-details-container').show(); + }, + showRentalsLibrary: function(event) { + console.log('in the Movie List View showRentalsLibrary function'); + this.$('.movies-container').show(); + } }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 82f6e0c25..5aaff60c3 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,33 +1,37 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; +import MovieDetailsView from '../views/movie_details_view'; const MovieView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.model = params.model; + this.detailsTemplate = params.detailsTemplate; // Listen to changes in the model and call render when they occur. this.listenTo(this.model, "change", this.render); }, events: { - 'click button.btn-add-movie': 'addMovie', + 'click button.btn-movie-details': 'viewMovie', }, render() { const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; }, - addMovie() { - console.log('in Add Movie'); - // console.log(this.model); + viewMovie() { + // console.log(this.$('#movies-container')); + // this.$el.hide(); + console.log('viewing movie'); + const movieDetailsView = new MovieDetailsView({ + model: this.model, + template: this.detailsTemplate, + // tagName: 'li', + // className: 'movie row', + el: '#movie-details-container', + }); - const movieData = this.model.attributes; - console.log('MOVIE DATA:'); - console.log(movieData); - - this.model.save(); - console.log('the movie saved'); - - alert(`Woohoo! ${this.model.attributes.title} is now added to the rental library!`) + this.$('main').prepend(movieDetailsView.render().$el); + this.$('#movie-details-container').show(); } }); From f394edb3738c76302053b0eda616e3399d8a197d Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Wed, 20 Dec 2017 17:04:52 -0800 Subject: [PATCH 14/19] Styling: Results can be viewed after searching through movie view, and rental library title is now link --- dist/index.html | 18 ++---------------- src/css/styles.css | 8 ++++++-- src/views/movie_details_view.js | 15 +++++++++++++-- src/views/movie_list_view.js | 7 ++++--- src/views/movie_view.js | 6 +++--- 5 files changed, 28 insertions(+), 26 deletions(-) diff --git a/dist/index.html b/dist/index.html index 91e7c9210..e7b89031b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,8 +7,7 @@
-

jamny's video store

- +

jamny's Video Rental Library

@@ -23,19 +22,6 @@

Rental Movies

-
@@ -69,7 +55,7 @@

<%- title %>

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

Overview: <%- overview %>

- <%= external_id ? '' : '

This movie is available in our rental library

' %> + <%= external_id ? '' : '

This movie is now in our rental library

' %> <%= external_id ? '' : '' %> diff --git a/src/css/styles.css b/src/css/styles.css index b816bcf92..5840409b4 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,7 +1,7 @@ @include foundation-everything; -main { - background: snow; +body { + background: snow; } header { @@ -58,6 +58,10 @@ header h1, #search-form, header p, header button { #rental-availability{ color: red; } + +#home { + cursor: pointer; +} /* * { border-style: solid; diff --git a/src/views/movie_details_view.js b/src/views/movie_details_view.js index 1bc367d72..75bdcbf5e 100644 --- a/src/views/movie_details_view.js +++ b/src/views/movie_details_view.js @@ -11,7 +11,8 @@ const MovieDetailsView = Backbone.View.extend({ }, events: { 'click button.btn-all-movies': 'showRentalsLibrary', - 'click button.btn-add-movie': 'addMovie', + 'click button.btn-add-movie': 'addMovie', + 'click button.btn-search': 'searchMovies', }, render() { const compiledTemplate = this.template(this.model.toJSON()); @@ -35,7 +36,17 @@ const MovieDetailsView = Backbone.View.extend({ this.model.save(); console.log('the movie saved'); - alert(`Woohoo! ${this.model.attributes.title} is now added to the rental library!`) + //alert(`Woohoo! ${this.model.attributes.title} is now added to the rental library!`); + }, + searchMovies: function(event) { + event.preventDefault(); + this.$('.movies-container h2').html('Results'); + console.log('INSIDE MOVIE VIEW: searchMovies'); + this.$('#movie-details-container').hide(); + this.$('#results-container').show(); + + const query = this.$('input[name=movie-query]').val(); + this.model.search(query); }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 0905a7074..a23e406e4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -34,15 +34,16 @@ const MovieListView = Backbone.View.extend({ }, events: { 'click button.btn-search': 'searchMovies', - 'click button.btn-rental-lib': 'viewMovies', + 'click .btn-rental-lib': 'viewMovies', 'click button.btn-movie-details': 'hideRentalsLibrary', 'click button.btn-all-movies': 'showRentalsLibrary', }, searchMovies: function(event) { event.preventDefault(); this.$('.movies-container h2').html('Results'); - this.$('#results-container').show(); - + this.$('#movie-details-container').hide(); + this.$('#movies-container').show(); + console.log('***INSIDE MOVIE LIST VIEW: searchMovies'); const query = this.$('input[name=movie-query]').val(); this.model.search(query); }, diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 5aaff60c3..60c49b0f5 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -19,8 +19,8 @@ const MovieView = Backbone.View.extend({ return this; }, viewMovie() { - // console.log(this.$('#movies-container')); - // this.$el.hide(); + console.log('***INSIDE MOVIE VIEW'); + console.log(this.model); console.log('viewing movie'); const movieDetailsView = new MovieDetailsView({ model: this.model, @@ -32,7 +32,7 @@ const MovieView = Backbone.View.extend({ this.$('main').prepend(movieDetailsView.render().$el); this.$('#movie-details-container').show(); - } + }, }); export default MovieView; From 94f320f06093537849abc7925944122135fa1f66 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Thu, 21 Dec 2017 01:36:08 -0800 Subject: [PATCH 15/19] Added movie_list styling and movie_details_view styling --- dist/favicon.png | Bin 0 -> 5939 bytes dist/index.html | 78 +++++++++++++++------- src/css/styles.css | 126 +++++++++++++++++++++++++++++------ src/views/movie_list_view.js | 6 +- src/views/movie_view.js | 2 +- webpack.config.js | 2 +- 6 files changed, 165 insertions(+), 49 deletions(-) create mode 100644 dist/favicon.png diff --git a/dist/favicon.png b/dist/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..c98355cbfda8146f8eaf771ce3798bca5e3ce54e GIT binary patch literal 5939 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 literal 0 HcmV?d00001 diff --git a/dist/index.html b/dist/index.html index e7b89031b..9ffb4bbb1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,28 +2,40 @@ - Backbone Baseline + JAMNY | Video Rentals + + + + +
-

jamny's Video Rental Library

-
+

Video Rentals

+
- - + +
-
+

Rental Movies

-
    -
+ + +
+
+
+ +
+
-
+
@@ -37,30 +49,48 @@

Rental Movies

- diff --git a/src/css/styles.css b/src/css/styles.css index 5840409b4..a545afe67 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -6,53 +6,54 @@ body { header { background-color: black; - padding: 0.5rem; + padding-top: 0.5rem; color: white; + height: 120px; + margin-bottom: 30px; } -#completed-checkbox { +/* #completed-checkbox { display: inline; } label { display: inline; -} +} */ button.success { margin-right: 1.2rem; display: inline; } -aside.create-tasklist { +/* aside.create-tasklist { background-color: navy; color: #FFFFFF; } aside label { color: #FFFFFF; -} +} */ -.completed { +/* .completed { text-decoration: line-through; -} +} */ -div { +/* div { display: inline-block; -} +} */ #movies li { list-style-type: none; } -header h1, #search-form, header p, header button { +/* header h1, #search-form, header p, header button { */ +/* header h1, header p, header button { display: inline-block; -} +} */ #search-form { - padding-top: 20px; -} - -.float-right { - float: right; + padding-top: 30px; + margin-bottom: 20px; + margin-right: 15px; } #rental-availability{ @@ -61,9 +62,94 @@ header h1, #search-form, header p, header button { #home { cursor: pointer; + padding: 30px; + font-family: 'Bungee', cursive; + color: #E5323B; +} + +#home:hover { + cursor: pointer; + padding: 30px; + font-family: 'Bungee', cursive; + color: #FB3640; +} + +#search-input { + line-height: 40px; + width: 250px; + border-radius: 3px; +} + +.btn-search { + display: none; +} + +.card { + width: 350px; + background: snow; + text-align: center; + height: 470px; + margin: 5px; + cursor: pointer; +} + +.card:hover { + border-color: lightgray; + background: #fff7f7; } -/* -* { - border-style: solid; + +.image_url { + margin-top: 30px; +} + +#movies-container { + text-align: center; + margin-left: 30px; +} + +h2 { + font-family: 'Poppins', sans-serif; +} + +p { + font-family: 'Roboto', sans-serif; +} + +#movie-photo { + display: inline-block; + width:400px; + margin: 15px; +} +#movie-info { + display:inline-block; + width: 600px; + text-align: justify; + margin: 15px; + padding-top: 30px; + +} +#movie-details-container { + text-align: center; +} +/*OTHER SYTLING*/ +@media only screen and (min-width: 586px) { + #home { + font-size: 2em; + } + +} + +@media only screen and (max-width: 586px) { + h2 { + font-size: 2.5em; + } + + h3 { + font-size: 2.2em; + } + + #movie-info { + width: 400px; + } + } -*/ diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index a23e406e4..681a57fa6 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -22,8 +22,8 @@ const MovieListView = Backbone.View.extend({ model: movie, detailsTemplate: this.detailsTemplate, template: this.template, - tagName: 'li', - className: 'movie row', + // tagName: 'li', + className: 'movie', }); console.log('MAKING MOVIE VIEWS'); // Then render the MovieView and append the resulting HTML to the DOM. @@ -35,7 +35,7 @@ const MovieListView = Backbone.View.extend({ events: { 'click button.btn-search': 'searchMovies', 'click .btn-rental-lib': 'viewMovies', - 'click button.btn-movie-details': 'hideRentalsLibrary', + 'click .btn-movie-details': 'hideRentalsLibrary', 'click button.btn-all-movies': 'showRentalsLibrary', }, searchMovies: function(event) { diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 60c49b0f5..391bf3c70 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -11,7 +11,7 @@ const MovieView = Backbone.View.extend({ this.listenTo(this.model, "change", this.render); }, events: { - 'click button.btn-movie-details': 'viewMovie', + 'click .btn-movie-details': 'viewMovie', }, render() { const compiledTemplate = this.template(this.model.toJSON()); diff --git a/webpack.config.js b/webpack.config.js index 1f901aef2..2a034bf76 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,7 +16,7 @@ module.exports = { path: path.resolve(__dirname, 'dist'), }, plugins: [ - new CleanWebpackPlugin(['dist'], { exclude: ['index.html'] }), + new CleanWebpackPlugin(['dist'], { exclude: ['index.html', 'favicon.png'] }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], From eea42364fa840f285fe37a9cef6e5190039e0d6f Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Thu, 21 Dec 2017 09:12:43 -0800 Subject: [PATCH 16/19] Adjust card width to be more responsive with screen size (used viewport units instead of pixel) --- src/css/styles.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/css/styles.css b/src/css/styles.css index a545afe67..8c359b83d 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -85,7 +85,8 @@ aside label { } .card { - width: 350px; + /* width: 350px; */ + width: 20vw; background: snow; text-align: center; height: 470px; @@ -152,4 +153,8 @@ p { width: 400px; } + .card { + width: 450px; + } + } From 13798477e439f6ca816dbe5e916227c62ff909db Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Thu, 21 Dec 2017 09:19:48 -0800 Subject: [PATCH 17/19] Styling: Adjusted width of search bar with viewport units --- src/css/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/styles.css b/src/css/styles.css index 8c359b83d..661d766bb 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -53,7 +53,7 @@ aside label { #search-form { padding-top: 30px; margin-bottom: 20px; - margin-right: 15px; + margin-right: 30px; } #rental-availability{ @@ -76,7 +76,7 @@ aside label { #search-input { line-height: 40px; - width: 250px; + width: 42vw; border-radius: 3px; } From 6f2d0557c2e7bd11f162e4b2ec1a8c186e74a506 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Thu, 21 Dec 2017 09:23:27 -0800 Subject: [PATCH 18/19] Styling: Added search bar width in media query --- src/css/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/css/styles.css b/src/css/styles.css index 661d766bb..7376a43ff 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -76,7 +76,7 @@ aside label { #search-input { line-height: 40px; - width: 42vw; + width: 30vw; border-radius: 3px; } @@ -157,4 +157,7 @@ p { width: 450px; } + #search-input { + width: 42vw; + } } From 5350eba082b13909e0c3038d36d283fae051ae48 Mon Sep 17 00:00:00 2001 From: Jan Edrozo Date: Thu, 21 Dec 2017 09:27:51 -0800 Subject: [PATCH 19/19] Adjusted h2 margin-left in smaller width screen --- src/css/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/styles.css b/src/css/styles.css index 7376a43ff..d37685580 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -142,7 +142,8 @@ p { @media only screen and (max-width: 586px) { h2 { - font-size: 2.5em; + font-size: 2.4em; + margin-left: -25px; } h3 {