From d766c5da0d8dae4a7491990a499b7bdbee854769 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 12:06:33 -0800 Subject: [PATCH 01/25] basic formatting --- dist/index.html | 27 +++++++++++++- src/app.js | 2 +- src/css/styles.css | 92 ++++++++++++++++++++++++++++++++++------------ 3 files changed, 95 insertions(+), 26 deletions(-) diff --git a/dist/index.html b/dist/index.html index 559b18ecd..068bfcca0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,10 +3,35 @@ Backbone Baseline + + +
+
+

Video Store

+
+
- + + +
+

Movies

+
    +
  • + I'm a movie +
    • + +
+
+
diff --git a/src/app.js b/src/app.js index 30c00d594..322b79826 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,6 @@ import _ from 'underscore'; // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

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

Hello World!

'); }); diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..b2bea6013 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,44 +1,88 @@ @include foundation-everything; -main { - background: lightblue; +:root { + --charcoal: #2A2B2A; + --red: #D7263D; + --orange: #F46036; + --gold: #FFB238; + --jade: #1B998B; +} + +body { + background-color: var(--charcoal); } header { - background-color: lightgreen; - padding: 0.5rem; + background-color: var(--orange); + border: 15px solid var(--red); + border-radius: 5rem; + margin: 1rem auto; + min-width: 47rem; + text-align: center; + width: 80%; +} + +h1 { + color: var(--jade); + font-family: 'Monoton', sans-serif; + font-size: 4rem; + font-weight: normal; + line-height: 0.5; + margin: 2rem; } -#completed-checkbox { - display: inline; +h2 { + color: var(--jade); + font-family: 'Monoton', sans-serif; + font-size: 3rem; + font-weight: normal; + line-height: 0.5; } -label { - display: inline; +h3 { + color: var(--gold); + font-family: 'Monoton'; + font-size: 1.5rem; + font-weight: normal; + /*line-height: 0;*/ } -button.success { - margin-right: 1.2rem; - display: inline; +h4 { + color: var(--jade); + font-family: 'Fredoka One', sans-serif; + font-size: 2rem; + font-weight: normal; + line-height: 0; } -aside.create-tasklist { - background-color: navy; - color: #FFFFFF; +ul { + list-style: none; } -aside label { - color: #FFFFFF; + +.container { + background-color: var(--gold); + border-radius: 3rem; + color: #D7263D; + display: inline-block; + margin: 1rem; + vertical-align: top; + width: 95%; } -.completed { - text-decoration: line-through; +main { + background-color: #F46036; + border: 15px solid #D7263D; + border-radius: 5rem; + margin: 1rem auto; + min-width: 47rem; + text-align: center; + width: 80%; } -div { - display: inline; +#nav-bar { + width: 30%; } -/* -* { - border-style: solid; + +#movie-container { + width: 60%; } -*/ From 2c54429a414592b6a24a3535c0827454e7bed317 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 12:07:08 -0800 Subject: [PATCH 02/25] add margins to h2 --- src/css/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/styles.css b/src/css/styles.css index b2bea6013..f88547dcf 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -37,6 +37,7 @@ h2 { font-size: 3rem; font-weight: normal; line-height: 0.5; + margin-top: 1.25rem; } h3 { From 745561db6174462c525e79db746fe05f1036433e Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:15:35 -0800 Subject: [PATCH 03/25] test --- dist/index.html | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/dist/index.html b/dist/index.html index 068bfcca0..ab7977d9d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,35 +3,10 @@ Backbone Baseline - - -
-
-

Video Store

-
-
- - -
-

Movies

-
    -
  • - I'm a movie -
    • - -
-
- + lauren
From 52df6fd653203763d2f89db26918d3e9b4b4df04 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 12:16:26 -0800 Subject: [PATCH 04/25] github stop being weird --- dist/index.html | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index ab7977d9d..068bfcca0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,10 +3,35 @@ Backbone Baseline + + +
+
+

Video Store

+
+
- lauren + + +
+

Movies

+
    +
  • + I'm a movie +
    • + +
