From d160c11768ddd1e8dd64cd3981eccb42919cab53 Mon Sep 17 00:00:00 2001 From: Rebecca Bergena Date: Mon, 18 Dec 2017 14:34:40 -0800 Subject: [PATCH 01/19] set up movie model, collection, and views and display list of movies --- dist/index.html | 50 ++++++++++++++++++++++++++--------- src/app.js | 30 ++++++++++++++++++++- src/collections/movie_list.js | 15 +++++++++++ src/models/movie.js | 14 ++++++++++ src/views/movie_list_view.js | 30 +++++++++++++++++++++ src/views/movie_view.js | 25 ++++++++++++++++++ 6 files changed, 150 insertions(+), 14 deletions(-) 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/dist/index.html b/dist/index.html index 559b18ecd..d37fffd08 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,39 @@ - - - Backbone Baseline - - -
- -
- - - - - + + + Backbone Baseline + + +
+ + + +
+
+ + + + + + + +
TitleRelease Date
+
+ +
+
+ + + + + + diff --git a/src/app.js b/src/app.js index 30c00d594..9707ef0c3 100644 --- a/src/app.js +++ b/src/app.js @@ -6,9 +6,37 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; +import Movie from './models/movie'; +import MovieView from './views/movie_view'; +import MovieListView from './views/movie_list_view'; +import MovieList from './collections/movie_list'; + + +let movieTemplate; // ready to go $(document).ready(function() { - $('#main-content').append('

Hello World!

'); + // let bus = {}; + + // bus = _.extend(bus, Backbone.Events); + movieTemplate = _.template($('#movie-template').html()); + // orderTemplate = _.template($('#order-template').html()); + + + const movies = new MovieList(); + + // TODO: check fetch and rerendering + movies.fetch(); + + const movieListView = new MovieListView({ + el: 'main', + model: movies, + template: movieTemplate, + // bus: bus, + }); + + // movieListView.render(); + + // $('#main-content').append('

Hello World!

'); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..9ec1a6198 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +import Movie from '../models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies', + + validate(attributes) { + }, + +}); + + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..e11d35c3a --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,14 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + urlRoot: 'http://localhost:3000/movies', + + + validate(attributes) { + + }, + +}); + + +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..26e5a7047 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,30 @@ +import Backbone from 'backbone'; +import MovieView from '../views/movie_view' + +import Movie from '../models/movie'; + +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + this.bus = params.bus; + }, + render() { + this.model.each((movie) => { + console.log('in Movie List View render'); + console.log(movie); + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'tr', + className: 'movie', + // bus: this.bus, + }); + this.$('#movie-list').append(movieView.render().$el); + }); + return this; + }, + +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..e488a7410 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + + initialize(params) { + this.template = params.template; + // this.bus = params.bus; + this.listenTo(this.model, 'change', this.render); + }, + events: { + }, + + render() { + let movie = this.model; + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + console.log(compiledTemplate); + + return this; + }, + +}); + +export default MovieView; From 7b60813f9616b8ef58c7c560d6346d92925551ac Mon Sep 17 00:00:00 2001 From: Eva Sawyer Date: Tue, 19 Dec 2017 10:48:57 -0800 Subject: [PATCH 02/19] added a search field to the html and added comments about how to do the search api call --- dist/index.html | 67 ++++++++++++++++++--------- package-lock.json | 87 ++++++++++++++++++++++++++++++++---- package.json | 3 +- src/app.js | 6 +-- src/models/movie.js | 5 ++- src/views/movie_list_view.js | 33 +++++++++++++- src/views/movie_view.js | 1 - 7 files changed, 166 insertions(+), 36 deletions(-) diff --git a/dist/index.html b/dist/index.html index d37fffd08..ac99b39ad 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,34 +6,61 @@
+ +
+

Movie Store

+
+
+
+
+

Find a movie in the store:

+
+ + + +
+
+
+
+ + + + + + + + +
TitleRelease DateImage
+
- -
-
- - - - - - - -
TitleRelease Date
-
+
+

Find New Movie

