Ada-C8 · nkiruka · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/app.js b/app.js
@@ -0,0 +1,21 @@
+import Backbone from 'backbone';
+
+import $ from 'jquery';
+import _ from 'underscore';
+
+import Movie from './models/movie'
+import MovieList from './collections/movie_list';
+import MovieView from './views/movie_view';
+import MovieListView from './views/movie_list_view';
+
+
+
+
+$(document).ready( () => {
+console.log("in document ready");
+
+movieListView.render();
+
+
+
+}); // end document ready
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,75 @@
 <!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">
+ <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto" rel="stylesheet">
+ <title>Video Store</title>
+</head>
+<body>
+
+ <header class="hero">
+ <div class="hero-section-text">
+ <h1>Video Store</h1>
+ <span><h5>
+ <button id="show-movies" class="movie-button button secondary hollow">Check out what's in stock!</button>
+ </h5></span>
+ </div>
+ </header>
+
+
+ <main id="main-content">
+ <!-- MESSAGES -->
+ <span id="status-msg"></span>
+ <span id="confirmation-msg"></span>
+
+ <section class="flex nav">
+ <div>
+ <span id="title"><h2>Video Store</h2></span>
+ </div>
+ <div>
+ <!-- SEARCH -->
+ <form id="movie-search-form">
+ <ul class="form-style">
+ <li>
+ <input id="query" type="text" name="query" placeholder="Enter a movie title">
+ </li>
+ <li>
+ <input type="submit" class="button secondary">
+ </li>
+ </ul>
+ </form>
+ </div>
+ </section>
+
+ <!-- LIST OF MOVIES -->
+ <section class="movie-list-container">
+ <ul id="movie-library">
+ </ul>
+ </section>
+ </main>
+
+ <footer>
+ &copy; 2017 Sara Frandsen, Nkiru Onwuneme, Amy Cash
+ </footer>
+ <!-------------------------->
+ <!-------------------------->
+
+ <!-- STATUS MESSAGE -->
+ <script type="text/template" id="status-msg-template">
+ </script>
+
+ <!-- SINGLE MOVIE TEMPLATE -->
+ <script type="text/template" id="movie-template">
+ <div id="item">
+ <h3><%- title %></h3>
+ <h5>(<%- release_date %>)</h5>
+ <p><%- overview.substr(0,50) %>...</p>
+ <img src="<%- image_url %>" />
+ <button class="btn-add alert button" style="<%- external_id ? '' : 'display:none;' %>">Add to Library</button>
+ </div>
+ </script>
+
+ <script src="/app.bundle.js"></script>
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,67 @@
-import 'css/_settings.css';
-import 'foundation-sites/dist/css/foundation.css';
-import './css/styles.css';
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+// CSS
+import './css/foundation.css';
+import 'css/_settings.css';
+import './css/style.css';
+
+import MovieList from 'collections/movie_list';
+import MovieListView from './views/movie_list_view';
+
+let moviesTemplate;
 
 // ready to go
 $(document).ready(function() {
+ // TEMPLATES
+ moviesTemplate = _.template($('#movie-template').html());
+ // overviewTemplate = _.template($('#movie-template').html());
+ // createNewMovieTemplate = _.template($('#create-new-movie-template').html());
+ const movies = new MovieList();
+ console.log("Set up movieList");
+
+ const movieListView = new MovieListView ({
+ model: movies,
+ template: _.template($('#movie-template').html()),
+ el: 'main',
+ });
+ console.log("before fetch");
 
- $('#main-content').append('<p>Hello World!</p>');
+ movies.fetch(); //bb will call rails s
+
+ $('#movie-search-form').on('submit', function(event) {
+ event.preventDefault();
+ let queryText = $('#query').val().trim();
+ if (queryText.length > 0) {
+ movies.fetch({
+ reset: true, //instead of merging by default, clear out
+ data: { query: queryText }
+ });
+ }
+ else {
+ movies.reset();
+ }
+ // console.log(query);
+ });
+
+/// HEADER ANIMATIONS ///
+ $('#show-movies').on('click', function(event) {
+ movies.fetch({
+ reset: true,
+ });
+ $('header').slideUp(1000); //show library list
+ $('#movie-search-form').slideDown(1000);
+ $('#movie-library').slideDown(1000); //header height
+ });
+
+ $('#title').on('click', function(event) {
+ movies.fetch({
+ reset: true,
+ });
+ $('#movie-library').slideDown(1000);
+ });
+
+/// RESULTS ANIMATIONS ///
 
 });
+
+//instruct bb to retrieve data
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+ model: Movie,
+ url: 'http://localhost:3000/movies/',
+});
+
+export default MovieList;