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;