+
+ + + +
+
+
+
-
-
+ + diff --git a/package-lock.json b/package-lock.json index 2d3371d51..a232553f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -373,7 +373,6 @@ "version": "2.6.0", "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", - "dev": true, "requires": { "lodash": "4.17.4" } @@ -2216,6 +2215,11 @@ "domelementtype": "1.3.0" } }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=" + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -2725,6 +2729,20 @@ "es5-ext": "0.10.37" } }, + "event-stream": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz", + "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=", + "requires": { + "duplexer": "0.1.1", + "from": "0.1.7", + "map-stream": "0.1.0", + "pause-stream": "0.0.11", + "split": "0.3.3", + "stream-combiner": "0.0.4", + "through": "2.3.8" + } + }, "eventemitter3": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz", @@ -3045,9 +3063,9 @@ "dev": true }, "foundation-sites": { - "version": "6.4.4-rc1", - "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.4.4-rc1.tgz", - "integrity": "sha512-26cL66QFNqMVwM7bmIEqq4jiW+6CkIeW719ci1pchdJ4UK0Om+3Jl7MhkX/lzdzRHB75f2m1IK9lxk3JGOwApA==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.3.1.tgz", + "integrity": "sha1-I4Uzct65SAwTtCZJnq8Mj5DNvh0=", "requires": { "jquery": "3.2.1", "what-input": "4.3.1" @@ -3059,6 +3077,11 @@ "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", "dev": true }, + "from": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", + "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=" + }, "fs-readdir-recursive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", @@ -5162,8 +5185,12 @@ "lodash": { "version": "4.17.4", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", - "dev": true + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=" }, "lodash.camelcase": { "version": "4.3.0", @@ -5257,6 +5284,11 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, + "map-stream": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz", + "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=" + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -5485,6 +5517,11 @@ "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=", "dev": true }, + "mingo": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/mingo/-/mingo-1.3.3.tgz", + "integrity": "sha1-aSLE0Ufvx3GgFCWixMj3eER4xUY=" + }, "minimalistic-assert": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz", @@ -5984,6 +6021,14 @@ } } }, + "pause-stream": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz", + "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=", + "requires": { + "through": "2.3.8" + } + }, "pbkdf2": { "version": "3.0.14", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.14.tgz", @@ -7196,6 +7241,17 @@ "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true }, + "save": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/save/-/save-2.3.2.tgz", + "integrity": "sha1-hZJnS1VlzE4SvG3dnLCfgo4+z30=", + "requires": { + "async": "2.6.0", + "event-stream": "3.3.4", + "lodash.assign": "4.2.0", + "mingo": "1.3.3" + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -7465,6 +7521,14 @@ "wbuf": "1.7.2" } }, + "split": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz", + "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=", + "requires": { + "through": "2.3.8" + } + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -7487,6 +7551,14 @@ "readable-stream": "2.3.3" } }, + "stream-combiner": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz", + "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=", + "requires": { + "duplexer": "0.1.1" + } + }, "stream-http": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz", @@ -7669,8 +7741,7 @@ "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", - "dev": true + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=" }, "thunky": { "version": "0.1.0", diff --git a/package.json b/package.json index 97144b128..acb88d1df 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,9 @@ }, "dependencies": { "backbone": "^1.3.3", - "foundation-sites": "^6.4.4-rc1", + "foundation-sites": "^6.3.1", "jquery": "^3.2.1", + "save": "^2.3.2", "underscore": "^1.8.3" } } diff --git a/src/app.js b/src/app.js index 9707ef0c3..d9616d9e5 100644 --- a/src/app.js +++ b/src/app.js @@ -25,9 +25,6 @@ $(document).ready(function() { const movies = new MovieList(); - // TODO: check fetch and rerendering - movies.fetch(); - const movieListView = new MovieListView({ el: 'main', model: movies, @@ -35,6 +32,9 @@ $(document).ready(function() { // bus: bus, }); + + // TODO: check fetch and rerendering + movies.fetch(); // movieListView.render(); // $('#main-content').append('

Hello World!

