Ada-C7 · cynthiacd · 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,13 @@
 @include foundation-everything;
 
 main {
-    background: lightblue;
+    background: white;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: lightgrey;
   padding: 0.5rem;
+  text-align: center;
 }
 
 #completed-checkbox {
@@ -35,10 +36,61 @@ aside label {
 }
 
 div {
-  display: inline;
+  display: block;
+}
+
+li {
+  /*border: solid;*/
+  background-color: lightgrey;
+  /*height: 27em;*/
+  padding: 2%;
+  margin: 3%
+}
+
+#movie-text {
+  /*border: solid;*/
+}
+
+.columns {
+  float: none;
+}
+
+.button {
+  margin-top: 1%;
+}
+
+#search-bar {
+  display: none;
+}
+
+h4 {
+  font-weight: bold;
 }
-/*
-* {
-  border-style: solid;
+
+li {
+  list-style: none;
+}
+#rental-form {
+  display: none;
+}
+
+#rentals {
+  display: none;
+}
+
+th {
+  text-align: left;
+}
+
+h2 {
+  border-bottom: solid;
+}
+
+.button.btn-checkin,
+.button.btn-checkout {
+  margin: 0;
+}
+
+#form {
+  width: 100%;
 }
-*/
diff --git a/build/index.html b/build/index.html
@@ -5,11 +5,93 @@
     <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>
+    <title>Video Store</title>
   </head>
   <body>
+    <header>
+      <h1>Video Store</h1>
+    </header>
 
-    <script src="/app.bundle.js"></script>
+    <main class="row">
+      <button class="button" id="rental-list">Rental Movies</button>
+      <button class="button" id="new-movies-list">Search For New Movies</button>
+      <button class="button" id="rental-movie">Checkout</button>
+      <button class="button" id="rental-overdue">Overdue Movies</button>
+      <button class="button" id="rental-all">All Oustanding Rentals</button>
+
+      <section class="row" id="search-bar">
+        <label>
+          Search
+          <input type="text" name="search" id="search" placeholder="Search..">
+        </label>
+        <button class="button btn-search">Search</button>
+      </section>
+
+      <section id="movie-list" class="row"></section>
+      <section id="rental-form" class="row"></section>
+      <section id="rentals" class="row">
+        <table>
+          <tr>
+            <th>Movie</th>
+            <th>Customer</th>
+            <th>Customer ID</th>
+            <th>Checkout Date</th>
+            <th>Due Date</th>
+            <th>Returned</th>
+            <th>Check In</th>
+          </tr>
+          <tbody id="overdue-info"></tbody>
+        </table>
+      </section>
+    </main>
+
+    <!-- Templates -->
 
+    <script id="movie-card-template" type="text/template">
+      <img alt="movie image" class="columns large-2 small-2" src=<%- image_url %> >
+      <div class="columns large-10 small-10" id="movie-text">
+        <h2><strong><%- title %></strong></h2>
+        <p><strong>Summary: </strong><%- overview %></p>
+        <p><strong>Release Date: </strong><%- release_date %></p>
+        <% if ( inventory === null ) { %>
+          <p>
+            <strong>Quantity: </strong>
+            <input type="number" name="inventory" id='inventory' min="1" max="5" value="1">
+          </p>
+          <button class="button btn-add-lib">Add to Library</button>
+        <% } else { %>
+          <p><strong>Inventory: </strong><%- inventory%></p>
+          <p><strong>Available Inventory: </strong><%- available_inventory %></p>
+          <button class="button btn-rental">Check Out This Movie</button>
+        <% } %>
+      </div>
+    </script>
+
+    <script id="rental-form-template" type="text/template">
+      <section class="columns large-12 small-12">
+        <label>
+          Movie Title
+          <input type="text" name="rental-movie-title" id="rental-movie-title" placeholder="Search..">
+        </label>
+        <label>
+          Customer ID
+          <input type="text" name="rental-customer-id" id="rental-customer-id" placeholder="Search..">
+        </label>
+        <button class="button btn-checkout">Checkout</button>
+        <button class="button btn-checkin">Checkin</button>
+      </section>
+    </script>
+
+    <script id="overdue-table" type="text/template">
+      <td><%- title %></td>
+      <td><%- name %></td>
+      <td><%- customer_id %></td>
+      <td><%- checkout_date %></td>
+      <td><%- due_date %></td>
+      <td><%- returned %></td>
+      <td><button class="button btn-checkin-from-list">Check In</button></td>
+    </script>
+
+    <script src="/app.bundle.js"></script>
   </body>
   </html>
