Ada-C8 · misstonbon · 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,46 @@
 <!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>KT MOVIE STORE</title>
+</head>
+<body>
+
+  <header>
+    <a><h1 id="logo" class="logo large-3 medium-3 columns"> Kay Kay and Tay Tay Movie Rentals </h1></a>
+    <ul class="menu large-4 medium-4 columns">
+      <li class="pageDescription">Use this dashboard to browse and add movies. That's it.</li>
+    </ul>
+
+    <ul id="search" class="menu align-right large-5 medium-5 columns">
+      <li><input type="text" name="queryTerm" placeholder="Movie Title" id="search-box" /></li>
+      <li><a id="search-button" type="button" value="Search">Search</a></li>
+    </ul>
+  </header>
+
+  <main id="main-content">
+
+      <section id='movie'></section>
+      <section id='movie-list'></section>
+      <!-- Templates -->
+
+      <script id="movie-template" type="text/template">
+        <h2><%- title %></h2>
+      </script>
+
+      <script id="movie-info-template" type="text/template">
+        <h3> <%- title %></h3>
+        <img src="https://image.tmdb.org/t/p/w185/<%- image_url %>" />
+        <h4>Overview:</h4><h5> <%- overview %></h5></h4>
+        <h4>Release Date:</h4><h5> <%- release_date %></h5>
+        <h4 class="button" id="add-movie" style="<%- !external_id ? 'display:none;' : '' %>">Add Movie to Store</h4>
+      </script>
+
     </main>
 
-    <script src="/app.bundle.js"></script>
+    <footer> Powered by TheMovieDB </footer>
+
+  <script src="/app.bundle.js"></script>
 
-  </body>
-  </html>
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,34 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+// models
+import Backbone from 'backbone';
+import Customer from '/models/customer';
+import Movie from './models/movie';
+import Application from './models/application.js';
+
+//collections
+import CustomerList from '/collections/customer_list';
+import MovieList from './collections/movie_list';
 
-  $('#main-content').append('<p>Hello World!</p>');
+//views
+import CustomerListView from '/views/customer_list_view';
+import MovieListView from './views/movie_list_view';
+import MovieView from './views/movie_view';
+import ApplicationView from './views/application_view.js';
 
+let application = new Application();
+let movieList = new MovieList();
+movieList.fetch({reset: true});
+
+// ready to go
+$(document).ready(function() {
+  let appView = new ApplicationView({
+    el: 'body',
+    model: application,
+    movieListTemplate: _.template($('#movie-template').html()),
+    movieList: movieList,
+    movieDetailsTemplate: _.template($('#movie-info-template').html())
+  });
+  appView.showList({reset: true});
 });
diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Customer from '../models/customer';
+
+let CustomerList = Backbone.Collection.extend({
+  model: Customer,
+  url: 'http://localhost:3000/customers'
+});
+
+export default CustomerList;
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+let MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies'
+});
+
+export default MovieList;
diff --git a/src/css/images/cinema.jpeg b/src/css/images/cinema.jpeg
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,42 +1,98 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Bungee');
+@import url('https://fonts.googleapis.com/css?family=Inconsolata');
+
+
+body {
+  font-family: 'Inconsolata', monospace;
+}
+
+ul {
+  list-style-type: none;
+}
 
 main {
     background: lightblue;
+    text-decoration: none;
+    padding: 40px;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: black;
   padding: 0.5rem;
+  font-family: 'Inconsolata', monospace;
+}
+
+h2:hover {
+  color: maroon;
+  cursor: pointer;
 }
 
 #completed-checkbox {
   display: inline;
 }
 
+#logo {
+  font-family: 'Bungee', cursive;
+  color: yellow;
+  text-shadow: -2px 0px 3px rgba(0, 255, 255, 1);
+  text-align: center;
+}
+
+#logo:hover {
+  color: maroon;
+  text-shadow: -2px 1px 4px rgba(0, 255, 255, 1);
+}
+
+h2, h3, h4 {
+  font-family: 'Bungee', cursive;
+  display: table-header-group;
+}
+
+h2 {
+  font-size: 1.5em;
+  padding: 40px;
+}
+
+h5 {
+  font-family: 'Inconsolata', monospace;
+}
+
 label {
   display: inline;
+  font-family: 'Inconsolata', monospace;
 }
 
 button.success {
   margin-right: 1.2rem;
   display: inline;
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
-}
 aside label {
   color: #FFFFFF;
 }
 
