diff --git a/build/css/_settings.css b/build/css/_settings.css index 9f6743012..b1e970be0 100644 --- a/build/css/_settings.css +++ b/build/css/_settings.css @@ -42,6 +42,9 @@ // 37. Top Bar @import 'util/util'; +@import url(https://fonts.googleapis.com/css?family=Slabo+27px); +/*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/ + // 1. Global // --------- @@ -63,7 +66,7 @@ $black: #0a0a0a; $white: #fefefe; $body-background: $white; $body-font-color: $black; -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-font-family: 'Slabo 27px', serif; $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; @@ -104,10 +107,10 @@ $block-grid-max: 8; // 4. Base Typography // ------------------ -$header-font-family: $body-font-family; +$header-font-family: 'Slabo 27px', serif; $header-font-weight: $global-weight-normal; $header-font-style: normal; -$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; +$font-family-monospace: 'Slabo 27px', serif; $header-color: inherit; $header-lineheight: 1.4; $header-margin-bottom: 0.5rem; @@ -618,4 +621,3 @@ $topbar-submenu-background: $topbar-background; $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; - diff --git a/build/css/styles.css b/build/css/styles.css index 68a79a569..b093a2f1d 100644 --- a/build/css/styles.css +++ b/build/css/styles.css @@ -1,12 +1,23 @@ @include foundation-everything; +@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); + +* { + font-family: 'Slabo 27px', serif; +} main { background: lightblue; + font-family: 'Slabo 27px', serif; } header { - background-color: lightgreen; + background-color: white; padding: 0.5rem; + font-family: 'Slabo 27px', serif; +} + +h1 { + text-align: center; } #completed-checkbox { @@ -37,8 +48,31 @@ aside label { div { display: inline; } -/* -* { - border-style: solid; + + +#order-form { + z-index: 10; + width: 50%; + height: 60%; + top: 30%; + left: 30%; + background-color: white; + text-align: center; + margin-left: 20%; + margin-right: 20%; + border: 2px solid black; + font-family: 'Slabo 27px', serif; } -*/ + + li{ + vertical-align: top; + margin: 5px; + list-style: none; + width:300px; + display: inline-block; + } + + p.title{ + background-color: rgba(193, 66, 66, 0.8); + vertical-align: bottom; + } diff --git a/build/index.html b/build/index.html index 03869595f..c3be4df90 100644 --- a/build/index.html +++ b/build/index.html @@ -5,11 +5,78 @@ - Backbone Baseline + Movies +
+

Movie Store Rental System

+
+
+ +
+ +
+
+ + + + + +
+
+ + +
+
+ + +
+ + +
+ +
+ +
+
+
+
+ + + + + + + + + + + + + + + + + diff --git a/src/app.js b/src/app.js index 58b77997c..4a062aea2 100644 --- a/src/app.js +++ b/src/app.js @@ -3,10 +3,30 @@ // Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; +import MovieList from 'collections/movie_list'; +import MovieListView from 'views/movie_list_view'; + +var movieList = new MovieList(); // ready to go $(document).ready(function() { $('section.main-content').append('

Hello World!

