From 5a008bebaed976100e406883efd909aa60a063ae Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Tue, 12 Dec 2017 21:59:52 -0800 Subject: [PATCH 01/17] instansiate QuoteListView in document.ready --- dist/index.html | 3 +-- src/app.js | 6 ++++++ src/views/quote_list_view.js | 3 +++ 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 src/views/quote_list_view.js diff --git a/dist/index.html b/dist/index.html index 8a046fa..110a0e2 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,8 +5,7 @@ - - +////
diff --git a/src/app.js b/src/app.js index 03ec910..014b25b 100644 --- a/src/app.js +++ b/src/app.js @@ -31,5 +31,11 @@ $(document).ready(function() { quotes: quotes, }); + const quoteListView = new QuoteListView({ + el: 'main', + model: quoteList, + template: _.template($('quote-template').html()), + }) + simulator.start(); }); diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js new file mode 100644 index 0000000..8477a57 --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,3 @@ +import Backbone from 'backbone'; + +import QuoteView from './quote_view'; From 1ada40c60bbb191e7c95ffd235813e6d701084ec Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Tue, 12 Dec 2017 22:06:02 -0800 Subject: [PATCH 02/17] add render to quoteListView in document.ready --- dist/index.html | 2 +- src/app.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/index.html b/dist/index.html index 110a0e2..9a429c4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,7 +5,7 @@ -//// +
diff --git a/src/app.js b/src/app.js index 014b25b..12a2171 100644 --- a/src/app.js +++ b/src/app.js @@ -35,7 +35,7 @@ $(document).ready(function() { el: 'main', model: quoteList, template: _.template($('quote-template').html()), - }) - + }); + quoteListView.render(); simulator.start(); }); From 29cbf73c9fe9796d4d90e69555c4a77e4fdf2a6f Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Wed, 13 Dec 2017 10:07:31 -0800 Subject: [PATCH 03/17] made quote_list_view initialize --- src/views/quote_list_view.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 8477a57..3c95cc1 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -1,3 +1,19 @@ import Backbone from 'backbone'; import QuoteView from './quote_view'; +import Quote from '../models/task'; +import CurrentQuoteView from './current_selected_view'; + +const QuoteListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#quotes').empty(); + } + events: { + 'click #add-' + } +}) From 0d328badb7b87a65cd072c1a9710a3d70f04c140 Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Wed, 13 Dec 2017 11:58:08 -0800 Subject: [PATCH 04/17] made render for QuoteListView --- src/app.js | 1 + src/views/quote_list_view.js | 20 +++++++++++++++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/app.js b/src/app.js index 12a2171..6ba6124 100644 --- a/src/app.js +++ b/src/app.js @@ -5,6 +5,7 @@ import $ from 'jquery'; import Simulator from 'models/simulator'; import QuoteList from 'collections/quote_list'; +import QuoteListView from './views/quote_list_view' const quoteData = [ { diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 3c95cc1..4b8df45 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -1,8 +1,8 @@ import Backbone from 'backbone'; import QuoteView from './quote_view'; -import Quote from '../models/task'; -import CurrentQuoteView from './current_selected_view'; +import Quote from '../models/quote'; +// import CurrentQuoteView from './current_selected_view'; const QuoteListView = Backbone.View.extend({ initialize(params) { @@ -12,8 +12,18 @@ const QuoteListView = Backbone.View.extend({ }, render() { this.$('#quotes').empty(); + this.model.each((quote) => { + const quoteView = new QuoteView({ + model: quote, + template: this.template, + tagName: 'li', + className: 'quote', + }); + this.$('#quotes').append(quoteView.render().$el); + }) + return this; } - events: { - 'click #add-' - } + }) + +export default QuoteListView; From 79a0c0f3322e8b5e4b4bd37ce0c7484fd83b14e2 Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Wed, 13 Dec 2017 12:04:52 -0800 Subject: [PATCH 05/17] made quote_view.js file --- src/views/quote_view.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/views/quote_view.js diff --git a/src/views/quote_view.js b/src/views/quote_view.js new file mode 100644 index 0000000..e69de29 From 2fc538627d3fff9a9261770d393a6363654d317c Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Wed, 13 Dec 2017 13:06:11 -0800 Subject: [PATCH 06/17] create both initialize and render func for QuoteView --- dist/index.html | 4 ++-- src/app.js | 14 +++++++++----- src/views/quote_list_view.js | 10 +++++----- src/views/quote_view.js | 18 ++++++++++++++++++ 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9a429c4..69122f3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -84,7 +84,7 @@

Order Entry Form

@@ -109,7 +109,7 @@

