Ada-C8 · idevera · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -3,13 +3,116 @@
   <head>
     <meta charset="utf-8">
     <title>Backbone Baseline</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
+
   <body>
+    <header class="main-header">
+      <div class="main-h1-wrapper">
+        <h1>Video Store Plus</h1>
+      </div>
+    </header>
+
     <main id="main-content">
-
+      <section id="returned-movies-view" class="small-12 large-6 columns">
+        <header class="section-header align-center">
+          <h4>Search for Movies to Add</h4>
+        </header>
+        <section id="returned-movies-errors">
+        </section>
+
+        <form id="movie-search">
+          <label for="title">Search for a movie by clicking MoviesDB</label>
+          <input type="text" name="title"/>
+          <input type="radio" name="searchLocation" value="imdb" id="imdb"/><label for="imdb">MoviesDB</label>
+          <input type="radio" name="searchLocation" value="local" id="local" checked/><label for="local">Movies in Store</label>
+          <br/>
+          <button id="search-btn" class="button">Get Movies!</button>
+          <div id="success-movie-add">
+          </div>
+        </form>
+
+        <section id="imdb-section">
+          <header class="section-header align-center">
+            <h4>Movies that Match your Search</h4>
+          </header>
+          <table class="striped stack">
+            <thead class="aqua-bg">
+              <th width="150">Movie</th>
+              <th width="100" class="align-center">Release Date</th>
+              <th width="200">Overview</th>
+              <th width="50" class="align-center">Add</th>
+            </thead>
+
+            <!-- Append Movies that match the search -->
+
+            <tbody id="matching-movies">
+            </tbody>
+          </table>
+        </section>
+      </section>
+
+      <section id="current-rentals-view" class="small-12 large-6 columns">
+        <header class="section-header align-center">
+          <h4>Available Movies for Checkout</h4>
+        </header>
+
+        <section id="available-movies-errors">
+        </section>
+
+        <table class="striped stack">
+          <thead class="aqua-bg">
+            <th width="150">Movie</th>
+            <th width="100">Release Date</th>
+            <th width="200">Overview</th>
+          </thead>
+
+          <!-- Append current Movies in the rental store -->
+          <tbody id="movies-in-store">
+          </tbody>
+        </table>
+      </section>
     </main>
 
+    <!-- Templates -->
+
+    <script type="text/template" id="movie-template">
+      <td class="align-center">
+        <img src = '<%- image_url %>' alt='<%- title%>'/>
+        <br>
+        <%- title %>
+      </td>
+      <td class="align-center">
+        <%- release_date %>
+      </td>
+      <td>
+        <%- overview %>
+      </td>
+    </script>
+
+    <script type="text/template" id="returned-movie-template">
+      <td class="align-center">
+        <img src = '<%- image_url %>' alt='<%- title%>'/>
+        <br>
+        <%- title %>
+      </td>
+      <td>
+        <%- release_date %>
+      </td>
+      <td height="100" class="overflow-auto">
+        <div class="overflow-auto">
+          <%- overview %>
+      </td>
+      <td>
+        <button class="button btn-add">Add</button>
+      </td>
+    </script>
+
+    <script type="text/template" id="error-template">
+
+    </script>
+
     <script src="/app.bundle.js"></script>
 
   </body>