+
+
From b8e0ffe79c8de3f6c5a3f71ffb976b5033b2dbed Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:18:43 -0800 Subject: [PATCH 05/25] create model and views --- src/collections/movie_list.js | 0 src/models/movie.js | 5 +++++ src/views/movie_list_view.js | 0 src/views/movie_view.js | 0 4 files changed, 5 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..e69de29bb diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..6abad1ada --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,5 @@ +import Backbone from 'backbone'; + + + +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..e69de29bb diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..e69de29bb From bc51e8a7828cf6a7611a3b23968ef1d3b901ae99 Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:20:03 -0800 Subject: [PATCH 06/25] movie view --- src/views/movie_view.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/views/movie_view.js b/src/views/movie_view.js index e69de29bb..b95b0103e 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -0,0 +1,14 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + + initialize(params) { + }, + +}); + + + + +export default MovieView; From 23f136313196b77202becb3550b16972c3153712 Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:22:02 -0800 Subject: [PATCH 07/25] set up view --- src/views/movie_list_view.js | 17 +++++++++++++++++ src/views/movie_view.js | 1 - 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index e69de29bb..7360a3614 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; +// import _ from 'underscore'; +import MovieView from '../views/movie_view'; +import Movie from '../models/movie'; + + + +const TaskListView = Backbone.View.extend({ + initialize(params){ + + }, + render() { + }, + +}); + +export default TaskListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index b95b0103e..f41b3fa0c 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -2,7 +2,6 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ - initialize(params) { }, From 08ae60b36e9c1f517737283835350645d2d71e22 Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:22:49 -0800 Subject: [PATCH 08/25] finish linking --- src/collections/movie_list.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index e69de29bb..72d4e3d67 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, +}); + +export default MovieList; From acca73be738d342b43129c6b2c8eb48aae41bce7 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 12:32:56 -0800 Subject: [PATCH 09/25] populate MovieList --- src/app.js | 20 +++++++++++++++++++- src/collections/movie_list.js | 5 +++++ src/models/movie.js | 4 +++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 322b79826..fe35a7d34 100644 --- a/src/app.js +++ b/src/app.js @@ -6,9 +6,27 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; +// Our stuff +import Movie from 'models/movie'; +import MovieList from 'collections/movie_list'; +import MovieView from 'views/movie_view'; +import MovieListView from 'views/movie_list_view'; + +const movieList = new MovieList(); + + + // ready to go $(document).ready(function() { - // $('#main-content').append('

Hello World!

'); + movieList.fetch({ + success: () => { + console.log(movieList); + movieList.render(); + }, + }); + + + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 72d4e3d67..d300e752e 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,6 +3,11 @@ import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, + url: 'http://localhost:3000/movies', + + render() { + + }, }); export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js index 6abad1ada..40433eedd 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,5 +1,7 @@ import Backbone from 'backbone'; - +const Movie = Backbone.Model.extend({ + +}); export default Movie; From cdd6be95e32ea9dd3492099d2474a135a74afd33 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 12:47:11 -0800 Subject: [PATCH 10/25] render movie list --- dist/index.html | 16 ++++++++++++++++ src/app.js | 18 ++++++++++-------- src/collections/movie_list.js | 4 ---- src/css/styles.css | 17 +++++++++++++++++ src/views/movie_list_view.js | 25 +++++++++++++++++++------ src/views/movie_view.js | 8 ++++++++ 6 files changed, 70 insertions(+), 18 deletions(-) diff --git a/dist/index.html b/dist/index.html index 068bfcca0..c91664119 100644 --- a/dist/index.html +++ b/dist/index.html @@ -36,5 +36,21 @@

Movies

+ + diff --git a/src/app.js b/src/app.js index fe35a7d34..65b0cd31e 100644 --- a/src/app.js +++ b/src/app.js @@ -12,21 +12,23 @@ import MovieList from 'collections/movie_list'; import MovieView from 'views/movie_view'; import MovieListView from 'views/movie_list_view'; -const movieList = new MovieList(); - +let movieTemplate; +let movieListView; +const movieList = new MovieList(); // ready to go $(document).ready(function() { + movieTemplate = _.template($('#movie-template').html()); movieList.fetch({ success: () => { - console.log(movieList); - movieList.render(); + movieListView = new MovieListView({ + model: movieList, + template: movieTemplate, + el: $('#movie-list'), + }); + movieListView.render(); }, }); - - - - }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index d300e752e..e1ccb2379 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,10 +4,6 @@ import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', - - render() { - - }, }); export default MovieList; diff --git a/src/css/styles.css b/src/css/styles.css index f88547dcf..f61dbf6e1 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -87,3 +87,20 @@ main { #movie-container { width: 60%; } + +.movie { + color: #D7263D; + background-color: #FFB238; + border: 5px solid #D7263D; + border-radius: 1rem; + padding: 5%; + margin: 1rem auto; + min-width: 19.5rem; + text-align: left; + width: 70%; +} + +.movie:hover { + background-color: #D7263D; + color: #FFB238; +} diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 7360a3614..dd797413e 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,14 +4,27 @@ import MovieView from '../views/movie_view'; import Movie from '../models/movie'; - -const TaskListView = Backbone.View.extend({ - initialize(params){ - +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; }, + render() { - }, + this.$el.empty(); + this.model.each((movie) => { + const movieView = new MovieView({ + template: this.template, + model: movie, + tagName: 'li', + className: 'movie', + }); + this.$el.append(movieView.render().$el) + }); + + + return this; + }, }); -export default TaskListView; +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index f41b3fa0c..c997ec7d4 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -3,6 +3,14 @@ import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ initialize(params) { + this.template = params.template; + }, + + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; }, }); From a8033deda48ced418391358651445851200d9bed Mon Sep 17 00:00:00 2001 From: Lauren Date: Mon, 18 Dec 2017 12:49:02 -0800 Subject: [PATCH 11/25] sodumb --- dist/laurensmessup | 1 + 1 file changed, 1 insertion(+) create mode 100644 dist/laurensmessup diff --git a/dist/laurensmessup b/dist/laurensmessup new file mode 100644 index 000000000..5b54d5a80 --- /dev/null +++ b/dist/laurensmessup @@ -0,0 +1 @@ +im sad From 7d34bb1afdcb6211d746c519a555a0055166678b Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 13:47:38 -0800 Subject: [PATCH 12/25] form styling --- dist/index.html | 8 ++++---- src/css/styles.css | 24 +++++++++++++++++++++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/dist/index.html b/dist/index.html index c91664119..56d6f5b58 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,7 +17,10 @@

