diff --git a/dist/index.html b/dist/index.html index 559b18ecd..f4d3079f9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,8 +5,119 @@ Backbone Baseline + +
- + +
+
+
    +
+
+ + + + + +
+

Database Results

+ + + + + + + + + + + + +
+ img + + Title + + release date + + status +
+ +
+ +
+

Catalog List

+
    + +
+
+ +
+ + + + + + +
diff --git a/package-lock.json b/package-lock.json index 2d3371d51..0962796f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3045,9 +3045,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" diff --git a/package.json b/package.json index 97144b128..e5071c617 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ }, "dependencies": { "backbone": "^1.3.3", - "foundation-sites": "^6.4.4-rc1", + "foundation-sites": "^6.3.1", "jquery": "^3.2.1", "underscore": "^1.8.3" } diff --git a/spec/movie_spec.js b/spec/movie_spec.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/app.js b/src/app.js index 30c00d594..2d4747578 100644 --- a/src/app.js +++ b/src/app.js @@ -2,13 +2,67 @@ import 'css/_settings.css'; import 'foundation-sites/dist/css/foundation.css'; import './css/styles.css'; +import Movie from 'models/movie'; +import MovieList from 'collections/movie_list'; +import MovieView from 'views/movie_view'; +import MovieListView from 'views/movie_list_view'; +import DatabaseListView from 'views/database_list_view' + // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; + + +// let database = new MovieList(); +let catalog = new MovieList([], {}); + + +const $catalogTemplate = _.template($("#catalog-template").html()); +const $databaseTemplate = _.template($("#database-template").html()); + // ready to go $(document).ready(function() { + catalog.fetch({ + success: function(response) { + response.models.forEach((model) => { + model.attributes.models + }) + } + }); + + const catalogView = new MovieListView({ + model: catalog, + template: $catalogTemplate, + el: 'main', + }); + + + + $('.btn-query').click(function(event){ + event.preventDefault(); + console.log('submit button was clicked'); + let query = $(`[name='query']`).val(); + + if (query.length > 0) { + let database = new MovieList([], { + query: query, + }); + + let databaseView = new DatabaseListView({ + model: database, + template: $databaseTemplate, + el: 'main', + availableInventory: catalog + }); + + database.fetch(); + } else { + $('.form-errors').append('

There were no results

