From eb3c03b96257cb2fc3c2f8e3e632afb2a63110f4 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 12 Dec 2017 15:35:38 -0800 Subject: [PATCH 1/7] added views for user to see list of quotes in the quotes section --- src/app.js | 20 +++++++++++++++++++- src/views/quote_list_view.js | 25 +++++++++++++++++++++++++ src/views/quote_view.js | 18 ++++++++++++++++++ 3 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 src/views/quote_list_view.js create mode 100644 src/views/quote_view.js diff --git a/src/app.js b/src/app.js index 03ec910..03a8893 100644 --- a/src/app.js +++ b/src/app.js @@ -2,9 +2,17 @@ import 'foundation-sites/dist/foundation.css'; import 'css/app.css'; import $ from 'jquery'; +import _ from 'underscore'; import Simulator from 'models/simulator'; -import QuoteList from 'collections/quote_list'; + +import Quote from './models/quote'; +import QuoteList from './collections/quote_list'; + +import QuoteView from './views/quote_view'; +import QuoteListView from './views/quote_list_view'; + +const quoteList = new QuoteList(); const quoteData = [ { @@ -25,11 +33,21 @@ const quoteData = [ }, ]; + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); + const quoteListView = new QuoteListView({ + model: quotes, + template: _.template($('#quote-template').html()), + el: 'main' + }); + + quoteListView.render(); + simulator.start(); + }); diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js new file mode 100644 index 0000000..8a2c020 --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import QuoteView from '../views/quote_view'; +import Quote from '../models/quote'; + +const QuoteListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#quotes').empty(); + this.model.each((quote) => { + const quoteView = new QuoteView({ + model: quote, + template: this.template, + }); + + this.$('#quotes').append(quoteView.render().$el); + }); + return this; + }, // end of render +}); //end of QuoteListView + +export default QuoteListView diff --git a/src/views/quote_view.js b/src/views/quote_view.js new file mode 100644 index 0000000..b7787ac --- /dev/null +++ b/src/views/quote_view.js @@ -0,0 +1,18 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; + +const QuoteView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, //end of render + +}); // end of QuoteView + +export default QuoteView; From 348d941a612488fad11071158641bb1e15ceed99 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 12 Dec 2017 16:30:50 -0800 Subject: [PATCH 2/7] added tagName and className to the list view to fix styling --- src/app.js | 2 -- src/views/quote_list_view.js | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 03a8893..b7b6dc8 100644 --- a/src/app.js +++ b/src/app.js @@ -12,8 +12,6 @@ import QuoteList from './collections/quote_list'; import QuoteView from './views/quote_view'; import QuoteListView from './views/quote_list_view'; -const quoteList = new QuoteList(); - const quoteData = [ { symbol: 'HUMOR', diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 8a2c020..f7b3ee5 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -14,6 +14,8 @@ const QuoteListView = Backbone.View.extend({ const quoteView = new QuoteView({ model: quote, template: this.template, + tagName: 'li', + className: 'quote' }); this.$('#quotes').append(quoteView.render().$el); From edd6b07ad97ca0540c054cfcaaae5bbada6e5deb Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 12 Dec 2017 18:07:35 -0800 Subject: [PATCH 3/7] tests passing for buy and sell functions in quote.js --- src/models/quote.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/models/quote.js b/src/models/quote.js index 4fbf466..f9f7c9f 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -7,10 +7,12 @@ const Quote = Backbone.Model.extend({ }, buy() { + this.set('price', this.get('price') + 1) // Implement this function to increase the price by $1.00 }, sell() { + this.set('price', this.get('price') - 1) // Implement this function to decrease the price by $1.00 }, }); From b4e8555ff3b27d9eac09a82ccba0e4580401e416 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Wed, 13 Dec 2017 14:31:41 -0800 Subject: [PATCH 4/7] buy method and click event working for quote --- src/views/quote_view.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/views/quote_view.js b/src/views/quote_view.js index b7787ac..da154c8 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -12,7 +12,13 @@ const QuoteView = Backbone.View.extend({ return this; }, //end of render - + events: { + 'click button.alert': 'buyStock', + }, + buyStock: function(e) { + console.log("button is clicked"); + this.model.buy(); + } }); // end of QuoteView export default QuoteView; From ecf884ba86a496010ef7fb8ca34573e58c904aaf Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Wed, 13 Dec 2017 14:34:27 -0800 Subject: [PATCH 5/7] sell method and click event working for quote --- src/views/quote_view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/quote_view.js b/src/views/quote_view.js index da154c8..ac04d2b 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -14,10 +14,14 @@ const QuoteView = Backbone.View.extend({ }, //end of render events: { 'click button.alert': 'buyStock', + 'click button.success': 'sellStock', }, buyStock: function(e) { - console.log("button is clicked"); this.model.buy(); + }, + sellStock: function(e) { + console.log("button is clicked"); + this.model.sell(); } }); // end of QuoteView From 288ec95cc9a1e3a7a632d89db81369e1b2341666 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Fri, 15 Dec 2017 15:57:10 -0800 Subject: [PATCH 6/7] added underscore template for tradesList, added listTrades event in quote list view, added trades template to quote initialize, trades list is displaying in trade history panel --- src/app.js | 1 + src/models/quote.js | 2 ++ src/views/quote_list_view.js | 8 ++++++++ src/views/quote_view.js | 3 +++ 4 files changed, 14 insertions(+) diff --git a/src/app.js b/src/app.js index b7b6dc8..e050486 100644 --- a/src/app.js +++ b/src/app.js @@ -41,6 +41,7 @@ $(document).ready(function() { const quoteListView = new QuoteListView({ model: quotes, template: _.template($('#quote-template').html()), + tradesTemplate: _.template($('#trade-template').html()), el: 'main' }); diff --git a/src/models/quote.js b/src/models/quote.js index f9f7c9f..581533e 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -9,11 +9,13 @@ const Quote = Backbone.Model.extend({ buy() { this.set('price', this.get('price') + 1) // Implement this function to increase the price by $1.00 + this.set('buy', true); }, sell() { this.set('price', this.get('price') - 1) // Implement this function to decrease the price by $1.00 + this.set('buy', false); }, }); diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index f7b3ee5..93af01c 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -6,6 +6,7 @@ import Quote from '../models/quote'; const QuoteListView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.tradesTemplate = params.tradesTemplate; this.listenTo(this.model, 'update', this.render); }, render() { @@ -14,14 +15,21 @@ const QuoteListView = Backbone.View.extend({ const quoteView = new QuoteView({ model: quote, template: this.template, + tradesTemplate: this.tradesTemplate, tagName: 'li', className: 'quote' }); + this.listenTo(quoteView, 'listTrades', this.listTrades) this.$('#quotes').append(quoteView.render().$el); }); return this; }, // end of render + listTrades(quoteView){ + const compiledTradesTemplate = quoteView.tradesTemplate(quoteView.model.toJSON()); + this.$('#trades').prepend(compiledTradesTemplate); + } + }); //end of QuoteListView export default QuoteListView diff --git a/src/views/quote_view.js b/src/views/quote_view.js index ac04d2b..e63dc83 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -4,6 +4,7 @@ import Quote from '../models/quote'; const QuoteView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.tradesTemplate = params.tradesTemplate; this.listenTo(this.model, "change", this.render); }, render() { @@ -18,10 +19,12 @@ const QuoteView = Backbone.View.extend({ }, buyStock: function(e) { this.model.buy(); + this.trigger('listTrades', this); }, sellStock: function(e) { console.log("button is clicked"); this.model.sell(); + this.trigger('listTrades', this); } }); // end of QuoteView From f784af4d42ff795992c7cad20bf4bab955f1939b Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Mon, 18 Dec 2017 07:38:05 -0800 Subject: [PATCH 7/7] order buy sell button not responding --- dist/index.html | 8 ++++++-- src/app.js | 14 ++++++++++++++ src/collections/order_list.js | 8 ++++++++ src/models/order.js | 17 +++++++++++++++++ src/views/order_list_view.js | 31 +++++++++++++++++++++++++++++++ src/views/order_view.js | 35 +++++++++++++++++++++++++++++++++++ src/views/quote_view.js | 1 - 7 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 src/collections/order_list.js create mode 100644 src/models/order.js create mode 100644 src/views/order_list_view.js create mode 100644 src/views/order_view.js diff --git a/dist/index.html b/dist/index.html index 8a046fa..1014243 100644 --- a/dist/index.html +++ b/dist/index.html @@ -57,9 +57,13 @@

