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/build/css/styles.css b/build/css/styles.css index 68a79a569..c73aed84c 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -1,12 +1,44 @@ @include foundation-everything; main { - background: lightblue; + background: lightgrey; } header { - background-color: lightgreen; + background-color: darkblue; padding: 0.5rem; + color: white; + align-content: center; +} + +#to-the-right { + /*float: right;*/ + font-family: cursive; +} + +#word-to-search { + font-size: 2em; + color: darkblue; + font-style: italic; +} + +.search-movie { + float: right; + /*padding: 20px;*/ + /*margin: right 50px;*/ + margin: 20px; + +} + +.add-movie { + +} + +li { + font-size: 2em; + color: darkblue; + font-style: oblique; + font-family: fantasy; } #completed-checkbox { diff --git a/build/index.html b/build/index.html index 03869595f..602ed858b 100644 --- a/build/index.html +++ b/build/index.html @@ -1,15 +1,58 @@ - - - - - - Backbone Baseline - - - - - - - + + + + + + Backbone Baseline + + + +
+

Movies!!

+
+
+
+
+ + +
+ + +
+
+
+ +
+
+
+ + + + + + + + + + + diff --git a/src/app.js b/src/app.js index 58b77997c..ff3f38db7 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,31 @@ -// /src/app.js -// Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; -// ready to go +import MovieList from './collections/movie_list'; +import MovieListView from './views/movie_list_view'; +import VideoStore from './models/video_store'; + + $(document).ready(function() { - $('section.main-content').append('

Hello World!