Video Store

Menu

  • - hi +
    + + +
@@ -25,9 +28,6 @@

Menu

Movies

    -
  • - I'm a movie -
diff --git a/src/css/styles.css b/src/css/styles.css index f61dbf6e1..0bd1d58fc 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,7 @@ @include foundation-everything; +/***** MAIN *****/ + :root { --charcoal: #2A2B2A; --red: #D7263D; @@ -37,7 +39,7 @@ h2 { font-size: 3rem; font-weight: normal; line-height: 0.5; - margin-top: 1.25rem; + margin: 1.5rem auto; } h3 { @@ -80,10 +82,30 @@ main { width: 80%; } +/***** NAV BAR *****/ + #nav-bar { width: 30%; } +form.search input { + border-radius: 2rem; + display: inline-block; +} + +form.search input[type="text"] { + width: 70%; +} + +form.search input[type="submit"] { + background-color: var(--red); + color: white; + height: 2.5rem; + width: 25%; +} + +/***** MOVIE LIST *****/ + #movie-container { width: 60%; } From 9dffff7eb59e98bd5f8f1aa0bc66c98cc82503e9 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 13:56:28 -0800 Subject: [PATCH 13/25] MovieList collection takes optional query parameter --- src/collections/movie_list.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index e1ccb2379..bd2703dd5 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -3,7 +3,17 @@ import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies', + url: function() { + return 'http://localhost:3000/movies/' + this.query; + }, + + initialize(params) { + if (params){ + this.query = params.query ? `/search?query=${params.query}` : ''; + } else { + this.query = ''; + } + }, }); export default MovieList; From 6b21fb38205adc43e8caf19bc8134958cee5394d Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 14:14:37 -0800 Subject: [PATCH 14/25] implement movie search --- dist/index.html | 2 +- src/app.js | 26 ++++++++++++++++++++++++++ src/collections/movie_list.js | 1 + src/views/movie_list_view.js | 1 + 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 56d6f5b58..c7f8d9a5e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,7 +17,7 @@

Video Store

Menu

  • -
    +
    diff --git a/src/app.js b/src/app.js index 65b0cd31e..074bfa2fd 100644 --- a/src/app.js +++ b/src/app.js @@ -17,6 +17,29 @@ let movieListView; const movieList = new MovieList(); +const movieSearch = function movieSearch(e) { + e.preventDefault(); + + const query = $('#search input[name="query"]').val(); + + const searchList = new MovieList( + { + query: query, + } + ); + + searchList.fetch({ + success: () => { + const newView = new MovieListView({ + model: searchList, + template: movieTemplate, + el: $('#movie-list'), + }); + newView.render(); + } + }); +}; + // ready to go $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); @@ -31,4 +54,7 @@ $(document).ready(function() { movieListView.render(); }, }); + + $('#search').on('submit', movieSearch); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index bd2703dd5..76af6bdf3 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -4,6 +4,7 @@ import Movie from '../models/movie'; const MovieList = Backbone.Collection.extend({ model: Movie, url: function() { + console.log("building URL..."); return 'http://localhost:3000/movies/' + this.query; }, diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index dd797413e..113025346 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,6 +13,7 @@ const MovieListView = Backbone.View.extend({ this.$el.empty(); this.model.each((movie) => { + console.log(movie); const movieView = new MovieView({ template: this.template, model: movie, From 66225d5bce3c4d4f64a191e00b6eb75594fc9ad7 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 14:27:53 -0800 Subject: [PATCH 15/25] formatting tweaks --- src/css/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/styles.css b/src/css/styles.css index 0bd1d58fc..6420dc83c 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -60,6 +60,7 @@ h4 { ul { list-style: none; + margin: 1rem; } .container { @@ -119,7 +120,7 @@ form.search input[type="submit"] { margin: 1rem auto; min-width: 19.5rem; text-align: left; - width: 70%; + width: 90%; } .movie:hover { From d61d00bfcde54e045b269b302921d5d3de85f913 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Mon, 18 Dec 2017 15:15:35 -0800 Subject: [PATCH 16/25] half-implement Add Movie form --- dist/index.html | 16 +++++++++++++++- src/app.js | 20 ++++++++++++++++++++ src/models/movie.js | 2 +- src/views/movie_list_view.js | 2 +- 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index c7f8d9a5e..d54fb91de 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,7 +2,7 @@ - Backbone Baseline + Video Store @@ -22,6 +22,20 @@

    Menu

    • +
  • + + Add Movie +
diff --git a/src/app.js b/src/app.js index 074bfa2fd..5d96ab76f 100644 --- a/src/app.js +++ b/src/app.js @@ -40,6 +40,19 @@ const movieSearch = function movieSearch(e) { }); }; +const addMovie = function addMovie(e) { + e.preventDefault(); + // console.log($('#new-movie').serialize()); + const movie = new Movie({ + title: "Test Movie", + }); + movie.save({ + success: () => { + movieList.add(movie); + } + }); +}; + // ready to go $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); @@ -57,4 +70,11 @@ $(document).ready(function() { $('#search').on('submit', movieSearch); + $('.add-btn').on('click', () => { + $('.add-btn').hide(200); + $('#new-movie').show(500); + }); + + $('#new-movie').on('submit', addMovie); + }); diff --git a/src/models/movie.js b/src/models/movie.js index 40433eedd..11811543b 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: 'http://localhost:3000/movies', }); export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 113025346..7dedbd943 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,7 +13,7 @@ const MovieListView = Backbone.View.extend({ this.$el.empty(); this.model.each((movie) => { - console.log(movie); + // console.log(movie); const movieView = new MovieView({ template: this.template, model: movie, From a7afbb8345d45e1b6783563d1c85896e02b76cd0 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Tue, 19 Dec 2017 10:33:16 -0800 Subject: [PATCH 17/25] remove comment --- dist/laurensmessup | 1 - src/app.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 dist/laurensmessup diff --git a/dist/laurensmessup b/dist/laurensmessup deleted file mode 100644 index 5b54d5a80..000000000 --- a/dist/laurensmessup +++ /dev/null @@ -1 +0,0 @@ -im sad diff --git a/src/app.js b/src/app.js index 5d96ab76f..d03f917d8 100644 --- a/src/app.js +++ b/src/app.js @@ -42,7 +42,7 @@ const movieSearch = function movieSearch(e) { const addMovie = function addMovie(e) { e.preventDefault(); - // console.log($('#new-movie').serialize()); + const movie = new Movie({ title: "Test Movie", }); From 70dbe8d959916fda8f3b3cc079560986a5211a99 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Tue, 19 Dec 2017 10:46:17 -0800 Subject: [PATCH 18/25] add arrayToJSON function to parse formdata --- dist/index.html | 5 ++--- package-lock.json | 5 +++++ package.json | 1 + src/app.js | 14 +++++++++++--- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/dist/index.html b/dist/index.html index d54fb91de..5f955ad6f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -27,7 +27,7 @@

Menu

- + @@ -64,7 +64,6 @@

Movies

- - + diff --git a/package-lock.json b/package-lock.json index 2d3371d51..860cd2be4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5014,6 +5014,11 @@ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz", "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=" }, + "jquery-serializejson": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/jquery-serializejson/-/jquery-serializejson-2.8.1.tgz", + "integrity": "sha1-/EDdEeXZpv0qNhT9y6ieSveU8Kg=" + }, "js-base64": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz", diff --git a/package.json b/package.json index 97144b128..1da6b2231 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "backbone": "^1.3.3", "foundation-sites": "^6.4.4-rc1", "jquery": "^3.2.1", + "jquery-serializejson": "^2.8.1", "underscore": "^1.8.3" } } diff --git a/src/app.js b/src/app.js index d03f917d8..989fed059 100644 --- a/src/app.js +++ b/src/app.js @@ -43,9 +43,9 @@ const movieSearch = function movieSearch(e) { const addMovie = function addMovie(e) { e.preventDefault(); - const movie = new Movie({ - title: "Test Movie", - }); + let formInfo = $('#new-movie').serializeArray(); + formInfo = arrayToJSON(formInfo); + const movie = new Movie(formInfo); movie.save({ success: () => { movieList.add(movie); @@ -53,6 +53,14 @@ const addMovie = function addMovie(e) { }); }; +const arrayToJSON = function arrayToJSON(arr) { + const output = {}; + arr.forEach((item) => { + output[item.name] = item.value; + }); + return output; +}; + // ready to go $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); From 557e9daa7ef7a2f491c8676b2a2d91280c74cb0f Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Tue, 19 Dec 2017 10:57:20 -0800 Subject: [PATCH 19/25] movie list formatting --- dist/index.html | 4 ++-- src/css/styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 5f955ad6f..d2f2eb18a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -52,8 +52,8 @@

