Ada-C7 · secretsharer · Jun 19, 2017 · Jun 19, 2017 · Jun 19, 2017 · Jun 19, 2017
diff --git a/build/index.html b/build/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+<main>
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/_settings.css">
@@ -9,7 +10,31 @@
   </head>
   <body>
 
-    <script src="/app.bundle.js"></script>
+    <section id="search-bar" class="center">
+      <label><input type="text" id="query" placeholder="Search for movies to add to the library"></input>
+      </label>
+      <button id="search"class="button">Search</button>
+
+    </section>
+
+    <section id="movie-list"></section>
+
 
   </body>
-  </html>
+</main>
+
+<script id="movie-card-template" type="text/template">
+  <p class="movie-title"><%-title%></p>
+  <p><%- release_date %></p>
+  <img src=<%- image_url %> alt=<% title %></img>
+</script>
+
+<script id="new-movie-card-template" type="text/template">
+  <p class="movie-title"><%-title%></p>
+  <p><%- release_date %></p>
+  <img src=<%- image_url %> alt=<% title %></img>
+  <button id="Add-to-library" class="button">Add to library</button>
+</script>
+
+<script src="/app.bundle.js"></script>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,12 +1,24 @@
-// /src/app.js
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import RentalLibrary from './collections/rentalLibrary';
+import RentalLibraryView from './views/rentalLibraryView';
+
+
+var rentalList = new RentalLibrary();
+rentalList.fetch();
+
+var libraryView = new RentalLibraryView({
 
-  $('section.main-content').append('<p>Hello World!</p>');
+  model: rentalList,
+  template: _.template($('#movie-card-template').html()),
+  el: 'main'
+});
+
+
+
+$(document).ready(function() {
+libraryView.render();
 
+
 });
diff --git a/src/collections/rentalLibrary.js b/src/collections/rentalLibrary.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+//for collections the instatiation is diff
+var RentalLibrary = Backbone.Collection.extend({
+
+model: Movie,
+url: 'http://localhost:3000/movies'
+});
+
+export default RentalLibrary;
diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+
+var SearchResults = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies?'
+});
+
+export default SearchResults;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+
+    initialize: function(params) {
+
+},
+//url is the default route tht fetch goes to on the model
+url: 'http://localhost:3000/movies'
+
+});
+
+export default Movie;
diff --git a/src/views/movieView.js b/src/views/movieView.js
@@ -0,0 +1,40 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+//templating
+import _ from 'underscore';
+//the power to select any html element within js, uing a dollar sign and then access additional methods
+import $ from 'jquery';
+
+
+var MovieView = Backbone.View.extend({
+
+  initialize: function(params){
+    this.template = params.template;
+    this.listenTo(this.model, "change", this.render);
+  },
+
+  render: function(){
+    var compiledTemplate = this.template(this.model.toJSON() );
+    //put the above in this particular view object's`el`, we assign 'el' to the html element we're working in - jq .html
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+
+  events: {
+    "click #Add-to-library": "add",
+
+  },
+
+  add: function(){
+    console.log(this.model);
+    this.model.save();
+  }
+
+
+
+
+});
+
+
+
+export default MovieView;
diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js
@@ -0,0 +1,57 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import RentalLibrary from '../collections/rentalLibrary';
+import MovieView from './movieView';
+import SearchResults from '../collections/searchResults';
+import SearchResultsView from './searchResultsView';
+//templating
+import _ from 'underscore';
+//the power to select any html element within js, uing a dollar sign and then access additional methods
+import $ from 'jquery';
+
+//for initializing any backbone view:
+
+var RentalLibraryView = Backbone.View.extend( {
+
+  initialize: function(params) {
+    this.template = params.template;
+  },
+
+  render: function(){
+    this.$('#movie-list').empty();
+
+    var that = this;
+    this.model.each(function(movie) {
+      var movieView = new MovieView ({
+        model: movie,
+        template: that.template
+      });
+
+      that.$('#movie-list').append(movieView.render().el);
+    });
+  },
+
+  events: {
+    "click #search": "search",
+    "click #logo": "render"
+  },
+
+  search: function(){
+    // console.log("hi");
+    //getting the query term from the search background
+    var query = this.$("#query").val();
+    //creating a new instance of search result and calling the rails api for the data
+    var searchResults = new SearchResults();
+    searchResults.fetch({ data: $.param({ query }) });
+    console.log(searchResults);
+    // console.log( $.param({ query }) );
+    //var query here is what we're passing to the fetch argument and will add "queryterm" onto url
+    var searchResultsView = new SearchResultsView({
+      model: searchResults,
+      template: _.template($('#new-movie-card-template').html()),
+      el: 'main'
+    });
+  },
+});
+
+export default RentalLibraryView;
diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js
@@ -0,0 +1,37 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import MovieView from './movieView';
+//templating
+import _ from 'underscore';
+//the power to select any html element within js, uing a dollar sign and then access additional methods
+import $ from 'jquery';
+
+var SearchResultsView = Backbone.View.extend({
+
+  initialize: function(params){
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render: function(){
+    this.$('#movie-list').empty();
+
+    var that = this;
+
+    this.model.each(function(movie) {
+      var movieView = new MovieView ({
+        model: movie,
+        template: that.template
+      });
+
+      that.$('#movie-list').append(movieView.render().el);
+    });
+  },
+
+  events: {
+
+  }
+
+});
+
+export default SearchResultsView;