Ada-C8 · SRBusiness · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -2,13 +2,132 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Backbone Baseline</title>
+    <title>anderserbia</title>
   </head>
   <body>
     <main id="main-content">
-
+      <header>
+        <h1>anderserbia Video Store</h1>
+      </header>
+
+      <div id="wrapper">
+
+      <div class="row">
+        <section id="rental-view">
+          <div id="rental-messages">
+          </div>
+
+          <div class="columns large-6 small-12">
+            <div id="check-out-container">
+              <h2>Check-out</h2>
+              <form id="check-out-form">
+                <label for="customer-name">Name</label>
+                <select name="customer-name">
+                  <!-- Option entries should be added here using JavaScript -->
+                </select>
+                <input id="movie-title-selector" type="text" name="movie-title" placeholder="Moonlight" value="">
+                <input class="button btn-check-out" type="submit" value="Check-out movie">
+              </form>
+            </div>
+          </div>
+
+          <div class="columns large-6 small-12">
+            <div id="check-in-container">
+              <h2>Check-in</h2>
+              <form id="check-in-form">
+                <label for="customer-name">Name</label>
+                <select name="customer-name">
+                  <!-- Option entries should be added here using JavaScript -->
+                </select>
+                <input type="text" name="movie-title" placeholder="Moonlight">
+                <button type="submit" class="button" value="Check-in movie">Check-in Movie</button>
+              </form>
+            </div>
+          </div>
+        </section>
+
+        <hr>
+
+        <div class="row">
+          <div class="row">
+            <div id="messages">
+              <!-- error handling messages live here -->
+            </div>
+          </div>
+          <div class="columns large-6 small-12">
+            <div id='search-movies-container'>
+              <h2>All Movies</h2>
+              <form id="movie-search-form">
+                <label for="movie-title">Movie Title</label>
+                <input id="search-movie-title" type="text" name="movie-title" placeholder="Moonlight">
+                <input type="submit" class="button" value="Search movie database">
+              </form>
+
+              <div id="search-movies-list-container" class="movies-list-container">
+                <h4>Search Results</h4>
+                <div id="search-movies" class="movies">
+                </div>
+              <!-- </div> -->
+              </div>
+            </div>
+            </div>
+
+            <div class="columns large-6 small-12">
+            <div id="library-movies-container">
+              <h2>Library</h2>
+              <div id="library-movies" class="library-movies">
+                <!-- library-movie-template stuff-->
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
     </main>
 