Movies

+ - - - + + + + + diff --git a/src/app.js b/src/app.js index 989fed059..bcefc2515 100644 --- a/src/app.js +++ b/src/app.js @@ -14,6 +14,7 @@ import MovieListView from 'views/movie_list_view'; let movieTemplate; let movieListView; +let movieDetailTemplate; const movieList = new MovieList(); @@ -33,6 +34,7 @@ const movieSearch = function movieSearch(e) { const newView = new MovieListView({ model: searchList, template: movieTemplate, + detail_template: movieDetailTemplate, el: $('#movie-list'), }); newView.render(); @@ -64,11 +66,13 @@ const arrayToJSON = function arrayToJSON(arr) { // ready to go $(document).ready(function() { movieTemplate = _.template($('#movie-template').html()); + movieDetailTemplate = _.template($('#movie-detail-template').html()); movieList.fetch({ success: () => { movieListView = new MovieListView({ model: movieList, + detail_template: movieDetailTemplate, template: movieTemplate, el: $('#movie-list'), }); @@ -84,5 +88,4 @@ $(document).ready(function() { }); $('#new-movie').on('submit', addMovie); - }); diff --git a/src/css/styles.css b/src/css/styles.css index 5a4a49955..0c7ece4da 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -11,7 +11,7 @@ } * { - border: 1px solid green; + /* border: 1px solid green; */ } body { diff --git a/src/models/movie.js b/src/models/movie.js index 11811543b..a6392a094 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,7 +1,9 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - urlRoot: 'http://localhost:3000/movies', + url: function() { + return 'http://localhost:3000/movies/' + this.get('title'); + }, }); export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 7dedbd943..49d5965f4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -1,5 +1,4 @@ import Backbone from 'backbone'; -// import _ from 'underscore'; import MovieView from '../views/movie_view'; import Movie from '../models/movie'; @@ -7,15 +6,16 @@ import Movie from '../models/movie'; const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.detail_template = params.detail_template; }, render() { this.$el.empty(); this.model.each((movie) => { - // console.log(movie); const movieView = new MovieView({ template: this.template, + detail_template: this.detail_template, model: movie, tagName: 'li', className: 'movie', @@ -23,7 +23,6 @@ const MovieListView = Backbone.View.extend({ this.$el.append(movieView.render().$el) }); - return this; }, }); diff --git a/src/views/movie_view.js b/src/views/movie_view.js index c997ec7d4..d3d590ac3 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,9 +1,11 @@ +import $ from 'jquery'; import Backbone from 'backbone'; import Movie from '../models/movie'; const MovieView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.detail_template = params.detail_template; }, render() { @@ -13,6 +15,22 @@ const MovieView = Backbone.View.extend({ return this; }, + events: { + 'click': 'showDetails', + }, + + showDetails(e) { + $('.movie-detail').remove(); + let responseJSON; + this.model.fetch({ + success: (r) => { + responseJSON = r.toJSON(); + const generatedHTML = this.detail_template(responseJSON); + this.$el.append(generatedHTML); + }, + }); + }, + }); From 115a33d10c734cd5af62608d01d1557da58bfa24 Mon Sep 17 00:00:00 2001 From: Kate Evans-Spitzer Date: Tue, 19 Dec 2017 12:11:43 -0800 Subject: [PATCH 21/25] add show animation to movie details --- dist/index.html | 2 +- src/views/movie_view.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index d585f0680..4931a950d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -67,7 +67,7 @@

Movies