From 494731fa0edd4be392768dca4e57232274b602ae Mon Sep 17 00:00:00 2001 From: Brenna Date: Tue, 13 Jun 2017 16:33:53 -0700 Subject: [PATCH 01/40] basic html outline done: --- build/index.html | 8 ++++++++ src/app.js | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html index 03869595f..9746fb0bb 100644 --- a/build/index.html +++ b/build/index.html @@ -8,7 +8,15 @@ Backbone Baseline +
+

My Video Store :)

+ +
+
+
+
+ diff --git a/src/app.js b/src/app.js index 58b77997c..9051cd160 100644 --- a/src/app.js +++ b/src/app.js @@ -6,7 +6,7 @@ import _ from 'underscore'; // ready to go $(document).ready(function() { - - $('section.main-content').append('

Hello World!

'); + // $('section.main-content').append('

Hello World!

'); + var rentalList = new MovieList(); }); From f79be1e69e64d665ea9af5ddcda15e2cbe94ea80 Mon Sep 17 00:00:00 2001 From: Brenna Date: Tue, 13 Jun 2017 16:40:39 -0700 Subject: [PATCH 02/40] made movie list model --- build/index.html | 2 +- src/app.js | 1 + src/collections/movie_list.js | 12 ++++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/collections/movie_list.js diff --git a/build/index.html b/build/index.html index 9746fb0bb..6735352a6 100644 --- a/build/index.html +++ b/build/index.html @@ -5,7 +5,7 @@ - Backbone Baseline + My Video Store!!!!
diff --git a/src/app.js b/src/app.js index 9051cd160..7c2e566ed 100644 --- a/src/app.js +++ b/src/app.js @@ -9,4 +9,5 @@ $(document).ready(function() { // $('section.main-content').append('

Hello World!

'); var rentalList = new MovieList(); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..dce40fd5d --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie.js'; + +var MovieList = Backbone.Collection.extend({ + model: Movie, + url: "localhost:3000/movies", + parse: function(data) { + return data; + } +}); + +export default MovieList; From d00cd4f3362e8e15acaf66e5e101c37455f377ad Mon Sep 17 00:00:00 2001 From: Brenna Date: Tue, 13 Jun 2017 17:02:11 -0700 Subject: [PATCH 03/40] finished models, views, app.js --- src/app.js | 11 ++++++++--- src/models/movie.js | 9 +++++++++ src/views/movie_list_view.js | 32 ++++++++++++++++++++++++++++++++ src/views/movie_view.js | 23 +++++++++++++++++++++++ 4 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 src/models/movie.js create mode 100644 src/views/movie_list_view.js create mode 100644 src/views/movie_view.js diff --git a/src/app.js b/src/app.js index 7c2e566ed..8dab8ef79 100644 --- a/src/app.js +++ b/src/app.js @@ -4,10 +4,15 @@ import $ from 'jquery'; import _ from 'underscore'; -// ready to go +var rentalList = new MovieList(); + +var rentalListView = new MovieListView({ + model: rentalList, + template: _.template($('#movie-template').html()), + el: 'main', +}); + $(document).ready(function() { // $('section.main-content').append('

Hello World!

'); - var rentalList = new MovieList(); - }); diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..dbcd0fc6e --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + initialize: function(params) { + console.log("Initialized movie " + this.get("title")); + } +}); + +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..62edb3a94 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,32 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; +import MovieView from './movie_view'; +import Movie from '../models/movie.js'; + +var MovieListView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; + // other templates maybe? + + this.listenTo(this.model, "update", this.render); + }, + render: function() { + this.$('#movie-list').empty(); + + this.model.each((movie) => { + var movieView = new MovieView({ + model: movie, + template: this.template + }); + this.$('#movie-list').append(movieView.render().el); + }); + + return this; + }, + events: { + // "click .." : ".." + } +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..f2d7ace9f --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,23 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; +import Movie from '../models/movie.js'; + +var MovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.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 ..' : '..', + } +}); + +export default MovieView; From daf66c3c2bb1d0a26f875bf65c71b9f1e7813a7c Mon Sep 17 00:00:00 2001 From: Ashtn Date: Wed, 14 Jun 2017 11:29:34 -0700 Subject: [PATCH 04/40] added underscore templates to index, fixed api url --- build/index.html | 49 +++++++++++++++++++++-------------- src/app.js | 5 ++++ src/collections/movie_list.js | 2 +- src/views/movie_list_view.js | 7 ++--- 4 files changed, 40 insertions(+), 23 deletions(-) diff --git a/build/index.html b/build/index.html index 6735352a6..4c351614c 100644 --- a/build/index.html +++ b/build/index.html @@ -1,23 +1,34 @@ - - - - - - My Video Store!!!! - - -
-

My Video Store :)

- -
-
-
-
+ + + + + + My Video Store!!!! + + +
+

My Video Store :)

