diff --git a/dist/index.html b/dist/index.html index 559b18ecd..ee912d81a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,10 +6,43 @@
- +
+

SuperDuperVideo

+
+ + + +
+ +
+ +
+ +
+
+ + + + + diff --git a/src/app.js b/src/app.js index 30c00d594..989fe127f 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,26 @@ -import 'css/_settings.css'; -import 'foundation-sites/dist/css/foundation.css'; -import './css/styles.css'; - // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import 'foundation-sites/dist/css/foundation.css'; + +// collections +import MovieList from './collections/movie_list'; + +// views +import MovieListView from './views/movie_list_view'; + +import './css/_settings.css'; +import './css/styles.css'; // ready to go $(document).ready(function() { + const movies = new MovieList(); + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + searchTemplate: _.template($('#search-template').html()), + el: ('#main-content') + }); - $('#main-content').append('

Hello World!

'); - + movies.fetch(); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..ef2218754 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,12 @@ +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/css/styles.css b/src/css/styles.css index 68a79a569..65b3c636c 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -4,6 +4,11 @@ main { background: lightblue; } +.movie h4{ + /* hide the overview */ + display: none; +} + header { background-color: lightgreen; padding: 0.5rem; 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..c9b0d593f --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,52 @@ +import Backbone from 'backbone'; +import MovieView from '../views/movie_view'; + +const MovieListView = Backbone.View.extend({ + initialize(params) { + // console.log(params); + this.template = params.template; + this.searchTemplate = params.searchTemplate; + this.listenTo(this.model,"update", this.render); + this.listenTo(this,"showSearched", this.renderSearch); + + this.listenTo(this.model,"currentInv", this.render); + }, + render() { + this.$('#movie').empty(); + + this.model.each((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'article', + className: 'movie', + }); + this.$('#movie').prepend(movieView.render().$el); + }); + return this; + }, + + renderSearch() { + this.template = this.searchTemplate; + }, + + events: { + 'submit #search-movies': 'searchMovies', + 'click button.view-inventory': 'showInventory', + }, + + searchMovies: function(event) { + event.preventDefault(); + const query = this.$('input[name=query]').val(); + this.model.fetch({data: {"query": query}}); + this.trigger('showSearched', this); + }, + + showInventory: function(event) { + event.stopImmediatePropagation(); + this.model.fetch(); + this.trigger('currentInv'); + }, +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..71204f157 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,24 @@ +import Backbone from 'backbone'; + +const MovieView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + }, + + render(){ + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + 'click .add-to-inventory': 'addMovie', + }, + addMovie: function(event) { + event.preventDefault(); + this.model.save(this.model.attributes,{type: 'POST'}); + + }, +}); + +export default MovieView;