Ada-C8 · s-wigg · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/Like.png b/dist/Like.png
diff --git a/dist/index.html b/dist/index.html
@@ -2,13 +2,45 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Backbone Baseline</title>
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,900" rel="stylesheet">
+    <title>VideoVideo</title>
   </head>
+  <header>
+    <h1>VideoStore</h1>
+
+    <section>
+      <form class='search-form'>
+        <input type='text' name='search' placeholder='Search' />
+        <input type="radio" id='inventory' name="search-type" value="search inventory"><label for="inventory">Search Inventory</label>
+        <input type="radio" id='imdb' name="search-type" value="search IMDB" checked><label for="imdb">Search IMDB</label>
+        <input type='submit' value='Search' class='button' id="searchButton"></input>
+      </form>
+    </section>
+  </header>
+
   <body>
     <main id="main-content">
-
+      <button id='movie-button' class='button'>All movies</button>
+      <button id='customer-button' class='button'>All customers</button>
+
+      <ul id='list'></ul>
     </main>
 
+    <script type="text/template" id="movie-template" class="movie">
+        <p><img class='movie-thumbnail' src='<%= image_url %>' /></p>
+        <h4><%- title %> <%- release_date !== null ? `(${release_date.substr(0,4)})` : release_date %></h4>
+        <p class='moviehover summary' style="display:none"><%- overview.substr(0,130) %>...</p>
+        <p class='moviehover details' style="display:none"><span style='color:<%= average_rating > 5 ? 'green' : 'red' %>'><%- average_rating %>/10 </span> <span class='rating'><%- rating %></span></p>
+        <p class='moviehover thumbs' style="display:none"><img class='like' src='http://res.cloudinary.com/laurarobertson/image/upload/v1513819840/Like_acfu0a.png'/></p>
+        <p class='moviehover thumbs' style="display:none"><img class='dislike' src='http://res.cloudinary.com/laurarobertson/image/upload/v1513819840/Like_acfu0a.png'/></p>
+        <button class='button add-inventory'>+</button>
+    </script>
+
+    <script type="text/template" id="customer-template" class="customer">
+        <h3><%- name %></h3>
+        <p><%- phone %></p>
+    </script>
+
     <script src="/app.bundle.js"></script>
 
   </body>

diff --git a/spec/models/movie_spec.js b/spec/models/movie_spec.js
@@ -0,0 +1,22 @@
+import Movie from 'models/movie';
+
+describe('Movie spec', () => {
+  let movie;
+  beforeEach(() => {
+    movie = new Movie({
+      title: 'HELLO',
+    });
+  });
+
+  describe('movie validations', () => {
+
+    it('movie is valid with a title', () => {
+      expect(movie.isValid()).toEqual(true);
+    });
+
+    it('movie invalid without title', () => {
+      movie.set('title', '');
+      expect(movie.isValid()).toEqual(false);
+    });
+  });
+});
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,50 @@
 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 MovieList from 'collections/movie_list';
+import CustomerList from 'collections/customer_list';
+
+import MovieListView from 'views/movie_list_view';
+import CustomerListView from 'views/customer_list_view';
+
+import './css/styles.css';
 
 // ready to go
 $(document).ready(function() {
 
-  $('#main-content').append('<p>Hello World!</p>');
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
+
+  // movies
+  const movies = new MovieList();
+  movies.fetch();
+
+  const movieListView = new MovieListView({
+    model: movies,
+    template: _.template($('#movie-template').html()),
+    bus: bus,
+    el: 'body'
+  });
+
+  // customers
+  const customers = new CustomerList();
+  customers.fetch();
+
+  const customerListView = new CustomerListView({
+    model: customers,
+    template: _.template($('#customer-template').html()),
+    el: 'main'
+  });
+
+  $('body').on('mouseenter', 'li', function() {
+    $(this).find('.moviehover').fadeIn(200);
+  });
 
+  $('body').on('mouseleave', 'li', function() {
+    $(this).find('.moviehover').fadeOut(200);
+  });
 });
diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Customer from '../models/customer';
+
+const CustomerList = Backbone.Collection.extend({
+  model: Customer,
+  url: 'http://localhost:3000/customers',
+  parse(response) {
+    return response;
+  },
+});
+
+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',
+  parse(response) {
+    return response;
+  },
+
+});
+
+export default MovieList;
diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Rental from '../models/rental';
+
+const RentalList = Backbone.Collection.extend({
+  model: Rental,
+});
+
+export default RentalList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,44 +1,124 @@
 @include foundation-everything;
 
