Ada-C7 · amb54 · Jun 13, 2017 · Jun 14, 2017 · Jun 14, 2017 · Jun 14, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -42,3 +42,34 @@ div {
   border-style: solid;
 }
 */
+.table-list {
+  margin-bottom: 0.25rem;
+  background-color: white;
+}
+
+.button {
+  margin: 0;
+}
+
+#add-form, #movie-checkout-form {
+  z-index: 10;
+  position: fixed;
+  width: 80%;
+  /*height: 600px;*/
+  top: 8%;
+  right: 15%;
+  background-color: lightgreen;
+  text-align: left;
+  border: 0.1em solid white;
+  margin-left: 10%;
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+table.table-list {
+  padding: 1rem;
+}
+
+img {
+  border-radius: 1rem;
+}
diff --git a/build/index.html b/build/index.html
@@ -8,6 +8,131 @@
     <title>Backbone Baseline</title>
   </head>
   <body>
+    <header>
+      <h3 id="home"><a>Video Store</a></h3>
+    </header>
+    <main>
+      <section id='add-form'></section>
+      <section id='movie-checkout-form'> </section>
+      <section class="row">
+      <section id="form">
+        <label for="search">Search for Movie</label>
+        <input type="text" name="search" id="search" />
+      </section>
+      <section id="buttons">
+        <button id="submit-button" class="button success">Search</button>
+      </section>
+      <section id='rental-library'> </section>
+      <section id='rental-library' class='row'> </section>
+
+    </main>
+
+
+<!-- TEMPLATES -->
+    <script id="rental-library-template" type="text/template">
+      <tr>
+        <td class='large-2 medium-2 column'><a id= 'to-movie-checkout'><img src= '<%-movie.image_url%>'/></a></td>
+        <td class='large-3 medium-3 column'>
+          <h5><%-movie.title%></h5>
+          <p><%-movie.release_date%></p>
+        </td>
+        <td class='large-7 medium-7 column'>
+          <%-movie.overview%>
+        </td>
+      </tr>
+
+    </script>
+
+    <script id="search-library-template" type="text/template">
+      <tr>
+        <td class='large-7 medium-7 column'><%-movie.title%></td>
+        <td class='large-2 medium-2 column'><%-movie.release_date%></td>
+        <td class='large-3 medium-3 column'><button class="button tiny alert" id= 'open-add-form'>Add To Rental Library</button></td>
+      </tr>
+    </script>
+
+
+
+
+    <script id="addto-rental-library-template" type="text/template">
+      <section class="contact-form">
+
+        <section class="row">
+          <h4 class="columns">Save to the rental library</h4>
+        </section>
+
+        <section class = 'row'>
+          <div class="large-3 medium-3 columns">
+            <img src= '<%-movie.image_url%>'/>
+          </div>
+          <div class = 'large-4 medium-4 columns'>
+
+            <div class="columns">
+              <h5>
+                <%-movie.title%>
+              </h5>
+              <h5>
+                <%-movie.release_date%>
+              </h5>
+            </div>
+
+            <div class="columns">
+              <label>
+                <input type="hidden" name="title" value="<%-movie.title%>"  id = 'title'>
+              </label>
+              <label>
+                <input type="hidden" name="overview" value="<%-movie.overview%>" id = 'overview'>
+              </label>
+              <label>
+                <input type="hidden" name="release_date" value="<%-movie.release_date%>" id = 'release_date'>
+              </label>
+              <label>
+                <input type="hidden" name="image_url" value="<%-movie.image_url%>"  id = 'image_url'>
+              </label>
+              <label>
+                Number of copies
+                <input type="number" name="inventory" id = 'inventory'>
+              </label>
+            </div>
+
+            <div class='column'>
+              <h3 class="button btn-save">Save</h3>
+              <h3 class="button btn-cancel">Cancel</h3>
+            </div>
+          </div>
+
+          <div class = 'large-5 medium-5 columns'>
+            <%-movie.overview%>
+          </div>
+
+        </section>
+      </section>
+    </script>
+
+    <script id="movie-checkout-template" type = 'text/template'>
+      <section>
+        <h4>Check Out: <%-movie.title%></h4>
+        <p>Total inventory: <%-movie.inventory%></p>
+        <p>Copies Left: <%-movie.available_inventory%> </p>
+        <div>
+          <label>
+            Due Date
+            <input type="date" name="due_date" id="due_date" />
+          </label>
+          <input type="hidden" name="title" value="<%-movie.title%>" id="movie_title" />
+          <select id="customer-dropdown" name="customer">
+          </select>
+
+          <h3 class="button btn-save">Save</h3>
+          <h3 class="button co-btn-cancel">Cancel</h3>
+        </div>
+      </section>
+    </script>
+
+    <script id="customer-checkout-template" type = 'text/template'>
+      <option value="<%-customer.id%>"> <%-customer.name%> </option>
+    </script>
+
 
     <script src="/app.bundle.js"></script>
 

diff --git a/src/app.js b/src/app.js
@@ -4,9 +4,78 @@
 import $ from 'jquery';
 import _ from 'underscore';
 
