diff --git a/build/css/styles.css b/build/css/styles.css index 68a79a569..301d99808 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -1,12 +1,21 @@ @include foundation-everything; +@import url('https://fonts.googleapis.com/css?family=Monoton'); + main { background: lightblue; } header { - background-color: lightgreen; + background-color: #4183D7; padding: 0.5rem; + height: 100px; +} + +footer { + background-color: #4183D7; + color: #F7CA18; + font-family: 'Monoton', cursive; } #completed-checkbox { @@ -42,3 +51,38 @@ div { border-style: solid; } */ + +#add-button { + /*float: right;*/ +} + +.rental, .movie-db { + text-align: center; +} + + +.title-card { + display: inline-block; + margin: 25px; + height: 300px; + width: 250px; +} +header h1 { + float: left; + font-family: 'Monoton', cursive; + color: #F7CA18; +} + +#rental-library, #search, #search-button { + float: right; + margin: 20px; +} + +#search { + width: 300px; +} + +.button { + background-color: #F7CA18; + color: #4183D7; +} diff --git a/build/index.html b/build/index.html index 03869595f..d1ec13303 100644 --- a/build/index.html +++ b/build/index.html @@ -1,15 +1,62 @@ - - - - - - Backbone Baseline - - - - - - - + + + + + + Backbone Baseline + + + +
+

inline-blockbuster

+ +
+ +
+ +
+ + +
+ +
+ +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + diff --git a/src/app.js b/src/app.js index 58b77997c..5695e5c32 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,27 @@ -// /src/app.js - -// Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import MovieList from 'collections/movie_list'; +import MovieListView from 'views/movie_list_view'; + +// var myMovieList = new MovieList({url: "http://localhost:3000/movies"}); +// myMovieList.fetch(); +// console.log("fetch"); -// ready to go $(document).ready(function() { + var myMovieList = new MovieList({url: "http://localhost:3000/movies"}); + var myMovieListView = new MovieListView ({ + model: myMovieList, + template: _.template($('#movie-template').html()), + el: '.rental' + }); - $('section.main-content').append('

Hello World!

'); + var searchMovieList = new MovieList( + {url: "http://localhost:3000/movies?query="} + ); + var searchMovieListView = new MovieListView ({ + model: searchMovieList, + template: _.template($('#search-template').html()), + el: '.movie-db' + }); }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..a2394425c --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,15 @@ +import Backbone from 'backbone'; + +import Movie from 'models/movie'; + +var MovieList = Backbone.Collection.extend({ + initialize : function(options){ + this.model = Movie, + this.url = options.url + } + // parse: function(data) { + // return data.movies; + // } +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..6442d9ad4 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + defaults: { + title: "Unknown", + overview: "Unknown", + release_date: "Unknown", + inventory: "Unknown" + }, + initialize: function(options) { + console.log("Created new movie with options " + this.options); + } + +}); + +export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..8e74b2650 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,79 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; +import MovieView from './movie_view'; +import Movie from '../models/movie.js'; + +var MovieListView = Backbone.View.extend({ + initialize: function(options) { + this.template = options.template; + this.listenTo(this.model, 'update', this.render); + // this.listElement = this.$('.movie-list'); + }, + + render: function() { + console.log("In render"); + this.$('#movie-list').empty(); + + var self = this; + + this.model.each(function(movie) { + var movieView = new MovieView({ + model: movie, + template: self.template + }); + + self.$("#movie-list").append(movieView.render().$el); + }); + + return this; + }, + + showList: function() { + $('.movie-db #movie-list').hide(); + $('.rental #movie-list').show(); + this.model.fetch(); + }, + + searchList: function() { + $('.rental #movie-list').hide(); + $('.movie-db #movie-list').show(); + var formData = this.readNewSearchForm(); + console.log(formData); + console.log(this.model.url) + this.model.url = "http://localhost:3000/movies?query="; + var newUrl = this.model.url + formData.search; + this.model.url = newUrl; + this.model.fetch() + .then(function(){ + console.log("ok"); + }).catch(function(){ + alert("No movie found"); + }); + // if (response.count == null) { + // alert("No movie found"); + // }; + }, + + clearForm: function() { + $('#search').val(''); + }, + + readNewSearchForm: function() { + var formSearch = $('#search').val(); + this.clearForm(); + + var formData = {}; + if (formSearch && formSearch != "") { + formData['search'] = formSearch + } + return formData; + }, + + events: { + "click #rental-library": "showList", + "click #search-button": "searchList", + } +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..8da2595da --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,36 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; + +var MovieView = Backbone.View.extend({ + initialize: function(options) { + this.template = options.template; + + this.listenTo(this.model, 'change', this.render); + }, + + addMovie: function(event) { + var url = "http://localhost:3000/movies"; + var data = { movie: this.model.attributes }; + $.post(url, data, function(response){ + console.log(response); + console.log("added!"); + + }); + console.log(this.model.attributes); + }, + + render: function() { + // console.log(this.model.attributes); + var html = this.template({movie: this.model.toJSON()}); + this.$el.html(html); + + return this; + }, + + events: { + "click #add-button": "addMovie" + } +}); + +export default MovieView;