From 1346a273c4657db6ff280862926e063711f24161 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Mon, 18 Dec 2017 11:51:01 -0800 Subject: [PATCH 01/45] added basic model/collection structure to framework for movie/ movie_list --- src/collections/movie_list.js | 11 +++++++++++ src/models/movie.js | 28 ++++++++++++++++++++++++++++ src/views/movie_list_view.js | 9 +++++++++ src/views/movie_view.js | 9 +++++++++ 4 files changed, 57 insertions(+) create mode 100644 src/collections/movie_list.js 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/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..7975fe55a --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; +import Movie from '../models/task'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'https://localhost:3000/', + //TODO: put in correct comparator + // comparator: 'name', +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..0f3e063cd --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,28 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + urlRoot: 'https://localhost:3000/', + defaults: { + + }, + initialize(attributes) { + }, + validate(attributes) { + // TODO: make custom validations + // const errors = {}; + // + // if (!attributes.task_name) { + // errors['task_name'] = ["Task name is required"]; + // } + // + // 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..4fdfd81fd --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import MovieList from '../collections/movie_list'; + + +const MovieListView = Backbone.view.extend({ + +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..3b454ef56 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + + +const MovieView = Backbone.view.extend({ + +}); + +export default MovieView; From f5aaf44234c1d276257cd65884b295d16009ac63 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Mon, 18 Dec 2017 15:09:31 -0800 Subject: [PATCH 02/45] getting movie template/movie list templates to work with views to render in html --- dist/index.html | 20 +++++++++++++++++++- src/app.js | 26 +++++++++++++++++++++++++- src/collections/movie_list.js | 12 +++++++++--- src/models/movie.js | 2 +- src/views/movie_list_view.js | 31 ++++++++++++++++++++++++++++++- src/views/movie_view.js | 19 +++++++++++++++++-- 6 files changed, 101 insertions(+), 9 deletions(-) diff --git a/dist/index.html b/dist/index.html index 559b18ecd..50bf19de4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,9 +6,27 @@
- +
+ + diff --git a/src/app.js b/src/app.js index 30c00d594..63c094f65 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 MovieList from './collections/movie_list'; +import Movie from './models/movie'; +import MovieListView from './views/movie_list_view'; +import MovieView from './views/movie_view'; +let movieTemplate; // ready to go -$(document).ready(function() { +const movieList = new MovieList(); +$(document).ready(function() { + movieTemplate = _.template($('#movie-template').html()); $('#main-content').append('

Hello World!

'); + + + + console.log(movieList); + // debugger + console.log('that is the movie list^^^^'); + + const movieListView = new MovieListView({ + el:'main', + model: movieList, + template: movieTemplate, + }); + + + movieList.fetch({ + success: function(collection, response){} + }); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 7975fe55a..7341cec21 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -1,11 +1,17 @@ import Backbone from 'backbone'; -import Movie from '../models/task'; +import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, - url: 'https://localhost:3000/', + url: 'http://localhost:3000/movies', + // parse: function(response){ + // console.log(response); + // console.log('response'); + // return response; + // }, //TODO: put in correct comparator - // comparator: 'name', + comparator: 'title', + }); export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js index 0f3e063cd..027433a3a 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,7 +1,7 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - urlRoot: 'https://localhost:3000/', + urlRoot: 'http://localhost:3000/movies', defaults: { }, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 4fdfd81fd..cc0d1160a 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,9 +1,38 @@ import Backbone from 'backbone'; import MovieList from '../collections/movie_list'; +import Movie from '../models/movie'; +import MovieView from './movie_view'; -const MovieListView = Backbone.view.extend({ +const MovieListView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render(){ + const movieListView = new MovieListView({ + el: '#main-content', + template: this.movieTemplate + }); + this.$el.empty(); + console.log(this); + console.log('this is this^^^'); + + this.model.each((movie)=>{ + + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'div', + className: 'movie', + }); + + this.$el.append(movieView.render().$el); + + }); + return this; + }, }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 3b454ef56..d8dde74dd 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -2,8 +2,23 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; -const MovieView = Backbone.view.extend({ - +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 button.btn-add': 'add' + }, + add(event){ + console.log('we are adding things to our database'); + }, }); export default MovieView; From 2026319c57e1e93cb6358447a5ccdbed076c08be Mon Sep 17 00:00:00 2001 From: Roxanne Date: Mon, 18 Dec 2017 15:24:47 -0800 Subject: [PATCH 03/45] added photos --- dist/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 50bf19de4..29e75ff6d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -15,9 +15,9 @@

