From 6220228099abaf6315138910992957fc31a87fe4 Mon Sep 17 00:00:00 2001 From: Maya Wang Date: Mon, 28 Nov 2016 23:03:16 -0800 Subject: [PATCH 1/4] wave1 completed. add quote_view. --- src/app.js | 31 +++++++++++++++++++++++++++++++ src/app/views/quote_view.js | 26 ++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/app/views/quote_view.js diff --git a/src/app.js b/src/app.js index cb932d5..d76471c 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,37 @@ import $ from 'jquery'; import _ from 'underscore'; import ApplicationView from 'app/views/application_view'; +import QuoteView from 'app/views/quote_view'; + +var exampleStocks = [ + { + symbol: 'HUMOR', price: 88.50, desc: "Cristal's HumorUs capstone" + }, + { + symbol: 'CLOTH', price: 81.70, desc: "Sophia's Cloth Sim capstone" + }, + { + symbol: 'HABIT', price: 98.00, desc: "Val's Habitmon capstone" + }, + { + symbol: 'SUPER', price: 83.10, desc: "Rowan's Super Hero Draft capstone" + }, + { + symbol: 'INGRD', price: 79.40, desc: "Nicole's Ingredient Inspector capstone" + }, + { + symbol: 'MXTPE', price: 109.20, desc: "Jess's Digital Mixtape capstone" + }, + { + symbol: 'CNTAR', price: 90.70, desc: "Leah's Centaur capstone" + }, + { + symbol: 'EVCLR', price: 101.90, desc: "Lisa's Evolution In Color capstone" + }, + { + symbol: 'FUZZY', price: 88.60, desc: "Jade's Fuzz Therapy capstone" + } +]; const simulate = function(quote) { // Calculate a random price movement diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js new file mode 100644 index 0000000..a2ce86f --- /dev/null +++ b/src/app/views/quote_view.js @@ -0,0 +1,26 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Backbone from 'backbone'; + +var QuoteView = Backbone.View.extend({ + initialize: function(stock) { + this.stock = stock; + + // Compile a Underscore template + this.template = _.template($('#tmpl-quote-view').html()); + }, + + render: function() { + var html = this.template({ + symbol: this.stock.symbol, + price: this.stock.price, + }); + + this.$el.html(html); + + // Enable chained calls + return this; + } +}); + +export default QuoteView; From f63f10c6a67f74d236019ee166c9e71f13acfa95 Mon Sep 17 00:00:00 2001 From: Maya Wang Date: Mon, 28 Nov 2016 23:49:09 -0800 Subject: [PATCH 2/4] wave2 completed. add application view and display example quotes. --- src/app.js | 6 +++--- src/app/views/application_view.js | 30 ++++++++++++++++++++++++++++-- src/app/views/quote_view.js | 16 ++++++++++------ 3 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/app.js b/src/app.js index d76471c..9e454d0 100644 --- a/src/app.js +++ b/src/app.js @@ -1,9 +1,8 @@ import $ from 'jquery'; import _ from 'underscore'; import ApplicationView from 'app/views/application_view'; -import QuoteView from 'app/views/quote_view'; -var exampleStocks = [ +var exampleQuotes = [ { symbol: 'HUMOR', price: 88.50, desc: "Cristal's HumorUs capstone" }, @@ -50,7 +49,8 @@ const simulate = function(quote) { $(document).ready(function() { var appView = new ApplicationView({ - el: '#application' + el: '#application', + quoteList: exampleQuotes, }); appView.render(); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 30b6d0f..4c0d06b 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,11 +1,37 @@ +import $ from 'jquery'; +import _ from 'underscore'; import Backbone from 'backbone'; +import QuoteView from 'app/views/quote_view'; const ApplicationView = Backbone.View.extend({ - initialize: function() { + initialize: function(options) { + this.quoteList = options.quoteList; + // Compile a Underscore template + this.template = _.template($('#tmpl-quote-view').html()); + + this.quoteViewList = []; + + this.quoteList.forEach(function(quote) { + var quoteView = new QuoteView(quote, this.template); + this.quoteViewList.push(quoteView); + }, this); // bind `this` so it's available inside forEach + + this.quoteListEl = $('.quotes'); }, render: function() { - this.$el.html('

Hello World

'); + // Make sure the list in the DOM is empty + // before we start appending items + this.quoteListEl.empty(); + + // Loop through the data assigned to this view + this.quoteViewList.forEach(function(quoteView) { + // Cause the task to render + quoteView.render(); + + // Add that HTML to our task list + this.quoteListEl.append(quoteView.$el); + }, this); return this; } diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index a2ce86f..67406f2 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -3,17 +3,21 @@ import _ from 'underscore'; import Backbone from 'backbone'; var QuoteView = Backbone.View.extend({ - initialize: function(stock) { - this.stock = stock; + initialize: function(quote, template) { + this.quote = quote; - // Compile a Underscore template - this.template = _.template($('#tmpl-quote-view').html()); + if (!template) { + // Compile a Underscore template + this.template = _.template($('#tmpl-quote-view').html()); + } else { + this.template = template; + } }, render: function() { var html = this.template({ - symbol: this.stock.symbol, - price: this.stock.price, + symbol: this.quote.symbol, + price: this.quote.price, }); this.$el.html(html); From bf79a3c0479e198e2d76006b80c50464031953a6 Mon Sep 17 00:00:00 2001 From: Maya Wang Date: Tue, 29 Nov 2016 00:05:34 -0800 Subject: [PATCH 3/4] wave3 completed. handle buy and sell button click. fix buy and sell button text. --- build/index.html | 4 ++-- src/app/views/quote_view.js | 22 ++++++++++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/build/index.html b/build/index.html index 79b1a0f..be6e439 100644 --- a/build/index.html +++ b/build/index.html @@ -26,8 +26,8 @@

Ada Trader

<%- symbol %>

$<%- price.toFixed(2) %>

- - + +
diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index 67406f2..3fa4d56 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import _ from 'underscore'; import Backbone from 'backbone'; -var QuoteView = Backbone.View.extend({ +const QuoteView = Backbone.View.extend({ initialize: function(quote, template) { this.quote = quote; @@ -24,7 +24,25 @@ var QuoteView = Backbone.View.extend({ // Enable chained calls return this; - } + }, + + events: { + 'click .btn-buy': 'buy', + 'click .btn-sell': 'sell' + }, + + buy: function(event) { + this.quote.price += 1.0; + this.render(); + }, + + sell: function(event) { + if (this.quote.price > 1.0) { + this.quote.price -= 1.0; + } + + this.render(); + }, }); export default QuoteView; From f1658ff5ff5320bce06026e99228bd8ee56d59d5 Mon Sep 17 00:00:00 2001 From: Maya Wang Date: Tue, 29 Nov 2016 09:14:38 -0800 Subject: [PATCH 4/4] fix comments on application views --- src/app/views/application_view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 4c0d06b..e516344 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -26,10 +26,10 @@ const ApplicationView = Backbone.View.extend({ // Loop through the data assigned to this view this.quoteViewList.forEach(function(quoteView) { - // Cause the task to render + // Cause the quote to render quoteView.render(); - // Add that HTML to our task list + // Add that HTML to our quote list this.quoteListEl.append(quoteView.$el); }, this);