-main {
-    background: lightblue;
+/* General styling */
+
+body {
+  text-align: center;
+  background: #141414;
+}
+
+h1, h2, h3, h4, h5, p,[type='radio'] + label[for] {
+  font-family: 'Raleway', sans-serif;
+  color: #e5e5e5;
 }
 
+h4 {
+  height: 80px;
+  font-size: 1.2em;
+  overflow: hidden;
+}
+
+/* Header */
+
 header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+  max-width: 600px;
+  margin: 20px auto;
+}
+
+/* List styling */
+
+li {
+  margin: 30px;
+  display: inline-block;
+  list-style: none;
+  position: relative;
+  max-width: 185px;
+  transition: all .1s ease-in-out;
+}
+
+li:hover {
+transform: scale(1.1);
 }
 
-#completed-checkbox {
-  display: inline;
+img {
+  height: 276px;
+  border-radius: 2px;
 }
 
-label {
-  display: inline;
+.summary {
+  font-size: 0.9em;
+  line-height: 1.3em;
+  padding: 80px 10px 0;
+  border-radius: 2px;
+  height: 276px;
+  position:absolute;
+  overflow: hidden;
+  top: 0;
+  left: -1px;
+  right: -1px;
+  background: rgba(0,0,0,0.8);
 }
 
-button.success {
-  margin-right: 1.2rem;
-  display: inline;
+
+/* Movie */
+
+.add-inventory {
+  font-weight: bolder;
+  padding: 7px 11px 9px;
+  background: rgba(255,0,0,0.6);
+  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  border-radius: 50%;
+}
+
+.add-inventory:hover {
+  background: rgba(255,0,0,0.85);
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
+.details {
+  font-size: 0.85em;
+  padding-left: 10px;
+  text-align: left;
+  position: absolute;
+  width: 100%;
+  bottom: 95px;
+  font-weight: bold;
 }
-aside label {
-  color: #FFFFFF;
+
+.rating {
+  font-weight: normal;
+  color: rgba(255,255,255,0.5);
+  margin-left: 3px;
+  padding: 2px 3px;
+  border: 1px solid rgba(255,255,255,0.5);
 }
 
-.completed {
-  text-decoration: line-through;
+.thumbs {
+  position: absolute;
+  right: 8px;
+  bottom: 95px;
 }
 
-div {
-  display: inline;
+.like, .dislike {
+  border: 1px solid rgba(255,255,255,0.4);
+  background: rgba(0,0,0,0.4);
+  border-radius: 50%;
+  padding: 5px;
+  width: 24px;
+  height: 24px;
 }
-/*
-* {
-  border-style: solid;
+
+.dislike {
+  transform: rotate(180deg);
 }
-*/
+
+.like {
+  margin-top: -60px;
+}
+
+/* Customer */
+
+
+/* Footer */
diff --git a/src/models/customer.js b/src/models/customer.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+
+const Customer = Backbone.Model.extend({
+  initialize(attributes) {
+  },
+  validate(attributes) {
+  }
+});
+
+export default Customer;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+
+
+const Movie = Backbone.Model.extend({
+  initialize(attributes) {
+    this.title = this.attributes.title;
+    this.bus = this.bus
+    this.attributes.upperCaseTitle = this.title.toUpperCase();
+  },
+  validate(attributes) {
+    const errors = {};
+
+    if (!attributes.title) {
+      errors['title'] = ['Title is required'];
+    }
+    if ( Object.keys(errors).length > 0 ) {
+      return errors;
+    } else {
+      return false;
+    }
+  }
+});
+
+export default Movie;
diff --git a/src/models/rental.js b/src/models/rental.js
@@ -0,0 +1,17 @@
+import Backbone from 'backbone';
+
+
+const Rental = Backbone.Model.extend({
+  initialize(attributes) {
+  },
+  validate(attributes) {
+    const errors = {};
+
+    if (!attributes.due_date) {
+      errors['due_date'] = ['Due Date is required'];
+    }
+  }
+
+});
+
+export default Rental;
diff --git a/src/views/customer_list_view.js b/src/views/customer_list_view.js
@@ -0,0 +1,30 @@
+import Backbone from 'backbone';
+import CustomerView from './customer_view';
+
+const CustomerListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+
+  },
+  render() {
+    // console.log('IN RENDER');
+    // console.log(this.model);
+    this.$('#list').empty();
+
+    this.model.each((customer) => {
+      const customerView = new CustomerView({
+        model: customer,
+        template: this.template,
+        tagName: 'li',
+        className: 'customer',
+      });
+      this.$('#list').append(customerView.render().$el);
+  })
+  return this;
+},
+  events: {
+    'click #customer-button': 'render',
+  }
+});
+
+export default CustomerListView;