'); diff --git a/src/models/movie.js b/src/models/movie.js index e11d35c3a..2248e5d28 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,8 +1,9 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - urlRoot: 'http://localhost:3000/movies', - + urlRoot: function() { + return `http://localhost:3000/movies?query=${this.get('query')}` + }, validate(attributes) { diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 26e5a7047..072a78706 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -12,7 +12,6 @@ const MovieListView = Backbone.View.extend({ render() { this.model.each((movie) => { console.log('in Movie List View render'); - console.log(movie); const movieView = new MovieView({ model: movie, template: this.template, @@ -25,6 +24,38 @@ const MovieListView = Backbone.View.extend({ return this; }, + events: { + 'click button.btn-search-api': 'searchApi', + }, + + getFormData() { + console.log("I am reading the form") + const formData = {}; + const title = this.$(`form input[name= 'title']`).val(); + formData['title'] = title; + return formData; + }, + + searchApi() { + event.preventDefault(); + const formData = this.getFormData() + const movie = new Movie({ + query: formData['title'], + }); + + movie.fetch() + console.log(movie) + + //I have had trouble getting individual movie data out of the returned movie object. I wonder if it is partly b/c we stored a list of results in one movie object. Maybe there is a better way to get the movie info out than I thought of. + + //I wonder if we should make a new model, collection and view and list_view for search results. We can then use the `http://localhost:3000/movies?query=${this.get('query')}` as the url for the result model, and http://localhost:3000/movies/ for the url for the movie model. + + + + //next step. Sortout and append the returned movies. + } + + }); export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index e488a7410..b7a265fde 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -15,7 +15,6 @@ const MovieView = Backbone.View.extend({ let movie = this.model; const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); - console.log(compiledTemplate); return this; }, From 0e803b3e50b6b3bb7b63957e36b904034412da0f Mon Sep 17 00:00:00 2001 From: Rebecca Bergena Date: Tue, 19 Dec 2017 12:32:21 -0800 Subject: [PATCH 03/19] add search model, collection, and views and display the searches --- dist/index.html | 82 +++++++++++++++++++++++----------- src/app.js | 19 +++++++- src/collections/search_list.js | 28 ++++++++++++ src/models/movie.js | 6 +-- src/models/search.js | 15 +++++++ src/views/movie_list_view.js | 55 ++++++++++++----------- src/views/search_list_view.js | 75 +++++++++++++++++++++++++++++++ src/views/search_view.js | 23 ++++++++++ 8 files changed, 246 insertions(+), 57 deletions(-) create mode 100644 src/collections/search_list.js create mode 100644 src/models/search.js create mode 100644 src/views/search_list_view.js create mode 100644 src/views/search_view.js diff --git a/dist/index.html b/dist/index.html index ac99b39ad..ac1756d2c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,43 +8,60 @@
-

Movie Store

+

Movie Store

-
-
-

Find a movie in the store:

+
+
+
+

Find a movie in the store:

+
+ + + +
+
+
+
+ + + + + + + + +
TitleRelease DateImage
+
+
+ + -
-

Find New Movie

-
- - - -
-
+
+ + + + + + + + +
TitleRelease DateImage
+
@@ -58,9 +75,22 @@

Find New Movie