+    <script type="text/template" id="library-movie-template">
+      <div id="library-movie-container">
+        <img src="https://image.tmdb.org/t/p/w185<%- image_url %>" alt="movie image">
+      </div>
+      <div id="library-movie-details">
+        <p>
+          <strong>Title: </strong> <%- title %>
+        </p>
+        <p>
+          <strong>Description: </strong> <%- overview %>
+        </p>
+        <p>
+          <strong>Release Date: </strong> <%- release_date %>
+        </p>
+        <!-- <div id="button-button"> -->
+          <button class="button btn-add-checkout" value="<%- title %>">Add to check-out</button>
+        <!-- </div> -->
+
+      </div>
+    </script>
+
+    <script type="text/template" id="search-movie-template">
+      <div id="search-movie-container">
+        <img src="<%- image_url %>" alt="movie image">
+      </div>
+      <div id="search-movie-details">
+        <p>
+          <strong>Title: </strong> <%- title %>
+        </p>
+        <p>
+          <strong>Description: </strong> <%- overview %>
+        </p>
+        <p>
+          <strong>Release Date: </strong> <%- release_date %>
+        </p>
+        <button class="button btn-add-movie <%- external_id %>">Add To Library</button>
+      </div>
+
+    </script>
+
     <script src="/app.bundle.js"></script>
 
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git 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/rental_spec.js b/spec/rental_spec.js
@@ -0,0 +1,58 @@
+import Rental from 'models/rental';
+
+describe('Rental spec', () => {
+
+  describe('Initialize function', () => {
+    it('should exhibit attibutes', () => {
+      const rentalDate = new Date();
+      const rental = new Rental({
+        title: 'Jaws',
+        customer_id: 1,
+        due_date: rentalDate,
+      });
+
+      expect(rental.get('title'))
+        .toEqual('Jaws');
+      expect(rental.get('customer_id'))
+        .toEqual(1);
+      expect(rental.get('due_date'))
+        .toEqual(rentalDate);
+    });
+  });
+
+  describe('Validate function', () => {
+    it('should set isValid() to false and return an object with correct message if missing title', () => {
+      const rental = new Rental({
+        // title: 'Jaws',
+        customer_id: 1,
+        due_date: new Date(),
+      });
+
+      // order.set({"targetPrice": '0'});
+      expect(rental.isValid()).toBeFalsy();
+      expect(rental.validationError).toEqual({'title': ['cannot be blank']})
+    });
+
+    it('should set isValid() to false and return an object with correct message if missing customer_id', () => {
+      const rental = new Rental({
+        title: 'Jaws',
+        // customer_id: 1,
+        due_date: new Date(),
+      });
+
+      expect(rental.isValid()).toBeFalsy();
+      expect(rental.validationError).toEqual({'customer_id': ['cannot be blank']})
+    });
+
+    it('should set isValid() to false and return an object with correct message if missing due_date', () => {
+      const rental = new Rental({
+        title: 'Jaws',
+        customer_id: 1,
+        // due_date: new Date(),
+      });
+
+      expect(rental.isValid()).toBeFalsy();
+      expect(rental.validationError).toEqual({'due_date': ['cannot be blank']})
+    });
+  });
+});
diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,60 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
+// Our Components - Project Models, Collections, Views
+import LibMovie from './models/lib_movie';
+import LibMovieList from './collections/lib_movie_list';
+import LibMovieView from './views/lib_movie_view';
+import LibMovieListView from './views/lib_movie_list_view';
+import SearchMovieListView from './views/search_movie_list_view';
+import RentalView from './views/rental_view';
+import Rental from './models/rental';
+
+// template varibles
+let libraryMovieTemplate;
+let searchMovieTemplate;
+
+// new instances of models
+const libMovieList = new LibMovieList();
+const searchMovieList = new LibMovieList();
+const rental = new Rental();
+
 // ready to go
 $(document).ready(function() {
+  // events bus
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
+
+  //  underscore templates
+  libraryMovieTemplate = _.template($('#library-movie-template').html());
+  searchMovieTemplate = _.template($('#search-movie-template').html());
+
+  const rentalView = new RentalView({
+    el: '#rental-view',
+    bus: bus,
+    model: rental,
+  })
+
+  rentalView.render();
+
+  const searchMovieListView = new SearchMovieListView({
+    el: 'main',
+    model: searchMovieList,
+    template: searchMovieTemplate,
+    bus: bus,
+  });
+
+  searchMovieListView.render();
 
-  $('#main-content').append('<p>Hello World!</p>');
+  libMovieList.fetch();
+  // new instance of LibMovieListView
+  const libMovieListView = new LibMovieListView({
+    el: 'main',
+    model: libMovieList,
+    template: libraryMovieTemplate,
+    bus: bus,
+  });
 
+  libMovieListView.render();
+  // console.log(libMovieList);
 });
diff --git a/src/collections/lib_movie_list.js b/src/collections/lib_movie_list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+import LibMovie from '../models/lib_movie';
+
+const LibMovieList = Backbone.Collection.extend({
+  model: LibMovie,
+  url: 'http://localhost:3000/movies/',
+  comparator: 'title',
+});
+
+export default LibMovieList;
diff --git a/src/collections/search_movie_list.js b/src/collections/search_movie_list.js
@@ -0,0 +1,16 @@
+// import BackBone from 'backbone';
+// import SearchMovie from '../models/search_movie';
+//
+// const SearchMovieList = Backbone.Collection.extend({
+//   // defaults: {
+//   //   'searchMovieTitle': null,
+//   // },
+//   url: 'http://localhost:3000/movies?query=',
+//   model: SearchMovie,
+//   // urlRoot: `http://localhost:3000/movies?query=${this.get('searchTerm')}`,
+//   // urlRoot: `http://localhost:3000/movies?query=Jaws`
+//   // + this.get('searchMovieTitle'),
+//
+// });
+//
+// export default SearchMovieList;