Ada-C8 · marisamorris · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -6,10 +6,43 @@
   </head>
   <body>
     <main id="main-content">
-
+      <header>
+        <h1 class="site-title">SuperDuperVideo</h1>
+        <form id="search-movies">
+          <label for="query">Search For A Movie:</label>
+          <input type="text" name="query" />
+          <input type="submit" value="Search Movie" class="button"></input>
+        </form>
+        <button class="button view-inventory">View Current Inventory</button>
+      </header>
+
+      <section id="movie" class="movie row">
+        <!-- RENDER ALL MOVIE TEMPLATES -->
+      </section>
+
     </main>
 
+    <footer>
+      <div class="columns small-12 medium-11 medium-offset-1">
+        <p class="footer-copy">&copy; 2017, Ada Developers Academy</p>
+      </div>
+    </footer>
+
     <script src="/app.bundle.js"></script>
+    <script type="text/template" id="movie-template">
+      <img src="<%= image_url %>" alt="<%= title %> poster">
+      <h3><%= title %></h3>
+      <h4><%= overview %></h4>
+      <p><%= release_date %></p>
+    </script>
+
+    <script type="text/template" id="search-template">
+      <img src="<%= image_url %>" alt="<%= title %> poster">
+      <h3><%= title %></h3>
+      <h4><%= overview %></h4>
+      <p><%= release_date %></p>
+      <button class="button add-to-inventory">Add to Inventory</button>
+    </script>
 
   </body>
   </html>
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,26 @@
-import 'css/_settings.css';
-import 'foundation-sites/dist/css/foundation.css';
-import './css/styles.css';
-
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import 'foundation-sites/dist/css/foundation.css';
+
+// collections
+import MovieList from './collections/movie_list';
+
+// views
+import MovieListView from './views/movie_list_view';
+
+import './css/_settings.css';
+import './css/styles.css';
 
 // ready to go
 $(document).ready(function() {
+  const movies = new MovieList();
+  const movieListView = new MovieListView({
+    model: movies,
+    template: _.template($('#movie-template').html()),
+    searchTemplate: _.template($('#search-template').html()),
+    el: ('#main-content')
+  });
 
-  $('#main-content').append('<p>Hello World!</p>');
-
+  movies.fetch();
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies/',
+  parse(response) {
+    return response;
+  },
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -4,6 +4,11 @@ main {
     background: lightblue;
 }
 
+.movie h4{
+  /* hide the overview */
+  display: none;
+}
+
 header {
   background-color: lightgreen;
   padding: 0.5rem;

diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+
+});
+
+export default Movie;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,52 @@
+import Backbone from 'backbone';
+import MovieView from '../views/movie_view';
+
+const MovieListView = Backbone.View.extend({
+  initialize(params) {
+    // console.log(params);
+    this.template = params.template;
+    this.searchTemplate = params.searchTemplate;
+    this.listenTo(this.model,"update", this.render);
+    this.listenTo(this,"showSearched", this.renderSearch);
+
+    this.listenTo(this.model,"currentInv", this.render);
+  },
+  render() {
+    this.$('#movie').empty();
+
+    this.model.each((movie) => {
+      const movieView = new MovieView({
+        model: movie,
+        template: this.template,
+        tagName: 'article',
+        className: 'movie',
+      });
+      this.$('#movie').prepend(movieView.render().$el);
+    });
+    return this;
+  },
+
+  renderSearch() {
+    this.template = this.searchTemplate;
+  },
+
+  events: {
+    'submit #search-movies': 'searchMovies',
+    'click button.view-inventory': 'showInventory',
+  },
+
+  searchMovies: function(event) {
+    event.preventDefault();
+    const query = this.$('input[name=query]').val();
+    this.model.fetch({data: {"query": query}});
+    this.trigger('showSearched', this);
+  },
+
+  showInventory: function(event) {
+    event.stopImmediatePropagation();
+    this.model.fetch();
+    this.trigger('currentInv');
+  },
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+
+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 .add-to-inventory': 'addMovie',
+  },
+  addMovie: function(event) {
+    event.preventDefault();
+    this.model.save(this.model.attributes,{type: 'POST'});
+
+  },
+});
+
+export default MovieView;