') + } + + }); + - $('#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..76a814e00 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieList = Backbone.Collection.extend({ + urlRoot: 'http://localhost:3000/movies', + initialize(models, options){ + this.query = options.query + }, + url: function() { + if (this.query && this.query.length > 1) { + return this.urlRoot + '/?query=' + this.query + } else { + return this.urlRoot + } + }, + model: Movie, + +}); + +export default MovieList; diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..0848b80a0 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,12 +1,87 @@ @include foundation-everything; +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + color: #465362; + padding: 10px; +} + +h1 { + font-size: 2em; + padding-top: 25px; +} + +h1, h2, h3 { + text-align: center; +} + main { - background: lightblue; + background: white; + margin: 10px; +} + +nav { + background: #C3DFE0; + position: sticky; + box-shadow: 0 2px 3px -2px #465362; +} +input[type="text"], input[type="text"]:focus { + margin: 0; + padding-left: 5px; + font-size: 1.25em; + width: 100%; + border-width: 0; + box-shadow: 0 -2px -5px -2px #465362; +} + +input[type="text"]:focus{ + box-shadow: 0 1px 5px 1px #8CD195; +} + +article { + margin: 20px 0; +} + +table td, #database-container h2 { + color: #465362; +} + +#database-container, #catalog-container { + background: #C3DFE0; + color: #233831; + /* border: 1px solid #ADA8B6; */ + box-shadow: 0 -2px 5px -2px #465362; +} +#database-container { + background: #C2DC85; +} + +ul#catalog-movies { + list-style-type: none; +} + +.catalog-movie { + background: white; + margin: 15px 0; + box-shadow: 0 2px 5px -2px #465362; +} +.catalog-movie span{ + font-weight: bold; } -header { - background-color: lightgreen; - padding: 0.5rem; +#title-image{ + display: block; + text-align: center; +} +#title-image img { + width: 100%; +} +#overview { + padding-top: 10px; } #completed-checkbox { @@ -37,8 +112,27 @@ aside label { div { display: inline; } -/* -* { - border-style: solid; + + +h3 { + background: #BCD979; + box-shadow: 0 2px 5px -2px #465362; } -*/ + +h4 { + text-align: center; +} + +#database-container { + height: 40vw; + overflow: scroll; +} + +#catalog-container { + height: 40vw; + overflow: scroll; +} +/* +button.btn-add.alreadyAdded { + background: grey; +} */ diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..2a04d698d --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + // urlRoot: 'https://localhost:3000/movies/' +}); + +export default Movie; diff --git a/src/views/database_list_view.js b/src/views/database_list_view.js new file mode 100644 index 000000000..1c1081183 --- /dev/null +++ b/src/views/database_list_view.js @@ -0,0 +1,50 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import Movie from '../models/movie'; +import MovieView from '../views/movie_view' + +const DatabaseListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + this.inventory = params.availableInventory; + }, + + render() { + this.$('#database-movies').empty(); + this.$('.form-errors').empty(); + this.model.forEach((movie) => { + let inventory = false; + this.inventory.forEach((availableMovie) => { + if (availableMovie.get('overview') === movie.get('overview')) { + inventory = true + } + // movie.set('inInventory', inventory); + }) + + const movieView = new MovieView({ + model: movie, + inventory: this.inventory, + template: this.template, + tagName: 'tr', + className: 'movie', + }); + + movieView.model.set('inInventory', inventory) + this.$('#database-movies').append(movieView.render().$el); + + }); + }, + updateStatusMessageFrom: function(messageHash) { + const errorMessageEl = this.$('.form-errors'); + errorMessageEl.empty(); + _.each(messageHash, (messageType) => { + messageType.forEach((message) => { + errorMessageEl.append(`

${message}

`); + }); + }); + }, + +}); + +export default DatabaseListView; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..8374e2c59 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,26 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import MovieView from '../views/movie_view' + +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + + render() { + this.$('#catalog-movies').empty(); + this.model.forEach((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie' + }); + + this.$('#catalog-movies').prepend(movieView.render().$el); + }); + }, +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..6efb63c23 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,60 @@ +import $ from 'jquery'; +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'change', this.render); + this.inCatalog = params.inInventory; + this.inventory = params.inventory; + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + 'click .btn-add': 'addToInventory', + }, + + addToInventory: function(e) { + e.preventDefault(); + // this.$('button.btn-add').toggleClass('button.btn-add.alreadyAdded') + this.$('button.btn-add').css({"background": "grey"}) + if (this.model.get("inInventory")) { + console.log("already exists in inventory"); + console.log(this.$el); + } else { + this.model.set('inInventory', 'true') + this.$('button.btn-add').css({"background": "grey"}) + const databaseInfo = { + title: this.model.get("title"), + image_url: this.model.get("image_url").slice(32), + overview: this.model.get("overview"), + release_date: this.model.get("release_date"), + inInventory: true, + }; + + const addMovieFromDatabase = new Movie(databaseInfo); + if (addMovieFromDatabase.isValid()) { + this.inventory.add(addMovieFromDatabase); + addMovieFromDatabase.save({}, { + success: function(response){ + console.log("yes, added to db probably") + }, + error: function(response){ + console.log("not added i think") + }, + }); + } + } + }, + // successfulSave(addMovieFromDatabase, response) { + // $('.form-errors ul').empty(); + // $('.form-errors ul').append(`
  • ${addMovieFromDatabase.get('title')} was added to your catalog!
    • `); + // }, + +}); + +export default MovieView;