+// MODELS
+import MovieList from './collections/movie_list';
+import CustomerList from './collections/customer_list';
+
+// VIEWS
+import MovieListView from './views/movie_list_view';
+import CustomerListView from './views/customer_list_view';
+
+var movieTemplate;
+var searchTemplate;
+var addFormTemplate;
+var movieCheckoutFormTemplate;
+var customerTemplate;
 // ready to go
+var rentalLibrary = function() {
+  var movieList = new MovieList();
+  movieList.fetch();
+  var params = {
+    movieTemplate: movieTemplate,
+    movieCheckoutFormTemplate: movieCheckoutFormTemplate,
+    customerShowMethod: customerShow,
+    el: $('main'),
+    model: movieList
+  };
+  var application = new MovieListView(params);
+  application.render();
+};
+
+var customerShow = function() {
+  var customerList = new CustomerList();
+  customerList.fetch();
+  var params = {
+    customerTemplate: customerTemplate,
+    el: $('main'),
+    model: customerList
+  };
+  var application = new CustomerListView(params);
+  application.render();
+};
+
+var movieLibrary = function() {
+  var search = {data: $.param({query: $('#search').val()})};
+  var searchList = new MovieList();
+  searchList.fetch(search);
+  var params = {
+    movieTemplate: searchTemplate,
+    addFormTemplate: addFormTemplate,
+    el: $('main'),
+    model: searchList,
+    renderRentalLibraryCallback: rentalLibrary
+  };
+  var searchApp = new MovieListView(params);
+  searchApp.render();
+};
+
 $(document).ready(function() {
+  $('#add-form').hide();
+  $('#movie-checkout-form').hide();
+
+  movieTemplate = _.template($('#rental-library-template').html());
+  searchTemplate = _.template($('#search-library-template').html());
+  addFormTemplate = _.template($('#addto-rental-library-template').html());
+  movieCheckoutFormTemplate = _.template($('#movie-checkout-template').html());
+  customerTemplate = _.template($('#customer-checkout-template').html());
+
+  rentalLibrary();
 
-  $('section.main-content').append('<p>Hello World!</p>');
+  $('#home').click(function(event) {
+    rentalLibrary();
+  });
 
+  $('#submit-button').click(function(event) {
+    movieLibrary();
+  });
 });
diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js
@@ -0,0 +1,14 @@
+import Backbone from 'backbone';
+import Customer from '../models/customer';
+import $ from 'jquery';
+
+var CustomerList = Backbone.Collection.extend({
+  model: Customer,
+  url: 'http://localhost:3000/customers',
+  comparator: function (model) {
+        return model.get("name");
+  }
+});
+
+
+export default CustomerList;
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,26 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import $ from 'jquery';
+import _ from 'underscore';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  parse: function(data) { // The parsing migth not be needed in this case
+    return data;
+  },
+  comparator: function (model) {
+        return model.get("title");
+  },
+  checkOut: function(data) {
+      var url = "http://localhost:3000/rentals/" + data['movie_title'] + "/check-out";
+      var rental = new Backbone.Model(data)
+
+      return (this.sync || Backbone.sync).call(this, "create", rental, _.extend({
+        url: url
+      }));
+   }
+});
+
+
+export default MovieList;
diff --git a/src/models/customer.js b/src/models/customer.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+
+var Customer = Backbone.Model.extend({
+
+
+  initialize:  function(params){
+    // console.log("Movie initialized: " + this.get("title"));
+  }
+});
+
+
+export default Customer;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+
+
+  initialize:  function(params){
+    // console.log("Movie initialized: " + this.get("title"));
+  }
+});
+
+
+export default Movie;
diff --git a/src/views/customer_list_view.js b/src/views/customer_list_view.js
@@ -0,0 +1,35 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import CustomerView from './customer_view';
+import Customer from '../models/customer.js';
+// import MovieList from '../collections/movie_list';
+
+var CustomerListView = Backbone.View.extend({
+  tagName: 'option',
+  initialize: function(params){
+    this.customerTemplate = params.customerTemplate;
+
+    this.listenTo(this.model, 'update' , this.render);
+  },
+
+  render: function(){
+    console.log(' Customer list View in render>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
+    var self = this;
+    self.$('#customer-dropdown').empty();
+
+    self.model.each(function(customer){
+      var customerView = new CustomerView({
+        model: customer,
+        customerTemplate: self.customerTemplate
+      });
+      self.$('#customer-dropdown').append(customerView.render().$el.html());
+    });
+    return this;
+  }
+
+
+});
+
+
+export default CustomerListView;
diff --git a/src/views/customer_view.js b/src/views/customer_view.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Customer from '../models/customer.js';
+
+var CustomerView = Backbone.View.extend({
+  initialize: function(params){
+    this.customerTemplate = params.customerTemplate;
+    this.listenTo(this.model, "change", this.render);
+  },
+
+  render: function(){
+    console.log("made it here CUSTOMER VIEW");
+    var self = this;
+    var compiledTemplate = this.customerTemplate({
+      customer: self.model.toJSON()
+    });
+    this.$el.html(compiledTemplate);
+    return this;
+  }
+});
+
+
+export default CustomerView;