diff --git a/src/app.js b/src/app.js
@@ -4,9 +4,110 @@
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import MovieList from './collections/movie_list';
+import Movie from './models/movie';
+import MovieListView from './views/movie_list_view';
+import MovieView from './views/movie_view';
+import Rental from './models/rental';
+import RentalList from './collections/rental_list';
+import RentalView from './views/rental_view';
+import RentalListView from './views/rental_list_view';
+
+var buildMovieList = function(event){
+  hideEverything();
+  console.log("Getting the Library Movies");
+  var movieList = new MovieList();
+  getMovies(movieList);
+};
+
+var buildMovieListTMDb = function(event) {
+  hideEverything();
+  console.log("Getting movies from TMDb!");
+  var searchText = $('#search').val();
+  var movieList = new MovieList();
+  movieList.cumstomUrl(searchText);
+  getMovies(movieList);
+};
+
+var getMovies = function(movieList) {
+  movieList.fetch(
+    { error: function(model, response) { alert("Server Error - Try Again Later") },
+      success: function(model, response) { console.log( "API success - got movies" ) }
+    }
+  );
+
+  var movieListView = new MovieListView({
+    model: movieList,
+    templateForm: _.template( $('#movie-card-template').html() ),
+    el: 'main'
+  });
+
+  $("#movie-list").show();
+};
+
+var showSearchBar = function(event) {
+  hideEverything();
+  $("#search-bar").show();
+};
+
+var showRentalForm = function(event) {
+  hideEverything();
 
-  $('section.main-content').append('<p>Hello World!</p>');
+  var rental = new Rental;
+  var rentalView = new RentalView({
+    templateInfo: _.template( $('#rental-form-template').html() ),
+    tagName: "div",
+    model: rental,
+  });
 
+  $("#rental-form").empty();
+  $('#rental-form').html( rentalView.$el );
+  $("#rental-form").show();
+};
+
+var buildOverdueRentalsList = function(event) {
+  hideEverything();
+  console.log("Getting overdue movies");
+  var overdueRentals = new RentalList ();
+  overdueRentals.overdueUrl();
+  getRentals(overdueRentals);
+};
+
+var buildRentalsList = function(event) {
+  hideEverything();
+  console.log("Getting all outstanding rentals");
+  var rentals = new RentalList ();
+  getRentals(rentals);
+};
+
+var getRentals = function(rentals) {
+  rentals.fetch(
+    { error: function(model, response) { alert("Server Error - Try Again Later") },
+      success: function(model, response) { console.log( "API success - got overdue rentals" ) }
+    }
+  );
+
+  var rentalListView = new RentalListView({
+    model: rentals,
+    templateInfo: _.template( $("#overdue-table").html() ),
+    el: '#rentals'
+  });
+
+  $("#rentals").show();
+};
+
+var hideEverything = function () {
+  $("#rentals").hide();
+  $("#search-bar").hide();
+  $("#rental-form").hide();
+  $("#movie-list").hide();
+};
+
+$(document).ready(function() {
+  $('#rental-list').click( buildMovieList );
+  $('.btn-search').click( buildMovieListTMDb );
+  $('#new-movies-list').click( showSearchBar);
+  $('#rental-movie').click( showRentalForm );
+  $('#rental-overdue').click( buildOverdueRentalsList );
+  $('#rental-all').click( buildRentalsList)
 });
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({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+
+  cumstomUrl: function(searchText){
+    this.url = this.url + "?query=" + searchText;
+    // console.log(this.url);
+    return this;
+  }
+});
+
+export default MovieList;
diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js
@@ -0,0 +1,14 @@
+import Backbone from 'backbone';
+import Rental from '../models/rental';
+
+var RentalsList = Backbone.Collection.extend({
+  model: Rental,
+  url: 'http://localhost:3000/rentals/',
+
+  overdueUrl: function() {
+    this.url = this.url + "overdue";
+    return this;
+  }
+});
+
+export default RentalsList;