Video Rentals
+Rental Movies
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app.js b/src/app.js
index 30c00d594..fbcfaa16a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,10 +5,43 @@ import './css/styles.css';
// Import jQuery & Underscore
import $ from 'jquery';
import _ from 'underscore';
+import Movie from 'models/movie';
+import MovieList from 'collections/movie_list';
+import MovieView from 'views/movie_view';
+import MovieListView from 'views/movie_list_view';
+import MovieDetailsView from 'views/movie_list_view';
+
+let bus = {};
+bus = _.extend(bus, Backbone.Events);
-// ready to go
$(document).ready(function() {
+ const rentalMovies = new MovieList();
+ rentalMovies.fetch();
+
+ console.log('FETCHED MOVIES:');
+ console.log(rentalMovies);
+ // $('#results-container').hide();
+
+ const movieListView = new MovieListView({
+ model: rentalMovies,
+ template: _.template($('#movie-template').html()),
+ detailsTemplate: _.template($('#movie-details-template').html()),
+ el: 'main',
+ });
+
+ movieListView.render();
+
+ const searchedMovies = new MovieList();
+
+ const resultsListView = new MovieListView({
+ model: searchedMovies,
+ libary: rentalMovies,
+ template: _.template($('#movie-template').html()),
+ detailsTemplate: _.template($('#movie-details-template').html()),
+ el: 'main',
+ });
+
- $('#main-content').append('
+
+
+
+
+
+
+
+ Hello World!
'); + // $('#main-content').append('Hello World!
'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..094de3748 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; +import Movie from 'models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies', + search(query) { + 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/css/styles.css b/src/css/styles.css index 68a79a569..d37685580 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,44 +1,164 @@ @include foundation-everything; -main { - background: lightblue; +body { + background: snow; } header { - background-color: lightgreen; - padding: 0.5rem; + background-color: black; + 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 { + display: inline-block; +} */ + +#movies li { + list-style-type: none; } -div { - display: inline; +/* header h1, #search-form, header p, header button { */ +/* header h1, header p, header button { + display: inline-block; +} */ + +#search-form { + padding-top: 30px; + margin-bottom: 20px; + margin-right: 30px; +} + +#rental-availability{ + color: red; +} + +#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: 30vw; + border-radius: 3px; +} + +.btn-search { + display: none; +} + +.card { + /* width: 350px; */ + width: 20vw; + 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.4em; + margin-left: -25px; + } + + h3 { + font-size: 2.2em; + } + + #movie-info { + width: 400px; + } + + .card { + width: 450px; + } + + #search-input { + width: 42vw; + } } -*/ diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..bb48d2f2a --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + urlRoot: 'http://localhost:3000/movies', + validate(attributes) { + // title: + // overview: + // release_date: + // image_url: + // external_id: + }, + +}); + +export default Movie; diff --git a/src/views/movie_details_view.js b/src/views/movie_details_view.js new file mode 100644 index 000000000..75bdcbf5e --- /dev/null +++ b/src/views/movie_details_view.js @@ -0,0 +1,53 @@ +import Backbone from 'backbone'; +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', + 'click button.btn-search': 'searchMovies', + }, + 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!`); + }, + 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); + }, +}); + +export default MovieDetailsView; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..681a57fa6 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,66 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import Movie from '../models/movie'; +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); + }, + 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.each((movie) => { + // Create a new view with the model & template + const movieView = new MovieView({ + model: movie, + detailsTemplate: this.detailsTemplate, + template: this.template, + // tagName: 'li', + className: 'movie', + }); + console.log('MAKING MOVIE VIEWS'); + // Then render the MovieView and append the resulting HTML to the DOM. + + this.$('#movies').prepend(movieView.render().$el); + }); + return this; + }, + events: { + 'click button.btn-search': 'searchMovies', + 'click .btn-rental-lib': 'viewMovies', + 'click .btn-movie-details': 'hideRentalsLibrary', + 'click button.btn-all-movies': 'showRentalsLibrary', + }, + searchMovies: function(event) { + event.preventDefault(); + this.$('.movies-container h2').html('Results'); + 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); + }, + 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 new file mode 100644 index 000000000..391bf3c70 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,38 @@ +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 .btn-movie-details': 'viewMovie', + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + viewMovie() { + console.log('***INSIDE MOVIE VIEW'); + console.log(this.model); + console.log('viewing movie'); + const movieDetailsView = new MovieDetailsView({ + model: this.model, + template: this.detailsTemplate, + // tagName: 'li', + // className: 'movie row', + el: '#movie-details-container', + }); + + this.$('main').prepend(movieDetailsView.render().$el); + this.$('#movie-details-container').show(); + }, +}); + +export default MovieView; 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() ],