Roxanne Agerone and Kimberley Zell - Pipes - VideoStoreConsumer

README.md

@@ -1,10 +1,9 @@
 # Video Store Consumer
 
-In this project, you'll take a lot of the knowledge you have so far and create an end-to-end Video Store application. The final product will be something that a rental store employee might use to manage the video store where they work.
+Class project for Ada Developers Academy
+Created an end-to-end Video Store application using Backbone, Javascript, and jQuery
 
-This is a [Phase 3](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) Pair project.
-
-## Learning Goals
+## Goals
 - Leverage jQuery event observation along with Backbone to enable a dynamic user interface
 - Organize browser interactions according to Backbone's MVC pattern
 - Revisit Rails API functionality
@@ -19,76 +18,43 @@ Our rental store employees want to be able to manage their rental inventory. The
 ## Project Information
 This project will be utilizing an external API within an API! Whoa! Your front-end implementation will be interacting with a **Rails API** that you will be modifying. The Rails API wraps an **external API** which contains many endpoints related to movies. The external API is [The Movie DB](https://www.themoviedb.org/documentation/api).
 
-## Project Setup
-### 1. Backbone Part
-  - One person shall fork this repository
-  - Add the pair as a collaborator on the project
-  - Both people shall clone the repository
-  - Install dependencies using `$npm install`
-  - Start the development server using `$npm start`
-
-### 2. API Configuration
-  - Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key.  
-  (You can use Ada's address in the registration process)
-  - Read through the documentation for the API. A few endpoints you may want to explore include:
-    - [Search Movies](https://developers.themoviedb.org/3/search/search-movies)
-    - [Get Movie Details](https://developers.themoviedb.org/3/movies/get-movie-details)
-    - [Configuration](https://developers.themoviedb.org/3/configuration/get-api-configuration)
-
-### 3. Rails Part
-  - One person shall fork the API repository. You can find it at your cohort's GitHub org, and the project's name is VideoStoreConsumer-API. You should immediately notice that this is a Rails project not a Backbone project.
-  - Add the pair as a collaborator on the project
-  - Both people shall clone the repository
-  - Set up the `.env` file with the API key from step #2
-  - Set up the DB
-  - Ensure both people can run the API locally
-
-
-## Project Requirements
-
-### Front-End
-- Rental store employee should be able to:
-  - search all Movies
-    - add a movie to the rental library
-  - list all movies in the rental library
-
-### Back-End
-- The search functionality is already implemented!
-- Add support for adding an external movie to the rental library
-
-<!--
-- Show a paginated collection of Movies, 10 per page
-  - This will show a movie's
-- Allow a user to interact with a Movie by clicking
-  - When _selected_, a Movie shows more information
-  - When _deselected_, a Movie returns to its default state
-  - Only one movie can be selected at a time
-  - Selected another movie deselects the one which was selected
-- Changing the page deselects a Movie -->
-
-## Project Design
-### Front-End
-- Consider what Backbone models, collections and views you will need to utilize
-- Consider what events you will want to handle
-- Consider how you will make requests from the front-end to the API
-
-### Back-End
-- Investigate the existing implementation to gain an understanding of what you are working with
-- Consider what data the back-end will require to complete the tasks in the requirements
-
-## Optional Enhancements
-Some of these optional requirements require work in the front-end only, back-end only or both.
-
-- Rental!
-  - Check out: Select a movie along with a customer to create a rental
-  - Check in: Select a customer to see the movies they have checked out. Select a single (or multiple) rentals to check back in
-  - See all overdue rentals
-- CRUD customers
-- Introduce scrolling pagination to dynamically load more movies when scrolling to the bottom (research!!)
-
-## Resources
-
-Note, you may need to use non restful API calls for rentals and this can be done by overriding Backbone.sync.  Below are some resources on how to do so.
-
-- [Overriding Backbone.sync for non-RESTful APIs](https://thejsguy.com/2015/03/18/overriding-backbone-sync.html)
-- [Non-RESTful backend with Backbonejs](https://stackoverflow.com/questions/24770250/non-restful-backend-with-backbone-js)
+## Local Setup
+### 1. Clone the repository
+
+### 2. Run Back End
+  - Follow the instructions on the API's [Getting Started](https://developers.themoviedb.org/3/getting-started) page to set up your account and request an API Key.
+  - Set up the `.env` file with the API key in VideoStoreConsumer-API/
+
+  **Example .env file:**
+
+  ```
+  MOVIEDB_KEY = <MOVIEDB_KEY>
+
+  SECRET_KEY_BASE = <SECRET_KEY_BASE>
+
+  ```
+
+
+  -  Set up rails back end:
+  While in VideoStoreConsumer-API/ in your terminal Run:
+  _Note: You must have Rails installed._
+
+  ```
+  bundle install
+
+  rails server
+  ```
+
+  Your server should be running at this point
+
+### 3. Run Front End
+  - Run Front End Server:
+  Change directories to VideoStoreConsumer/
+  It will be the directory with the json.lock file
+  In your terminal run:
+
+  ```
+  npm install
+
+  npm start
+  ```

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>

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){}
+  });
 });

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;