-.completed {
-  text-decoration: line-through;
-}
-
 div {
   display: inline;
 }
+
+.pageDescription {
+  color: lightblue;
+  font-size: 1.2em;
+  padding-left: 20px;
+}
+
+img {
+    margin: auto;
+     width: 20%;
+     padding: 40px;
+   }
+
+footer {
+  color: green;
+  padding-left: 280px;
+}
+
 /*
 * {
   border-style: solid;

diff --git a/src/models/application.js b/src/models/application.js
@@ -0,0 +1,5 @@
+import Backbone from 'backbone';
+
+let Application = Backbone.Model.extend({});
+
+export default Application;
diff --git a/src/models/customer.js b/src/models/customer.js
@@ -0,0 +1,6 @@
+
+import Backbone from 'backbone';
+
+let Customer = Backbone.Model.extend({});
+
+export default Customer;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+
+let Movie = Backbone.Model.extend({
+  defaults: {
+  'title': 'DEFAULT TITLE',
+  'overview': 'DEFAULT OVERVIEW',
+  'release_date': 'DEFAULT RELEASE DATE',
+  'image_url': "https://image.tmdb.org/t/p/w500",
+  }
+});
+
+export default Movie;
diff --git a/src/views/application_view.js b/src/views/application_view.js
@@ -0,0 +1,39 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import MovieListView from './movie_list_view';
+import MovieDetailsView from './movie_details_view';
+import $ from 'jquery';
+import _ from 'underscore';
+
+let ApplicationView = Backbone.View.extend({
+  initialize: function (params) {
+    this.movieList = params.movieList;
+    this.movieListTemplate = params.movieListTemplate;
+    this.movieDetailsTemplate = params.movieDetailsTemplate;
+  },
+  events: {
+    'click h1' : 'showList'
+  },
+
+  showList: function () {
+    let movieListView = new MovieListView({
+      model: this.movieList,
+      template: this.movieListTemplate,
+      el: 'body',
+    });
+
+    this.movieList.fetch({reset: true});
+    this.listenTo(movieListView, 'showMovieDetails', this.showMovieDetails);
+  },
+  showMovieDetails: function (movie) {
+    let movieDetailsView = new MovieDetailsView({
+      model: movie,
+      template: this.movieDetailsTemplate,
+      el: 'body'
+    });
+    movieDetailsView.render();
+  },
+
+});
+
+export default ApplicationView;
diff --git a/src/views/customer_list_view.js b/src/views/customer_list_view.js
diff --git a/src/views/movie_details_view.js b/src/views/movie_details_view.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Movie from '../models/movie';
+import MovieView from './movie_view';
+
+let MovieDetailsView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'change', this.render);
+  },
+  render: function() {
+    let compiledTemplate = this.template(this.model.toJSON());
+    this.$('main').html(compiledTemplate);
+  },
+  events: {
+  'click .button#add-movie': 'add'
+},
+  add(event) {
+    this.model.save();
+  }
+});
+
+export default MovieDetailsView;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,46 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Movie from '../models/movie.js';
+import MovieView from './movie_view.js';
+import MovieDetailsView from './movie_details_view';
+
+let MovieListView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'update reset', this.render);
+  },
+
+  render: function() {
+    this.$('main').html('<ul></ul>');
+    let that = this;
+
+    this.model.each(function(movie) {
+      let movieView = new MovieView({
+        model: movie,
+        template: that.template,
+        tagName: 'li'
+      });
+      that.$('main ul').append(movieView.render().$el);
+      that.listenTo(movieView, 'showMovieDetails', that.showMovieDetails);
+    });
+    return this;
+  },
+  events: {
+    'click #search-button' : 'searchMovies'
+  },
+  showMovieDetails: function (movie) {
+    this.trigger('showMovieDetails', movie);
+  },
+  searchMovies: function () {
+    var queryTerm = $('#search-box').val();
+    $('#search-box').val('');
+
+    this.model.fetch({
+      data: { query: queryTerm },
+      processData: true,
+    });
+  },
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,24 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Movie from '../models/movie.js';
+
+let MovieView = Backbone.View.extend({
+  initialize: function(params) {
+    this.template = params.template;
+  },
+  render: function() {
+    let compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+  events: {
+    'click' : 'showDetails'
+    },
+
+    showDetails: function () {
+      this.trigger('showMovieDetails', this.model);
+  }
+});
+
+export default MovieView;