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;