From 5656ebd2904911097db4f2d07251b2bfcd7200e7 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 15:27:15 -0700 Subject: [PATCH 01/26] Created movie model --- src/models/movie.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/models/movie.js diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..8747bdc80 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,20 @@ +// model - movie.js +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + defaults: { + title: 'Mystery', + inventory: 1 + }, + logStatus: function() { + console.log('Model ' + this.cid); + console.log('Title ' + this.get('title')); + console.log('Inventory ' + this.get('inventory')); + }, + initialize: function(params) { + console.log('Starting ', params); + this.logStatus(); + } +}); + +export default Movie; From a56c8f9ad8ae6bb535018245a065524d85580905 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Tue, 13 Jun 2017 15:37:50 -0700 Subject: [PATCH 02/26] Added semantic HTML to index. Added templates for result-movie and stocked-movie. --- build/index.html | 55 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 41 insertions(+), 14 deletions(-) diff --git a/build/index.html b/build/index.html index 03869595f..20a41d7de 100644 --- a/build/index.html +++ b/build/index.html @@ -1,15 +1,42 @@ - - - - - - - Backbone Baseline - - - - - - - + + + + + + + Wetflix + + + +
+ +
+ +
+
+
+
+
+ +
+
+ +
+ + + + + + + + From 2a9f1bbbbec9e3a12122adf103e4621a0c6fd88a Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 15:41:33 -0700 Subject: [PATCH 03/26] Completed movies collection --- src/collections/movies.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/collections/movies.js diff --git a/src/collections/movies.js b/src/collections/movies.js new file mode 100644 index 000000000..923253955 --- /dev/null +++ b/src/collections/movies.js @@ -0,0 +1,11 @@ +// collection - movies.js +import Backbone from 'backbone'; + +import Movie from '../models/movie.js'; + +var Movies = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies' +}); + +export default Movies; From 41ac8e626fa753becf8d39d072de96536c20de91 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 15:51:51 -0700 Subject: [PATCH 04/26] Basic logic for movie view is complete --- src/views/movie_view.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/views/movie_view.js diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..4c785f445 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,17 @@ +import $ from 'jquery'; + +import Movie from '../models/movie.js'; + +var MovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; // TODO: double check name of this template + this.listenTo(this.model, 'change', this.render); + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } +}); + +export default MovieView; From 996ed9ec2c40cf6fdc7617f5b370866d13402172 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Tue, 13 Jun 2017 16:01:50 -0700 Subject: [PATCH 05/26] Created instances of collection Movies. Compiled HTML templates. --- src/app.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index 58b77997c..480340f25 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,17 @@ -// /src/app.js - -// Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import Movies from './collections/movies'; +import MoviesView from './views/movies_view'; -// ready to go -$(document).ready(function() { +var movies = new Movies(); - $('section.main-content').append('

Hello World!

