Ada-C8 · vsawchuk · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,105 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-    <main id="main-content">
-
-    </main>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
-  </html>
+<head>
+  <meta charset="utf-8">
+  <title>Hometown Video</title>
+
+<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
+
+</head>
+<body>
+  <header>
+    <div id="logo" class="columns small-6">
+      <h1>Hometown</h1>
+      <p>Video Store</p>
+    </div>
+    <nav class="columns small-6">
+      <a href="#" id="movies-link">Movies</a> | <a href="#" id="customers-link">Customers</a> | <a href="#" id="rentals-link">Rentals</a>
+    </nav>
+  </header>
+
+  <main id="main-content">
+    <div id='movies-container'>
+      <div class="actions">
+        <button id='show-rental-library' class='button'>Rental Library</button>
+        <form id='search-movies'>
+          <input type="radio" id="library-radio" name="searchList" value="library" checked="checked"/>
+          <label for="library-radio">Rental Library</label>
+
+          <input type="radio" id="imdb-radio" name="searchList" value="imdb">
+          <label for="imdb-radio">IMDB</label>
+
+          <label>Search Titles</label>
+          <input type='text' id='searchTerm'/>
+          <input type='submit' class='button' id='search' value='Search'></input>
+        </form>
+      </div>
+      <section id='movies'>
+      </section>
+    </div>
+
+    <div id="customers-container" class="display-none">
+      <ul id="customers">
+      </ul>
+    </div>
+
+    <div id="rentals-container" class="display-none">
+      <p>No rentals yet</p>
+    </div>
+
+  </main>
+
+  <script type="text/template" id="library-movie-template">
+    <span>
+      <img src='<%- image_url %>' alt='<%- title %>'/>
+    </span>
+    <div class="listing-info">
+      <h3><%- title %></h3>
+      <p><%- release_date.slice(0, 4) %></p>
+      <button class='button show-details'>Show Details</button>
+    </div>
+    <div class="details slide">
+      <h5>Overview</h5>
+      <p><%- overview %></p>
+    </div>
+  </script>
+
+  <script type="text/template" id="imdb-movie-template">
+    <span>
+      <img src='<%- image_url %>' alt='<%- title %>'/>
+    </span>
+    <div class="listing-info">  
+      <h3><%- title %></h3>
+      <p><%- release_date.slice(0, 4) %></p>
+      <button class='button show-details'>Show Details</button>
+      <button class='button show-form'>Add to Rental Library</button>
+    </div>
+    <div class="details slide">
+      <h5>Overview</h5>
+      <p><%- overview %></p>
+    </div>
+    <div class="add-rental-form slide">
+      <h5>Add Movie to Inventory</h5>
+      <form id="add-rental">
+        <label>Quantity</label>
+        <input type="text" name="inventory" value="qty"></input>
+        <input type="submit" class="button" value="Order Movie"></input>
+      </form>
+    </div>
+  </script>
+
+  <script type="text/template" id="customer-template">
+    <h4><%- name %></h4>
+    <p>Member Since: <%- registered_at.slice(0, 4) %></p>
+    <p>Account Credit: $<%- account_credit %></p>
+    <p>Number of Movies Checked Out: <%- movies_checked_out_count %></p>
+    <p>Phone: <%- phone %></p>
+    <p>Address:</p>
+    <p><%- address %> <br>
+    <%- city %>, <%- state %> <%- postal_code %></p>
+  </script>
+
+  <script src="/app.bundle.js"></script>
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,83 @@
+// Import jQuery & Underscore
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+// Import collections and views
+import MovieList from 'collections/movie_list';
+import MovieListView from 'views/movie_list_view';
+import CustomerList from 'collections/customer_list';
+import CustomerListView from 'views/customer_list_view';
+
 import 'css/_settings.css';
 import 'foundation-sites/dist/css/foundation.css';
 import './css/styles.css';
 
