Ada-C8 · Guribot · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,89 @@
 <!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>Video Store</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Comfortaa|Fredoka+One|Monoton" rel="stylesheet">
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Video Store</h1>
+    </div>
+  </header>
+  <main id="main-content">
+    <nav id="nav-bar" class="container">
+      <h2>Menu</h2>
+      <ul>
+        <li>
+          <form class="search" id="search">
+            <input type="text" name="query" />
+            <input type="submit" value="Search" />
+          </form>
+        </li>
+        <li>
+          <form class="new-movie" id="new-movie" style="display: none">
+            <span id="error-box"></span>
+            <label for="title">Title</label>
+            <input type="text" name="title" />
+            <label for="title">Release Date</label>
+            <input type="text" name="release_date" />
+            <label for="title">Overview</label>
+            <input type="text" name="overview" />
+            <label for="title">Inventory</label>
+            <input type="text" name="inventory" />
+            <input type="submit" />
+          </form>
+          <a class="button add-btn">Add Movie</a>
+        </li>
+      </ul>
+    </nav>
+
+    <section id="movie-container" class="container">
+      <h2>Movies</h2>
+      <ul id="movie-list">
+
+      </ul>
+    </section>
+
+  </main>
+
+  <script src="/app.bundle.js"></script>
+
+  <script id="movie-template" type="text/template">
+    <p>
+      <strong class="name"><%- title %></strong>
+    </p>
+    <nav class="movie-options">
+      <ul>
+        <li>
+          Check Out |
+        </li>
+        <li>
+          Check In
+        </li>
+      </ul>
+    </nav>
+  </script>
+
+  <script id="movie-detail-template" type="text/template">
+    <div class="movie-detail" style="display: none;">
+      <ul>
+        <li>
+          <strong>Release Date: </strong> <%- release_date %>
+        </li>
+        <li>
+          <strong>Inventory: </strong> <%- inventory %>
+        </li>
+        <li>
+          <strong>Available: </strong> <%- available_inventory %>
+        </li>
+        <li>
+          <strong>Description: </strong> <%- overview %>
+        </li>
+      </ul>
+    </div>
+  </script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "backbone": "^1.3.3",
     "foundation-sites": "^6.4.4-rc1",
     "jquery": "^3.2.1",
+    "jquery-serializejson": "^2.8.1",
     "underscore": "^1.8.3"
   }
 }
diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,107 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
+// Our stuff
+import Movie from 'models/movie';
+import MovieList from 'collections/movie_list';
+import MovieView from 'views/movie_view';
+import MovieListView from 'views/movie_list_view';
+
+let movieTemplate;
+let movieListView;
+let movieDetailTemplate;
+
+const movieList = new MovieList();
+
+const movieSearch = function movieSearch(e) {
+  e.preventDefault();
+
+  const query = $('#search input[name="query"]').val();
+
+  const searchList = new MovieList(
+    {
+      query: query,
+    }
+  );
+
+  searchList.fetch({
+    success: () => {
+      const newView = new MovieListView({
+        model: searchList,
+        template: movieTemplate,
+        detail_template: movieDetailTemplate,
+        el: $('#movie-list'),
+      });
+      newView.render();
+    }
+  });
+};
+
+const addMovie = function addMovie(e) {
+  e.preventDefault();
+
+  const error_box = $('#error-box');
+  error_box.html('');
+  let formInfo = $('#new-movie').serializeArray();
+  formInfo = arrayToJSON(formInfo);
+  const movie = new Movie(formInfo);
+  if (movie.isValid()) {
+    movie.save({}, {
+      success: () => {
+        console.log("this is working");
+        movieList.add(movie);
+      },
+      error: (e, r) => {
+        displayMovieFormErrors(r.responseJSON['errors']);
+      }
+    });
+  } else {
+    displayMovieFormErrors(movie.validationError);
+  }
+};
+
+const displayMovieFormErrors = function displayMovieFormErrors(errors) {
+  const error_box = $('#error-box');
+  for (let field in errors) {
+    for (let error of errors[field]) {
+      error_box.append(`<p>${field}: ${error}</p>`);
+    }
+  }
+};
+
+const arrayToJSON = function arrayToJSON(arr) {
+  const output = {};
+  arr.forEach((item) => {
+    if (item.value) {
+      output[item.name] = item.value;
+    }
+  });
+  return output;
+};
+
 // ready to go
 $(document).ready(function() {
+  movieTemplate = _.template($('#movie-template').html());
+  movieDetailTemplate = _.template($('#movie-detail-template').html());
+
+  movieList.fetch({
+    success: () => {
+      movieListView = new MovieListView({
+        model: movieList,
+        detail_template: movieDetailTemplate,
+        template: movieTemplate,
+        el: $('#movie-list'),
+      });
+      movieListView.render();
+    },
+  });
+
+  $('#search').on('submit', movieSearch);
 
-  $('#main-content').append('<p>Hello World!</p>');
+  $('.add-btn').on('click', () => {
+    $('.add-btn').hide(200);
+    $('#new-movie').show(500);
+  });
 
+  $('#new-movie').on('submit', addMovie);
 });
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';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: function() {
+    console.log("building URL...");
+    return 'http://localhost:3000/movies' + this.query;
+  },
+
+  initialize(params) {
+    if (params){
+      this.query = params.query ? `/search?query=${params.query}` : '';
+    } else {
+      this.query = '';
+    }
+  },
+});
+
+export default MovieList;