Ada-C7 · TheresaManney · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,12 +1,17 @@
 @include foundation-everything;
 
 main {
-    background: lightblue;
+    background: #3B3355;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: #BFCDE0;
   padding: 0.5rem;
+  text-align: center;
+}
+
+h1 {
+  font-family: 'Fjalla One', sans-serif;
 }
 
 #completed-checkbox {
@@ -22,10 +27,6 @@ button.success {
   display: inline;
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
-}
 aside label {
   color: #FFFFFF;
 }
@@ -37,8 +38,30 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+.hidden {
+     display: none;
+}
+
+#db-movies {
+  background-color: #2C666E;
+}
+
+h4 {
+  font-family: 'Fjalla One', sans-serif;
+  text-align: center;
+  height: 100px;
+  overflow: scroll;
+}
+.pic {
+  padding-bottom: 1em;
+  display: block;
+  margin: auto;
+  width: 225px;
+  height: 330px;
+
+}
+
+p {
+  text-align: center;
 }
-*/
diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,72 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/_settings.css">
-    <link rel="stylesheet" type="text/css" href="css/foundation.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
-  </html>
+<html lang='en'>
+     <head>
+          <meta charset='utf-8'>
+          <link rel='stylesheet' type='text/css' href='css/_settings.css'>
+          <link rel='stylesheet' type='text/css' href='css/foundation.css'>
+          <link rel='stylesheet' type='text/css' href='css/styles.css'>
+          <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
+          <title>Wetflix</title>
+     </head>
+
+     <body>
+          <header>
+               <nav></nav>
+               <h1>Wetflix</h1>
+          </header>
+
+     <main>
+          <section id='movies'>
+               <section id='db-movies'>
+                    <form id='searchForm'>
+                      <div class="row">
+                        <section class='columns small-10 small-centered medium-9 medium-centered large-6'>
+                              <input type='text' id='query' name='query' placeholder="Enter A Movie Title..."></input>
+
+                          <section class='button'>
+                              <button type='submit' id='search-button'>Search</button>
+                          </section>
+                        </section>
+                       </div>
+                    </form>
+                      <section id='movie-results' class="row" data-equalizer></section>
+               </section>
+               <section>
+                    <section id='movies-stocked' class="row" data-equalizer></section>
+               </section>
+          </section>
+     </main>
+
+     <footer></footer>
+<!-- class="medium-4 columns" -->
+     <script id='movie-template' type='text/template'>
+      <section class="movie">
+        <section  class="small-6 medium-4 large-3 columns" data-equalizer-watch>
+          <section class="callout">
+          <h4><%- movie.title %></h4>
+          <img class="pic" src=<%-movie.image_url%> >
+          <p> Release Date: <%- movie.release_date %></p>
+        </section>
+      </section>
+      </section>
+     </script>
+
+     <script id='db-movie-template' type='text/template'>
+      <section class="movie">
+        <section class="small-6 medium-4 large-3 columns" data-equalizer-watch>
+          <section class="callout">
+          <h4><%- movie.title %></h4>
+          <img class="pic" src=<%-movie.image_url%> >
+          <form>
+            <center>
+               <button class='button' id='add-button'>Add Movie</button>
+            </center>
+          </form>
+        </section>
+      </section>
+    </section>
+     </script>
+
+     <script src='/app.bundle.js'></script>
+     </body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,12 +1,20 @@
-// /src/app.js
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import Movies from './collections/movies.js';
+import DBMovies from './collections/db_movies.js';
+import MoviesView from './views/movies_view.js';
+import DBMoviesView from './views/db_movies_view.js';
+
+
+var movies = new Movies();
 
-// ready to go
 $(document).ready(function() {
+     var moviesView = new MoviesView({
+          model: movies,
+          resultTemplate: _.template($('#movie-template').html(), {variable: 'movie'}),
+          el: '#movies'
+     });
 
-  $('section.main-content').append('<p>Hello World!</p>');
+     moviesView.render();
 
 });
