diff --git a/dist/index.html b/dist/index.html index 559b18ecd..956e75354 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,46 @@ - - - Backbone Baseline - - -
- + + + KT MOVIE STORE + + + +
+

Kay Kay and Tay Tay Movie Rentals

+ + + +
+ +
+ +
+
+ + + + + +
- + + + - - + + diff --git a/src/app.js b/src/app.js index 30c00d594..e328da07c 100644 --- 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('

Hello World!

'); +//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 new file mode 100644 index 000000000..6518ed107 --- /dev/null +++ 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 new file mode 100644 index 000000000..3904b1101 --- /dev/null +++ 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 new file mode 100644 index 000000000..5033235d2 Binary files /dev/null and b/src/css/images/cinema.jpeg differ diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..aef5e96e8 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,20 +1,66 @@ @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 { @@ -22,21 +68,31 @@ button.success { 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 new file mode 100644 index 000000000..15a94b3d3 --- /dev/null +++ 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 new file mode 100644 index 000000000..b9fae80f7 --- /dev/null +++ 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 new file mode 100644 index 000000000..ffc440f8d --- /dev/null +++ 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 new file mode 100644 index 000000000..4ed284e43 --- /dev/null +++ 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 new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/movie_details_view.js b/src/views/movie_details_view.js new file mode 100644 index 000000000..1bab8d14c --- /dev/null +++ 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 new file mode 100644 index 000000000..5e0e1a7b5 --- /dev/null +++ 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(''); + 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 new file mode 100644 index 000000000..cc32b0604 --- /dev/null +++ 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;