Ada-C8 · kimpossible1 · 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,93 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-    <main id="main-content">
-
+<head>
+  <meta charset="utf-8">
+  <title>Backbone Baseline</title>
+</head>
+<body>
+  <header class="page-header">
+    <!-- HERO SECTION -->
+    <section class="hero">
+      <h1>
+        Video Store :)
+      </h1>
+    </section>
+    <!-- NAVIGATION -->
+    <nav class="topnav top-bar" role="navigation">
+      <button class="active button" href="#customers">Customers</a>
+      <button class="button">Rentals</a>
+      <button class = "button view-library">Movie Library</button>
+    </nav>
+  </section>
+  </header>
+    <main>
+      <form id="search-form">
+        <input id="movie-field" type="text" name="filter" placeholder="Search the Movie Database..." >
+        <input type="submit" value="submit" name="button" class="movie-filter">
+      </form>
+
+      <!-- The Modal -->
+
+
+
+      <span id="myModal" class="modal hidden">
+
+        <!-- Modal content -->
+
+        <div class="modal-content">
+          <button class="close button">&times;</button>
+          <p class='display-status'></p>
+
+        </div>
+
+      </span>
+
+
+      <h2 id="header"></h2>
+      <section id="main-content">
+        <div class="list-view" id= "search-list">
+
+        </div>
+        <div class="grid-x">
+        <div class="large-12 cell" id="movie-list" class="list-view">
+        </div>
+      </div>
+
+      </section>
+
     </main>
+    <script type="text/template" id="movie-template">
+
+      <div id="single-movie">
+        <h3 class="title"><%- title %></h3>
+        <p class="overview"><%- overview %></p>
+
+        <p class="release-date"><%- release_date %></p>
+        <% if( typeof image_url !== 'undefined'){ %>
+          <img  src= <%- image_url %> alt= <%- title %>  />
+          <% }%>
+          <div class="movie-actions">
+            <% if( typeof available_inventory !== 'undefined'){ %>
+
+              <p class="available_inventory">Qty: <%- available_inventory %></p>
+              <button class="btn-rent alert button" id="rent-movie-button">Rent Movie</button>
+
+            </div>
+            <% }else if(typeof id !== 'undefined' ){ %>
+              <button class="btn-show alert button" id="show-movie-button">Learn More</button>
+              <% }else{ %>
+                <p>
+
+                Sorry, this movie is not currently in the inventory.
+              </p>
+                <button class="btn-add alert button" id="add-movie-button">Add to Library</button>
+
+                <% } %>
+        </div>
 
-    <script src="/app.bundle.js"></script>
+            </script>
+            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+            <script src="/app.bundle.js"></script>
 
-  </body>
-  </html>
+          </body>
+          </html>
diff --git a/src/app.js b/src/app.js
@@ -5,10 +5,32 @@ import './css/styles.css';
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import MovieList from './collections/movie_list';
+import Movie from './models/movie';
+import MovieListView from './views/movie_list_view';
+import MovieView from './views/movie_view';
 
+let movieTemplate;
 // ready to go