'); + movieList.fetch(); + + var options = { + el: $('main'), + model: movieList + }; + + var movieListDisplay = new MovieListView(options); + movieListDisplay.render(); + + $('#order-form').hide(); + + $('#library').click(function() { + movieList.fetch(); + }); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..9b5734746 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,9 @@ +import Movie from '../models/movie'; + +var MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies', + +}); + +export default MovieList; diff --git a/src/css/_settings.scss b/src/css/_settings.scss index 9f6743012..af784b6d6 100644 --- a/src/css/_settings.scss +++ b/src/css/_settings.scss @@ -618,4 +618,3 @@ $topbar-submenu-background: $topbar-background; $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; - diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..1c11fd2f2 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -36,9 +36,24 @@ aside label { div { display: inline; + border-style: solid; + border-color: black; + margin: .5em; +} + +.movie-card div { + height: 100px; + border: solid, black, 2px; + border-style: solid; + border-color: black; + margin: .5em; } -/* + * { border-style: solid; } -*/ + +img { + height: 100%; + border: 1px black; +} diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..c781e279c --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,16 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + defaults: { + type : "rental", + inventory: 0, + url:'http://localhost:3000/movies', + }, + initialize: function(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..3e3936ea8 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,132 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; +import MovieView from './movie_view'; +import MovieList from '../collections/movie_list'; + +var MovieListView = Backbone.View.extend({ + initialize: function(options) { + this.movieTemplate = _.template($("#movie-card-template").html()); + this.movieDetailTemplate = _.template($("#movie-info-template").html()); + this.movieSearchTemplate= _.template($("#search-card-template").html()); + this.listElement = this.$(".movie-card"); + + + this.movieList = []; + + this.model.forEach(function(rawMovie) { + this.addMovie(rawMovie); + }, this); + + this.listenTo(this.model, '#search', this.getInput); + this.listenTo(this.model, 'add', this.addMovie); + this.listenTo(this.model, 'update', this.render); + }, + + render: function() { + var self = this; + console.log("here!"); + this.listElement.empty(); + + + this.movieList.forEach(function(movieView){ + movieView.render(); + + this.listElement.prepend(movieView.$el); + + self.listenTo(movieView, 'openorderform', self.showMovieDetails); + + }, this, + + ); + + return this; + }, + + events: { + 'click #search': 'getInput', + 'click #close': 'hideMovieDetails', + 'click #order-movie': 'orderMovie' + }, + + orderMovie: function(event) { + if (this.movieInModal) { + var order_count = this.$('#inventory').val(); + this.movieInModal.orderMovie(order_count); + } + console.log(this); + }, + + createMovie: function(event) { + event.preventDefault(); + + var rawMovie = this.getInput(); + this.model.create(rawMovie); + this.clearInput(); + }, + + addMovie: function(movie) { + console.log("orig url"); + console.log("test" + movie.attributes.image_url); + + var cleanImage_url = movie.attributes.image_url.replace("https://image.tmdb.org/t/p/w185",""); + var movieView = new MovieView({ + model: movie, + template: this.movieTemplate, + movieSearchTemplate : this.movieSearchTemplate + }); + + // if (movie.attributes.image_url.includes("lorem")) { + // movie.set({image_url:cleanImage_url}); + // console.log("clean url"); + // } + + console.log(movie.attributes.image_url); + + this.movieList.push(movieView); + }, + + showMovieDetails: function(movieView) { + console.log("in Show Movie Details"); + + this.movieInModal = movieView; + + var movieDetailsTemplate = this.movieDetailTemplate({movie: movieView.model.toJSON()}); + $('#order-form').html(movieDetailsTemplate); + $("#order-form").show(); + }, + + hideMovieDetails: function(event) { + this.movieInModal = undefined; + $("#order-form").hide(); + }, + + getInput: function() { + var searchList = new MovieList(), + query = this.$('#title').val(), + url = this.model.url; + console.log("search url"); + console.log(url); + searchList.fetch({ + url:url + "?query=" + query, + success:this.searchRender + } + ); + var options = {el: $('main'),model: searchList}, + searchListView = new MovieListView(options); + }, + + clearInput: function(event) { + console.log("clearInput called!"); + this.input.title.val(''); + }, + + searchRender: function(collection, response, options) { + collection.forEach(function(movie){ + movie.set({type:"search"}) + }) + }, + +}); + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..ccc6b167a --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,83 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +var MovieView = Backbone.View.extend({ + tagName: 'li', + initialize: function(options) { + this.template = options.template; + this.movieSearchTemplate = options.movieSearchTemplate; + this.listenTo(this.model, 'change', this.render); + }, + + + render: function() { + const backgroundImageStyleProperty = "url(\" " + this.model.attributes.image_url.replace("https://image.tmdb.org/t/p/w185","")+ "\") "; + if (this.model.attributes.type === "rental") { + var html = this.template({movie: this.model.toJSON()}); + // this.$el.css({ + // 'background-image':backgroundImageStyleProperty, + // 'background-size':'contain', + // 'height': '278px', + // 'width': '185px', + // 'display': 'inline-block' + // }); + this.$el.html(html) + this.delegateEvents(); + }else if (this.model.attributes.type === "search"){ + const backgroundImageStyleProperty = "url(\" " + this.model.attributes.image_url+ "\") "; + var html = this.movieSearchTemplate({movie: this.model.toJSON()}); + // this.$el.css({ + // 'background-image':backgroundImageStyleProperty, + // 'height': '278px', + // 'width': '185px', + // 'display': 'inline-block' + // }); + this.$el.html(html); + } + + return this + }, + events: { + "click #add": "orderMovie", + "click #open": "openForm" + + }, + + deleteMovie: function(event) { + console.log("deleteMovie called!"); + if (window.confirm("Are you sure you want to delete this movie?")) { + console.log("going to delete it!"); + this.model.destroy(); + } + }, + + orderMovie: function(order_count){ + + console.log("orderMovie called"); + var selectedMovie = this.model; + selectedMovie.set({inventory:order_count}); + console.log(selectedMovie.attributes); + var options = { + success: 'syncSuccessCallback', + url: this.model.attributes.url, + method: "create", + } + this.model.emulateHTTP = true; + this.model.sync("create",selectedMovie,[options]); + $('#order-form').hide(); + + }, + syncSuccessCallback: function(collection, response, options){ + console.log("in syncSuccessCallback"); + }, + + openForm: function(event) { + event.preventDefault(); + console.log("open form"); + $('#order-form').show(); + this.trigger('openorderform', this) + } +}); + +export default MovieView;