Ada-C8 · tanham · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -3,12 +3,56 @@
   <head>
     <meta charset="utf-8">
     <title>Backbone Baseline</title>
+    <link href="https://fonts.googleapis.com/css?family=Fredoka+One|Zilla+Slab+Highlight" rel="stylesheet">
+
   </head>
   <body>
     <main id="main-content">
-
+      <header>
+        <div class="banner">
+          <img src="https://images.sharefaith.com/images/3/1357769977215_16/img_mouseover3.jpg" alt="">
+          <!-- https://images.sharefaith.com/images/3/1357769977215_16/img_mouseover3.jpg -->
+          <!-- https://png.pngtree.com/thumb_back/fw800/back_pic/00/08/99/54562c75a6cc051.jpg -->
+        </div>
+        <h2>Video Store</h2>
+
+        <button type="button" name="button" class="button" id="our-movies">Our Movies</button>
+        <button type="button" name="button" class="button" id="all-movies">All Movies</button>
+      </header>
+
+
+
+      <div id="search-form"></div>
+
+      <div id='movies-container'>
+
+        <ul id='movies-list'>
+
+        </ul>
+      </div>
+
     </main>
 
+
+    <script type="text/template" id="movie-template">
+      <h3 class="title"><%- title %></h3>
+      <div class="detail">
+        <p>
+          <span class="overview"><%- overview %></span>
+        </p>
+      </div>
+      <!-- <button class="btn-cancel button secondary">Cancel</button> -->
+    </script>
+
+    <script type="text/template" id="form-template">
+      <h3>Search all movies</h3>
+      <form>
+        <label for="search-movies">Find Movie:</label>
+        <input type="text" name="search-movies" />
+        <button class="button" id="submit">Submit</button>
+      </form>
+    </script>
+
     <script src="/app.bundle.js"></script>
 
   </body>

diff --git a/movie.jpg b/movie.jpg
diff --git a/src/app.js b/src/app.js
@@ -5,10 +5,34 @@ import './css/styles.css';
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import Backbone from 'backbone'
+
+import MovieList from 'collections/movie_list';
+import MovieListView from './views/movie_list_view';
+import MainView from 'views/main_view';
+
+
+let movieTemplate;
 
 // ready to go
 $(document).ready(function() {
+  // $('#main-content').append('<p>Hello World!</p>');
+  // let bus = {};
+  // bus = _.extend(bus, Backbone.Events)
+
+  // const quotes = new QuoteList(quoteData, {bus: bus, data: 'hello from options'});
+  const movieList = new MovieList();
+  // movieList.fetch();
+
+  movieTemplate = _.template($('#movie-template').html());
+
+
+  const mainView = new MainView({
+    el: '#main-content',
+    movieTemplate: movieTemplate,
+    formTemplate: _.template($('#form-template').html()),
+    movieList: movieList,
+  });
 
-  $('#main-content').append('<p>Hello World!</p>');
 
 });
diff --git a/src/collections/external_movie_list.js b/src/collections/external_movie_list.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+import Movie from 'models/movie';
+import MovieList from 'collections/movie_list';
+
+const ExternalMovieList = MovieList.extend({
+  initialize (attributes) {
+    this.title = attributes.title;
+  },
+  url() {
+    console.log(this.baseUrl);
+    return this.baseUrl + `/?query=${ this.title }`
+  },
+
+});
+
+export default ExternalMovieList;
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  baseUrl: 'http://localhost:3000/movies',
+  url() {
+    return this.baseUrl
+  }
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,11 +1,16 @@
 @include foundation-everything;
 
+body {
+  /* font-family: 'Zilla Slab Highlight', cursive; */
+}
+
 main {
-    background: lightblue;
+    font-family: 'Fredoka One', cursive;
+    background: FFFFFF;
 }
 
 header {
-  background-color: lightgreen;
+  /* background-color: #ca412b; */
   padding: 0.5rem;
 }
 
@@ -37,8 +42,27 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+#main-content {
+  text-align: center;
+}
+
+#main-content h2 {
+  margin-top: 40px;
+  font-family: 'Fredoka One', cursive;
+
+}
+
+li {
+  list-style: none;
+}
+
+form {
+  margin: 0 auto;
+  width: 75%;
+}
+
+img {
+  width: 100%;
+  height: 400px;
 }
-*/
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  url: 'http://localhost:3000/movies',
+});
+
+export default Movie;
diff --git a/src/views/main_view.js b/src/views/main_view.js
@@ -0,0 +1,62 @@
+import Backbone from 'backbone';
+import MovieView from './movie_view';
+import Movie from '../models/movie';
+import MovieListView from './movie_list_view';
+import ExternalMovieList from '../collections/external_movie_list';
+
+const MainView = Backbone.View.extend({
+  initialize(params) {
+    this.movieTemplate = params.movieTemplate;
+    this.formTemplate = params.formTemplate;
+    this.movieList = params.movieList;
+  },
+  events: {
+    'click button#our-movies' : 'renderOurMovies',
+    'click button#all-movies' : 'renderForm',
+    'click button#submit' : 'renderAllMovies',
+  },
+  renderOurMovies() {
+    this.$('#search-form').html('');
+    this.$('#movies-list').empty();
+
+    const movieListView = new MovieListView({
+      el: '#movies-container',
+      model: this.movieList,
+      template: this.movieTemplate,
+    });
+
+    movieListView.model.fetch();
+  },
+  renderForm() {
+    this.$('#movies-list').empty();
+    this.$('#search-form').html(this.formTemplate);
+  },
+  renderAllMovies(event) {
+    event.preventDefault();
+    const title = this.$('form input').val();
+    this.$('#movies-list').html('<h3> Searching...</h3>');
+    this.search(title);
+
+  },
+
+  search(title) {
+    let externalMovieList = new ExternalMovieList({
+      title: title
+    });
+
+    // this.$('#movies-list').empty();
+    const movieListView = new MovieListView({
+      el: '#movies-container',
+      model: externalMovieList,
+      template: this.movieTemplate,
+      external: true
+    });
+
+    movieListView.model.fetch();
+  },
+});
+
+
+
+
+export default MainView;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,38 @@
+import Backbone from 'backbone';
+import MovieView from './movie_view';
+import Movie from '../models/movie';
+
+const MovieListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.external = params.external;
+
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render() {
+    this.$('#movies-list').empty();
+
+    if (this.model.length === 0) {
+      this.$('#movies-list').append('<h3> No results found, please try again. </h3>')
+    }
+
+    this.model.each((movie) => {
+      // if (this.movieList.contains(movie)) {
+        // console.log(movie);
+      // }
+      const movieView = new MovieView({
+        model: movie,
+        template: this.template,
+        external: this.external,
+        tagName: 'li',
+        className: 'movie',
+      });
+      this.$('#movies-list').append(movieView.render().$el);
+    });
+
+    return this;
+  },
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,45 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.external = params.external;
+    // this.bus = params.bus;
+    // this.listenTo(this.model, 'change', this.render); //superfluous?
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+
+    this.$el.html(compiledTemplate);
+
+    if (this.external) {
+      this.$el.append('<button class="button add-movie">Add Me</button>')
+    }
+
+    return this
+  },
+
+  events: {
+    'click button.add-movie': 'addMovie',
+  },
+
+  addMovie(event) {
+    // console.log(this);
+    this.model.save({}, {
+      success: (model, response) => {
+        console.log('success');
+        // console.log(model);
+        console.log(response);
+      },
+      error: (model, response) => {
+        console.log('error');
+        // console.log(model);
+        console.log(response.responseText);
+      }
+    });
+  },
+});
+
+
+export default MovieView;