diff --git a/src/collections/db_movies.js b/src/collections/db_movies.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import DBMovie from '../models/db_movie.js';
+
+var DBMovies = Backbone.Collection.extend({
+  model: DBMovie,
+  url: 'http://localhost:3000/movies'
+});
+
+export default DBMovies;
diff --git a/src/collections/movies.js b/src/collections/movies.js
@@ -0,0 +1,11 @@
+// collection - movies.js
+import Backbone from 'backbone';
+
+import Movie from '../models/movie.js';
+
+var Movies = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies'
+});
+
+export default Movies;
diff --git a/src/models/db_movie.js b/src/models/db_movie.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+var DBMovie = Backbone.Model.extend({
+     defaults: {
+          title: '',
+          overview: '',
+          release_date: '',
+          image_url: '',
+          external_id: ''
+     },
+});
+
+export default DBMovie;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,22 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+     defaults: {
+          title: '',
+          overview: '',
+          release_date: '',
+          image_url: '',
+          external_id: ''
+     },
+  // logStatus: function() {
+  //   console.log('Model ' + this.cid);
+  //   console.log('Title ' + this.get('title'));
+  //   console.log('Inventory ' + this.get('inventory'));
+  // },
+  // initialize: function(params) {
+  //   console.log('Starting ', params);
+  //   this.logStatus();
+  // }
+});
+
+export default Movie;
diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js
@@ -0,0 +1,38 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import DBMovie from '../models/db_movie.js';
+import Movie from '../models/movie.js';
+
+
+var DBMovieView = Backbone.View.extend({
+     initialize: function(params) {
+          this.template = params.template;
+          this.listenTo(this.model, 'change', this.render);
+     },
+     render: function() {
+          var compiledTemplate = this.template(this.model.toJSON());
+          this.$el.html(compiledTemplate);
+          return this;
+     },
+     events:  {
+          'click #add-button' : 'createMovie'
+     },
+     formatForMovie: function() {
+          return {
+               title: this.model.attributes.title,
+               overview: this.model.attributes.overview,
+               release_date: this.model.attributes.release_date,
+               image_url: this.model.attributes.image_url,
+               external_id: this.model.attributes.external_id
+          };
+     },
+     createMovie: function() {
+          event.preventDefault();
+          var movie = new Movie(this.formatForMovie());
+          this.trigger('created', movie);
+     }
+});
+
+export default DBMovieView;
diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js
@@ -0,0 +1,52 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import DBMovieView from './db_movie_view.js';
+import DBMovie from '../models/db_movie.js';
+import Movies from '../collections/movies.js';
+
+
+var DBMoviesView = Backbone.View.extend({
+     initialize: function( params ) {
+          this.template = params.stockTemplate;
+          this.movies = params.movies
+          this.listenTo(this.model, 'update', this.render);
+     },
+     render: function() {
+
+          this.$( '#movie-results' ).empty();
+
+          var that = this;
+
+          this.model.each(function( dbMovie ) {
+          var dbMovieView = new DBMovieView({
+               model: dbMovie,
+               template: that.template
+          });
+
+          that.listenTo(dbMovieView,'created', that.addMovie);
+          that.$('#movie-results').append( dbMovieView.render().$el );
+          });
+          return this;
+     },
+     events:  {
+          'click #search-button' : 'searchMovie',
+     },
+     getFormSearch: function() {
+          var formQuery = this.$('#query').val();
+          this.$('#query').val('');
+          return formQuery;
+     },
+     searchMovie: function() {
+          event.preventDefault();
+          this.model.fetch({
+               data: {query: this.getFormSearch()}
+          });
+     },
+     addMovie: function(movie) {
+          this.movies.create(movie);
+     }
+});
+
+export default DBMoviesView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import Movie from '../models/movie.js';
+
+var MovieView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template; // TODO: double check name of this template
+    this.listenTo(this.model, 'change', this.render);
+  },
+  render: function() {
+    var compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  }
+});
+
+export default MovieView;
diff --git a/src/views/movies_view.js b/src/views/movies_view.js
@@ -0,0 +1,49 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import MovieView from './movie_view.js';
+import Movie from '../models/movie.js';
+import DBMoviesView from './db_movies_view.js';
+import DBMovies from '../collections/db_movies.js';
+import DBMovie from '../models/db_movie.js';
+
+
+var MoviesView = Backbone.View.extend({
+     initialize: function(params) {
+          this.template = params.resultTemplate;
+          this.detailsTemplate = params.stockTemplate;
+          this.dbMovies = new DBMovies();
+
+          this.dbMoviesView = new DBMoviesView({
+               movies: this.model,
+               model: this.dbMovies,
+               stockTemplate:  _.template($('#db-movie-template').html(), {variable: 'movie'}),
+               el: '#db-movies'
+          });
+
+          this.model.fetch();
+
+          this.listenTo(this.model, 'update', this.render);
+
+     },
+     render: function() {
+          console.log("test");
+          this.$('#movie-results').empty();
+          this.$('#movies-stocked').empty();
+          var that = this;
+
+          this.model.each(function(movie) {
+          var movieView = new MovieView({
+               model: movie,
+               template: that.template
+          });
+
+          that.$('#movies-stocked').append(movieView.render().$el);
+          });
+
+          return this;
+     }
+});
+
+export default MoviesView;