<%- symbol %>

<%- buy ? 'buy' : 'sell' %> at - $<%- targetPrice.toFixed(2) %> + ₩<%- targetPrice.toFixed(2) %>
diff --git a/order_list_view.js b/order_list_view.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app.js b/src/app.js index ee49873..547c2b8 100644 --- a/src/app.js +++ b/src/app.js @@ -12,11 +12,11 @@ import TradeListView from './views/trade_list_view'; const quoteData = [ { - symbol: 'HUMOR', + symbol: '유머', price: 88.50, }, { - symbol: 'CLOTH', + symbol: '피복', price: 81.70, }, { @@ -29,12 +29,17 @@ const quoteData = [ }, ]; +quoteData.forEach(function(quote) { + $('#dropdown').append(``) +}) + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); + // $('#') simulator.start(); let bus = {}; diff --git a/src/views/order_view.js b/src/views/order_view.js new file mode 100644 index 0000000..96273b0 --- /dev/null +++ b/src/views/order_view.js @@ -0,0 +1 @@ +import Backbone from 'backbone'; diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 0729169..645488b 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -7,7 +7,6 @@ import QuoteView from '../views/quote_view'; const QuoteListView = Backbone.View.extend({ initialize(params) { this.template = params.template; - this.tradeTemplate = params.tradeTemplate; this.bus = params.bus; this.listenTo(this.model, 'update', this.render); }, @@ -25,8 +24,6 @@ const QuoteListView = Backbone.View.extend({ }); return this; } - // this.$('#trades').prepend(); - }); export default QuoteListView; diff --git a/src/views/trade_list_view.js b/src/views/trade_list_view.js index 0bb9e9a..87126d7 100644 --- a/src/views/trade_list_view.js +++ b/src/views/trade_list_view.js @@ -6,15 +6,12 @@ import Quote from '../models/quote'; const TradeListView = Backbone.View.extend({ initialize(params) { this.template = params.template - // this.tradeTemplate = params.tradeTemplate; this.bus = params.bus this.listenTo(this.bus, 'makeTrade', this.addTrade); }, render() { - // this.$('#trades').empty(); - // - // return this; + }, addTrade(trade) { console.log('trade connection'); From dd1d6dd561763717e1f7f649da7a941289aabc7b Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Fri, 15 Dec 2017 16:01:41 -0800 Subject: [PATCH 10/17] order_view_form: add readOrderFormData func --- dist/index.html | 4 ++-- src/app.js | 9 ++++++- src/views/order_form_view.js | 46 ++++++++++++++++++++++++++++++++++++ src/views/order_view.js | 2 ++ src/views/trade_list_view.js | 4 ++-- 5 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 src/views/order_form_view.js diff --git a/dist/index.html b/dist/index.html index aa3ed72..f32c6dc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -56,9 +56,9 @@

Open Orders

Order Entry Form

