Ada-C8 · skwiens · Dec 18, 2017 · Dec 19, 2017 · Dec 19, 2017 · Dec 19, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,50 @@
 <!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>The Amazing Movie Database</title>
+</head>
+<body>
+  <header>
+
+  </header>
+
+  <main id="main-content">
+    <section id="status-messages"></section>
+
+    <section id="search-list">
+      <form>
+        <label for="search-movies">Movie Search</label>
+        <input type="text" name="search-movies" />
+        <button id="btn-search">Cliquez Moi S'il Vous Plait!</button>
+      </form>
+      <button id="btn-rentals">List All Rentals</button>
+    </section>
+
+    <section>
+      <div id="rentals-container">
+        <h2>Movie Rentals</h2>
+        <div id="rentals-list-container">
+          <ul id="rentals">
+
+          </ul>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <script src="/app.bundle.js"></script>
+  <footer>
+    <div class="columns small-12 medium-11 medium-offset-1">
+      <p class="footer-copy">&copy; 2017, Shaunna and Stef</p>
+    </div>
+  </footer>
+  <script type = "text/template" id="movie-template">
+    <h3><%- title %></h3>
+    <img src="<%- image_url %>"/>
+    <h4>Summary</h4><p><%- overview %></p>
+    <h4>Release Date</h4><p><%- release_date %></p>
+  </script>
+</body>
+</html>
diff --git a/spec/test_spec.js b/spec/test_spec.js
@@ -1,13 +1,31 @@
+import Movie from '../src/models/movie';
 
-describe('Sample spec', () => {
-  let a;
+describe('Movie Spec', () => {
+  let movie
 
-  it('and so is a spec', () => {
-    a = true;
+  it('Creates a valid instance of a movie.', () => {
+    movie = new Movie ({
+      title: 'A Street Cat Named Bob',
+      release_date: '2016-11-04',
+    })
 
-    expect(a).toBe(true);
+    expect(movie.isValid()).toEqual(true);
   });
-  xit('will not work', () => {
-    expect(false).toBe(true);
+
+  it('Returns invalid if title is not present.', () => {
+    movie = new Movie ({
+      release_date: '2016-11-04',
+    })
+
+    expect(movie.isValid()).toEqual(false);
+  });
+
+  it('Returns invalid if release date is not present.', () => {
+    movie = new Movie ({
+      title: 'A Street Cat Named Bob',
+    })
+
+    expect(movie.isValid()).toEqual(false);
   });
+
 });
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,39 @@
-import 'css/_settings.css';
+//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 Backbone from 'backbone';
+
+import Movie from './models/movie';
+import MovieList from './collections/movie_list';
+import MovieListView from './views/movie_list_view';
+
+// let movieTemplate;
+
+let movieList = new MovieList();
+
+let bus = {};
+bus = _.extend(bus, Backbone.Events);
+
 // ready to go
 $(document).ready(function() {
 
-  $('#main-content').append('<p>Hello World!</p>');
+  // movieList.fetch().done(() => {
+    const movieListView = new MovieListView({
+      model: movieList,
+      template: _.template($('#movie-template').html()),
+      el: 'main',
+      bus: bus,
+    })
+    movieListView.render();
+    // console.log(movieList);
+
+  // });
+
+
 
 });
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';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+
+  url: 'http://localhost:3000/movies',
+
+  parse(response) {
+    return response
+
+  },
+});
+
+export default MovieList;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,33 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  urlRoot:'http://localhost:3000/movies',
+
+  parse(response) {
+    return response
+  },
+
+  validate(attributes) {
+    const errors = {};
+    if (!attributes.title) {
+      errors['title'] = "Title is required!";
+    }
+
+    if (!attributes.release_date) {
+      errors['release_date'] = "Release date required!";
+    }
+
+    if (!attributes.hedwig) {
+      errors['hedwig'] = "Must have a cat!";
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
+
+});
+
+export default Movie;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,64 @@
+import $ from 'jquery';
+
+import Backbone from 'backbone';
+
+import MovieView from './movie_view';
+
+const MovieListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+    this.listenTo(this.bus, 'updateStatusMessage', this.statusMessage);
+  },
+
+  render(args) {
+    this.$('#rentals').empty();
+    this.model.each((movie) => {
+      const movieView = new MovieView({
+        model: movie,
+        template: this.template,
+        tagname: 'li',
+        className: 'rental',
+        bus: this.bus,
+      })
+      this.$('#rentals').append(movieView.render(args).$el);
+    })
+    return this;
+  },
+
+  events: {
+    'click button#btn-rentals': 'getRentals',
+    'click button#btn-search': 'searchDBMovies',
+  },
+
+  getRentals: function(e) {
+    e.preventDefault();
+    this.model.fetch().done(() => {
+      this.render({button: false});
+    })
+
+  },
+
+  searchDBMovies: function(e) {
+    e.preventDefault();
+    let searchWord = this.$('input[name=search-movies]').val();
+    this.model.fetch({ data: $.param({'query': searchWord}) }).done(() => {
+      if (this.model.length == 0) {
+        this.statusMessage('No Results Found!')
+      } else {
+        this.statusMessage(`${this.model.length} Results Found.`)
+      }
+      this.render({button: true});
+    })
+  },
+
+  statusMessage: function(statusMessage) {
+    this.$('#status-messages').empty();
+    this.$('#status-messages').html(`<h3>${statusMessage}</h3>`);
+  }
+
+});
+
+export default MovieListView;
+
+// collection.fetch({ data: $.param({ page: 1}) });
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,50 @@
+import Backbone from 'backbone';
+
+import Movie from '../models/movie';
+
+
+const MovieView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+  },
+
+  render(args) {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    if (args.button) {
+      this.$el.append('<button id="btn-add-to-lib">Add Me!</button>')
+    }
+    return this;
+  },
+
+  events: {
+    'click button#btn-add-to-lib': 'addLib',
+
+  },
+
+  addLib: function(e) {
+    e.preventDefault();
+    const newMovie = new Movie ({
+      title: this.model.get('title'),
+      release_date: this.model.get('release_date'),
+    })
+
+    newMovie.save({}, {
+      success: this.successSave.bind(this),
+      error: this.failSave.bind(this),
+    });
+  },
+
+  successSave: function(newMovie) {
+    const statusMessage = `${newMovie.attributes.title} added to rental list!`;
+    this.bus.trigger('updateStatusMessage', statusMessage);
+  },
+
+  failSave: function(newMovie) {
+    const statusMessage = `${newMovie.attributes.title} unable to add to rental list!`;
+    this.bus.trigger('updateStatusMessage', statusMessage);
+  },
+})
+
+export default MovieView;