-// Import jQuery & Underscore
-import $ from 'jquery';
-import _ from 'underscore';
+
+let eventBus = {};
+eventBus = _.extend(eventBus, Backbone.Events);
 
 // ready to go
 $(document).ready(function() {
 
-  $('#main-content').append('<p>Hello World!</p>');
+  const rentalLibraryList = new MovieList();
+  rentalLibraryList.bus = eventBus;
+  rentalLibraryList.fetch();
+
+  const rentalDisplayList = new MovieList();
+  rentalDisplayList.bus = eventBus;
+
+  const rentalLibraryListView = new MovieListView({
+    model: rentalDisplayList,
+    template: _.template($('#library-movie-template').html()),
+    el: 'main',
+    bus: eventBus,
+    referenceList: rentalLibraryList,
+  });
+  rentalLibraryListView.listenTo(eventBus, 'showRentalLibrary', rentalLibraryListView.completeList);
+  rentalLibraryListView.listenTo(eventBus, 'addInventory', rentalLibraryListView.addRental);
+  rentalLibraryListView.listenTo(eventBus, 'searchlibrary', rentalLibraryListView.searchLibrary);
+
+  const searchList = new MovieList();
+  searchList.bus = eventBus;
+
+  const searchListView = new MovieListView({
+    model: searchList,
+    template: _.template($('#imdb-movie-template').html()),
+    el: 'main',
+    bus: eventBus,
+  });
+  searchListView.listenTo(eventBus, 'searchimdb', searchListView.searchIMDB)
+  searchListView.listenTo(searchListView.model, 'update', searchListView.render);
+
+  const customerList = new CustomerList();
+  customerList.bus = eventBus;
+
+  const customerListView = new CustomerListView({
+    model: customerList,
+    template: _.template($('#customer-template').html()),
+    el: 'main',
+    bus: eventBus,
+  });
+  customerList.fetch();
+
+  $('#show-rental-library').on('click', function(event) {
+    event.preventDefault();
+    eventBus.trigger('showRentalLibrary');
+  });
+
+  $('#search-movies').on('submit', function(event) {
+    event.preventDefault();
+    const location = $('#search-movies [name="searchList"]:checked').val();
+    const searchTerm = $('#searchTerm').val();
+    eventBus.trigger(`search${location}`, searchTerm);
+  });
+
+  $('nav a').click(function() {
+    let divId = $(this).attr('id');
+    let n = divId.indexOf('-');
+    divId = `${divId.substring(0, n)}-container`;
 
+    $(`#${divId}`).removeClass('display-none').siblings().addClass('display-none');
+  });
 });
diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Customer from 'models/customer';
+
+const CustomerList = Backbone.Collection.extend({
+  model: Customer,
+  url: 'http://localhost:3000/customers/',
+});
+
+export default CustomerList;
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies/',
+  baseUrl: 'http://localhost:3000/movies/search?query=',
+  resetUrl(query) {
+    this.url = this.baseUrl + query;
+  },
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,44 +1,113 @@
 @include foundation-everything;
 
-main {
-    background: lightblue;
+body {
+  background: #ececec;
 }
 
 header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+  background: #2f2f2f;
+  color: #ffcf00;
+  padding: 1em;
 }
 
-#completed-checkbox {
-  display: inline;
+header h1 {
+  margin-bottom: 0;
+  line-height: 1em;
+  font-family: 'Bungee Inline', cursive;
 }
 
-label {
-  display: inline;
+header p {
+  margin-top: 0;
+  margin-left: 3px;
+  line-height: 1em;
 }
 
-button.success {
-  margin-right: 1.2rem;
-  display: inline;
+nav {
+  text-align: right;
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
+header a {
+  color: #ffcf00;
 }
-aside label {
-  color: #FFFFFF;
+
+.display-none {
+  display: none;
+}
+
+.actions {
+  padding: 1em;
+}
+
+#show-rental-library {
+  display: inline-block;
+  margin: 1em;
+}
+
+#search-movies {
+  display: inline-block;
+  float: right;
+  margin: 1em;
+  width: 35%;
+}
+
+#movies {
+  clear: both;
+  margin: 0 auto;
+}
+
+.movie, .customer {
+  background: #2f2f2f;
+  border: solid 5px #ffcf00;
+  border-radius: 5px;
+  margin: 1em;
+  padding: 1em;
+}
+
+.movie {
+  min-height: 360px;
 }
 
-.completed {
-  text-decoration: line-through;
+.customer {
+  color: #ffcf00;
 }
 
-div {
-  display: inline;
+.movie img {
+  border: 4px solid white;
+  display: inline-block;
+  float: left;
+  margin: 1em;
 }
-/*
-* {
-  border-style: solid;
+
+.listing-info {
+  float: left;
+  margin: 1em 1em 1em .5em;
+  min-width: 35%;
+}
+
+.listing-info, .slide {
+  color: white;
+  display: inline-block;
+}
+
+.listing-info p, .customer p, #add-rental label {
+  color: #afafaf;
+}
+
+.listing-info button {
+  background: #ffcf00;
+  color: #2f2f2f;
+  margin: 4px;
+}
+
+.slide {
+  display: none;
+  padding: 1em;
+}
+
+.details {
+  overflow: scroll;
+}
+
+#add-rental input[name="inventory"] {
+  width: 3em;
 }
-*/
diff --git a/src/models/customer.js b/src/models/customer.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Customer = Backbone.Model.extend({
+
+});
+
+export default Customer;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  initialize(params) {
+    this.title = params.title;
+    this.image_url = params.image_url;
+    this.release_date = params.release_date;
+    this.overview = params.overview;
+    this.bus = params.bus;
+  },
+});
+
+export default Movie;