diff --git a/dist/index.html b/dist/index.html index 559b18ecd..3df9c057f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,50 @@ - - - Backbone Baseline - - -
- -
- - - - - + + + The Amazing Movie Database + + +
+ +
+ +
+
+ +
+
+ + + +
+ +
+ +
+
+

Movie Rentals

+
+
    + +
+
+
+
+ +
+ + + + + + diff --git a/spec/test_spec.js b/spec/test_spec.js index 9252883f2..698d05499 100644 --- a/spec/test_spec.js +++ b/spec/test_spec.js @@ -1,13 +1,31 @@ +import Movie from '../src/models/movie'; -describe('Sample spec', () => { - let a; +describe('Movie Spec', () => { + let movie - it('and so is a spec', () => { - a = true; + it('Creates a valid instance of a movie.', () => { + movie = new Movie ({ + title: 'A Street Cat Named Bob', + release_date: '2016-11-04', + }) - expect(a).toBe(true); + expect(movie.isValid()).toEqual(true); }); - xit('will not work', () => { - expect(false).toBe(true); + + it('Returns invalid if title is not present.', () => { + movie = new Movie ({ + release_date: '2016-11-04', + }) + + expect(movie.isValid()).toEqual(false); + }); + + it('Returns invalid if release date is not present.', () => { + movie = new Movie ({ + title: 'A Street Cat Named Bob', + }) + + expect(movie.isValid()).toEqual(false); }); + }); diff --git a/src/app.js b/src/app.js index 30c00d594..3eda8a733 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -import 'css/_settings.css'; +//import 'css/_settings.css'; import 'foundation-sites/dist/css/foundation.css'; import './css/styles.css'; @@ -6,9 +6,34 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; +import Backbone from 'backbone'; + +import Movie from './models/movie'; +import MovieList from './collections/movie_list'; +import MovieListView from './views/movie_list_view'; + +// let movieTemplate; + +let movieList = new MovieList(); + +let bus = {}; +bus = _.extend(bus, Backbone.Events); + // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

'); + // movieList.fetch().done(() => { + const movieListView = new MovieListView({ + model: movieList, + template: _.template($('#movie-template').html()), + el: 'main', + bus: bus, + }) + movieListView.render(); + // console.log(movieList); + + // }); + + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..f90c550e6 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, + + url: 'http://localhost:3000/movies', + + parse(response) { + return response + + }, +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..47a0db7fc --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,33 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + urlRoot:'http://localhost:3000/movies', + + parse(response) { + return response + }, + + validate(attributes) { + const errors = {}; + if (!attributes.title) { + errors['title'] = "Title is required!"; + } + + if (!attributes.release_date) { + errors['release_date'] = "Release date required!"; + } + + if (!attributes.hedwig) { + errors['hedwig'] = "Must have a cat!"; + } + + if (Object.keys(errors).length > 0) { + return errors; + } else { + return false; + } + }, + +}); + +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..eea3136c8 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,64 @@ +import $ from 'jquery'; + +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.bus, 'updateStatusMessage', this.statusMessage); + }, + + render(args) { + this.$('#rentals').empty(); + this.model.each((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagname: 'li', + className: 'rental', + bus: this.bus, + }) + this.$('#rentals').append(movieView.render(args).$el); + }) + return this; + }, + + events: { + 'click button#btn-rentals': 'getRentals', + 'click button#btn-search': 'searchDBMovies', + }, + + getRentals: function(e) { + e.preventDefault(); + this.model.fetch().done(() => { + this.render({button: false}); + }) + + }, + + searchDBMovies: function(e) { + e.preventDefault(); + let searchWord = this.$('input[name=search-movies]').val(); + this.model.fetch({ data: $.param({'query': searchWord}) }).done(() => { + if (this.model.length == 0) { + this.statusMessage('No Results Found!') + } else { + this.statusMessage(`${this.model.length} Results Found.`) + } + this.render({button: true}); + }) + }, + + statusMessage: function(statusMessage) { + this.$('#status-messages').empty(); + this.$('#status-messages').html(`

${statusMessage}

`); + } + +}); + +export default MovieListView; + +// collection.fetch({ data: $.param({ page: 1}) }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..ff0439749 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,50 @@ +import Backbone from 'backbone'; + +import Movie from '../models/movie'; + + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + + render(args) { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + if (args.button) { + this.$el.append('') + } + return this; + }, + + events: { + 'click button#btn-add-to-lib': 'addLib', + + }, + + addLib: function(e) { + e.preventDefault(); + const newMovie = new Movie ({ + title: this.model.get('title'), + release_date: this.model.get('release_date'), + }) + + newMovie.save({}, { + success: this.successSave.bind(this), + error: this.failSave.bind(this), + }); + }, + + successSave: function(newMovie) { + const statusMessage = `${newMovie.attributes.title} added to rental list!`; + this.bus.trigger('updateStatusMessage', statusMessage); + }, + + failSave: function(newMovie) { + const statusMessage = `${newMovie.attributes.title} unable to add to rental list!`; + this.bus.trigger('updateStatusMessage', statusMessage); + }, +}) + +export default MovieView;