<%- title %>

$<%- overview %>

$<%- release_date %>

- + alt= <%- title %> + src= https://image.tmdb.org/t/p/w500/<%- image_url %> alt= <%- title %> />
From 53bb2949af7ea1c5eafc55b04052a0e90bc141a0 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Mon, 18 Dec 2017 15:31:35 -0800 Subject: [PATCH 04/45] not working search bar --- dist/index.html | 73 ++++++++++++++++++++++++++++--------------------- src/app.js | 2 +- 2 files changed, 43 insertions(+), 32 deletions(-) diff --git a/dist/index.html b/dist/index.html index 29e75ff6d..3cb756308 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,33 +1,44 @@ - - - Backbone Baseline - - -
- -
- - - - - - + + + Backbone Baseline + + +
+
+ Home + About + Contact + + +
+ +
+ +
+ +
+ + + + + + diff --git a/src/app.js b/src/app.js index 63c094f65..9fd70b701 100644 --- a/src/app.js +++ b/src/app.js @@ -26,7 +26,7 @@ $(document).ready(function() { console.log('that is the movie list^^^^'); const movieListView = new MovieListView({ - el:'main', + el:'#main-content', model: movieList, template: movieTemplate, }); From efa3537d16a69038c1a445931589ca9c1f29fa8e Mon Sep 17 00:00:00 2001 From: Roxanne Date: Mon, 18 Dec 2017 15:32:38 -0800 Subject: [PATCH 05/45] fixed dollar sign issue --- dist/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3cb756308..d65577bb0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,15 +17,15 @@
- + - - + + + + - - + + diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 2ec4045f9..8db4c82cb 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -21,7 +21,7 @@ const MovieListView = Backbone.View.extend({ }); this.$('#movie-list').empty(); this.model.each((movie)=>{ - + const movieView = new MovieView({ model: movie, template: this.template, From 3c8c027705b211697fb44699469d781017dc16bf Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 11:08:38 -0800 Subject: [PATCH 22/45] added div for messages --- dist/index.html | 3 ++- src/models/movie.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index d52ef677f..30b701305 100644 --- a/dist/index.html +++ b/dist/index.html @@ -20,7 +20,8 @@
- +
+
diff --git a/src/models/movie.js b/src/models/movie.js index 02a855df5..9b41aec0e 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -34,8 +34,8 @@ const Movie = Backbone.Model.extend({ add(newMovie) { if(!newMovie.isValid()){ - // $('.display-status').html('') - // $('.display-status').html(`${newTrip.validationError}`); + $('.display-status').html('') + $('.display-status').html(`${newMovie.errors}`); // modalDisplay(); } else { newMovie.save( {}, { @@ -44,7 +44,7 @@ const Movie = Backbone.Model.extend({ console.log(movieSuccess); $('.display-status').html(''); console.log(response); - // $('.display-status').html(response.name + tripSuccess); + $('.display-status').html(response.name + movieSuccess); // $('#add-trip-form').remove(); // modalDisplay(); // reportStatus('success', 'Successfully added reservation!'); From 94518dbc4058a13c9c18ef12f3b6513dc3aea290 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 11:14:27 -0800 Subject: [PATCH 23/45] addes error and success messages to model --- src/models/movie.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/models/movie.js b/src/models/movie.js index 9b41aec0e..168f02f55 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -40,11 +40,11 @@ const Movie = Backbone.Model.extend({ } else { newMovie.save( {}, { success: (model, response) => { - const movieSuccess = 'successfully added a movie!'; + const movieSuccess = `successfully added ${this.get('title')}!`; console.log(movieSuccess); $('.display-status').html(''); console.log(response); - $('.display-status').html(response.name + movieSuccess); + $('.display-status').html(movieSuccess); // $('#add-trip-form').remove(); // modalDisplay(); // reportStatus('success', 'Successfully added reservation!'); @@ -52,9 +52,9 @@ const Movie = Backbone.Model.extend({ error: (model, response) => { const movieFailure = 'Failed to save movie! Server response:'; // console.log(`validationError ${response.attributes['validationError']}`); - // $('.display-status').html('') + $('.display-status').html('') console.log(response.errors); - // $('.display-status').html(tripFailure); + $('.display-status').html(movieFailure); // modalDisplay(); }, }); From 838c709f7d13838cd0128a571898d4f3b137e1d1 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 11:20:43 -0800 Subject: [PATCH 24/45] added logic for modal --- dist/index.html | 12 ++++++++++++ src/app.js | 32 ++++++++++++++++++++++++++++++++ src/css/styles.css | 27 +++++++++++++++++++++++++++ 3 files changed, 71 insertions(+) diff --git a/dist/index.html b/dist/index.html index 30b701305..f917e44b4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,6 +6,7 @@
+ + + +
diff --git a/src/app.js b/src/app.js index 69b838f04..0ebcfb108 100644 --- a/src/app.js +++ b/src/app.js @@ -13,6 +13,38 @@ import MovieView from './views/movie_view'; let movieTemplate; // ready to go const movieList = new MovieList(); +// Get the modal +const modal = document.getElementById('myModal'); + +// Get the button that opens the modal +const btn = document.getElementById("myBtn"); + +// Get the element that closes the modal +const span = document.getElementsByClassName("close")[0]; + + + + +// When the user clicks on (x), close the modal +span.onclick = function() { + modalHide(); +} +const modalDisplay = function modalDisplay(){ + $('.modal').addClass('show'); + $('.modal').removeClass('hidden'); + console.log('changed modal display to block') +}; + +const modalHide = function modalHide(){ + $('.modal').addClass('hidden'); + $('.modal').removeClass('show'); + console.log('changed modal display to hidden') +}; +window.onclick = function(event) { + if (event.target == modal) { + modalHide() + } +}; $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..71bd6f3a4 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -37,6 +37,33 @@ aside label { div { display: inline; } +.modal { + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} +.show{ + display:block; +} + +.hidden{ + display: none; +} /* * { border-style: solid; From 7b01d5b34781e7ecfa84e1c97daccf624505950b Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 11:59:30 -0800 Subject: [PATCH 25/45] modal display --- src/app.js | 32 +------------------------------- src/models/movie.js | 1 + src/views/movie_list_view.js | 26 +++++++++++++++++++++++--- src/views/movie_view.js | 3 ++- 4 files changed, 27 insertions(+), 35 deletions(-) diff --git a/src/app.js b/src/app.js index 0ebcfb108..40abb2855 100644 --- a/src/app.js +++ b/src/app.js @@ -13,38 +13,7 @@ import MovieView from './views/movie_view'; let movieTemplate; // ready to go const movieList = new MovieList(); -// Get the modal -const modal = document.getElementById('myModal'); -// Get the button that opens the modal -const btn = document.getElementById("myBtn"); - -// Get the element that closes the modal -const span = document.getElementsByClassName("close")[0]; - - - - -// When the user clicks on (x), close the modal -span.onclick = function() { - modalHide(); -} -const modalDisplay = function modalDisplay(){ - $('.modal').addClass('show'); - $('.modal').removeClass('hidden'); - console.log('changed modal display to block') -}; - -const modalHide = function modalHide(){ - $('.modal').addClass('hidden'); - $('.modal').removeClass('show'); - console.log('changed modal display to hidden') -}; -window.onclick = function(event) { - if (event.target == modal) { - modalHide() - } -}; $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); @@ -53,6 +22,7 @@ $(document).ready(function() { movieList.fetch(); }); + const movieListView = new MovieListView({ el:'main', model: movieList, diff --git a/src/models/movie.js b/src/models/movie.js index 168f02f55..5269b69d8 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -55,6 +55,7 @@ const Movie = Backbone.Model.extend({ $('.display-status').html('') console.log(response.errors); $('.display-status').html(movieFailure); + // modalDisplay(); }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 8db4c82cb..ffe08934b 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -9,9 +9,13 @@ const MovieListView = Backbone.View.extend({ this.template = params.template; this.listenTo(this.model, 'update', this.render); + }, events:{ - 'click input.movie-filter': 'searchMovies' + 'click input.movie-filter': 'searchMovies', + // When the user clicks on (x), close the modal + 'click span': 'modalHide', + 'click window': 'modalHide', }, render(params){ event.preventDefault(); @@ -21,16 +25,19 @@ const MovieListView = Backbone.View.extend({ }); this.$('#movie-list').empty(); this.model.each((movie)=>{ - + const movieView = new MovieView({ model: movie, template: this.template, tagName: 'div', className: 'movie', }); + this.listenTo(movieView, 'show_modal', this.modalDisplay); this.$('#movie-list').append(movieView.render().$el); + + }); return this; }, @@ -41,7 +48,20 @@ const MovieListView = Backbone.View.extend({ query: this.$('#movie-field').val(), success: function(query, response){console.log('response');}, }); - } + }, + + modalDisplay() { + this.$('.modal').addClass('show'); + this.$('.modal').removeClass('hidden'); + console.log('changed modal display to block') + }, + + modalHide() { + this.$('.modal').addClass('hidden'); + this.$('.modal').removeClass('show'); + console.log('changed modal display to hidden') + }, + }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 3280c53c5..9750f6e53 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -24,8 +24,9 @@ const MovieView = Backbone.View.extend({ console.log(newMovieObject); let newMovie = new Movie(newMovieObject); console.log(newMovie); - + // debugger this.model.add(newMovie); + this.trigger('show_modal'); }, }); From 49564306152315a10a902ce787660c957921a817 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 12:01:36 -0800 Subject: [PATCH 26/45] removed second display status div --- dist/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index f917e44b4..6b41113b8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -31,8 +31,6 @@
-
-
From aeff683953eae95243f1f25aa7430475fde32850 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 12:09:02 -0800 Subject: [PATCH 27/45] updated nav bar, learn more button class, etc --- dist/index.html | 6 +++--- src/views/movie_view.js | 6 +++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 6b41113b8..0e9175bd7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,8 +8,8 @@
<% }else{ %> diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 9750f6e53..248e78ce2 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -14,7 +14,8 @@ const MovieView = Backbone.View.extend({ return this; }, events: { - 'click button.btn-add': 'add' + 'click button.btn-add': 'add', + 'click button.btn-show': 'show' }, add(event){ event.preventDefault(); @@ -28,6 +29,9 @@ const MovieView = Backbone.View.extend({ this.model.add(newMovie); this.trigger('show_modal'); }, + show(event) { + + }, }); export default MovieView; From 98bfdd837a8621f393fd377147dbde09e1dd79d6 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 13:51:09 -0800 Subject: [PATCH 28/45] got the show page to work. HECK YES --- dist/index.html | 43 ++++++++++++++++++----------------- src/collections/movie_list.js | 11 +++------ src/views/movie_list_view.js | 10 ++++++-- src/views/movie_view.js | 21 +++++++++++++++-- 4 files changed, 52 insertions(+), 33 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0e9175bd7..87b017ec4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,15 +17,15 @@
-
@@ -45,23 +45,24 @@

<%- title %>

<%- overview %>

<%- release_date %>

- - alt= <%- title %> /> + <% if( typeof image_url !== 'undefined'){ %> + alt= <%- title %> /> + <% }%>
- <% if( typeof id !== 'undefined'){ %> + <% if( typeof id !== 'undefined'){ %> - + -
- <% }else{ %> +
+ <% }else{ %> - <% } %> - - - - - + <% } %> + + + + + - - + + diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 9ce6e1965..4b71decbb 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -10,16 +10,11 @@ const MovieList = Backbone.Collection.extend({ fetchSearch: function (query, options) { options = options || {}; - $('#header').html(''); - $('#header').append(query); - // if (options.url === undefined) { - // - // options.url = this.url + "?query=" + query['query'] - // } + options.data = {query: query['query']} - return this.fetch(options) - // return Backbone.Model.prototype.fetch.call(this, options); + return this.fetch(options); + }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index ffe08934b..7358822c6 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -33,7 +33,7 @@ const MovieListView = Backbone.View.extend({ className: 'movie', }); this.listenTo(movieView, 'show_modal', this.modalDisplay); - + this.listenTo(movieView, 'show_movie', this.resetModel); this.$('#movie-list').append(movieView.render().$el); @@ -41,12 +41,18 @@ const MovieListView = Backbone.View.extend({ }); return this; }, + resetModel(movie){ + debugger + this.model.set([movie]) + // this.model.save(); + debugger + }, searchMovies(event){ event.preventDefault(); console.log('in search movies'); this.model.fetchSearch({ query: this.$('#movie-field').val(), - success: function(query, response){console.log('response');}, + success: function(query, response){console.log(response);}, }); }, diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 248e78ce2..0c700bb18 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -15,7 +15,24 @@ const MovieView = Backbone.View.extend({ }, events: { 'click button.btn-add': 'add', - 'click button.btn-show': 'show' + 'click button.btn-show': 'showSingle' + }, + showSingle(){ + event.preventDefault(); + let tempId = this.model.attributes.id; + this.model.set('id', this.model.attributes.title); + let tempThis = this; + this.model.fetch({ + success: function(option, response){ + console.log(response); + let newMovie = new Movie(response); + tempThis.trigger('show_movie', newMovie); + console.log('triggering movie reset'); + console.log('response'); + }, + }); + this.model.set('id', tempId); + }, add(event){ event.preventDefault(); @@ -30,7 +47,7 @@ const MovieView = Backbone.View.extend({ this.trigger('show_modal'); }, show(event) { - + }, }); From 9385e2cf07170f6e05d2eb37e71b2a091443ffb1 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 13:52:38 -0800 Subject: [PATCH 29/45] modal styling --- dist/index.html | 8 +++++--- src/css/styles.css | 25 +++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 0e9175bd7..6541a2fe0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,15 +17,17 @@ - +
diff --git a/src/css/styles.css b/src/css/styles.css index 71bd6f3a4..800815310 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -37,6 +37,11 @@ aside label { div { display: inline; } + +/* #myModal { + width: 500px; + background-color: red; +} */ .modal { position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ @@ -47,6 +52,7 @@ div { overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } /* Modal Content/Box */ @@ -56,6 +62,7 @@ div { padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ + display: flex; } .show{ display:block; @@ -64,6 +71,24 @@ div { .hidden{ display: none; } + +.button.close { + display: block; + width: 5%; + height: 2%; + /* float: right; */ + align-content: right; + /* margin-left: 75%; */ + background-color: lightblue; + margin-right: 15%; + font-size: 30%; +} + +p.display-status { + max-width: 500px; + width: 100%; + display: block; +} /* * { border-style: solid; From c10767976c7fe7203ccd26b7956c85a3308a0744 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 13:57:00 -0800 Subject: [PATCH 30/45] modal merge confict fixed --- dist/index.html | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/dist/index.html b/dist/index.html index 5b93a97c6..b937db999 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,17 +17,9 @@ -<<<<<<< HEAD - -======= + ->>>>>>> 9385e2cf07170f6e05d2eb37e71b2a091443ffb1 +
From 313f332c3ad74f648666f2c9b5abfa04e34c3164 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 13:59:30 -0800 Subject: [PATCH 31/45] i spotted some stray debuggers and fixed them --- src/views/movie_list_view.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 7358822c6..26dab29f6 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -42,10 +42,7 @@ const MovieListView = Backbone.View.extend({ return this; }, resetModel(movie){ - debugger this.model.set([movie]) - // this.model.save(); - debugger }, searchMovies(event){ event.preventDefault(); From 4c66985ee81a98973c565667c44d4edbc33cf3bd Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 14:08:42 -0800 Subject: [PATCH 32/45] styling for hero --- src/css/styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/css/styles.css b/src/css/styles.css index 800815310..1d0d48a14 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,17 @@ @include foundation-everything; +.hero { + background: url("https://unsplash.com/photos/J39X2xX_8CQ") + no-repeat; + background-size: cover; + height: 200px; + width: 100%; + background-color: black; + margin: 0; + color: white; + box-sizing: content-box; + padding: 1% 5% 2% 5% +} main { background: lightblue; } From e631ecddb0a7f4df641818e5c06b83137090f479 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 14:09:26 -0800 Subject: [PATCH 33/45] broken html tag logic --- dist/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index b937db999..fd32dc31b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -61,8 +61,11 @@

<%- title %>

- <% }else{ %> + <% }else if( typeof available_inventory !== 'undefined'){ + <% }else{ %> +

Qty: <%- available_inventory %>

+ <% } %> From 085521d3435f25f4eae95ffb056d73d71ea663c5 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 14:14:00 -0800 Subject: [PATCH 34/45] fixed html --- dist/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index fd32dc31b..8b4b7183b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -61,7 +61,7 @@

<%- title %>

- <% }else if( typeof available_inventory !== 'undefined'){ + <% }else if( typeof available_inventory !== 'undefined'){ %> <% }else{ %>

Qty: <%- available_inventory %>

From 3436aa95eeb72bbadd3a17b869508b1918c47116 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 14:14:12 -0800 Subject: [PATCH 35/45] added hero section, relocated nav bar into hero --- dist/index.html | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/dist/index.html b/dist/index.html index b937db999..872ad9742 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,17 +5,26 @@ Backbone Baseline +
+ +
+

+ Video Store :) +

+ +
+ +
+
+ + +
- From 043ade268730ca8307032efe39b02d27659e3845 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 14:20:32 -0800 Subject: [PATCH 36/45] fixed buttons so that they're semantic --- dist/index.html | 120 ++++++++++++++++++++++++------------------------ 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/dist/index.html b/dist/index.html index 1dedf7bf3..dfd6993a1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,81 +6,81 @@
- -
-

- Video Store :) -

- -
- - -
-
- - -
- - + +
+

+ Video Store :) +

+
+ + +
+
+ + +
+ - +
+ +

+
- -
-
+ -
-
-
-
+ +
+
-
- - - - - - + + + + <% }else if(typeof id !== 'undefined' ){ %> + + <% }else{ %> + + + <% } %> + + + + + + + + From 632fd8a19bca55c3f9a08e724e82b4ce1fda71b2 Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 14:31:34 -0800 Subject: [PATCH 37/45] sending messages to the user --- dist/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/dist/index.html b/dist/index.html index dfd6993a1..16857485c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -73,6 +73,10 @@

<%- title %>

<% }else if(typeof id !== 'undefined' ){ %> <% }else{ %> +

+ + Sorry, this movie is not currently in the inventory. +

<% } %> From ea4f83bd9c9a647d7b80d778851ef96840244891 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 14:32:02 -0800 Subject: [PATCH 38/45] styling --- dist/index.html | 1 - src/css/styles.css | 9 +++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index dfd6993a1..24f8e6d01 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,7 +11,6 @@

Video Store :)

-
+
+
@@ -74,7 +76,7 @@

<%- title %>

<% }else{ %>

- Sorry, this movie is not currently in the inventory. + Sorry, this movie is not currently in the inventory.

diff --git a/src/css/styles.css b/src/css/styles.css index 625ef3085..0918c3fc6 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,5 @@ @include foundation-everything; - +@import url('https://fonts.googleapis.com/css?family=Bungee|Gudea|Volkhov'); .hero { background: url("https://images.unsplash.com/photo-1501141178950-e7fa06e4adf5?auto=format&fit=crop&w=1050&q=80") no-repeat; @@ -13,8 +13,23 @@ padding: 1% 5% 2% 5%; text-align: center; } +.hero h1{ + font-family: 'Bungee', cursive; + font-size: 96px; + position: relative; + top: 50%; + transform: translateY(-50%); + text-shadow: 2px 2px lightgray; +} +p, div{ + font-family: 'Gudea', sans-serif; +} + +h2, h3, h4, h5, h6{ + font-family: 'Volkhov', serif; +} main { - background: lightblue; + background: lightblue; } header { @@ -52,30 +67,30 @@ div { } /* #myModal { - width: 500px; - background-color: red; +width: 500px; +background-color: red; } */ .modal { - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { - background-color: #fefefe; - margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; - border: 1px solid #888; - width: 80%; /* Could be more or less, depending on screen size */ - display: flex; + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + display: flex; } .show{ display:block; @@ -102,8 +117,11 @@ p.display-status { width: 100%; display: block; } +nav .top-bar{ + background-color: black; +} /* * { - border-style: solid; +border-style: solid; } */ From 185be456ad83e56ae6b66f2931c8aff5d927361d Mon Sep 17 00:00:00 2001 From: Roxanne Date: Wed, 20 Dec 2017 14:49:07 -0800 Subject: [PATCH 41/45] changing nav color --- src/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/styles.css b/src/css/styles.css index 0918c3fc6..e083af1fe 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -117,7 +117,7 @@ p.display-status { width: 100%; display: block; } -nav .top-bar{ +nav.top-bar{ background-color: black; } /* From dbbdbb954e051f4862ae3cdf998a67abeadf3af3 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 14:57:01 -0800 Subject: [PATCH 42/45] nav bar background etc --- dist/index.html | 4 ++-- src/css/styles.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 8eafb8cf6..fe87e5030 100644 --- a/dist/index.html +++ b/dist/index.html @@ -14,8 +14,8 @@

diff --git a/src/css/styles.css b/src/css/styles.css index e083af1fe..c019727bb 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -120,6 +120,11 @@ p.display-status { nav.top-bar{ background-color: black; } +nav button.button { + background-color: #FF47FA; + font-size: 20px; + font-weight: bold; +} /* * { border-style: solid; From b353ad796eaa0384d424a7e405fdd7530222da98 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 20 Dec 2017 15:41:31 -0800 Subject: [PATCH 43/45] more styling --- dist/index.html | 10 +++++---- src/css/styles.css | 54 ++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 54 insertions(+), 10 deletions(-) diff --git a/dist/index.html b/dist/index.html index fe87e5030..a7550dd85 100644 --- a/dist/index.html +++ b/dist/index.html @@ -48,15 +48,17 @@
-
+
+
+

diff --git a/src/css/styles.css b/src/css/styles.css index c019727bb..9f91625e2 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -12,6 +12,8 @@ /* box-sizing: content-box; */ padding: 1% 5% 2% 5%; text-align: center; + /* opacity: 1.2; */ + /* background-color: black; */ } .hero h1{ font-family: 'Bungee', cursive; @@ -19,7 +21,8 @@ position: relative; top: 50%; transform: translateY(-50%); - text-shadow: 2px 2px lightgray; + text-shadow: 5px 5px lightgray; + /* opacity: 1; */ } p, div{ font-family: 'Gudea', sans-serif; @@ -29,12 +32,13 @@ h2, h3, h4, h5, h6{ font-family: 'Volkhov', serif; } main { - background: lightblue; + background: white; + margin-left: 2%; + margin-right: 2%; } header { - background-color: lightgreen; - padding: 0.5rem; + /* padding: 0.5rem; */ } #completed-checkbox { @@ -52,10 +56,10 @@ button.success { aside.create-tasklist { background-color: navy; - color: #FFFFFF; + /* color: #FFFFFF; */ } aside label { - color: #FFFFFF; + /* color: #FFFFFF; */ } .completed { @@ -124,6 +128,44 @@ nav button.button { background-color: #FF47FA; font-size: 20px; font-weight: bold; + margin: 1%; +} + +nav button.button:hover { +text-shadow: 1px 1px lightgray; +background-color: #771FD4; +} + +#search-form { + /* width: 80%; */ + /* margin: 1% 5% 1% 5%; */ + align-self: center; + padding: 1%; + /* background-color: black; */ +} + +#movie-field { + width: 35%; + /* padding-left: 2%; */ + margin-left: 1%; + margin-right: 2%; + /* background-color: #FF47FA; */ + color: black; + font-weight: bold; + display: inline-block; +} + +input.movie-filter { + background-color: white; + height: 30px; + display: inline-block; + background-color: #FF47FA; + font-weight: bold; +} + +#movie-list { + display: inline-block; + /* max-width: 40%; */ } /* * { From 52682fbf7f6f644401a507483964a0cf6f3e515e Mon Sep 17 00:00:00 2001 From: Roxanne Agerone Date: Sun, 20 May 2018 11:50:47 -0700 Subject: [PATCH 44/45] changed setup of repository --- README.md | 99 +++++++++++++++++-------------------------------------- 1 file changed, 30 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index 9dc1aa8df..8ae802f13 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,9 @@ # Video Store Consumer -In this project, you'll take a lot of the knowledge you have so far and create an end-to-end Video Store application. The final product will be something that a rental store employee might use to manage the video store where they work. +Class project for Ada Developers Academy +Created an end-to-end Video Store application using Backbone, Javascript, and jQuery -This is a [Phase 3](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) Pair project. - -## Learning Goals +## Goals - Leverage jQuery event observation along with Backbone to enable a dynamic user interface - Organize browser interactions according to Backbone's MVC pattern - Revisit Rails API functionality @@ -19,76 +18,38 @@ Our rental store employees want to be able to manage their rental inventory. The ## Project Information This project will be utilizing an external API within an API! Whoa! Your front-end implementation will be interacting with a **Rails API** that you will be modifying. The Rails API wraps an **external API** which contains many endpoints related to movies. The external API is [The Movie DB](https://www.themoviedb.org/documentation/api). -## Project Setup -### 1. Backbone Part - - One person shall fork this repository - - Add the pair as a collaborator on the project - - Both people shall clone the repository - - Install dependencies using `$npm install` - - Start the development server using `$npm start` - -### 2. API Configuration - - Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key. - (You can use Ada's address in the registration process) - - Read through the documentation for the API. A few endpoints you may want to explore include: - - [Search Movies](https://developers.themoviedb.org/3/search/search-movies) - - [Get Movie Details](https://developers.themoviedb.org/3/movies/get-movie-details) - - [Configuration](https://developers.themoviedb.org/3/configuration/get-api-configuration) - -### 3. Rails Part - - One person shall fork the API repository. You can find it at your cohort's GitHub org, and the project's name is VideoStoreConsumer-API. You should immediately notice that this is a Rails project not a Backbone project. - - Add the pair as a collaborator on the project - - Both people shall clone the repository - - Set up the `.env` file with the API key from step #2 - - Set up the DB - - Ensure both people can run the API locally - - -## Project Requirements - -### Front-End -- Rental store employee should be able to: - - search all Movies - - add a movie to the rental library - - list all movies in the rental library - -### Back-End -- The search functionality is already implemented! -- Add support for adding an external movie to the rental library +## Local Setup +### 1. Clone the repository - +### 2. Run Back End + - Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key. + - Set up the `.env` file with the API key in VideoStoreConsumer-API/ -## Project Design -### Front-End -- Consider what Backbone models, collections and views you will need to utilize -- Consider what events you will want to handle -- Consider how you will make requests from the front-end to the API + **Example .env file:** -### Back-End -- Investigate the existing implementation to gain an understanding of what you are working with -- Consider what data the back-end will require to complete the tasks in the requirements + ''' + MOVIEDB_KEY = + SECRET_KEY_BASE = + ''' -## Optional Enhancements -Some of these optional requirements require work in the front-end only, back-end only or both. + - Set up rails back end: + While in VideoStoreConsumer-API/ in your terminal Run: + _Note: You must have Rails installed._ -- Rental! - - Check out: Select a movie along with a customer to create a rental - - Check in: Select a customer to see the movies they have checked out. Select a single (or multiple) rentals to check back in - - See all overdue rentals -- CRUD customers -- Introduce scrolling pagination to dynamically load more movies when scrolling to the bottom (research!!) + ''' + bundle install + rails server + ''' + Your server should be running at this point -## Resources +### 3. Run Front End + - Run Front End Server: + Change directories to VideoStoreConsumer/ + It will be the directory with the json.lock file + In your terminal run: -Note, you may need to use non restful API calls for rentals and this can be done by overriding Backbone.sync. Below are some resources on how to do so. + ''' + npm install -- [Overriding Backbone.sync for non-RESTful APIs](https://thejsguy.com/2015/03/18/overriding-backbone-sync.html) -- [Non-RESTful backend with Backbonejs](https://stackoverflow.com/questions/24770250/non-restful-backend-with-backbone-js) + npm start + ''' From 98649805fa8c0495590c76ff239535f72afa39bc Mon Sep 17 00:00:00 2001 From: Roxanne Agerone Date: Sun, 20 May 2018 11:53:34 -0700 Subject: [PATCH 45/45] changed to correct formatting of markdown codeblock --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8ae802f13..84179b59e 100644 --- a/README.md +++ b/README.md @@ -27,19 +27,24 @@ This project will be utilizing an external API within an API! Whoa! Your front-e **Example .env file:** - ''' + ``` MOVIEDB_KEY = + SECRET_KEY_BASE = - ''' + + ``` + - Set up rails back end: While in VideoStoreConsumer-API/ in your terminal Run: _Note: You must have Rails installed._ - ''' + ``` bundle install + rails server - ''' + ``` + Your server should be running at this point ### 3. Run Front End @@ -48,8 +53,8 @@ This project will be utilizing an external API within an API! Whoa! Your front-e It will be the directory with the json.lock file In your terminal run: - ''' + ``` npm install npm start - ''' + ```