+ +
+
+
    - - +
+
- - + + + + + + + + diff --git a/src/app.js b/src/app.js index 8dab8ef79..6f00ce2f8 100644 --- a/src/app.js +++ b/src/app.js @@ -3,15 +3,20 @@ // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import MovieList from './collections/movie_list.js'; +import MovieListView from './views/movie_list_view.js'; var rentalList = new MovieList(); +console.log('>>>>>>>>>>>BreadCrumb 1'); + var rentalListView = new MovieListView({ model: rentalList, template: _.template($('#movie-template').html()), el: 'main', }); + $(document).ready(function() { // $('section.main-content').append('

Hello World!

'); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index dce40fd5d..033964d79 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,7 +3,7 @@ import Movie from '../models/movie.js'; var MovieList = Backbone.Collection.extend({ model: Movie, - url: "localhost:3000/movies", + url: "http://localhost:3000/movies", parse: function(data) { return data; } diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 62edb3a94..68f1ddc92 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,15 +1,16 @@ import Backbone from 'backbone'; import _ from 'underscore'; import $ from 'jquery'; -import MovieView from './movie_view'; +import MovieView from './movie_view.js'; import Movie from '../models/movie.js'; var MovieListView = Backbone.View.extend({ initialize: function(params) { this.template = params.template; // other templates maybe? - - this.listenTo(this.model, "update", this.render); + console.log('MoviewListView:',this.template); + // this.listenTo(this.model, "update", this.render); + this.model.fetch(); }, render: function() { this.$('#movie-list').empty(); From 136d47341036e14ed8bdbaec48429af7ca78d989 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Wed, 14 Jun 2017 11:33:34 -0700 Subject: [PATCH 05/40] we can see images! whoooo --- build/index.html | 2 +- src/views/movie_list_view.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html index 4c351614c..76b57b47d 100644 --- a/build/index.html +++ b/build/index.html @@ -22,7 +22,7 @@

My Video Store :)

diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 2f8f0f9e2..ca3565772 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -18,6 +18,14 @@ var MovieView = Backbone.View.extend({ events: { 'click #add' : 'addMovie', }, + getInventory: function(){ + var inventory = this.$("input[type='number']").val(); + + this.$("input[type='number']").val(''); + + console.log('this is the input from', inventory); + return inventory; + }, addMovie: function() { console.log(this.model); @@ -25,7 +33,8 @@ var MovieView = Backbone.View.extend({ title: this.model.get('title'), overview: this.model.get('overview'), release_date: this.model.get('release_date'), - image_url: this.model.get('image_url') + image_url: this.model.get('image_url'), + inventory: this.getInventory() }, type: 'POST' }); From 7fbfee8998dfd30549192185ed7557ec7e3f6a03 Mon Sep 17 00:00:00 2001 From: Brenna Date: Fri, 16 Jun 2017 10:22:36 -0700 Subject: [PATCH 19/40] added conditional add/delete buttons --- build/index.html | 10 ++++++++-- src/views/movie_list_view.js | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/build/index.html b/build/index.html index 9061a0181..ace8f6c15 100644 --- a/build/index.html +++ b/build/index.html @@ -29,8 +29,14 @@

My Video Store :)

  • >

    <%- title %>

    - - + + <% if (external_id) { %> + + + <% } else { %> + + <% } %> +
    • diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index faf599527..24d832b68 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,7 +13,7 @@ var MovieListView = Backbone.View.extend({ this.model.fetch({ success: function(data) { - // console.log("It worked!", data); + console.log("It worked (index)!", data); }, failure: function(data) { console.log("Failure", data); @@ -52,7 +52,7 @@ var MovieListView = Backbone.View.extend({ this.model.fetch({ data: query, success: function(data) { - // console.log("It worked!", data); + console.log("It worked! (search)", data); }, failure: function(data) { console.log("Failure", data); From 50b8681058ce1a5645e9b264809f1bddf0e828f9 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Fri, 16 Jun 2017 20:45:28 -0700 Subject: [PATCH 20/40] added delete button listener and handler - eod 6/16 --- src/views/movie_list_view.js | 1 + src/views/movie_view.js | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 24d832b68..01990d965 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -10,6 +10,7 @@ var MovieListView = Backbone.View.extend({ // other templates maybe? this.listenTo(this.model, "update", this.render); + // this.listenTo(this.model, "remove", this.render); this.model.fetch({ success: function(data) { diff --git a/src/views/movie_view.js b/src/views/movie_view.js index ca3565772..175c7dded 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -8,6 +8,7 @@ var MovieView = Backbone.View.extend({ this.template = params.template; this.listenTo(this.model, "change", this.render); + this.listenTo(this.model, "request", this.render); }, render: function() { var compiledTemplate = this.template(this.model.toJSON()); @@ -17,6 +18,7 @@ var MovieView = Backbone.View.extend({ }, events: { 'click #add' : 'addMovie', + 'click #delete': 'deleteMovie' }, getInventory: function(){ var inventory = this.$("input[type='number']").val(); @@ -37,7 +39,19 @@ var MovieView = Backbone.View.extend({ inventory: this.getInventory() }, type: 'POST' - }); -}}); + });}, + deleteMovie: function(){ + this.model.fetch({ + data: { + id: this.model.get("id"), + title: this.model.get('title') + }, + type: 'DELETE' + }); + alert('pressed'); + this.model.destroy(); + } +// } +}); export default MovieView; From b1c52cc2ee94b276c64d0bb60dc68b14a3a8711e Mon Sep 17 00:00:00 2001 From: Ashtn Date: Mon, 19 Jun 2017 10:42:44 -0700 Subject: [PATCH 21/40] can delete model from collection without addtional api call --- src/views/movie_list_view.js | 1 + src/views/movie_view.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 01990d965..9ad689fc6 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -31,6 +31,7 @@ var MovieListView = Backbone.View.extend({ template: this.template }); this.$('#movie-list').append(movieView.render().el); + // this.listenTo(movieView, 'delete', this.destroy); }); return this; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 175c7dded..6fba24afc 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -49,7 +49,10 @@ var MovieView = Backbone.View.extend({ type: 'DELETE' }); alert('pressed'); - this.model.destroy(); + // this.model.destroy(); + // this.model.trigger('delete', this.model); + // NOTE this does not bubble up to any other collection the moview belongs to. Acoordint to `oak-tree` + this.model.collection.remove(this.model); } // } }); From 19a8512b6363edbd6a0445ba2d08986de9676203 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Mon, 19 Jun 2017 11:16:57 -0700 Subject: [PATCH 22/40] added movie details template --- build/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/build/index.html b/build/index.html index ace8f6c15..71018ee0d 100644 --- a/build/index.html +++ b/build/index.html @@ -40,6 +40,18 @@

    <%- title %>

    + + From 5a3ba761e46b39f6db3462feb0c777ea70a082cf Mon Sep 17 00:00:00 2001 From: Ashtn Date: Mon, 19 Jun 2017 13:16:06 -0700 Subject: [PATCH 23/40] added movie details template, event listener for a clock on the movie details, and event handler stub --- build/css/styles.css | 14 ++++++++++++++ build/index.html | 1 + src/views/movie_list_view.js | 20 +++++++++++++++++++- src/views/movie_view.js | 10 ++++++---- 4 files changed, 40 insertions(+), 5 deletions(-) diff --git a/build/css/styles.css b/build/css/styles.css index ebfc58119..f2ad52e06 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -14,3 +14,17 @@ li { height: 450px; margin-bottom: 50px; } + +#movie-details { + z-index: 10; + position: fixed; + width: 50%; + height: 50%; + top: 30%; + left: 30%; + background-color: yellow; + text-align: center; + border: 1em solid black; + margin-left: 20%; + /*border-radius: 10%;*/ +} diff --git a/build/index.html b/build/index.html index 71018ee0d..c7b8b0231 100644 --- a/build/index.html +++ b/build/index.html @@ -21,6 +21,7 @@

    My Video Store :)

    +
    diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 9ad689fc6..33995b2ea 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -31,7 +31,7 @@ var MovieListView = Backbone.View.extend({ template: this.template }); this.$('#movie-list').append(movieView.render().el); - // this.listenTo(movieView, 'delete', this.destroy); + this.listenTo(movieView, 'selectedMovie', this.showMovieDetails); }); return this; @@ -61,6 +61,24 @@ var MovieListView = Backbone.View.extend({ this.$('#movie-list').append("

    Request failed.

    "); } }); + }, + showMovieDetails: function(movie){ + // empty + // show + // create new instance of Movie View + // append things + // check if the movie has a external id + // If does not have an external id + // make a call to rails to get list of customers + // save the response in a variable + // listen for check_out + // listen for check in + //else + // show movie + // end + }, + hideMovieDetails: function(){ + this.$('#movie-details').hide(); } }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 6fba24afc..5d8275407 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -48,13 +48,15 @@ var MovieView = Backbone.View.extend({ }, type: 'DELETE' }); - alert('pressed'); - // this.model.destroy(); - // this.model.trigger('delete', this.model); // NOTE this does not bubble up to any other collection the moview belongs to. Acoordint to `oak-tree` this.model.collection.remove(this.model); + }, + onClick: function(event){ + + event.stopPropagation(); + + this.trigger('selectedMovie', this.model); } -// } }); export default MovieView; From 0dec5add2cad6e117a1ac9495edd2f023736d053 Mon Sep 17 00:00:00 2001 From: Brenna Date: Mon, 19 Jun 2017 14:52:28 -0700 Subject: [PATCH 24/40] first draft showMovieDetails --- build/index.html | 10 +++++----- src/app.js | 1 - src/views/movie_list_view.js | 30 ++++++++++++++++++++++++------ src/views/movie_view.js | 6 ++---- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/build/index.html b/build/index.html index c7b8b0231..30c4491c8 100644 --- a/build/index.html +++ b/build/index.html @@ -21,15 +21,15 @@

    My Video Store :)

    -
    +
    - + + + diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js new file mode 100644 index 000000000..bf023eb0f --- /dev/null +++ b/src/collections/customer_list.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; +import Customer from '../models/customer.js'; + + +var CustomerList = Backbone.Collection.extend({ + model: Customer, + url: "http://localhost:3000/customers", + parse: function(data) { + return data; + }, + + +}); + +export default CustomerList; diff --git a/src/models/customer.js b/src/models/customer.js new file mode 100644 index 000000000..1ed3b8709 --- /dev/null +++ b/src/models/customer.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; + +var Customer = Backbone.Model.extend({ + initialize: function(params) { + }, + +}); + +export default Customer; diff --git a/src/views/customer_list_view.js b/src/views/customer_list_view.js new file mode 100644 index 000000000..fdee7f8ab --- /dev/null +++ b/src/views/customer_list_view.js @@ -0,0 +1,59 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; +import MovieView from './movie_view.js'; +import Movie from '../models/movie.js'; +import MovieListView from './movie_list_view.js'; +import Customer from '../models/customer.js'; +import CustomerView from './customer_view.js'; + +var CustomerListView = Backbone.View.extend({ + initialize: function() { + this.template = _.template($('#tmpl-customer').html()); + // this.model = new Customer(); + + // console.log('this.model inside Cusomer List View: ', this.model); + this.listenTo(this.model, "sync", this.render); + this.model.fetch({ + success: function(data) { + // console.log("It worked (index)!", data); + // TODO append results to customer list + // for(let i; i < data.length; i++){ + // this.$(#customer-list).append('