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;