<%- release_date %> - - - + + + + + + + diff --git a/src/app.js b/src/app.js index d9616d9e5..af4f85941 100644 --- a/src/app.js +++ b/src/app.js @@ -10,9 +10,14 @@ import Movie from './models/movie'; import MovieView from './views/movie_view'; import MovieListView from './views/movie_list_view'; import MovieList from './collections/movie_list'; +import Search from './models/search'; +import SearchView from './views/search_view'; +import SearchListView from './views/search_list_view'; +import SearchList from './collections/search_list'; let movieTemplate; +let searchTemplate; // ready to go $(document).ready(function() { @@ -20,18 +25,30 @@ $(document).ready(function() { // bus = _.extend(bus, Backbone.Events); movieTemplate = _.template($('#movie-template').html()); + searchTemplate = _.template($('#search-template').html()); + // orderTemplate = _.template($('#order-template').html()); const movies = new MovieList(); + const searches = new SearchList({ + // query: "", + }); + const movieListView = new MovieListView({ - el: 'main', + el: '#movie-list', model: movies, template: movieTemplate, // bus: bus, }); + const searchListView = new SearchListView({ + el: '#movie-search', + model: searches, + template: searchTemplate, + }); + // TODO: check fetch and rerendering movies.fetch(); diff --git a/src/collections/search_list.js b/src/collections/search_list.js new file mode 100644 index 000000000..cb183d73b --- /dev/null +++ b/src/collections/search_list.js @@ -0,0 +1,28 @@ +import Backbone from 'backbone'; + +import Search from '../models/search'; + +const SearchList = Backbone.Collection.extend({ + model: Search, + url: 'http://localhost:3000/movies?query=', + + // if (this.get('query')) { + // `http://localhost:3000/movies?query=${this.get('query')}` + // else { + // 'http://localhost:3000/movies?query=' + // } + // }, + + // }') `http://localhost:3000/movies?query=${this.get('query')}`, + // // url: 'http://localhost:3000/movies', + // // urlR: function() { + // // return `http://localhost:3000/movies?query=${this.get('query')}` + // // }, + + validate(attributes) { + }, + +}); + + +export default SearchList; diff --git a/src/models/movie.js b/src/models/movie.js index 2248e5d28..8c9d2a96f 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -1,9 +1,9 @@ import Backbone from 'backbone'; const Movie = Backbone.Model.extend({ - urlRoot: function() { - return `http://localhost:3000/movies?query=${this.get('query')}` - }, + // urlRoot: function() { + // return `http://localhost:3000/movies?query=${this.get('query')}` + // }, validate(attributes) { diff --git a/src/models/search.js b/src/models/search.js new file mode 100644 index 000000000..049a9766d --- /dev/null +++ b/src/models/search.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +const Search = Backbone.Model.extend({ + // urlRoot: function() { + // return `http://localhost:3000/movies?query=${this.get('query')}` + // }, + + validate(attributes) { + + }, + +}); + + +export default Search; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 072a78706..0b0cbe6cf 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -25,35 +25,36 @@ const MovieListView = Backbone.View.extend({ }, events: { - 'click button.btn-search-api': 'searchApi', + // 'click button.btn-search-api': 'searchApi', }, - getFormData() { - console.log("I am reading the form") - const formData = {}; - const title = this.$(`form input[name= 'title']`).val(); - formData['title'] = title; - return formData; - }, - - searchApi() { - event.preventDefault(); - const formData = this.getFormData() - const movie = new Movie({ - query: formData['title'], - }); - - movie.fetch() - console.log(movie) - - //I have had trouble getting individual movie data out of the returned movie object. I wonder if it is partly b/c we stored a list of results in one movie object. Maybe there is a better way to get the movie info out than I thought of. - - //I wonder if we should make a new model, collection and view and list_view for search results. We can then use the `http://localhost:3000/movies?query=${this.get('query')}` as the url for the result model, and http://localhost:3000/movies/ for the url for the movie model. - - - - //next step. Sortout and append the returned movies. - } + // getFormData() { + // console.log("I am reading the form") + // const formData = {}; + // const title = this.$('.movie-entry-form input[name=title]').val(); + // // formData['title'] = title; + // return title; + // }, + + // searchApi() { + // event.preventDefault(); + // const title = this.getFormData() + // const movie = new Movie({ + // query: title, + // }); + // + // movie.fetch() + // console.log(movie) + // console.log(title); + // + // //I have had trouble getting individual movie data out of the returned movie object. I wonder if it is partly b/c we stored a list of results in one movie object. Maybe there is a better way to get the movie info out than I thought of. + // + // //I wonder if we should make a new model, collection and view and list_view for search results. We can then use the `http://localhost:3000/movies?query=${this.get('query')}` as the url for the result model, and http://localhost:3000/movies/ for the url for the movie model. + // + // + // + // //next step. Sortout and append the returned movies. + // } }); diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js new file mode 100644 index 000000000..41dc86333 --- /dev/null +++ b/src/views/search_list_view.js @@ -0,0 +1,75 @@ +import Backbone from 'backbone'; +import SearchView from '../views/search_view' +import SearchList from '../collections/search_list' + + +import Search from '../models/search'; + +const SearchListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.model.each((search) => { + console.log('in Search List View render'); + const searchView = new SearchView({ + model: search, + template: this.template, + tagName: 'tr', + className: 'search', + // bus: this.bus, + }); + this.$('#search-list').append(searchView.render().$el); + }); + return this; + }, + + events: { + 'click button.btn-search-api': 'searchApi', + }, + + getFormData() { + console.log("I am reading the form") + const formData = {}; + const title = this.$('.movie-entry-form input[name=title]').val(); + // formData['title'] = title; + return title; + }, + + searchApi() { + event.preventDefault(); + const title = this.getFormData() + // const search = new SearchList(); + + // const search = new SearchList({ + // query: title, + // }); + // console.log(search); + this.model.url += title; + // this.model.set('url', this.model.get('url') + title); + // console.log('the url with title') + // console.log(this.model.get('url') + title); + // console.log(this.model.set(url)); + + console.log(this.model.url); + + this.model.fetch() + + // search.fetch() + console.log(this.model); + console.log(title); + + //I have had trouble getting individual movie data out of the returned movie object. I wonder if it is partly b/c we stored a list of results in one movie object. Maybe there is a better way to get the movie info out than I thought of. + + //I wonder if we should make a new model, collection and view and list_view for search results. We can then use the `http://localhost:3000/movies?query=${this.get('query')}` as the url for the result model, and http://localhost:3000/movies/ for the url for the movie model. + + + + //next step. Sortout and append the returned movies. + } + + +}); + +export default SearchListView; diff --git a/src/views/search_view.js b/src/views/search_view.js new file mode 100644 index 000000000..5c6f45745 --- /dev/null +++ b/src/views/search_view.js @@ -0,0 +1,23 @@ +import Backbone from 'backbone'; +import Search from '../models/search'; + +const SearchView = Backbone.View.extend({ + + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + }, + events: { + }, + + render() { + let search = this.model; + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, + +}); + +export default SearchView; From 738ed1ab0293812526271a85017f53be42585388 Mon Sep 17 00:00:00 2001 From: Eva Sawyer Date: Tue, 19 Dec 2017 14:25:59 -0800 Subject: [PATCH 04/19] add movie functionality works --- dist/index.html | 10 +++++++--- src/app.js | 9 +++++---- src/views/movie_list_view.js | 9 +++++++-- src/views/search_list_view.js | 30 ++++++------------------------ src/views/search_view.js | 17 +++++++++++++++++ 5 files changed, 42 insertions(+), 33 deletions(-) diff --git a/dist/index.html b/dist/index.html index ac1756d2c..20118576e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,7 +13,7 @@