'); +$(document).ready(function() { + var moviesView = new MoviesView({ + model: movies, + template: _.resultTemplate($('#result-movie-template').html(), {variable: 'movie'}), + templatePetInfo: _.stockTemplate($('#stocked-movie-template').html(), {variable: 'movie'}), + el: 'main' + }); + moviesView.render(); }); From 75a0163117ca9c0c37d2963f1f0d29c6b306240f Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 16:04:44 -0700 Subject: [PATCH 06/26] Created file and added imports for movies_view.js --- src/views/movie_view.js | 4 +++- src/views/movies_view.js | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/views/movies_view.js diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 4c785f445..8ad539b60 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,3 +1,5 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; import $ from 'jquery'; import Movie from '../models/movie.js'; @@ -8,7 +10,7 @@ var MovieView = Backbone.View.extend({ this.listenTo(this.model, 'change', this.render); }, render: function() { - var compiledTemplate = this.template(this.model.toJSON()); + var compiledTemplate = this.template({ movie: this.model.toJSON() }); this.$el.html(compiledTemplate); return this; } diff --git a/src/views/movies_view.js b/src/views/movies_view.js new file mode 100644 index 000000000..482a854f9 --- /dev/null +++ b/src/views/movies_view.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import MovieView from './movie_view.js'; +import Movie from '../models/movie.js'; + +var MoviesView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + + } +}); + +export default MoviesView; From c29021e98ccd5612b0ab84bd9ba56df1ed8a3bc3 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 16:12:41 -0700 Subject: [PATCH 07/26] Commit so I can get a change from master --- src/models/movie.js | 3 ++- src/views/movie_view.js | 2 +- src/views/movies_view.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/models/movie.js b/src/models/movie.js index 8747bdc80..3d469bb06 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -4,7 +4,8 @@ import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ defaults: { title: 'Mystery', - inventory: 1 + inventory: 1, + image: 'insert image here' }, logStatus: function() { console.log('Model ' + this.cid); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 8ad539b60..ab11672ca 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -10,7 +10,7 @@ var MovieView = Backbone.View.extend({ this.listenTo(this.model, 'change', this.render); }, render: function() { - var compiledTemplate = this.template({ movie: this.model.toJSON() }); + var compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; } diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 482a854f9..4375666a5 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -7,8 +7,8 @@ import Movie from '../models/movie.js'; var MoviesView = Backbone.View.extend({ initialize: function(params) { - this.template = params.template; - + this.template = params.resultTemplate; + this.detailsTemplate = params. } }); From 2f75ae42ddb09bacc91e3556d5af3f099d2712d3 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Tue, 13 Jun 2017 16:12:59 -0700 Subject: [PATCH 08/26] Template correction. --- src/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 480340f25..e59e7f7ad 100644 --- a/src/app.js +++ b/src/app.js @@ -8,8 +8,8 @@ var movies = new Movies(); $(document).ready(function() { var moviesView = new MoviesView({ model: movies, - template: _.resultTemplate($('#result-movie-template').html(), {variable: 'movie'}), - templatePetInfo: _.stockTemplate($('#stocked-movie-template').html(), {variable: 'movie'}), + resultTemplate: _.template($('#result-movie-template').html(), {variable: 'movie'}), + stockTemplate: _.template($('#stocked-movie-template').html(), {variable: 'movie'}), el: 'main' }); From 8710a1a5b4eeb84cf0ba33330589cb9baac7ba6d Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Tue, 13 Jun 2017 16:35:28 -0700 Subject: [PATCH 09/26] Things should be showing by now but are not --- src/views/movies_view.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 4375666a5..5fd8ca828 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -8,7 +8,24 @@ import Movie from '../models/movie.js'; var MoviesView = Backbone.View.extend({ initialize: function(params) { this.template = params.resultTemplate; - this.detailsTemplate = params. + this.detailsTemplate = params.stockTemplate; + this.listenTo(this.model, 'update', this.render); + }, + render: function() { + this.$('#movie-results').empty(); + this.$('#movies-stocked').empty(); + + var that = this; + + this.model.each(function(movie) { + console.log(movie); + var movieView = new MovieView({ + model: movie, + template: that.template + }); + that.$('#movie-results').append(movieView.render().$el); + }); + return this; } }); From bc9df04142fd2115245867f2571a1966ae8fc084 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 11:01:22 -0700 Subject: [PATCH 10/26] Fixing nits and adding fetch. --- src/app.js | 5 +++-- src/models/movie.js | 18 ++++++++-------- src/views/movies_view.js | 45 +++++++++++++++++++++------------------- 3 files changed, 36 insertions(+), 32 deletions(-) diff --git a/src/app.js b/src/app.js index e59e7f7ad..142f9a0ed 100644 --- a/src/app.js +++ b/src/app.js @@ -1,11 +1,12 @@ import $ from 'jquery'; import _ from 'underscore'; -import Movies from './collections/movies'; -import MoviesView from './views/movies_view'; +import Movies from './collections/movies.js'; +import MoviesView from './views/movies_view.js'; var movies = new Movies(); $(document).ready(function() { + console.log(movies); var moviesView = new MoviesView({ model: movies, resultTemplate: _.template($('#result-movie-template').html(), {variable: 'movie'}), diff --git a/src/models/movie.js b/src/models/movie.js index 3d469bb06..e64bc8faa 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -7,15 +7,15 @@ var Movie = Backbone.Model.extend({ inventory: 1, image: 'insert image here' }, - logStatus: function() { - console.log('Model ' + this.cid); - console.log('Title ' + this.get('title')); - console.log('Inventory ' + this.get('inventory')); - }, - initialize: function(params) { - console.log('Starting ', params); - this.logStatus(); - } + // logStatus: function() { + // console.log('Model ' + this.cid); + // console.log('Title ' + this.get('title')); + // console.log('Inventory ' + this.get('inventory')); + // }, + // initialize: function(params) { + // console.log('Starting ', params); + // this.logStatus(); + // } }); export default Movie; diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 5fd8ca828..788396258 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -5,28 +5,31 @@ import $ from 'jquery'; import MovieView from './movie_view.js'; import Movie from '../models/movie.js'; + var MoviesView = Backbone.View.extend({ - initialize: function(params) { - this.template = params.resultTemplate; - this.detailsTemplate = params.stockTemplate; - this.listenTo(this.model, 'update', this.render); - }, - render: function() { - this.$('#movie-results').empty(); - this.$('#movies-stocked').empty(); - - var that = this; - - this.model.each(function(movie) { - console.log(movie); - var movieView = new MovieView({ - model: movie, - template: that.template - }); - that.$('#movie-results').append(movieView.render().$el); - }); - return this; - } + initialize: function(params) { + this.template = params.resultTemplate; + this.detailsTemplate = params.stockTemplate; + this.listenTo(this.model, 'update', this.render); + + this.model.fetch(); + }, + render: function() { + + this.$('#movie-results').empty(); + this.$('#movies-stocked').empty(); + + var that = this; + + this.model.each(function(movie) { + var movieView = new MovieView({ + model: movie, + template: that.template + }); + that.$('#movie-results').append(movieView.render().$el); + }); + return this; + } }); export default MoviesView; From b16031a4cd64bef63769fa62a73f13065da2ae2c Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 12:57:33 -0700 Subject: [PATCH 11/26] Added search form. --- build/index.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/build/index.html b/build/index.html index 20a41d7de..84c3d8fc1 100644 --- a/build/index.html +++ b/build/index.html @@ -15,7 +15,16 @@
-
+
+
+ + +
+ +
+ +
+
From b9aa78423049ff94282619fc3d57e0d857f4ed68 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 13:22:14 -0700 Subject: [PATCH 12/26] Added click event. --- build/index.html | 4 ++-- src/views/movies_view.js | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html index 84c3d8fc1..413af2b84 100644 --- a/build/index.html +++ b/build/index.html @@ -15,14 +15,14 @@
-
+
- +
diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 788396258..bde422a61 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -29,7 +29,15 @@ var MoviesView = Backbone.View.extend({ that.$('#movie-results').append(movieView.render().$el); }); return this; + }, + events: { + 'click #search-button' : 'searchMovie' + + }, + searchMovie: function() { + console.log("test"); } + }); export default MoviesView; From 874a6332f97cba76f4a0f61c5bf7b3fc945042d9 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 13:33:03 -0700 Subject: [PATCH 13/26] Added function to prevent default. --- src/views/movies_view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/movies_view.js b/src/views/movies_view.js index bde422a61..63fbeec73 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -36,6 +36,7 @@ var MoviesView = Backbone.View.extend({ }, searchMovie: function() { console.log("test"); + event.preventDefault(); } }); From c0d3913a9f10c949fb4b859b127fdff56b579c28 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Wed, 14 Jun 2017 14:26:10 -0700 Subject: [PATCH 14/26] Added function to capture query to send to local api --- build/index.html | 4 ++-- src/views/movies_view.js | 12 +++++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/build/index.html b/build/index.html index 413af2b84..f088820cc 100644 --- a/build/index.html +++ b/build/index.html @@ -17,8 +17,8 @@
- - + +
diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 63fbeec73..cfc363d6d 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -34,9 +34,19 @@ var MoviesView = Backbone.View.extend({ 'click #search-button' : 'searchMovie' }, + getFormData: function() { + + var formQuery = this.$('#query').val(); + this.$('#query').val(''); + console.log(formQuery); + return formQuery; + }, searchMovie: function() { - console.log("test"); + event.preventDefault(); + this.model.fetch({ + data: {query: this.getFormData()} + }); } }); From 2edbb1e20612e6bb4c3c780f0bcbca642cb4c3cb Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 15:35:04 -0700 Subject: [PATCH 15/26] Added files for db-model, db-views and db-collection. --- src/collections/db_movies.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/collections/db_movies.js diff --git a/src/collections/db_movies.js b/src/collections/db_movies.js new file mode 100644 index 000000000..2311ba54e --- /dev/null +++ b/src/collections/db_movies.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import DBMovie from '../models/db_movie.js'; + +var DBMovies = Backbone.Collection.extend({ + model: DBMovie, + url: 'http://localhost:3000/movies?query=' +}); + +export default DBMovies; From 1f1c0d4c12231e43d8c32cc1ddf46ee1b23322df Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 15:36:38 -0700 Subject: [PATCH 16/26] Added files for db-model, db-views and db-collection. --- build/index.html | 27 +++++++++++--------- src/app.js | 15 +++++++++-- src/models/db_movie.js | 11 ++++++++ src/models/movie.js | 1 - src/views/db_movie_view.js | 19 ++++++++++++++ src/views/db_movies_view.js | 50 +++++++++++++++++++++++++++++++++++++ src/views/movies_view.js | 35 ++++++++++++-------------- 7 files changed, 124 insertions(+), 34 deletions(-) create mode 100644 src/models/db_movie.js create mode 100644 src/views/db_movie_view.js create mode 100644 src/views/db_movies_view.js diff --git a/build/index.html b/build/index.html index f088820cc..ea2376fca 100644 --- a/build/index.html +++ b/build/index.html @@ -15,21 +15,24 @@
- -
- - -
- -
- -
- -
+
+
+
+ + +
+ +
+ +
+
-
+
+
+
+
diff --git a/src/app.js b/src/app.js index 142f9a0ed..efebf0991 100644 --- a/src/app.js +++ b/src/app.js @@ -1,18 +1,29 @@ import $ from 'jquery'; import _ from 'underscore'; import Movies from './collections/movies.js'; +import DBMovies from './collections/db_movies.js'; import MoviesView from './views/movies_view.js'; +import DBMoviesView from './views/db_movies_view.js'; + var movies = new Movies(); +var dbMovies = new DBMovies(); + $(document).ready(function() { - console.log(movies); var moviesView = new MoviesView({ model: movies, resultTemplate: _.template($('#result-movie-template').html(), {variable: 'movie'}), - stockTemplate: _.template($('#stocked-movie-template').html(), {variable: 'movie'}), el: 'main' }); + var dbMoviesView = new DBMoviesView({ + model: dbMovies, + stockTemplate: _.template($('#stocked-movie-template').html(), {variable: 'movie'}), + el: '#db-movies' + }); + moviesView.render(); + dbMoviesView.render(); + }); diff --git a/src/models/db_movie.js b/src/models/db_movie.js new file mode 100644 index 000000000..a9d9edb13 --- /dev/null +++ b/src/models/db_movie.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; + +var DBMovie = Backbone.Model.extend({ + defaults: { + title: 'Sci-Fi', + inventory: 1, + image: 'insert image there' + }, +}); + +export default DBMovie; diff --git a/src/models/movie.js b/src/models/movie.js index e64bc8faa..3c7171125 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,4 +1,3 @@ -// model - movie.js import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js new file mode 100644 index 000000000..8890ba77a --- /dev/null +++ b/src/views/db_movie_view.js @@ -0,0 +1,19 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import DBMovie from '../models/db_movie.js'; + +var DBMovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; // TODO: double check name of this template + this.listenTo(this.model, 'change', this.render); + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } +}); + +export default DBMovieView; diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js new file mode 100644 index 000000000..24958f940 --- /dev/null +++ b/src/views/db_movies_view.js @@ -0,0 +1,50 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import DBMovieView from './db_movie_view.js'; +import DBMovie from '../models/db_movie.js'; + + + + +var DBMoviesView = Backbone.View.extend({ + initialize: function( params ) { + this.template = params.stockTemplate; + this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + + this.$( '#movie-results' ).empty(); + + var that = this; + + this.model.each(function( dbMovie ) { + var dbMovieView = new DBMovieView({ + model: dbMovie, + template: that.template + }); + that.$('#movie-results').append( dbMovieView.render().$el ); + }); + return this; + } + // events: { + // 'click #search-button' : 'searchMovie' + // }, + // // getFormData: function() { + // // var formQuery = this.$('#query').val(); + // // this.$('#query').val(''); + // // return formQuery; + // // }, + // searchMovie: function() { + // event.preventDefault(); + // + // this.model.fetch({ + // data: {query: this.getFormData()} + // }); + // + // } +}); + +export default DBMoviesView; diff --git a/src/views/movies_view.js b/src/views/movies_view.js index cfc363d6d..9ab40f5a2 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -26,28 +26,25 @@ var MoviesView = Backbone.View.extend({ model: movie, template: that.template }); - that.$('#movie-results').append(movieView.render().$el); + that.$('#movies-stocked').append(movieView.render().$el); }); return this; - }, - events: { - 'click #search-button' : 'searchMovie' - - }, - getFormData: function() { - - var formQuery = this.$('#query').val(); - this.$('#query').val(''); - console.log(formQuery); - return formQuery; - }, - searchMovie: function() { - - event.preventDefault(); - this.model.fetch({ - data: {query: this.getFormData()} - }); } + // events: { + // 'click #search-button' : 'searchMovie' + // }, + // getFormData: function() { + // var formQuery = this.$('#query').val(); + // this.$('#query').val(''); + // return formQuery; + // }, + // searchMovie: function() { + // event.preventDefault(); + // this.model.fetch({ + // data: {query: this.getFormData()} + // }); + // + // } }); From e786f7916faaaffeb188eed1198d96b50dccf150 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 15:52:20 -0700 Subject: [PATCH 17/26] Got search working without commingling collections. --- build/css/styles.css | 1 + src/collections/db_movies.js | 2 +- src/views/db_movies_view.js | 36 +++++++++++++++++------------------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index 68a79a569..f6c7a8103 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -37,6 +37,7 @@ aside label { div { display: inline; } + /* * { border-style: solid; diff --git a/src/collections/db_movies.js b/src/collections/db_movies.js index 2311ba54e..aedfd07a1 100644 --- a/src/collections/db_movies.js +++ b/src/collections/db_movies.js @@ -3,7 +3,7 @@ import DBMovie from '../models/db_movie.js'; var DBMovies = Backbone.Collection.extend({ model: DBMovie, - url: 'http://localhost:3000/movies?query=' + url: 'http://localhost:3000/movies' }); export default DBMovies; diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index 24958f940..aa92087fa 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -6,14 +6,11 @@ import DBMovieView from './db_movie_view.js'; import DBMovie from '../models/db_movie.js'; - - var DBMoviesView = Backbone.View.extend({ initialize: function( params ) { this.template = params.stockTemplate; this.listenTo(this.model, 'update', this.render); }, - render: function() { this.$( '#movie-results' ).empty(); @@ -28,23 +25,24 @@ var DBMoviesView = Backbone.View.extend({ that.$('#movie-results').append( dbMovieView.render().$el ); }); return this; + }, + events: { + 'click #search-button' : 'searchMovie' + }, + getFormData: function() { + var formQuery = this.$('#query').val(); + this.$('#query').val(''); + return formQuery; + }, + searchMovie: function() { + console.log('test'); + event.preventDefault(); + + this.model.fetch({ + data: {query: this.getFormData()} + }); + } - // events: { - // 'click #search-button' : 'searchMovie' - // }, - // // getFormData: function() { - // // var formQuery = this.$('#query').val(); - // // this.$('#query').val(''); - // // return formQuery; - // // }, - // searchMovie: function() { - // event.preventDefault(); - // - // this.model.fetch({ - // data: {query: this.getFormData()} - // }); - // - // } }); export default DBMoviesView; From 79087653d85029e51ba19cf74bbd1eeb02bea77e Mon Sep 17 00:00:00 2001 From: janicewilson Date: Wed, 14 Jun 2017 16:55:42 -0700 Subject: [PATCH 18/26] Added hidden field to Add Movie form. Imported db views into app.js. Added function to add movie. --- build/css/styles.css | 4 ++++ build/index.html | 14 ++++++++++---- src/app.js | 4 ++-- src/views/db_movies_view.js | 24 +++++++++++++++++------- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index f6c7a8103..5f01b30b4 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -38,6 +38,10 @@ div { display: inline; } +.hidden { + display: none; +} + /* * { border-style: solid; diff --git a/build/index.html b/build/index.html index ea2376fca..d82705981 100644 --- a/build/index.html +++ b/build/index.html @@ -37,18 +37,24 @@
- - + + diff --git a/src/app.js b/src/app.js index efebf0991..4e9e7cd1b 100644 --- a/src/app.js +++ b/src/app.js @@ -13,13 +13,13 @@ var dbMovies = new DBMovies(); $(document).ready(function() { var moviesView = new MoviesView({ model: movies, - resultTemplate: _.template($('#result-movie-template').html(), {variable: 'movie'}), + resultTemplate: _.template($('#movie-template').html(), {variable: 'movie'}), el: 'main' }); var dbMoviesView = new DBMoviesView({ model: dbMovies, - stockTemplate: _.template($('#stocked-movie-template').html(), {variable: 'movie'}), + stockTemplate: _.template($('#db-movie-template').html(), {variable: 'movie'}), el: '#db-movies' }); diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index aa92087fa..fc8af83cf 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import DBMovieView from './db_movie_view.js'; import DBMovie from '../models/db_movie.js'; - +import Movie from '../models/movie.js'; var DBMoviesView = Backbone.View.extend({ initialize: function( params ) { @@ -27,21 +27,31 @@ var DBMoviesView = Backbone.View.extend({ return this; }, events: { - 'click #search-button' : 'searchMovie' + 'click #search-button' : 'searchMovie', + 'click #add-button' : 'addMovie' }, - getFormData: function() { + getFormSearch: function() { var formQuery = this.$('#query').val(); this.$('#query').val(''); return formQuery; }, + getFormAdd: function() { + var formAdd = this.$('#external-id').val(); + this.$('#external-id').val(''); + return formAdd; + }, searchMovie: function() { - console.log('test'); event.preventDefault(); - + this.model.fetch({ - data: {query: this.getFormData()} + data: {query: this.getFormSearch()} }); - + }, + addMovie: function() { + console.log(this.getFormAdd()); + event.preventDefault(); + var movie = new Movie(this.model.get(this.getFormAdd())); + this.model.create(movie); } }); From 5442a17e11a57e6c715bc30e1613d99795c20c9a Mon Sep 17 00:00:00 2001 From: janicewilson Date: Fri, 16 Jun 2017 10:36:56 -0700 Subject: [PATCH 19/26] WIP add movie functionality. --- build/index.html | 3 --- src/models/db_movie.js | 13 ++++++++----- src/models/movie.js | 13 ++++++++----- src/views/db_movie_view.js | 38 ++++++++++++++++++++++++++++--------- src/views/db_movies_view.js | 21 +++++++++----------- 5 files changed, 54 insertions(+), 34 deletions(-) diff --git a/build/index.html b/build/index.html index d82705981..7325fdb9f 100644 --- a/build/index.html +++ b/build/index.html @@ -48,13 +48,10 @@

Remaining: <%- movie.inventory %>

<%- movie.image %>

Title: <%- movie.title %>

-
- - diff --git a/src/models/db_movie.js b/src/models/db_movie.js index a9d9edb13..6c32b75e5 100644 --- a/src/models/db_movie.js +++ b/src/models/db_movie.js @@ -1,11 +1,14 @@ import Backbone from 'backbone'; var DBMovie = Backbone.Model.extend({ - defaults: { - title: 'Sci-Fi', - inventory: 1, - image: 'insert image there' - }, + defaults: { + id: '', + title: '', + overview: '', + release_date: '', + image_url: '', + external_id: '' + }, }); export default DBMovie; diff --git a/src/models/movie.js b/src/models/movie.js index 3c7171125..4296aaf18 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,11 +1,14 @@ import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ - defaults: { - title: 'Mystery', - inventory: 1, - image: 'insert image here' - }, + defaults: { + id: '', + title: '', + overview: '', + release_date: '', + image_url: '', + external_id: '' + }, // logStatus: function() { // console.log('Model ' + this.cid); // console.log('Title ' + this.get('title')); diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js index 8890ba77a..48537b8fa 100644 --- a/src/views/db_movie_view.js +++ b/src/views/db_movie_view.js @@ -3,17 +3,37 @@ import _ from 'underscore'; import $ from 'jquery'; import DBMovie from '../models/db_movie.js'; +import Movie from '../models/movie.js'; + var DBMovieView = Backbone.View.extend({ - initialize: function(params) { - this.template = params.template; // TODO: double check name of this template - this.listenTo(this.model, 'change', this.render); - }, - render: function() { - var compiledTemplate = this.template(this.model.toJSON()); - this.$el.html(compiledTemplate); - return this; - } + initialize: function(params) { + this.template = params.template; // TODO: double check name of this template + this.listenTo(this.model, 'change', this.render); + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + 'click #add-button' : 'addMovie' + }, + formatForMovie: function() { + return { + title: this.model.attributes.title, + overview: this.model.attributes.overview, + release_date: this.model.attributes.release_date, + image_url: this.model.attributes.image_url, + external_id: this.model.attributes.external_id + }; + }, + createMovie: function() { + event.preventDefault(); + var movie = new Movie(this.formatForMovie()); + this.trigger('created', movie) + console.log(movie); + } }); export default DBMovieView; diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index fc8af83cf..4485a038c 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -4,12 +4,12 @@ import $ from 'jquery'; import DBMovieView from './db_movie_view.js'; import DBMovie from '../models/db_movie.js'; -import Movie from '../models/movie.js'; var DBMoviesView = Backbone.View.extend({ initialize: function( params ) { this.template = params.stockTemplate; this.listenTo(this.model, 'update', this.render); + this.stopListening(this.model, 'stop'); }, render: function() { @@ -22,37 +22,34 @@ var DBMoviesView = Backbone.View.extend({ model: dbMovie, template: that.template }); + that.listenTo(DBMovieView, 'created', that.addMovie) that.$('#movie-results').append( dbMovieView.render().$el ); }); return this; }, events: { 'click #search-button' : 'searchMovie', - 'click #add-button' : 'addMovie' }, getFormSearch: function() { var formQuery = this.$('#query').val(); this.$('#query').val(''); return formQuery; }, - getFormAdd: function() { - var formAdd = this.$('#external-id').val(); - this.$('#external-id').val(''); - return formAdd; - }, searchMovie: function() { event.preventDefault(); - this.model.fetch({ data: {query: this.getFormSearch()} }); }, - addMovie: function() { - console.log(this.getFormAdd()); - event.preventDefault(); - var movie = new Movie(this.model.get(this.getFormAdd())); + addMovie: function(movie) { + this.trigger('stop', movie) + + console.log('test'); this.model.create(movie); + event.stopPropagation() + } + }); export default DBMoviesView; From ae72865394f163d54f6f65292ead2804dc42a707 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Fri, 16 Jun 2017 11:27:21 -0700 Subject: [PATCH 20/26] Add movie function is finally working. --- build/index.html | 2 +- src/models/db_movie.js | 1 - src/models/movie.js | 1 - src/views/db_movie_view.js | 5 ++--- src/views/db_movies_view.js | 12 +++++------- 5 files changed, 8 insertions(+), 13 deletions(-) diff --git a/build/index.html b/build/index.html index 7325fdb9f..812c25264 100644 --- a/build/index.html +++ b/build/index.html @@ -48,7 +48,7 @@

Remaining: <%- movie.inventory %>

<%- movie.image %>

Title: <%- movie.title %>

- +
diff --git a/src/models/db_movie.js b/src/models/db_movie.js index 6c32b75e5..1f93c2a49 100644 --- a/src/models/db_movie.js +++ b/src/models/db_movie.js @@ -2,7 +2,6 @@ import Backbone from 'backbone'; var DBMovie = Backbone.Model.extend({ defaults: { - id: '', title: '', overview: '', release_date: '', diff --git a/src/models/movie.js b/src/models/movie.js index 4296aaf18..1c04ca13b 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -2,7 +2,6 @@ import Backbone from 'backbone'; var Movie = Backbone.Model.extend({ defaults: { - id: '', title: '', overview: '', release_date: '', diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js index 48537b8fa..40c85f73c 100644 --- a/src/views/db_movie_view.js +++ b/src/views/db_movie_view.js @@ -17,7 +17,7 @@ var DBMovieView = Backbone.View.extend({ return this; }, events: { - 'click #add-button' : 'addMovie' + 'click #add-button' : 'createMovie' }, formatForMovie: function() { return { @@ -31,8 +31,7 @@ var DBMovieView = Backbone.View.extend({ createMovie: function() { event.preventDefault(); var movie = new Movie(this.formatForMovie()); - this.trigger('created', movie) - console.log(movie); + this.trigger('created', movie); } }); diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index 4485a038c..e1a24062b 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -9,7 +9,6 @@ var DBMoviesView = Backbone.View.extend({ initialize: function( params ) { this.template = params.stockTemplate; this.listenTo(this.model, 'update', this.render); - this.stopListening(this.model, 'stop'); }, render: function() { @@ -22,7 +21,9 @@ var DBMoviesView = Backbone.View.extend({ model: dbMovie, template: that.template }); - that.listenTo(DBMovieView, 'created', that.addMovie) + + that.listenTo(dbMovieView,'created', that.addMovie); + that.$('#movie-results').append( dbMovieView.render().$el ); }); return this; @@ -42,14 +43,11 @@ var DBMoviesView = Backbone.View.extend({ }); }, addMovie: function(movie) { - this.trigger('stop', movie) - - console.log('test'); + event.preventDefault(); this.model.create(movie); - event.stopPropagation() - } + }); export default DBMoviesView; From cc9ab7ee992b6ff99ea165b5fef98c6d37b1e783 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Fri, 16 Jun 2017 14:31:56 -0700 Subject: [PATCH 21/26] trying to get the added movie to cause a re-render to refresh the page... --- build/index.html | 3 ++- src/app.js | 2 +- src/views/db_movie_view.js | 1 + src/views/db_movies_view.js | 2 ++ src/views/movies_view.js | 13 +++++++++---- 5 files changed, 15 insertions(+), 6 deletions(-) diff --git a/build/index.html b/build/index.html index 812c25264..f2a8a861f 100644 --- a/build/index.html +++ b/build/index.html @@ -15,6 +15,7 @@
+
@@ -32,7 +33,7 @@
- +
diff --git a/src/app.js b/src/app.js index 4e9e7cd1b..d832579a9 100644 --- a/src/app.js +++ b/src/app.js @@ -14,7 +14,7 @@ $(document).ready(function() { var moviesView = new MoviesView({ model: movies, resultTemplate: _.template($('#movie-template').html(), {variable: 'movie'}), - el: 'main' + el: '#movies' }); var dbMoviesView = new DBMoviesView({ diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js index 40c85f73c..71ec489d4 100644 --- a/src/views/db_movie_view.js +++ b/src/views/db_movie_view.js @@ -31,6 +31,7 @@ var DBMovieView = Backbone.View.extend({ createMovie: function() { event.preventDefault(); var movie = new Movie(this.formatForMovie()); + console.log(movie); this.trigger('created', movie); } }); diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index e1a24062b..d6b2105fc 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -43,8 +43,10 @@ var DBMoviesView = Backbone.View.extend({ }); }, addMovie: function(movie) { + console.log(movie); event.preventDefault(); this.model.create(movie); + // this.trigger('refresh'); } diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 9ab40f5a2..60c1e2e83 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -4,6 +4,7 @@ import $ from 'jquery'; import MovieView from './movie_view.js'; import Movie from '../models/movie.js'; +import DBMoviesView from './db_movies_view.js'; var MoviesView = Backbone.View.extend({ @@ -11,11 +12,12 @@ var MoviesView = Backbone.View.extend({ this.template = params.resultTemplate; this.detailsTemplate = params.stockTemplate; this.listenTo(this.model, 'update', this.render); + // this.listenTo(DBMoviesView, 'refresh', this.render); this.model.fetch(); }, render: function() { - + // this.$('#movies').empty(); this.$('#movie-results').empty(); this.$('#movies-stocked').empty(); @@ -26,13 +28,16 @@ var MoviesView = Backbone.View.extend({ model: movie, template: that.template }); + that.$('#movies-stocked').append(movieView.render().$el); }); + console.log('test'); return this; + } - // events: { - // 'click #search-button' : 'searchMovie' - // }, + // events: { + // 'click #add-button' : 'render' + // } // getFormData: function() { // var formQuery = this.$('#query').val(); // this.$('#query').val(''); From 281ec57c48fefac803c079a5dd33021c46a24228 Mon Sep 17 00:00:00 2001 From: janicewilson Date: Mon, 19 Jun 2017 10:37:33 -0700 Subject: [PATCH 22/26] Fixed refresh. --- build/css/styles.css | 6 +++++- build/index.html | 32 ++++++++++++++--------------- src/app.js | 9 -------- src/views/db_movie_view.js | 1 - src/views/db_movies_view.js | 13 +++++------- src/views/movies_view.js | 41 +++++++++++++++---------------------- 6 files changed, 43 insertions(+), 59 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index 5f01b30b4..0f52c5378 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -39,7 +39,11 @@ div { } .hidden { - display: none; + display: none; +} + +#db-movies { + background-color: skyblue; } /* diff --git a/build/index.html b/build/index.html index f2a8a861f..6f20c0b5f 100644 --- a/build/index.html +++ b/build/index.html @@ -15,25 +15,25 @@
-
-
- -
- - -
- -
- -
- -
- +
+
+
+
+ + +
+ +
+ +
+
+ +
test
+
-
+
test
-
diff --git a/src/app.js b/src/app.js index d832579a9..7fce8c731 100644 --- a/src/app.js +++ b/src/app.js @@ -7,8 +7,6 @@ import DBMoviesView from './views/db_movies_view.js'; var movies = new Movies(); -var dbMovies = new DBMovies(); - $(document).ready(function() { var moviesView = new MoviesView({ @@ -17,13 +15,6 @@ $(document).ready(function() { el: '#movies' }); - var dbMoviesView = new DBMoviesView({ - model: dbMovies, - stockTemplate: _.template($('#db-movie-template').html(), {variable: 'movie'}), - el: '#db-movies' - }); - moviesView.render(); - dbMoviesView.render(); }); diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js index 71ec489d4..40c85f73c 100644 --- a/src/views/db_movie_view.js +++ b/src/views/db_movie_view.js @@ -31,7 +31,6 @@ var DBMovieView = Backbone.View.extend({ createMovie: function() { event.preventDefault(); var movie = new Movie(this.formatForMovie()); - console.log(movie); this.trigger('created', movie); } }); diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js index d6b2105fc..d2912b2d7 100644 --- a/src/views/db_movies_view.js +++ b/src/views/db_movies_view.js @@ -4,15 +4,18 @@ import $ from 'jquery'; import DBMovieView from './db_movie_view.js'; import DBMovie from '../models/db_movie.js'; +import Movies from '../collections/movies.js'; + var DBMoviesView = Backbone.View.extend({ initialize: function( params ) { this.template = params.stockTemplate; + this.movies = params.movies this.listenTo(this.model, 'update', this.render); }, render: function() { - this.$( '#movie-results' ).empty(); + this.$( '#movie-results' ).empty(); var that = this; @@ -23,7 +26,6 @@ var DBMoviesView = Backbone.View.extend({ }); that.listenTo(dbMovieView,'created', that.addMovie); - that.$('#movie-results').append( dbMovieView.render().$el ); }); return this; @@ -43,13 +45,8 @@ var DBMoviesView = Backbone.View.extend({ }); }, addMovie: function(movie) { - console.log(movie); - event.preventDefault(); - this.model.create(movie); - // this.trigger('refresh'); + this.movies.create(movie); } - - }); export default DBMoviesView; diff --git a/src/views/movies_view.js b/src/views/movies_view.js index 60c1e2e83..9bbb23ed3 100644 --- a/src/views/movies_view.js +++ b/src/views/movies_view.js @@ -5,22 +5,32 @@ import $ from 'jquery'; import MovieView from './movie_view.js'; import Movie from '../models/movie.js'; import DBMoviesView from './db_movies_view.js'; +import DBMovies from '../collections/db_movies.js'; +import DBMovie from '../models/db_movie.js'; var MoviesView = Backbone.View.extend({ initialize: function(params) { this.template = params.resultTemplate; this.detailsTemplate = params.stockTemplate; - this.listenTo(this.model, 'update', this.render); - // this.listenTo(DBMoviesView, 'refresh', this.render); + this.dbMovies = new DBMovies(); + + this.dbMoviesView = new DBMoviesView({ + movies: this.model, + model: this.dbMovies, + stockTemplate: _.template($('#db-movie-template').html(), {variable: 'movie'}), + el: '#db-movies' + }); this.model.fetch(); + + this.listenTo(this.model, 'update', this.render); + }, render: function() { - // this.$('#movies').empty(); - this.$('#movie-results').empty(); - this.$('#movies-stocked').empty(); - + console.log("test"); + this.$('#movie-results').empty(); + this.$('#movies-stocked').empty(); var that = this; this.model.each(function(movie) { @@ -31,26 +41,9 @@ var MoviesView = Backbone.View.extend({ that.$('#movies-stocked').append(movieView.render().$el); }); - console.log('test'); - return this; + return this; } - // events: { - // 'click #add-button' : 'render' - // } - // getFormData: function() { - // var formQuery = this.$('#query').val(); - // this.$('#query').val(''); - // return formQuery; - // }, - // searchMovie: function() { - // event.preventDefault(); - // this.model.fetch({ - // data: {query: this.getFormData()} - // }); - // - // } - }); export default MoviesView; From 9b25f98e99a057990beb5d7d832cf2a07e59b09a Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Mon, 19 Jun 2017 10:49:56 -0700 Subject: [PATCH 23/26] images kinda work --- build/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/build/index.html b/build/index.html index 6f20c0b5f..131ceb99b 100644 --- a/build/index.html +++ b/build/index.html @@ -28,10 +28,10 @@
-
test
+
-
test
+
@@ -39,14 +39,14 @@
From 60f9a2641869c93c3efeb30eccc3a1142b2bb763 Mon Sep 17 00:00:00 2001 From: Theresa Manney Date: Fri, 23 Jun 2017 13:13:50 -0700 Subject: [PATCH 25/26] no wierd spacing happening any more, changed the font style in the header and the movie titles --- build/css/styles.css | 40 ++++++++++++++++++++------------------ build/index.html | 12 +++++++----- src/views/db_movie_view.js | 2 +- 3 files changed, 29 insertions(+), 25 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index 31b4529c1..1da397305 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -10,6 +10,10 @@ header { text-align: center; } +h1 { + font-family: 'Bowlby One', cursive; +} + #completed-checkbox { display: inline; } @@ -40,26 +44,24 @@ div { } #db-movies { - background-color: skyblue; -} -#movie-template { - border: solid; + background-color: skyblue; } -/*#movie-results, #movies-stocked { - height: 500px; - overflow: scroll; - border: solid; -}*/ -/*section.movie { - background: purple; -}*/ -/*section#movie-results, section#movies-stocked { - height: 500px; +h4 { + font-family: 'Bowlby One', cursive; + text-align: center; + height: 100px; overflow: scroll; -}*/ -/* -* { - border-style: solid; } -*/ +.pic { + padding-bottom: 1em; + display: block; + margin: auto; + width: 225px; + height: 330px; + +} + +p { + text-align: center; +} diff --git a/build/index.html b/build/index.html index 3aac3ae58..6a90c722b 100644 --- a/build/index.html +++ b/build/index.html @@ -5,6 +5,7 @@ + Wetflix @@ -41,10 +42,9 @@

Wetflix

@@ -52,10 +52,12 @@

Remaining: <%- movie.inventory %>