-  </html>
+</html>
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/models/movie_spec.js b/spec/models/movie_spec.js
@@ -0,0 +1,33 @@
+import Movie from 'models/movie';
+
+describe('Quote spec', () => {
+  let movie;
+  beforeEach(() => {
+    movie = new movie({
+      title: 'Test Movie',
+      release_date: '1998-10-10',
+      overview: 'some overview text here',
+      image_url: 'https://image.tmdb.org/t/p/w185/eruhq6kmjV7wopA7GjNDHrmAl89.jpg'
+    });
+  });
+
+  describe('Buy function', () => {
+    it('increases the price by $1.00', () => {
+      const startPrice = quote.get('price');
+
+      quote.buy();
+
+      expect(quote.get('price')).toEqual(startPrice + 1.00);
+    });
+  });
+
+  describe('Sell function', () => {
+    it('decreases the price by $1.00', () => {
+      const startPrice = quote.get('price');
+
+      quote.sell();
+
+      expect(quote.get('price')).toEqual(startPrice - 1.00);
+    });
+  });
+});
diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,71 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
+// Models and Collection
+import Movie from 'models/movie';
+import ReturnedMovie from 'models/returned_movie';
+import MovieList from 'collections/movie_list';
+import ReturnedMovieList from 'collections/returned_movie_list';
+
+// Views
+import MovieView from 'views/movie_view';
+import MovieListView from 'views/movie_list_view';
+import ReturnedMovieView from 'views/returned_movie_view'; // TODO: Do I need this?
+import ReturnedMovieListView from 'views/returned_movie_list_view';
+
+const movieList = new MovieList();
+const returnedList = new ReturnedMovieList();
+
+let movieTemplate;
+let returnedMovieTemplate;
+
+
 $(document).ready(function() {
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
+
+  movieTemplate = _.template($('#movie-template').html());
+  returnedMovieTemplate = _.template($('#returned-movie-template').html());
+
+  $('#imdb-section, #search-btn').hide();
+
+  // Fetches all movies currently in the rental store
+  movieList.fetch({
+    success: (model, response) => {
+      response.forEach((movie) => {
+        movieList.add(movie);
+      });
+    },
+    error: (model, response) => {
+      console.log(`This is the model: ${model} in the app.js`);
+      console.log(`This is the response: ${response} in the app.js`);
+    },
+  })
+
+  const movieListView = new MovieListView({
+    el: '#current-rentals-view',
+    template: movieTemplate,
+    model: movieList,
+    bus: bus,
+  });
 
-  $('#main-content').append('<p>Hello World!</p>');
+  const returnedMovieListView = new ReturnedMovieListView({
+    el: '#returned-movies-view',
+    template: returnedMovieTemplate,
+    model: returnedList,
+    bus: bus,
+  });
 
-});
+  // TODO: Event if the button to search is not showing, it is still possible to
+  // Search for a movie if you press center
+  // Need to figure out how to prevent this from happening
+  $('input[type=radio][name=searchLocation]').change(function(){
+    if (this.value === 'imdb'){
+      $('#imdb-section, #search-btn').show();
+      $('#current-rentals-view').hide();
+    } else {
+      $('#imdb-section, #search-btn').hide();
+      $('#current-rentals-view').show();
+    }
+  });
+}); // DOCUMENT READY
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  parse: function(response){
+    return response['responseJSON'];
+  }
+});
+
+export default MovieList;
diff --git a/src/collections/returned_movie_list.js b/src/collections/returned_movie_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import ReturnedMovie from '../models/returned_movie';
+
+const returnedMovieList = Backbone.Collection.extend({
+  model: ReturnedMovie,
+  url: 'http://localhost:3000/movies/?query=',
+});
+
+export default returnedMovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,6 +1,69 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Secular+One');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 
-main {
+/*********** ALL STYLES ***********/
+
+h1, h2, h3, h4 {
+  font-family: 'Secular One', sans-serif;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.aqua-bg {
+  background-color: #ABEBC6;
+}
+
+.button {
+  background-color: #ABEBC6;
+  color: #232f3e;
+  border-radius: 5px;
+}
+
+td .overflow-auto {
+  overflow: scroll;
+  height: 220px;
+}
+/*********** HEADER ***********/
+
+.main-header {
+  text-align: center;
+  background-color: #232f3e;
+  color: #E8E8E8;
+  padding: 10px;
+}
+
+.main-h1-wrapper {
+  border: 2px #ABEBC6 solid;
+}
+
+.main-h1-wrapper h1 {
+  margin: 0;
+}
+
+/******* MAIN SECTION HEADERS *******/
+
+.section-header {
+  border: 1px #B8B8B8 solid;
+  border-radius: 5px;
+  margin: 20px 0 20px 0;
+
+}
+
+.section-header h4 {
+  padding: 10px;
+  margin: 0;
+}
+
+
+/* main {
     background: lightblue;
 }
 
@@ -36,7 +99,7 @@ aside label {
 
 div {
   display: inline;
-}
+} */
 /*
 * {
   border-style: solid;

diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,39 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  initialize(attributes){
+    this.title = attributes.title,
+    this.overview = attributes.overview,
+    this.release_date = attributes.release_date,
+    this.image_url = attributes.image_url,
+    this.bus = attributes.bus,
+    this.url = 'http://localhost:3000/movies'
+  },
+  validate(attributes){
+    const errors = {}
+
+    if (!attributes.title) {
+      errors['title'] = 'The title can not be blank';
+    }
+
+    if (!attributes.overview) {
+      errors['overview'] = 'The overview can not be blank';
+    }
+
+    if (!attributes.release_date) {
+      errors['release_date'] = 'The release date can not be blank';
+    }
+
+    if (!attributes.image_url) {
+      errors['image_url'] = 'The image url can not be blank';
+    }
+
+    if ( Object.keys(errors).length > 0 ) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
+});
+
+export default Movie;