Ada-C7 · Sofia15 · Jun 13, 2017 · Jun 13, 2017 · Jun 14, 2017 · Jun 14, 2017
diff --git a/.gitignore b/.gitignore
@@ -71,3 +71,5 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+.env
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,12 +1,44 @@
 @include foundation-everything;
 
 main {
-    background: lightblue;
+    background: lightgrey;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: darkblue;
   padding: 0.5rem;
+  color: white;
+  align-content: center;
+}
+
+#to-the-right {
+  /*float: right;*/
+  font-family: cursive;
+}
+
+#word-to-search {
+  font-size: 2em;
+  color: darkblue;
+  font-style: italic;
+}
+
+.search-movie {
+  float: right;
+  /*padding: 20px;*/
+  /*margin: right 50px;*/
+  margin:  20px;
+
+}
+
+.add-movie {
+
+}
+
+li {
+  font-size: 2em;
+  color: darkblue;
+  font-style: oblique;
+  font-family: fantasy;
 }
 
 #completed-checkbox {

diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/_settings.css">
-    <link rel="stylesheet" type="text/css" href="css/foundation.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
-  </html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="css/_settings.css">
+  <link rel="stylesheet" type="text/css" href="css/foundation.css">
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
+  <title>Backbone Baseline</title>
+</head>
+<body>
+
+  <header>
+    <h1>Movies!!</h1>
+  </header>
+  <main>
+    <form class="search-movie-form">
+      <div class="medium-12 columns">
+        <label for="name"><p id="word-to-search">Type a word to find movies relate with it</p></label>
+        <input type="text" name="title"></input>
+      </div>
+      <button type="button" class="search-movie button">Search</button>
+
+    </form>
+    <section id='movie' class="row"></section>
+    <section id='movie-list' class="row">
+      <ul class="movie-cards row"> </ul>
+    </section>
+    <section id='new-movie'></section>
+  </main>
+
+  <!-- TEMPLATES -->
+
+  <script id="movie-search-card-template" type="text/template">
+    <div class="columns small-12 medium-6 large-3">
+      <li><%- movie.title %></li>
+      <img src = "<%- movie.image_url %>" />
+      <button type="button" class="add-movie button">add</button>
+    </div>
+  </script>
+
+  <script id="movie-card-template" type="text/template">
+    <ul>
+      <div class="columns small-12 medium-6 large-3">
+        <li> <%- movie.title %></li>
+        <img src = "<%- movie.image_url %>" />
+        <p id='to-the-right'> Overview: <%- movie.overview %></p>
+        <button type="button" class="checkout-movie button">Check out</button>
+        <button type="button" class="checkin-movie button">Check in</button>
+        <button type="button" class="add-movie button">add</button>
+
+      </div>
+    </ul>
+  </script>
+
+  <script src="/app.bundle.js"></script>
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,12 +1,31 @@
-// /src/app.js
 
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
+import MovieList from './collections/movie_list';
+import MovieListView from './views/movie_list_view';
+import VideoStore from './models/video_store';
+
+
 $(document).ready(function() {
 
-  $('section.main-content').append('<p>Hello World!</p>');
+  var movieList = new MovieList();
+  movieList.fetch();
+
+  var searchList = new MovieList();
+
+  var videoStore = new VideoStore({
+    library: movieList,
+    searchResults: searchList
+  });
+
+  var movieListViewParams = {
+    el: $('main'),
+    model: videoStore
+  };
+
+  var myMovieListView = new MovieListView(movieListViewParams);
+  myMovieListView.render();
+  //initializing a new view
 
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,20 @@
+import Backbone from 'backbone';
+
+import Movie from '../models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  initialize: function() {
+    this.query = undefined;
+  },
+  url: function() {
+    var url = "http://localhost:3000/movies";
+    if (this.query !== undefined) {
+      return url + "?query=" + this.query;
+    } else {
+      return url;
+    }
+  }
+});
+
+export default MovieList;
diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+import Rental from '../models/rental';
+
+var RentalsList = Backbone.Collection.extend({
+  model: Rental,
+
+  url: 'http://localhost:3000/rentals/',
+
+  overdueUrl: function() {
+    this.url = this.url + "overdue";
+    return this;
+  }
+
+});
+
+export default RentalsList;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+  initialize: function() {
+    // console.log("Created new movie");
+  }
+});
+
+export default Movie;
diff --git a/src/models/rental.js b/src/models/rental.js
@@ -0,0 +1,28 @@
+import Backbone from 'backbone';
+
+var Rental = Backbone.Model.extend({
+
+  url: 'http://localhost:3000/rentals/',
+
+  initialize: function(params) {
+    if (!this.has('due_date')) {
+      var dueDate= new Date();
+      dueDate.setDate(dueDate.getDate() + 5);
+      this.set('due_date', dueDate);
+    }
+  },
+
+  checkoutUrl: function(movieTitle){
+    this.url = this.url + movieTitle + "/check-out";
+    console.log("Inside of checkoutUrl");
+    return this;
+  },
+
+  checkinUrl: function(movieTitle){
+    this.url = this.url + movieTitle + "/return";
+    console.log("Inside of checkinUrl");
+    return this;
+  }
+});
+
+export default Rental;
diff --git a/src/models/video_store.js b/src/models/video_store.js
@@ -0,0 +1,11 @@
+
+import Backbone from 'backbone';
+
+var VideoStore = Backbone.Model.extend({
+  initialize: function(params) {
+    // this.set("library", params.library);
+    // this.set("searchResults", params.searchResults);
+  }
+});
+
+export default VideoStore;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,111 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import MovieView from './movie_view';
+import Movie from '../models/movie';
+
+var MovieListView = Backbone.View.extend({
+
+  initialize: function(params) {
+    this.movieTemplate = _.template($('#movie-card-template').html());
+    this.movieSearchTemplate = _.template($('#movie-search-card-template').html());
+
+    this.movieList = [];
+
+    this.model.get("library").forEach(function(rawMovie){
+      this.addMovie(rawMovie);
+    }, this);
+
+    this.input = {
+      title: this.$('.search-movie-form input[name="title"]')
+    };
+
+    this.listenTo(this.model.get("library"), 'add', this.addMovie);
+    this.listenTo(this.model.get("library"), 'update', this.render);
+
+    this.searchList = [];
+
+    this.listenTo(this.model.get("searchResults"), 'add', this.addSearchResult);
+    this.listenTo(this.model.get("searchResults"), 'update', this.render);
+
+    this.showSearchResults = false;
+
+  },
+
+  render: function() {
+    $('#movie-list').empty();
+    var movieList;
+    if (this.showSearchResults){
+      movieList = this.searchList;
+    } else {
+      movieList = this.movieList;
+    }
+
+    movieList.forEach(function(movie){
+      movie.render();
+      $('#movie-list').append(movie.$el);
+      // this.$('#movie-list').append(MovieView.render().$el);
+      this.listenTo(movie, 'add', this.addToLibrary);
+    }, this);
+    return this;
+  },
+
+  addToLibrary: function(movie) {
+    var that = this;
+    movie.save(undefined, {
+      success: function(){
+        that.showSearchResults = false;
+        that.model.get('library').fetch();
+      }
+    });
+
+  },
+
+  addMovie: function(movie){
+    var movie = new MovieView ({
+      model: movie,
+      template: this.movieTemplate
+    });
+    this.movieList.push(movie);
+  },
+
+  addSearchResult: function(movie){
+    var movie = new MovieView ({
+      model: movie,
+      template: this.movieSearchTemplate
+    });
+    this.searchList.push(movie);
+  },
+
+  events: {
+    'click .search-movie': 'searchMovie',
+  },
+
+  getInput: function() {
+    var movie = {
+      title: this.input.title.val()
+    };
+    return movie;
+  },
+
+  searchMovie: function(movie) {
+    this.searchList = [];
+    this.showSearchResults = true;
+    this.model.get("searchResults").query = this.getInput()["title"];
+    this.model.get("searchResults").fetch();
+
+    // var _this = this;
+    // var searchMovie = new SearchMovie([], {query:this.getInput()["title"]});
+    // searchMovie.fetch({
+    //   success: function(collection, response, options){
+    //     var movie = collection.shift();
+    //     _this.addMovie(movie);
+    //     _this.render();
+    //     // $('#movie-list').append(movie.$el);
+    //   }
+    // });
+
+  }
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,30 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+var MovieView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'change', this.render);
+    // this.render();
+  },
+
+  render: function() {
+    var html = this.template({movie: this.model.attributes});
+    this.$el.html(html);
+    this.delegateEvents();
+    return this;
+  },
+
+  events: {
+    'click .add-movie': 'addMovieRental'
+  },
+
+  addMovieRental: function() {
+    this.trigger('add', this.model);
+    event.stopPropagation();
+  }
+
+});
+
+export default MovieView;
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,3 +71,5 @@ Icon @@
     Network Trash Folder
     Temporary Items
     .apdisk
+    .env