'); + var movieList = new MovieList(); + movieList.fetch(); + + var searchList = new MovieList(); + + var videoStore = new VideoStore({ + library: movieList, + searchResults: searchList + }); + + var movieListViewParams = { + el: $('main'), + model: videoStore + }; + + var myMovieListView = new MovieListView(movieListViewParams); + myMovieListView.render(); + //initializing a new view }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..877b119d2 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; + +import Movie from '../models/movie'; + +var MovieList = Backbone.Collection.extend({ + model: Movie, + initialize: function() { + this.query = undefined; + }, + url: function() { + var url = "http://localhost:3000/movies"; + if (this.query !== undefined) { + return url + "?query=" + this.query; + } else { + return url; + } + } +}); + +export default MovieList; diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js new file mode 100644 index 000000000..a9488c39c --- /dev/null +++ b/src/collections/rental_list.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; +import Rental from '../models/rental'; + +var RentalsList = Backbone.Collection.extend({ + model: Rental, + + url: 'http://localhost:3000/rentals/', + + overdueUrl: function() { + this.url = this.url + "overdue"; + return this; + } + +}); + +export default RentalsList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..a53e927c5 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + initialize: function() { + // console.log("Created new movie"); + } +}); + +export default Movie; diff --git a/src/models/rental.js b/src/models/rental.js new file mode 100644 index 000000000..1944f8304 --- /dev/null +++ b/src/models/rental.js @@ -0,0 +1,28 @@ +import Backbone from 'backbone'; + +var Rental = Backbone.Model.extend({ + + url: 'http://localhost:3000/rentals/', + + initialize: function(params) { + if (!this.has('due_date')) { + var dueDate= new Date(); + dueDate.setDate(dueDate.getDate() + 5); + this.set('due_date', dueDate); + } + }, + + checkoutUrl: function(movieTitle){ + this.url = this.url + movieTitle + "/check-out"; + console.log("Inside of checkoutUrl"); + return this; + }, + + checkinUrl: function(movieTitle){ + this.url = this.url + movieTitle + "/return"; + console.log("Inside of checkinUrl"); + return this; + } +}); + +export default Rental; diff --git a/src/models/video_store.js b/src/models/video_store.js new file mode 100644 index 000000000..050b6fe7c --- /dev/null +++ b/src/models/video_store.js @@ -0,0 +1,11 @@ + +import Backbone from 'backbone'; + +var VideoStore = Backbone.Model.extend({ + initialize: function(params) { + // this.set("library", params.library); + // this.set("searchResults", params.searchResults); + } +}); + +export default VideoStore; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..72811d962 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,111 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; +import MovieView from './movie_view'; +import Movie from '../models/movie'; + +var MovieListView = Backbone.View.extend({ + + initialize: function(params) { + this.movieTemplate = _.template($('#movie-card-template').html()); + this.movieSearchTemplate = _.template($('#movie-search-card-template').html()); + + this.movieList = []; + + this.model.get("library").forEach(function(rawMovie){ + this.addMovie(rawMovie); + }, this); + + this.input = { + title: this.$('.search-movie-form input[name="title"]') + }; + + this.listenTo(this.model.get("library"), 'add', this.addMovie); + this.listenTo(this.model.get("library"), 'update', this.render); + + this.searchList = []; + + this.listenTo(this.model.get("searchResults"), 'add', this.addSearchResult); + this.listenTo(this.model.get("searchResults"), 'update', this.render); + + this.showSearchResults = false; + + }, + + render: function() { + $('#movie-list').empty(); + var movieList; + if (this.showSearchResults){ + movieList = this.searchList; + } else { + movieList = this.movieList; + } + + movieList.forEach(function(movie){ + movie.render(); + $('#movie-list').append(movie.$el); + // this.$('#movie-list').append(MovieView.render().$el); + this.listenTo(movie, 'add', this.addToLibrary); + }, this); + return this; + }, + + addToLibrary: function(movie) { + var that = this; + movie.save(undefined, { + success: function(){ + that.showSearchResults = false; + that.model.get('library').fetch(); + } + }); + + }, + + addMovie: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieTemplate + }); + this.movieList.push(movie); + }, + + addSearchResult: function(movie){ + var movie = new MovieView ({ + model: movie, + template: this.movieSearchTemplate + }); + this.searchList.push(movie); + }, + + events: { + 'click .search-movie': 'searchMovie', + }, + + getInput: function() { + var movie = { + title: this.input.title.val() + }; + return movie; + }, + + searchMovie: function(movie) { + this.searchList = []; + this.showSearchResults = true; + this.model.get("searchResults").query = this.getInput()["title"]; + this.model.get("searchResults").fetch(); + + // var _this = this; + // var searchMovie = new SearchMovie([], {query:this.getInput()["title"]}); + // searchMovie.fetch({ + // success: function(collection, response, options){ + // var movie = collection.shift(); + // _this.addMovie(movie); + // _this.render(); + // // $('#movie-list').append(movie.$el); + // } + // }); + + } +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..9e43d5281 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,30 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +var MovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + // this.render(); + }, + + render: function() { + var html = this.template({movie: this.model.attributes}); + this.$el.html(html); + this.delegateEvents(); + return this; + }, + + events: { + 'click .add-movie': 'addMovieRental' + }, + + addMovieRental: function() { + this.trigger('add', this.model); + event.stopPropagation(); + } + +}); + +export default MovieView; diff --git a/src/views/rental_view.js b/src/views/rental_view.js new file mode 100644 index 000000000..1b49c1e30 --- /dev/null +++ b/src/views/rental_view.js @@ -0,0 +1,45 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +var RentalView = Backbone.View.extend({ + + initialize: function(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + // this.render(); + }, + + render: function() { + var html = this.template({movie: this.model.attributes}); + this.$el.html(html); + this.delegateEvents(); + return this; + }, + + events: { + 'click .checkout-movie': 'checkout', + 'click .checkin-movie': 'checkin' + }, + + checkout: function(){ + console.log("Inside of checkout"); + var movieTitle = this.$('#rental-title').val(); + this.model.checkoutUrl(movieTitle); + + // var that = this; + this.model.save({}, { + success: function(model, response){ + alert("Movie Checked Out!"); + }, + + error: function(model, response){ + console.log(response); + alert( "Something went wrong:\n" + response.responseText); + } + }); + this.model.url = 'http://localhost:3000/rentals/'; + } +}); + +export default RentalView;