Ada-C8 · murog · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -6,10 +6,94 @@
   </head>
   <body>
     <main id="main-content">
-
+        <div class="grid-x grid-padding-x">
+          <div id="find-movie-form-container" class="small-6 cell">
+            <h3>Find Movie</h3>
+            <form>
+              <label for="title">Title</label>
+              <input type="text" name="title" placeholder="enter a title" />
+              <!-- <label>Action</label> -->
+              <button class="submit success button hollow find-movie">Find Movie</button>
+              <button class="alert button hollow show-all">Show All Movies Available</button>
+              <button class="secondary button hollow vendor">Search with Vendor</button>
+            </form>
+          </div>
+
+          <div id="movie-details-container" class="small-4 cell">
+            <h2>Some Specific Moviez</h2>
+            <div class="movie-details-list-container">
+              <ul id="movie-details" class="movies">
+
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="movie-workspace">
+          <div class="grid-x grid-padding-x">
+            <section class="status" >
+              <ul id="status-message">
+
+              </ul>
+            </section>
+          </div>
+        <div class="grid-x grid-padding-x">
+          <section id="vendors-container" class="small-5 cell">
+            <h2>Search Results</h2>
+            <div class="vendors-list-container">
+              <ul id="vendor-results" class="movies">
+
+              </ul>
+            </div>
+          </section>
+
+        <div class="small-5 cell ">
+          <div id="movies-container" hidden="true">
+            <h2>Moviez</h2>
+            <div class="movies-list-container">
+              <ul id="movies" class="movies">
+
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     </main>
+    <script type="text/template" id="movie-template">
+      <div class="small-4 cell">
+        <h3 class="title"><%- title %></h3>
+        <p class="overview">
+          <%- overview %>
+        </p>
+        <!-- find api get url for images -->
+        <img src="<%- image_url %>"/>
+      </div>
+    </script>
+
+    <script type="text/template" id="vendor-template">
+      <div class="small-4 cell">
+        <h3 class="title"><%-title %></h3>
+        <h6>release date: <%- release_date %></h6>
+        <img src="<%- image_url %>"/>
+        <p class="overview">
+          <%- overview %>
+        </p>
+        <button class="button secondary hollow tiny add-movie" id="add-movie">Add to Library</button>
+      </div>
+    </script>
 
     <script src="/app.bundle.js"></script>
+    <script type="text/template" id="movie-details-template">
+      <div class="panel">
+        <h3 class="title"> <%- title %></h3>
+        <h5 class="release-date">release date: <%- release_date %></h5>
+        <h5 class="inventory">inventory: <%- inventory %></h5>
+        <!-- image src here -->
+        <p class="overview">
+          <%- overview %>
+        </p>
+      </div>
+    </script>
 
   </body>
   </html>
diff --git a/spec/models/movie_spec.js b/spec/models/movie_spec.js
@@ -0,0 +1,35 @@
+
+import Movie from 'models/movie';
+
+describe('Movie spec', () => {
+  // let movie;
+  let validMovie;
+  beforeEach(() => {
+    validMovie = new Movie({
+      title: 'valid title',
+      release_date: 'valid date',
+    });
+  });
+
+  describe('Attribute Validations', () => {
+    it('is invalid without a title', () => {
+      expect(validMovie.isValid()).toEqual(true);
+
+      validMovie.set('title', null);
+
+      expect(validMovie.isValid()).toEqual(false);
+
+    });
+
+    it('is invalid without a release_date', () => {
+      expect(validMovie.isValid()).toEqual(true);
+
+      validMovie.set('release_date', null);
+
+      expect(validMovie.isValid()).toEqual(false);
+
+    });
+
+  });
+
+});
diff --git a/spec/test_spec.js b/spec/test_spec.js
@@ -1,13 +1,13 @@
-
-describe('Sample spec', () => {
-  let a;
-
-  it('and so is a spec', () => {
-    a = true;
-
-    expect(a).toBe(true);
-  });
-  xit('will not work', () => {
-    expect(false).toBe(true);
-  });
-});
+//
+// describe('Sample spec', () => {
+//   let a;
+//
+//   xit('and so is a spec', () => {
+//     a = true;
+//
+//     expect(a).toBe(true);
+//   });
+//   xit('will not work', () => {
+//     expect(false).toBe(true);
+//   });
+// });
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,55 @@
+// Import jQuery & Underscore
+import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+
 import 'css/_settings.css';
 import 'foundation-sites/dist/css/foundation.css';
 import './css/styles.css';
 