+const movieList = new MovieList();
+
+
 $(document).ready(function() {
+  movieTemplate = _.template($('#movie-template').html());
+  $('.view-library').on( "click", function() {
+    event.preventDefault();
+    movieList.fetch();
+  });
+
+
+  const movieListView = new MovieListView({
+    el:'main',
+    model: movieList,
+    template: movieTemplate,
+  });
 
-  $('#main-content').append('<p>Hello World!</p>');
 
+  movieList.fetch({
+    success: function(collection, response){}
+  });
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,21 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+
+  //TODO: put in correct comparator // I don't think we need this
+  comparator: 'title',
+
+  fetchSearch: function (query, options) {
+    options = options || {};
+
+    options.data = {query: query['query']}
+
+    return this.fetch(options);
+
+  },
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,12 +1,44 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Bungee|Gudea|Volkhov');
+.hero {
+  background: url("https://images.unsplash.com/photo-1501141178950-e7fa06e4adf5?auto=format&fit=crop&w=1050&q=80")
+  no-repeat;
+  background-size: cover;
+  height: 300px;
+  width: 100%;
+  /* background-color: black; */
+  margin: 0;
+  color: white;
+  /* box-sizing: content-box; */
+  padding: 1% 5% 2% 5%;
+  text-align: center;
+  /* opacity: 1.2; */
+  /* background-color: black; */
+}
+.hero h1{
+  font-family: 'Bungee', cursive;
+  font-size: 96px;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  text-shadow: 5px 5px lightgray;
+  /* opacity: 1; */
+}
+p, div{
+  font-family: 'Gudea', sans-serif;
+}
 
+h2, h3, h4, h5, h6{
+  font-family: 'Volkhov', serif;
+}
 main {
-    background: lightblue;
+  background: white;
+  margin-left: 2%;
+  margin-right: 2%;
 }
 
 header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+  /* padding: 0.5rem; */
 }
 
 #completed-checkbox {
@@ -24,10 +56,10 @@ button.success {
 
 aside.create-tasklist {
   background-color: navy;
-  color: #FFFFFF;
+  /* color: #FFFFFF; */
 }
 aside label {
-  color: #FFFFFF;
+  /* color: #FFFFFF; */
 }
 
 .completed {
@@ -37,8 +69,106 @@ aside label {
 div {
   display: inline;
 }
+
+/* #myModal {
+width: 500px;
+background-color: red;
+} */
+.modal {
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+  display: flex;
+}
+.show{
+  display:block;
+}
+
+.hidden{
+  display: none;
+}
+
+.button.close {
+  display: block;
+  width: 5%;
+  height: 2%;
+  /* float: right; */
+  align-content: right;
+  /* margin-left: 75%; */
+  background-color: lightblue;
+  margin-right: 15%;
+  font-size: 30%;
+}
+
+p.display-status {
+  max-width: 500px;
+  width: 100%;
+  display: block;
+}
+nav.top-bar{
+  background-color: black;
+}
+nav button.button {
+  background-color: #FF47FA;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 1%;
+}
+
+nav button.button:hover {
+text-shadow: 1px 1px lightgray;
+background-color: #771FD4;
+}
+
+#search-form {
+  /* width: 80%; */
+  /* margin: 1% 5% 1% 5%; */
+  align-self: center;
+  padding: 1%;
+  /* background-color: black; */
+}
+
+#movie-field {
+  width: 35%;
+  /* padding-left: 2%; */
+  margin-left: 1%;
+  margin-right: 2%;
+  /* background-color: #FF47FA; */
+  color: black;
+  font-weight: bold;
+  display: inline-block;
+}
+
+input.movie-filter {
+  background-color: white;
+  height: 30px;
+  display: inline-block;
+  background-color: #FF47FA;
+  font-weight: bold;
+}
+
+#movie-list {
+  display: inline-block;
+  /* max-width: 40%; */
+}
 /*
 * {
-  border-style: solid;
+border-style: solid;
 }
 */
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,68 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  urlRoot: 'http://localhost:3000/movies',
+  defaults: {
+
+  },
+  initialize(attributes) {
+  },
+  validate(attributes) {
+
+    const errors = {};
+    const title = this.get('title');
+    const releaseDate = this.get('release_date');
+
+    console.log(title);
+    console.log(`release date is ${releaseDate}`);
+
+    if (!title) {
+      console.log("Cannot add a movie without a name");
+      errors['title'] = ["Cannot add a movie without a name"];
+    }
+
+    if (!releaseDate) {
+      errors['releaseDate'] = ["Cannot add a move that does not have a release date"];
+    }
+
+    if ( Object.keys(errors).length > 0 ) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
+
+  add(newMovie) {
+    if(!newMovie.isValid()){
+      $('.display-status').html('')
+      $('.display-status').html(`${newMovie.errors}`);
+      // modalDisplay();
+    } else {
+      newMovie.save( {}, {
+        success: (model, response) => {
+          const movieSuccess = `successfully added ${this.get('title')}!`;
+          console.log(movieSuccess);
+          $('.display-status').html('');
+          console.log(response);
+          $('.display-status').html(movieSuccess);
+          // $('#add-trip-form').remove();
+          // modalDisplay();
+          // reportStatus('success', 'Successfully added reservation!');
+        },
+        error: (model, response) => {
+          const movieFailure = 'Failed to save movie! Server response:';
+          // console.log(`validationError ${response.attributes['validationError']}`);
+          $('.display-status').html('')
+          console.log(response.errors);
+          $('.display-status').html(movieFailure);
+
+          // modalDisplay();
+        },
+      });
+    }
+  },
+
+});
+
+
+export default Movie;