Movie Store

-
+

Find a movie in the store:

@@ -36,8 +36,8 @@

Find a movie in the store:

-
+ + + + @@ -83,7 +90,6 @@

Find New Movie

- -
+

Movie Store

+
+ +
+ + +
-
+

Find a movie in the store:

@@ -39,52 +80,18 @@

Find a movie in the store:

- - - -
- - - -
- - - - - From 12f5c6d0efee9cf162266e766ba7a467a80c7a3d Mon Sep 17 00:00:00 2001 From: Eva Sawyer Date: Wed, 20 Dec 2017 14:17:52 -0800 Subject: [PATCH 17/19] styling --- src/css/styles.css | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/src/css/styles.css b/src/css/styles.css index 52bc47701..345174ad5 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -22,6 +22,18 @@ button.success { display: inline; } +button.black{ + background-color: black; +} + +/*td { + font-size: 1.5em; +}*/ + +button.black:hover { + background-color: grey; +} + aside.create-tasklist { background-color: navy; color: #FFFFFF; @@ -41,11 +53,23 @@ div { .red{ color: red; } - +.white { + background-color: white +} .green{ color: green; } +#close { +margin-top: 10px; +background-color: black; +font-size: 2em +} + +#close.black:hover { + background-color: grey; +} + .modal { position: fixed; @@ -59,12 +83,17 @@ div { } .modal-content { - background-color: #fefefe; + background-color: white; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; -} +}; + +/*button { + background-color: black; + font-size: 2em; +}*/ /* * { border-style: solid; From e3153d752d6f1bbba5f470dbf9c7fce2ae1c1f2f Mon Sep 17 00:00:00 2001 From: Eva Sawyer Date: Wed, 20 Dec 2017 14:18:05 -0800 Subject: [PATCH 18/19] changin modal --- src/app.js | 16 +++++++++++++++- src/collections/movie_list.js | 2 -- src/views/search_view.js | 4 +++- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/app.js b/src/app.js index 84eea4df3..7fb5cb74f 100644 --- a/src/app.js +++ b/src/app.js @@ -57,7 +57,21 @@ $(document).ready(function() { }); - + const modalOpener= function modalOpener() { + // console.log(event) + console.log('opening modal') + $('.modal').removeClass('hide'); + $('#close').on('click', modalCloser) + } + + const modalCloser= function modalCloser() { + // console.log(event) + console.log('closing modal') + $('.modal').addClass('hide'); + $('.modal').addClass('hide'); + } + + $('#modalBtn').on('click', modalOpener); // const movieList = new MovieList() // diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 65fb64566..951446602 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -15,8 +15,6 @@ const MovieList = Backbone.Collection.extend({ return item.get( key ).toLowerCase() === val.toLowerCase(); }); }, - - }); diff --git a/src/views/search_view.js b/src/views/search_view.js index 948da53b6..54a785603 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -21,7 +21,7 @@ const SearchView = Backbone.View.extend({ }, events: { - 'click button': 'addMovie', + 'click .add': 'addMovie', }, addMovie(){ @@ -30,6 +30,8 @@ const SearchView = Backbone.View.extend({ let movie_hash = this.model.attributes console.log(movie_hash) this.bus.trigger('addMovieDB', movie_hash) + this.$('.add').addClass('hide'); + this.$('.nothing').removeClass('hide'); } From acbaaff8f9505a4e33337a8404c11367318c0cf2 Mon Sep 17 00:00:00 2001 From: Eva Sawyer Date: Wed, 20 Dec 2017 14:52:19 -0800 Subject: [PATCH 19/19] more styling --- dist/index.html | 62 +++++++++++++++++++++++++++------------------- src/css/styles.css | 19 ++++++++++++-- 2 files changed, 54 insertions(+), 27 deletions(-) diff --git a/dist/index.html b/dist/index.html index 26af0a63b..7d40f8fda 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,12 +17,12 @@

Movie Store