-// Import jQuery & Underscore
-import $ from 'jquery';
-import _ from 'underscore';
+//import models and collections
+import MovieList from './collections/movie_list';
+import VendorList from './collections/vendor_list';
+
+// import views
+import MovieListView from './views/movie_list_view';
+import VendorListView from './views/vendor_list_view';
+import FormView from './views/form_view';
 
 // ready to go
 $(document).ready(function() {
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
+
+  const movieList = new MovieList({ bus: bus });
+  const vendorList = new VendorList();
+  // tripList.on('update', render, tripList);
+  movieList.fetch();
+
+  const movieListView = new MovieListView({
+    model: movieList,
+    template: _.template($('#movie-template').html()),
+    detailsTemplate: _.template($('#movie-details-template').html()),
+    el: 'main',
+    bus: bus,
+  });
+
+  const formView = new FormView({
+    model: movieList,
+    vendorModel: vendorList,
+    el: 'main',
+    bus: bus
+  });
+
+  const vendorListView = new VendorListView({
+    model: vendorList,
+    inventory: movieList,
+    template: _.template($('#vendor-template').html()),
+    el: '#vendors-container',
+    bus: bus,
+  });
+
+  // movieListView.render();
 
-  $('#main-content').append('<p>Hello World!</p>');
 
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,48 @@
+import Backbone from 'backbone';
+
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  initialize(params) {
+    this.bus = params.bus;
+
+    this.listenTo(this.bus, 'addToLibrary', this.addToLibrary);
+  },
+  parse(response) {
+    return response;
+  },
+
+  addToLibrary(movie) {
+    if (!this.contains(movie)){
+      const result = this.create(movie);
+      result.set('unique', true);
+        this.bus.trigger('updateStatus', result);
+    } else {
+      movie.set('unique', false);
+      this.bus.trigger('updateStatus', movie);
+    }
+  },
+
+  contains(movie) {
+    for (let i = 0; i < this.models.length; i += 1) {
+      const model = this.models[i];
+
+      if (model.get('title') === movie.get('title') &&
+    model.get('release_date') === movie.get('release_date')) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  findWhereIgnoreCase(key, val) {
+    return this.filter(function(item) {
+      return item.get(key).toLowerCase() === val.toLowerCase();
+    });
+  },
+
+});
+
+export default MovieList;
diff --git a/src/collections/vendor_list.js b/src/collections/vendor_list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+import Movie from 'models/movie';
+
+const VendorList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+});
+
+export default VendorList;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,29 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  urlRoot: 'http://localhost:3000/movies',
+  defaults: {
+    inventory: 0,
+  },
+  initialize(params) {
+    this.title = params.title;
+    // this.attributes.upperCaseTitle = this.title.toUpperCase();
+  },
+  validate(attributes) {
+    const errors = {};
+    if(!attributes.title) {
+      errors['title'] = ["cannot be blank"];
+    }
+    if(!attributes.release_date) {
+      errors['release_date'] = ["cannot be blank"]
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return errors;
+    }
+    return false;
+  },
+
+});
+
+export default Movie;
diff --git a/src/views/form_view.js b/src/views/form_view.js
@@ -0,0 +1,84 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import MovieView from '../views/movie_view';
+import VendorListView from '../views/vendor_list_view';
+import MovieList from '../collections/movie_list';
+import Movie from '../models/movie';
+
+const FormView = Backbone.View.extend({
+  initialize(params) {
+    this.bus = params.bus;
+    this.model = params.model;
+    this.vendorModel = params.vendorModel;
+    this.listenTo(this.bus, 'updateStatus', this.updateStatusMessageWith);
+  },
+  events: {
+    'click button.find-movie' : 'findMovie',
+    'click button.show-all' : 'showAllMovies',
+    'click button.vendor': 'searchTMDB',
+  },
+  showAllMovies: function(e) {
+    e.preventDefault();
+
+    this.$('#movies-container').toggle();
+  },
+  findMovie: function(e) {
+    e.preventDefault();
+    const title = this.$('input').val();
+    let result;
+
+    if (title && title !== '') result = (this.model.findWhereIgnoreCase('title', title))[0];
+    if (result ) {
+      this.bus.trigger(`displayMyDetails${result.get('id')}`, result);
+    } else {
+      this.$('#status-message').append(`<li class="alert">"${title}" is not present in rental library.</li>`);
+    }
+  },
+  searchModel: function(title) {
+    const movie = this.model.findWhereIgnoreCase({ title: title });
+    return movie
+  },
+  searchTMDB: function(event) {
+    event.preventDefault();
+    const title = this.$('input').val();
+    const that = this;
+    this.vendorModel.fetch({
+      data: $.param({ query: title }),
+      success: function(vendorModel, response, options) {
+        that.updateStatusFrom(options);
+      }
+   });
+
+  },
+  updateStatusMessageWith: function(movie) {
+    this.$('#status-message').empty();
+    if (movie.isValid() && movie.get('unique')) {
+      this.$('#status-message').append(`<li class="success">${movie.get('title')} successfully added to rental library</li>`);
+    } else if (!movie.get('unique')) {
+      this.$('#status-message').append(`<li class="alert">${movie.get('title')} is already in the rental library.</li>`);
+    } else {
+      this.$('#status-message').append(`<li class="alert">${movie.get('title')} was not successfully added to rental library.</li>`);
+      const errors = movie.validationError;
+      Object.keys(errors).forEach((field) => {
+        errors[field].forEach((error) => {
+          this.$('#status-message').append(`<li class="alert">${field}: ${error}</li>`);
+        });
+      });
+    }
+
+  },
+  updateStatusFrom: function(options) {
+    this.$('#status-message').empty();
+    const query = options.data.slice(6)
+    if(options.xhr.responseJSON.length === 0){
+      this.$('#status-message').append(`<li class="alert">No results for query: ${query}</li>`);
+    } else {
+      this.$('#status-message').append(`<li class="success">Results for query: ${query}</li>`);
+    }
+  }
+
+});
+
+export default FormView;