-
+ - diff --git a/src/app.js b/src/app.js index 547c2b8..dc028d1 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,7 @@ import QuoteList from './collections/quote_list'; import QuoteListView from './views/quote_list_view'; import TradeListView from './views/trade_list_view'; +import OrderFormView from './views/order_form_view'; const quoteData = [ { @@ -33,13 +34,14 @@ quoteData.forEach(function(quote) { $('#dropdown').append(``) }) + + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); - // $('#') simulator.start(); let bus = {}; @@ -59,6 +61,11 @@ $(document).ready(function() { template: tradeTemplate, bus: bus, }) + const orderFormView = new OrderFormView({ + // quoteData: quoteData, + el: '.order-entry-form' + }); + quoteListView.render(); }); diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js new file mode 100644 index 0000000..39eb3ae --- /dev/null +++ b/src/views/order_form_view.js @@ -0,0 +1,46 @@ +import Backbone from 'backbone'; + +const orderFIELDS = ['symbol', 'price-target']; +const orderFieldSelector = ['select', 'input'] + + +const OrderFormView = Backbone.View.extend({ + initialize(params){ + this.form = params.form; + this.bus = params.bus; + }, + // quoteData.each((quote) => { + // $('#dropdown').append(``); + // }), + + readOrderFormData() { + const orderData = {}; + + const $inputSymbolValue = this.$(`select[name="symbol"]`).val();; + const $inputPriceTargert = this.$(`input[name="price-target"]`) + + + const priceValue = $inputPriceTargert.val(); + console.log(`priceValue = ${priceValue}`); + + // Don't take empty strings, so that Backbone can + // fill in default values + orderData['symbol'] = $inputSymbolValue; + if (priceValue != '') { + orderData['targetPrice'] = priceValue; + } + $inputPriceTargert.val(''); + return orderData; + }, + events: { + 'click button.btn-buy': 'orderBuy', + }, + orderBuy(event) { + event.preventDefault(); + console.log('test click orderBuy'); + let orderObject = this.readOrderFormData() + console.log(orderObject); + } + +}); +export default OrderFormView; diff --git a/src/views/order_view.js b/src/views/order_view.js index 96273b0..a2b5a95 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -1 +1,3 @@ import Backbone from 'backbone'; + +import _ from 'underscore'; diff --git a/src/views/trade_list_view.js b/src/views/trade_list_view.js index 87126d7..60f9806 100644 --- a/src/views/trade_list_view.js +++ b/src/views/trade_list_view.js @@ -1,4 +1,4 @@ -import Backbone from 'Backbone'; +import Backbone from 'backbone'; import _ from 'underscore'; import Quote from '../models/quote'; @@ -11,7 +11,7 @@ const TradeListView = Backbone.View.extend({ this.listenTo(this.bus, 'makeTrade', this.addTrade); }, render() { - + }, addTrade(trade) { console.log('trade connection'); From 296c6fbf53cdd3659194e27a6476232cc446799f Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sat, 16 Dec 2017 21:12:35 -0800 Subject: [PATCH 11/17] properly render one order to DOM. need to work on rendering order collections --- dist/index.html | 4 ++-- order_list_view.js | 0 src/app.js | 27 +++++++++++++++++++---- src/collections/order_list.js | 8 +++++++ src/models/order.js | 13 +++++++++++ src/views/order_form_view.js | 32 +++++++++++++++++++-------- src/views/order_list_view.js | 41 +++++++++++++++++++++++++++++++++++ src/views/order_view.js | 19 ++++++++++++++++ src/views/quote_list_view.js | 1 + src/views/trade_list_view.js | 1 + 10 files changed, 131 insertions(+), 15 deletions(-) delete mode 100644 order_list_view.js create mode 100644 src/collections/order_list.js create mode 100644 src/models/order.js create mode 100644 src/views/order_list_view.js diff --git a/dist/index.html b/dist/index.html index f32c6dc..4f713ea 100644 --- a/dist/index.html +++ b/dist/index.html @@ -43,7 +43,7 @@

Trade History

-
+

Open Orders

@@ -109,7 +109,7 @@

<%- symbol %>

<%- buy ? 'buy' : 'sell' %> at - ₩<%- targetPrice.toFixed(2) %> + ₩<%- targetPrice %>
diff --git a/order_list_view.js b/order_list_view.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/app.js b/src/app.js index dc028d1..514eb9d 100644 --- a/src/app.js +++ b/src/app.js @@ -3,13 +3,16 @@ import 'css/app.css'; import $ from 'jquery'; import _ from 'underscore'; - + import Simulator from './models/simulator'; import QuoteList from './collections/quote_list'; +import Order from './models/order' +import OrderList from './collections/order_list' import QuoteListView from './views/quote_list_view'; import TradeListView from './views/trade_list_view'; import OrderFormView from './views/order_form_view'; +import OrderListView from './views/order_list_view'; const quoteData = [ { @@ -41,18 +44,21 @@ $(document).ready(function() { const simulator = new Simulator({ quotes: quotes, }); + const orders = new OrderList(); simulator.start(); let bus = {}; bus = _.extend(bus, Backbone.Events); + let template = _.template($('#quote-template').html()); let tradeTemplate = _.template($('#trade-template').html()); + let orderTemplate = _.template($('#order-template').html()); const quoteListView = new QuoteListView({ - el: 'main', + el: '#quotes-container', model: quotes, - template: _.template($('#quote-template').html()), + template: template, bus: bus, }); @@ -63,9 +69,22 @@ $(document).ready(function() { }) const orderFormView = new OrderFormView({ // quoteData: quoteData, - el: '.order-entry-form' + el: '.order-entry-form', + bus: bus, + }); + + const order = new Order({ + bus: bus, + }) + + const orderListView = new OrderListView({ + el: '.orders-list-container', + model: orders, + template: orderTemplate, + bus: bus, }); + orderListView.render(); quoteListView.render(); }); diff --git a/src/collections/order_list.js b/src/collections/order_list.js new file mode 100644 index 0000000..2e83bb2 --- /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..13bf6bd --- /dev/null +++ b/src/models/order.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +const Order = Backbone.Model.extend({ + defaults: { + symbol: 'UNDEF', + targetPrice: 9.00, + buy: true, + }, + render() { + + }, +}) +export default Order diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index 39eb3ae..e5333c4 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -1,7 +1,8 @@ import Backbone from 'backbone'; -const orderFIELDS = ['symbol', 'price-target']; -const orderFieldSelector = ['select', 'input'] +import Order from '../models/order'; + + const OrderFormView = Backbone.View.extend({ @@ -13,14 +14,14 @@ const OrderFormView = Backbone.View.extend({ // $('#dropdown').append(``); // }), - readOrderFormData() { + readOrderFormData(type) { const orderData = {}; - const $inputSymbolValue = this.$(`select[name="symbol"]`).val();; + const $inputSymbolValue = this.$(`select[name="symbol"]`).val(); const $inputPriceTargert = this.$(`input[name="price-target"]`) - const priceValue = $inputPriceTargert.val(); + const priceValue = parseFloat($inputPriceTargert.val()).toFixed(2); console.log(`priceValue = ${priceValue}`); // Don't take empty strings, so that Backbone can @@ -29,17 +30,30 @@ const OrderFormView = Backbone.View.extend({ if (priceValue != '') { orderData['targetPrice'] = priceValue; } + orderData['buy'] = type $inputPriceTargert.val(''); return orderData; }, events: { - 'click button.btn-buy': 'orderBuy', + 'click button.btn-buy': 'buyOrder', + 'click button.btn-sell': 'orderSell', }, - orderBuy(event) { + buyOrder(event) { event.preventDefault(); - console.log('test click orderBuy'); - let orderObject = this.readOrderFormData() + console.log('test click order'); + let orderObject = this.readOrderFormData(true) console.log(orderObject); + + let order = new Order(orderObject) + console.log(order); + this.bus.trigger('newOrder', orderObject) + }, + + orderSell(event) { + event.preventDefault(); + console.log('test click orderSell'); + let orderObject = this.readOrderFormData(false); + this.bus.trigger('newOrder', orderObject) } }); diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js new file mode 100644 index 0000000..b5fcfd4 --- /dev/null +++ b/src/views/order_list_view.js @@ -0,0 +1,41 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; + +import Order from '../models/order' +import OrderView from './order_view'; + + +const OrderListView = Backbone.View.extend({ + initialize(params) { + console.log(params); + this.template = params.template; + // this.template = "orderTemplate"; + this.bus = params.bus; + + this.listenTo(this.bus, 'newOrder', this.render); + }, + render(orderObject) { + this.$('#orders').empty(); + // console.log('render order_list_view'); + // console.log(orderObject); + // this.model.each((order) => { + // console.log(order); + const orderView = new OrderView({ + model: new Order(orderObject), + template: this.template, + tagName:'li', + className: 'order', + bus: this.bus, + }); + // console.log(orderView); + this.$('#orders').append(orderView.render().$el); + // }); + return this; + }, + renderORDER(orderObject) { + console.log('renderORDER connection'); + console.log(orderObject); + } +}) + +export default OrderListView; diff --git a/src/views/order_view.js b/src/views/order_view.js index a2b5a95..7d9fd35 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -1,3 +1,22 @@ import Backbone from 'backbone'; +import Order from '../models/order'; import _ from 'underscore'; + +const OrderView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.bus = params.bus; + }, + render() { + console.log('render order_view'); + + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate) + + return this; + }, + +}) + +export default OrderView; diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 645488b..bc5048e 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -12,6 +12,7 @@ const QuoteListView = Backbone.View.extend({ }, render() { this.$('#quotes').empty(); + console.log(this.model); this.model.each((quote) => { const quoteView = new QuoteView({ model: quote, diff --git a/src/views/trade_list_view.js b/src/views/trade_list_view.js index 60f9806..e6dc9d5 100644 --- a/src/views/trade_list_view.js +++ b/src/views/trade_list_view.js @@ -5,6 +5,7 @@ import Quote from '../models/quote'; const TradeListView = Backbone.View.extend({ initialize(params) { + console.log(params); this.template = params.template this.bus = params.bus From 5e749674db5ea3df2fc007e4a57307c8df49c972 Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sat, 16 Dec 2017 21:56:42 -0800 Subject: [PATCH 12/17] render order collection properly --- dist/index.html | 2 +- src/views/order_form_view.js | 5 +---- src/views/order_list_view.js | 34 +++++++++++++++++++++++++--------- src/views/trade_list_view.js | 1 - 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/dist/index.html b/dist/index.html index 4f713ea..1f9287b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -62,7 +62,7 @@

Order Entry Form

- + diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index e5333c4..5782b97 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -42,10 +42,7 @@ const OrderFormView = Backbone.View.extend({ event.preventDefault(); console.log('test click order'); let orderObject = this.readOrderFormData(true) - console.log(orderObject); - - let order = new Order(orderObject) - console.log(order); + this.bus.trigger('newOrder', orderObject) }, diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js index b5fcfd4..6f062b6 100644 --- a/src/views/order_list_view.js +++ b/src/views/order_list_view.js @@ -7,31 +7,47 @@ import OrderView from './order_view'; const OrderListView = Backbone.View.extend({ initialize(params) { - console.log(params); this.template = params.template; - // this.template = "orderTemplate"; this.bus = params.bus; + this.listenTo(this.bus, 'newOrder', this.addOrder); this.listenTo(this.bus, 'newOrder', this.render); }, render(orderObject) { this.$('#orders').empty(); - // console.log('render order_list_view'); - // console.log(orderObject); - // this.model.each((order) => { - // console.log(order); + console.log('render order_list_view'); + console.log(this.model); + this.model.each((order) => { + console.log(order); const orderView = new OrderView({ - model: new Order(orderObject), + model: order, template: this.template, tagName:'li', className: 'order', bus: this.bus, }); - // console.log(orderView); + console.log(orderView); this.$('#orders').append(orderView.render().$el); - // }); + }); return this; }, + addOrder(orderObject) { + console.log(orderObject); + // this.quoteList.each((quote) => { + // if (orderObject['symbol'] == quote.get('symbol')) + // orderObject['quote'] = quote + // }) + const newOrder = new Order(orderObject); + if (newOrder.isValid()) { + console.log('I am a valid order') + this.model.add(newOrder); + // this.clearFormData(); + } + // else { + // this.updateStatusMessageFrom(newOpenOrder.validationError); + // newOpenOrder.destroy(); + // } + }, renderORDER(orderObject) { console.log('renderORDER connection'); console.log(orderObject); diff --git a/src/views/trade_list_view.js b/src/views/trade_list_view.js index e6dc9d5..60f9806 100644 --- a/src/views/trade_list_view.js +++ b/src/views/trade_list_view.js @@ -5,7 +5,6 @@ import Quote from '../models/quote'; const TradeListView = Backbone.View.extend({ initialize(params) { - console.log(params); this.template = params.template this.bus = params.bus From 217a4c47a85f2fd7119f635f579fc2a68904e3ed Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sat, 16 Dec 2017 22:46:04 -0800 Subject: [PATCH 13/17] Add cancel functionality to orders --- src/views/order_list_view.js | 18 +++++++++--------- src/views/order_view.js | 13 ++++++++++++- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js index 6f062b6..2b5f73a 100644 --- a/src/views/order_list_view.js +++ b/src/views/order_list_view.js @@ -10,15 +10,19 @@ const OrderListView = Backbone.View.extend({ this.template = params.template; this.bus = params.bus; + this.listenTo(this.model, 'update', this.render) + this.listenTo(this.bus, 'newOrder', this.addOrder); this.listenTo(this.bus, 'newOrder', this.render); + // this.listenTo(this.bus, 'cancelOrder', cancelOrder) + }, render(orderObject) { this.$('#orders').empty(); - console.log('render order_list_view'); - console.log(this.model); + // console.log('render order_list_view'); + // console.log(this.model); this.model.each((order) => { - console.log(order); + // console.log(order); const orderView = new OrderView({ model: order, template: this.template, @@ -26,17 +30,13 @@ const OrderListView = Backbone.View.extend({ className: 'order', bus: this.bus, }); - console.log(orderView); + // console.log(orderView); this.$('#orders').append(orderView.render().$el); }); return this; }, addOrder(orderObject) { - console.log(orderObject); - // this.quoteList.each((quote) => { - // if (orderObject['symbol'] == quote.get('symbol')) - // orderObject['quote'] = quote - // }) + // console.log(orderObject); const newOrder = new Order(orderObject); if (newOrder.isValid()) { console.log('I am a valid order') diff --git a/src/views/order_view.js b/src/views/order_view.js index 7d9fd35..ee99531 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -7,15 +7,26 @@ const OrderView = Backbone.View.extend({ initialize(params) { this.template = params.template; this.bus = params.bus; + + this.listenTo(this.bus, 'cancelOrder', this.cancelOrder) }, render() { - console.log('render order_view'); + // console.log('render order_view'); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate) return this; }, + events: { + 'click button.btn-cancel': 'cancelOrder' + }, + cancelOrder() { + console.log('i am in cancelOrder'); + console.log(this); + this.model.destroy(); + + } }) From 16912852091e811eb92011975a3d3489ad0e65d0 Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sun, 17 Dec 2017 21:15:17 -0800 Subject: [PATCH 14/17] first attempt at auto-buy functionality. not working --- dist/index.html | 2 +- src/app.js | 20 +++++++++++++------- src/models/simulator.js | 4 ++-- src/views/order_form_view.js | 10 +++++++--- src/views/order_list_view.js | 28 ++++++++++++++++++++++------ src/views/order_view.js | 22 +++++++++++++++++++++- src/views/quote_list_view.js | 6 ++++++ src/views/quote_view.js | 6 +++++- 8 files changed, 77 insertions(+), 21 deletions(-) diff --git a/dist/index.html b/dist/index.html index 1f9287b..44a5f59 100644 --- a/dist/index.html +++ b/dist/index.html @@ -62,7 +62,7 @@

Order Entry Form

- + diff --git a/src/app.js b/src/app.js index 514eb9d..4a2b732 100644 --- a/src/app.js +++ b/src/app.js @@ -3,7 +3,7 @@ import 'css/app.css'; import $ from 'jquery'; import _ from 'underscore'; - + import Simulator from './models/simulator'; import QuoteList from './collections/quote_list'; import Order from './models/order' @@ -40,13 +40,7 @@ quoteData.forEach(function(quote) { $(document).ready(function() { - const quotes = new QuoteList(quoteData); - const simulator = new Simulator({ - quotes: quotes, - }); - const orders = new OrderList(); - simulator.start(); let bus = {}; bus = _.extend(bus, Backbone.Events); @@ -55,6 +49,12 @@ $(document).ready(function() { let tradeTemplate = _.template($('#trade-template').html()); let orderTemplate = _.template($('#order-template').html()); + const quotes = new QuoteList(quoteData); + const simulator = new Simulator({ + quotes: quotes, + }); + const orders = new OrderList(); + const quoteListView = new QuoteListView({ el: '#quotes-container', model: quotes, @@ -71,6 +71,8 @@ $(document).ready(function() { // quoteData: quoteData, el: '.order-entry-form', bus: bus, + orderList: orders, + quoteList: quotes, }); const order = new Order({ @@ -84,7 +86,11 @@ $(document).ready(function() { bus: bus, }); + orderListView.render(); quoteListView.render(); + simulator.start(); + + }); diff --git a/src/models/simulator.js b/src/models/simulator.js index b1bb585..e709253 100644 --- a/src/models/simulator.js +++ b/src/models/simulator.js @@ -7,7 +7,7 @@ const Simulator = Backbone.Model.extend({ }, start() { - // setInterval(() => this._tick(), 1000); + setInterval(() => this._tick(), 1000); }, // PRIVATE FUNCTIONS \\ @@ -20,7 +20,7 @@ const Simulator = Backbone.Model.extend({ this.quotes.forEach((quote) => { // Calculate a random price movement - const maxChange = 1.00; + const maxChange = 0.10; const minChange = 0.00; let change = _.random(minChange * 10, maxChange * 10) / 10; diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index 5782b97..73321f5 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -1,8 +1,9 @@ import Backbone from 'backbone'; +import Quote from '../models/quote'; import Order from '../models/order'; - - +import OrderList from '../collections/order_list'; +import QuoteList from '../collections/quote_list'; const OrderFormView = Backbone.View.extend({ @@ -31,6 +32,9 @@ const OrderFormView = Backbone.View.extend({ orderData['targetPrice'] = priceValue; } orderData['buy'] = type + console.log(this.quote); + orderData['quote'] = this.quote.find({symbol: orderData['symbol']}); + $inputPriceTargert.val(''); return orderData; }, @@ -42,7 +46,7 @@ const OrderFormView = Backbone.View.extend({ event.preventDefault(); console.log('test click order'); let orderObject = this.readOrderFormData(true) - + this.bus.trigger('newOrder', orderObject) }, diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js index 2b5f73a..5f5b85c 100644 --- a/src/views/order_list_view.js +++ b/src/views/order_list_view.js @@ -14,7 +14,7 @@ const OrderListView = Backbone.View.extend({ this.listenTo(this.bus, 'newOrder', this.addOrder); this.listenTo(this.bus, 'newOrder', this.render); - // this.listenTo(this.bus, 'cancelOrder', cancelOrder) + // this.listenTo(this.bus, 'update', this.completeOrder) }, render(orderObject) { @@ -35,6 +35,21 @@ const OrderListView = Backbone.View.extend({ }); return this; }, + updateStatusMessageFrom(messageHash) { + const $statusMessages = this.$('#status-messages'); + $statusMessages.empty(); + Object.keys(messageHash).forEach((messageType) => { + messageHash[messageType].forEach((message) => { + $statusMessages.append(`
  • ${message}
    • `); + }); + }); + $statusMessages.show(); + }, + updateStatusMessage(message) { + this.updateStatusMessageFrom({ + 'order': [message], + }); + }, addOrder(orderObject) { // console.log(orderObject); const newOrder = new Order(orderObject); @@ -42,13 +57,14 @@ const OrderListView = Backbone.View.extend({ console.log('I am a valid order') this.model.add(newOrder); // this.clearFormData(); + this.updateStatusMessage(`${newOrder.get('symbol')} Created!`); + + } else { + this.updateStatusMessageFrom(newOrder.validationError); + newOrder.destroy(); } - // else { - // this.updateStatusMessageFrom(newOpenOrder.validationError); - // newOpenOrder.destroy(); - // } }, - renderORDER(orderObject) { + completeOrder() { console.log('renderORDER connection'); console.log(orderObject); } diff --git a/src/views/order_view.js b/src/views/order_view.js index ee99531..10cea95 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -9,6 +9,8 @@ const OrderView = Backbone.View.extend({ this.bus = params.bus; this.listenTo(this.bus, 'cancelOrder', this.cancelOrder) + this.listenTo(this.model.get('quote'), 'change', this.executeOrder); + }, render() { // console.log('render order_view'); @@ -26,7 +28,25 @@ const OrderView = Backbone.View.extend({ console.log(this); this.model.destroy(); - } + }, + executeOrder() { + console.log('execute order is being called'); + let quote = this.model.get('quote'); + + if (this.model.get('buy')) { + if (this.model.get('targetPrice') >= quote.get('price')) { + quote.buy(); + this.model.destroy(); + this.remove(); + } + } else { + if (this.model.get('targetPrice') <= quote.get('price')) { + quote.sell(); + this.model.destroy(); + this.remove(); + } + } + }, }) diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index bc5048e..b9c9a0f 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -24,6 +24,12 @@ const QuoteListView = Backbone.View.extend({ this.$('#quotes').append(quoteView.render().$el); }); return this; + }, + events: { + 'update this': 'checkQuote', + }, + checkQuote() { + this.bus.trigger('completeOrder', this) } }); diff --git a/src/views/quote_view.js b/src/views/quote_view.js index cdc7092..6a91c24 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -17,10 +17,11 @@ const QuoteView = Backbone.View.extend({ events: { 'click button.btn-buy': 'buyQuote', 'click button.btn-sell': 'sellQuote', + 'update this.model': 'makeTradeObject' }, buyQuote(event) { console.log('clicked into buyQuote') - // this.trigger('makeTrade', makeTradeObject); + console.log(this.model); this.makeTradeObject(true), this.model.buy() }, @@ -40,6 +41,9 @@ const QuoteView = Backbone.View.extend({ console.log(trade); this.bus.trigger('makeTrade', trade); }, + checkQuote() { + this.bus.trigger('change', this.model) + } }); export default QuoteView; From 563bbf36bed59c90c01c14c78e29e3bad44d37cb Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sun, 17 Dec 2017 22:43:27 -0800 Subject: [PATCH 15/17] functionality for auto-buy works. making the transaction appear in the view is not working. --- src/views/order_form_view.js | 10 +++++----- src/views/order_list_view.js | 4 ---- src/views/order_view.js | 6 +++++- src/views/trade_list_view.js | 1 + 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index 73321f5..8b3b86e 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -8,8 +8,8 @@ import QuoteList from '../collections/quote_list'; const OrderFormView = Backbone.View.extend({ initialize(params){ - this.form = params.form; this.bus = params.bus; + this.quoteList = params.quoteList }, // quoteData.each((quote) => { // $('#dropdown').append(``); @@ -23,7 +23,7 @@ const OrderFormView = Backbone.View.extend({ const priceValue = parseFloat($inputPriceTargert.val()).toFixed(2); - console.log(`priceValue = ${priceValue}`); + // console.log(`priceValue = ${priceValue}`); // Don't take empty strings, so that Backbone can // fill in default values @@ -32,9 +32,9 @@ const OrderFormView = Backbone.View.extend({ orderData['targetPrice'] = priceValue; } orderData['buy'] = type - console.log(this.quote); - orderData['quote'] = this.quote.find({symbol: orderData['symbol']}); - + console.log(this.quoteList); + console.log(orderData['symbol']) + orderData['quote'] = this.quoteList.find({symbol: orderData['symbol']}); $inputPriceTargert.val(''); return orderData; }, diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js index 5f5b85c..e07be53 100644 --- a/src/views/order_list_view.js +++ b/src/views/order_list_view.js @@ -64,10 +64,6 @@ const OrderListView = Backbone.View.extend({ newOrder.destroy(); } }, - completeOrder() { - console.log('renderORDER connection'); - console.log(orderObject); - } }) export default OrderListView; diff --git a/src/views/order_view.js b/src/views/order_view.js index 10cea95..35edbcc 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -30,13 +30,17 @@ const OrderView = Backbone.View.extend({ }, executeOrder() { - console.log('execute order is being called'); + console.log('I am inside execute order'); let quote = this.model.get('quote'); + console.log('this.model = '); + console.log(this.model); if (this.model.get('buy')) { if (this.model.get('targetPrice') >= quote.get('price')) { quote.buy(); this.model.destroy(); + // After trying to add a trade to the tradeHistroyView I am still getting an error saying the 'buy' attribute is undefined despite a console.log(this.model) = a model with 'buy' defined as true. Any help is appreciated. + this.bus.trigger('destroy', this) this.remove(); } } else { diff --git a/src/views/trade_list_view.js b/src/views/trade_list_view.js index 60f9806..7cf9336 100644 --- a/src/views/trade_list_view.js +++ b/src/views/trade_list_view.js @@ -9,6 +9,7 @@ const TradeListView = Backbone.View.extend({ this.bus = params.bus this.listenTo(this.bus, 'makeTrade', this.addTrade); + this.listenTo(this.bus, 'destroy', this.addTrade) }, render() { From 7f9a5589f185fd43d28149dc90a91aba156bef55 Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Sun, 17 Dec 2017 23:39:06 -0800 Subject: [PATCH 16/17] add tests for the order model validations --- spec/models/order_spec.js | 48 +++++++++++++++++++++++++++++++++++++++ src/models/order.js | 4 +--- 2 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 spec/models/order_spec.js diff --git a/spec/models/order_spec.js b/spec/models/order_spec.js new file mode 100644 index 0000000..b60f5af --- /dev/null +++ b/spec/models/order_spec.js @@ -0,0 +1,48 @@ +import Quote from 'models/quote'; +import Order from 'models/order'; + +describe('Order spec', () => { + let quote; + let order; + beforeEach(() => { + quote = new Quote({ + symbol: 'CLOTH', + price: 100.00, + }); + order = new Order({ + symbol: 'CLOTH', + quote: quote, + buy: true, + targetPrice: 100, + }) + }); + + describe('Create a new Order', () => { + it('creates a valid instance of an Order', () => { + order.set('targetPrice', 80.00); + order.set('buy', true); + + expect(order.isValid()).toEqual(true); + }) + + it('invalid order if price is not a number', () => { + order.set('targetPrice', 'hello'); + + expect(order.isValid()).toEqual(false); + }) + + it('invalid buy order if price is higher than market', () => { + order.set('targetPrice', 180); + order.set('buy', true); + + expect(order.isValid()).toEqual(false); + }) + + it('invalid sell order if price is lower than market', () => { + order.set('targetPrice', 8); + order.set('buy', false); + + expect(order.isValid()).toEqual(false); + }) + }); +}); diff --git a/src/models/order.js b/src/models/order.js index 13bf6bd..c56c78e 100644 --- a/src/models/order.js +++ b/src/models/order.js @@ -6,8 +6,6 @@ const Order = Backbone.Model.extend({ targetPrice: 9.00, buy: true, }, - render() { - - }, }) + export default Order From dec1445763de1d6c03fcbc44285bc0398b87cc2b Mon Sep 17 00:00:00 2001 From: Angela Wilson Date: Mon, 18 Dec 2017 09:08:30 -0800 Subject: [PATCH 17/17] add the order model validations --- src/models/order.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/models/order.js b/src/models/order.js index c56c78e..14069ae 100644 --- a/src/models/order.js +++ b/src/models/order.js @@ -6,6 +6,23 @@ const Order = Backbone.Model.extend({ targetPrice: 9.00, buy: true, }, + validate: function(attributes) { + let error = ''; + + if (attributes.buy && (attributes.targetPrice >= attributes.quote.get('price'))) { + error = 'Price higher than market price!'; + } else if (!attributes.buy && (attributes.targetPrice <= attributes.quote.get('price'))) { + error = 'Price lower than market price!'; + } else if (isNaN(attributes.targetPrice)) { + error = 'Invalid Target Price'; + } + + if (error != '') { + return error + } else { + return false + } + }, }) export default Order