diff --git a/dist/index.html b/dist/index.html index 559b18ecd..4b7dc6257 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,12 +3,56 @@ Backbone Baseline + +
- +
+ +

Video Store

+ + + +
+ + + +
+ +
+ + +
+
+ + + + + diff --git a/movie.jpg b/movie.jpg new file mode 100644 index 000000000..35def5f66 Binary files /dev/null and b/movie.jpg differ diff --git a/src/app.js b/src/app.js index 30c00d594..4e8c8d772 100644 --- a/src/app.js +++ b/src/app.js @@ -5,10 +5,34 @@ import './css/styles.css'; // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import Backbone from 'backbone' + +import MovieList from 'collections/movie_list'; +import MovieListView from './views/movie_list_view'; +import MainView from 'views/main_view'; + + +let movieTemplate; // ready to go $(document).ready(function() { + // $('#main-content').append('

Hello World!

'); + // let bus = {}; + // bus = _.extend(bus, Backbone.Events) + + // const quotes = new QuoteList(quoteData, {bus: bus, data: 'hello from options'}); + const movieList = new MovieList(); + // movieList.fetch(); + + movieTemplate = _.template($('#movie-template').html()); + + + const mainView = new MainView({ + el: '#main-content', + movieTemplate: movieTemplate, + formTemplate: _.template($('#form-template').html()), + movieList: movieList, + }); - $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/external_movie_list.js b/src/collections/external_movie_list.js new file mode 100644 index 000000000..5dcd55f7c --- /dev/null +++ b/src/collections/external_movie_list.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; +import Movie from 'models/movie'; +import MovieList from 'collections/movie_list'; + +const ExternalMovieList = MovieList.extend({ + initialize (attributes) { + this.title = attributes.title; + }, + url() { + console.log(this.baseUrl); + return this.baseUrl + `/?query=${ this.title }` + }, + +}); + +export default ExternalMovieList; diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..896d4689e --- /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, + baseUrl: 'http://localhost:3000/movies', + url() { + return this.baseUrl + } +}); + +export default MovieList; diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..da5210ff9 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,11 +1,16 @@ @include foundation-everything; +body { + /* font-family: 'Zilla Slab Highlight', cursive; */ +} + main { - background: lightblue; + font-family: 'Fredoka One', cursive; + background: FFFFFF; } header { - background-color: lightgreen; + /* background-color: #ca412b; */ padding: 0.5rem; } @@ -37,8 +42,27 @@ aside label { div { display: inline; } -/* -* { - border-style: solid; + +#main-content { + text-align: center; +} + +#main-content h2 { + margin-top: 40px; + font-family: 'Fredoka One', cursive; + +} + +li { + list-style: none; +} + +form { + margin: 0 auto; + width: 75%; +} + +img { + width: 100%; + height: 400px; } -*/ diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..f68ee8db8 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + url: 'http://localhost:3000/movies', +}); + +export default Movie; diff --git a/src/views/main_view.js b/src/views/main_view.js new file mode 100644 index 000000000..992b2a9be --- /dev/null +++ b/src/views/main_view.js @@ -0,0 +1,62 @@ +import Backbone from 'backbone'; +import MovieView from './movie_view'; +import Movie from '../models/movie'; +import MovieListView from './movie_list_view'; +import ExternalMovieList from '../collections/external_movie_list'; + +const MainView = Backbone.View.extend({ + initialize(params) { + this.movieTemplate = params.movieTemplate; + this.formTemplate = params.formTemplate; + this.movieList = params.movieList; + }, + events: { + 'click button#our-movies' : 'renderOurMovies', + 'click button#all-movies' : 'renderForm', + 'click button#submit' : 'renderAllMovies', + }, + renderOurMovies() { + this.$('#search-form').html(''); + this.$('#movies-list').empty(); + + const movieListView = new MovieListView({ + el: '#movies-container', + model: this.movieList, + template: this.movieTemplate, + }); + + movieListView.model.fetch(); + }, + renderForm() { + this.$('#movies-list').empty(); + this.$('#search-form').html(this.formTemplate); + }, + renderAllMovies(event) { + event.preventDefault(); + const title = this.$('form input').val(); + this.$('#movies-list').html('

Searching...

'); + this.search(title); + + }, + + search(title) { + let externalMovieList = new ExternalMovieList({ + title: title + }); + + // this.$('#movies-list').empty(); + const movieListView = new MovieListView({ + el: '#movies-container', + model: externalMovieList, + template: this.movieTemplate, + external: true + }); + + movieListView.model.fetch(); + }, +}); + + + + +export default MainView; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..8a7ae5fd1 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,38 @@ +import Backbone from 'backbone'; +import MovieView from './movie_view'; +import Movie from '../models/movie'; + +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.external = params.external; + + this.listenTo(this.model, 'update', this.render); + }, + + render() { + this.$('#movies-list').empty(); + + if (this.model.length === 0) { + this.$('#movies-list').append('

No results found, please try again.

') + } + + this.model.each((movie) => { + // if (this.movieList.contains(movie)) { + // console.log(movie); + // } + const movieView = new MovieView({ + model: movie, + template: this.template, + external: this.external, + tagName: 'li', + className: 'movie', + }); + this.$('#movies-list').append(movieView.render().$el); + }); + + return this; + }, +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..69b9d8e07 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,45 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.external = params.external; + // this.bus = params.bus; + // this.listenTo(this.model, 'change', this.render); //superfluous? + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + + this.$el.html(compiledTemplate); + + if (this.external) { + this.$el.append('') + } + + return this + }, + + events: { + 'click button.add-movie': 'addMovie', + }, + + addMovie(event) { + // console.log(this); + this.model.save({}, { + success: (model, response) => { + console.log('success'); + // console.log(model); + console.log(response); + }, + error: (model, response) => { + console.log('error'); + // console.log(model); + console.log(response.responseText); + } + }); + }, +}); + + +export default MovieView;