Open Orders

Order Entry Form

-
+ - + + + + diff --git a/src/app.js b/src/app.js index e050486..4bc8c6c 100644 --- a/src/app.js +++ b/src/app.js @@ -12,6 +12,12 @@ import QuoteList from './collections/quote_list'; import QuoteView from './views/quote_view'; import QuoteListView from './views/quote_list_view'; +import Order from './models/order'; +import OrderList from './collections/order_list'; + +import OrderView from './views/order_view'; +import OrderListView from './views/order_list_view'; + const quoteData = [ { symbol: 'HUMOR', @@ -34,6 +40,7 @@ const quoteData = [ $(document).ready(function() { const quotes = new QuoteList(quoteData); + const orders = new OrderList(); const simulator = new Simulator({ quotes: quotes, }); @@ -45,7 +52,14 @@ $(document).ready(function() { el: 'main' }); + const orderListView = new OrderListView({ + model: orders, + template: _.template($('#order-template').html()), + el: 'main' + }); + quoteListView.render(); + orderListView.render(); simulator.start(); diff --git a/src/collections/order_list.js b/src/collections/order_list.js new file mode 100644 index 0000000..8d7cabd --- /dev/null +++ b/src/collections/order_list.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; +import Order from 'models/order'; + +const OrderList = Backbone.Collection.extend({ + model: Order, +}); + +export default OrderList; diff --git a/src/models/order.js b/src/models/order.js new file mode 100644 index 0000000..b2a8e82 --- /dev/null +++ b/src/models/order.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; + +const Order = Backbone.Model.extend({ + defaults: { + symbol: 'UNDEF', + targetPrice: 0.00 + }, + + buyOrder(){ + this.set('buy', true); + }, + sellOrder() { + this.set('buy', false); + }, +}); + +export default Order; diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js new file mode 100644 index 0000000..7e9b796 --- /dev/null +++ b/src/views/order_list_view.js @@ -0,0 +1,31 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import OrderView from '../views/order_view'; +import Order from '../models/order'; + +const OrderListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#orders').empty(); + this.model.each((order) => { + const orderView = new OrderView({ + model: order, + template: this.template, + tagName: 'li', + className: 'order' + }); + + this.$('#orders').append(orderView.render().$el); + }); + return this; + }, // end of render + listOrders(orderView){ + const compiledOrdersTemplate = orderView.template(orderView.model.toJSON()); + this.$('#orders').prepend(compiledOrdersTemplate); + } +}); + +export default OrderListView; diff --git a/src/views/order_view.js b/src/views/order_view.js new file mode 100644 index 0000000..4b20cdb --- /dev/null +++ b/src/views/order_view.js @@ -0,0 +1,35 @@ +import Backbone from 'backbone'; +import Order from '../models/order'; + +const OrderView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.orderTemplate = params.orderTemplate; + this.listenTo(this.model, "update", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, //end of render + events: { + 'click button.alert': 'addOrderBuy', + 'click button.success': 'addOrderSell', + }, + addOrderSell(event) { + event.preventDefault(); + const orderData = {}; + ['symbol', 'price-target'].forEach( (field) => { + const val = this.$(`#add-order-form input[name=${field}]`).val(); + if (val != '') { + orderData[field] = val; + } + }); + const newOrder = new Order(orderData); + this.model.add(newOrder); + this.trigger('listOrders', this); + }, +}); // end of OrderView + +export default OrderView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js index e63dc83..9dcc901 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -22,7 +22,6 @@ const QuoteView = Backbone.View.extend({ this.trigger('listTrades', this); }, sellStock: function(e) { - console.log("button is clicked"); this.model.sell(); this.trigger('listTrades', this); }