Ada-C7 · sahanamurthy · Jun 13, 2017 · Jun 13, 2017 · Jun 14, 2017 · Jun 14, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,12 +1,21 @@
 @include foundation-everything;
 
+@import url('https://fonts.googleapis.com/css?family=Monoton');
+
 main {
     background: lightblue;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: #4183D7;
   padding: 0.5rem;
+  height: 100px;
+}
+
+footer {
+  background-color: #4183D7;
+  color: #F7CA18;
+  font-family: 'Monoton', cursive;
 }
 
 #completed-checkbox {
@@ -42,3 +51,38 @@ div {
   border-style: solid;
 }
 */
+
+#add-button {
+  /*float: right;*/
+}
+
+.rental, .movie-db {
+  text-align: center;
+}
+
+
+.title-card {
+  display: inline-block;
+  margin: 25px;
+  height: 300px;
+  width: 250px;
+}
+header h1 {
+  float: left;
+  font-family: 'Monoton', cursive;
+  color: #F7CA18;
+}
+
+#rental-library, #search, #search-button {
+  float: right;
+  margin: 20px;
+}
+
+#search {
+  width: 300px;
+}
+
+.button {
+  background-color: #F7CA18;
+  color: #4183D7;
+}
diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,62 @@
 <!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>
+<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>
+
+  <header>
+    <h1>inline-blockbuster</h1>
+
+    <section class="rental">
+      <button id="rental-library" class="button">View Rental Library</button>
+    </section>
+
+    <section class="movie-db">
+      <input type="text" name="search" id="search">
+      <button id="search-button" class="button">Search</button>
+    </section>
+
+  </header>
+
+  <main>
+    <section class="rental" class="columns medium-12 small-12">
+      <section id='movie-list'></section>
+    </section>
+
+    <section class="movie-db" class="columns medium-12 small-12">
+        <section id='movie-list'></section>
+    </section>
+  </main>
+
+  <!-- Templates -->
+  <script id="movie-template" type="text/template">
+    <section class="title-card">
+      <img src=<%- movie.image_url %>>
+      <h5 class="movie-title"><%- movie.title %></h5>
+    </section>
+  </script>
+
+  <script id="search-template" type="text/template">
+    <section class="title-card">
+      <img src=<%- movie.image_url %>>
+      <h5 class="movie-title"><%- movie.title %></h5>
+      <button id="add-button" class="button" method="post">Add</button>
+    </section>
+    <!-- <li><button id="add-button" class="button">Add to Rental Library</button></li> -->
+  </script>
+
+  <!-- <script id="rental-detail" type="text/template">
+    < -->
+
+  <script src="/app.bundle.js"></script>
+
+  <footer>
+    <p> Thank you, moviedb! </p>
+  </footer>
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,12 +1,27 @@
-// /src/app.js
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import MovieList from 'collections/movie_list';
+import MovieListView from 'views/movie_list_view';
+
+// var myMovieList = new MovieList({url: "http://localhost:3000/movies"});
+// myMovieList.fetch();
+// console.log("fetch");
 
-// ready to go
 $(document).ready(function() {
+  var myMovieList = new MovieList({url: "http://localhost:3000/movies"});
+  var myMovieListView = new MovieListView ({
+    model: myMovieList,
+    template: _.template($('#movie-template').html()),
+    el: '.rental'
+  });
 
-  $('section.main-content').append('<p>Hello World!</p>');
+  var searchMovieList = new MovieList(
+    {url: "http://localhost:3000/movies?query="}
+  );
+  var searchMovieListView = new MovieListView ({
+    model: searchMovieList,
+    template: _.template($('#search-template').html()),
+    el: '.movie-db'
+  });
 
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,15 @@
+import Backbone from 'backbone';
+
+import Movie from 'models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  initialize : function(options){
+    this.model = Movie,
+    this.url = options.url
+  }
+  // parse: function(data) {
+  //   return data.movies;
+  // }
+});
+
+export default MovieList;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+  defaults: {
+    title: "Unknown",
+    overview: "Unknown",
+    release_date: "Unknown",
+    inventory: "Unknown"
+  },
+  initialize: function(options) {
+    console.log("Created new movie with options " + this.options);
+  }
+
+});
+
+export default Movie;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,79 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import MovieView from './movie_view';
+import Movie from '../models/movie.js';
+
+var MovieListView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = options.template;
+    this.listenTo(this.model, 'update', this.render);
+    // this.listElement = this.$('.movie-list');
+  },
+
+  render: function() {
+    console.log("In render");
+    this.$('#movie-list').empty();
+
+    var self = this;
+
+    this.model.each(function(movie) {
+      var movieView = new MovieView({
+        model: movie,
+        template: self.template
+      });
+
+      self.$("#movie-list").append(movieView.render().$el);
+    });
+
+    return this;
+  },
+
+  showList: function() {
+    $('.movie-db #movie-list').hide();
+    $('.rental #movie-list').show();
+    this.model.fetch();
+  },
+
+  searchList: function() {
+    $('.rental #movie-list').hide();
+    $('.movie-db #movie-list').show();
+    var formData = this.readNewSearchForm();
+    console.log(formData);
+    console.log(this.model.url)
+    this.model.url = "http://localhost:3000/movies?query=";
+    var newUrl = this.model.url + formData.search;
+    this.model.url = newUrl;
+    this.model.fetch()
+      .then(function(){
+        console.log("ok");
+      }).catch(function(){
+        alert("No movie found");
+      });
+    // if (response.count == null) {
+    //   alert("No movie found");
+    // };
+  },
+
+  clearForm: function() {
+    $('#search').val('');
+  },
+
+  readNewSearchForm: function() {
+    var formSearch = $('#search').val();
+    this.clearForm();
+
+    var formData = {};
+    if (formSearch && formSearch != "") {
+      formData['search'] = formSearch
+    }
+    return formData;
+  },
+
+  events: {
+    "click #rental-library": "showList",
+    "click #search-button": "searchList",
+  }
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,36 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+
+var MovieView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = options.template;
+
+    this.listenTo(this.model, 'change', this.render);
+  },
+
+  addMovie: function(event) {
+    var url = "http://localhost:3000/movies";
+    var data = { movie: this.model.attributes };
+    $.post(url, data, function(response){
+      console.log(response);
+      console.log("added!");
+
+    });
+    console.log(this.model.attributes);
+  },
+
+  render: function() {
+    // console.log(this.model.attributes);
+    var html = this.template({movie: this.model.toJSON()});
+    this.$el.html(html);
+
+    return this;
+  },
+
+  events: {
+    "click #add-button": "addMovie"
+  }
+});
+
+export default MovieView;