diff --git a/dist/index.html b/dist/index.html index 559b18ecd..1a61572ac 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,105 @@ - - - Backbone Baseline - - -
- -
- - - - - + + + Hometown Video + + + + + +
+ + +
+ +
+
+
+ +
+ + + + + + + + + +
+
+
+
+
+ + + + + +
+ + + + + + + + + + + diff --git a/src/app.js b/src/app.js index 30c00d594..071d79bcd 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,83 @@ +// Import jQuery & Underscore +import $ from 'jquery'; +import _ from 'underscore'; +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'; import './css/styles.css'; -// Import jQuery & Underscore -import $ from 'jquery'; -import _ from 'underscore'; + +let eventBus = {}; +eventBus = _.extend(eventBus, Backbone.Events); // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

'); + const rentalLibraryList = new MovieList(); + rentalLibraryList.bus = eventBus; + rentalLibraryList.fetch(); + + const rentalDisplayList = new MovieList(); + rentalDisplayList.bus = eventBus; + + const rentalLibraryListView = new MovieListView({ + model: rentalDisplayList, + template: _.template($('#library-movie-template').html()), + el: 'main', + bus: eventBus, + referenceList: rentalLibraryList, + }); + 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; + + const searchListView = new MovieListView({ + model: searchList, + template: _.template($('#imdb-movie-template').html()), + el: 'main', + bus: eventBus, + }); + searchListView.listenTo(eventBus, 'searchimdb', searchListView.searchIMDB) + 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'); + }); + + $('#search-movies').on('submit', function(event) { + event.preventDefault(); + const location = $('#search-movies [name="searchList"]:checked').val(); + const searchTerm = $('#searchTerm').val(); + eventBus.trigger(`search${location}`, searchTerm); + }); + + $('nav a').click(function() { + let divId = $(this).attr('id'); + let n = divId.indexOf('-'); + divId = `${divId.substring(0, n)}-container`; + $(`#${divId}`).removeClass('display-none').siblings().addClass('display-none'); + }); }); 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/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..8f4bc2660 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; +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/css/styles.css b/src/css/styles.css index 68a79a569..19d966b59 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,44 +1,113 @@ @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; +header h1 { + margin-bottom: 0; + line-height: 1em; + font-family: 'Bungee Inline', cursive; } -label { - display: inline; +header p { + margin-top: 0; + margin-left: 3px; + line-height: 1em; } -button.success { - margin-right: 1.2rem; - display: inline; +nav { + text-align: right; } -aside.create-tasklist { - background-color: navy; - color: #FFFFFF; +header a { + color: #ffcf00; } -aside label { - color: #FFFFFF; + +.display-none { + display: none; +} + +.actions { + padding: 1em; +} + +#show-rental-library { + display: inline-block; + margin: 1em; +} + +#search-movies { + display: inline-block; + float: right; + margin: 1em; + width: 35%; +} + +#movies { + clear: both; + margin: 0 auto; +} + +.movie, .customer { + background: #2f2f2f; + border: solid 5px #ffcf00; + border-radius: 5px; + margin: 1em; + padding: 1em; +} + +.movie { + min-height: 360px; } -.completed { - text-decoration: line-through; +.customer { + color: #ffcf00; } -div { - display: inline; +.movie img { + border: 4px solid white; + display: inline-block; + float: left; + margin: 1em; } -/* -* { - border-style: solid; + +.listing-info { + float: left; + margin: 1em 1em 1em .5em; + min-width: 35%; +} + +.listing-info, .slide { + color: white; + display: inline-block; +} + +.listing-info p, .customer p, #add-rental label { + color: #afafaf; +} + +.listing-info button { + background: #ffcf00; + color: #2f2f2f; + margin: 4px; +} + +.slide { + display: none; + padding: 1em; +} + +.details { + overflow: scroll; +} + +#add-rental input[name="inventory"] { + width: 3em; } -*/ 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/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..ee2d42fb8 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + initialize(params) { + this.title = params.title; + this.image_url = params.image_url; + this.release_date = params.release_date; + this.overview = params.overview; + this.bus = params.bus; + }, +}); + +export default Movie; 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; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..6bedb4b28 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,54 @@ +import _ from 'underscore'; +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.referenceList = params.referenceList; + 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: 'article', + className: 'movie', + bus: this.bus, + }); + list.append(movieView.render().$el); + }); + return this; + }, + completeList() { + this.model.set(this.referenceList.models); + }, + 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'), + overview: model.get('overview'), + release_date: model.get('release_date'), + image_url: model.get('image_url'), + external_id: model.get('id'), + inventory: quantity, + }; + this.model.create(newRental); + // TODO: guarantee external id not null and use to call event + }, +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..dc3425c5b --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,38 @@ +import Backbone from 'backbone'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + events: { + 'click button.show-details': 'slideView', + 'click button.show-form': 'slideView', + 'submit #add-rental': 'newInventory', + }, + render() { + // Handle any null release dates TODO: should this be for all possible null attributes? + if(!this.model.get('release_date')) { + this.model.set('release_date', 'Unknown'); + } + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + slideView(event) { + if (this.$(event.target).attr('class').includes('details')) { + this.$('.add-rental-form').hide(); + this.$('.details').toggle({direction: 'right'}); + } else { + this.$('.details').hide(); + 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;