From e7c1eb5dcfa5df7877bfce2a3a076608eba1a7f2 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 13 Dec 2017 09:03:16 -0800 Subject: [PATCH 1/6] Show the quotes --- src/app.js | 20 ++++++++++++++++++++ src/collections/trader_list.js | 0 src/models/quote.js | 7 +++++-- src/models/trader.js | 10 ++++++++++ src/views/quote_list_view.js | 6 ++++++ src/views/quote_view.js | 29 +++++++++++++++++++++++++++++ src/views/trader_view.js | 0 7 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 src/collections/trader_list.js create mode 100644 src/models/trader.js create mode 100644 src/views/quote_list_view.js create mode 100644 src/views/quote_view.js create mode 100644 src/views/trader_view.js diff --git a/src/app.js b/src/app.js index 03ec910..263572f 100644 --- a/src/app.js +++ b/src/app.js @@ -1,7 +1,9 @@ import 'foundation-sites/dist/foundation.css'; import 'css/app.css'; +import QuoteView from './views/quote_view'; import $ from 'jquery'; +import _ from 'underscore'; import Simulator from 'models/simulator'; import QuoteList from 'collections/quote_list'; @@ -25,11 +27,29 @@ const quoteData = [ }, ]; + + + + + + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); +quotes.each((quote) => { + const quoteView = new QuoteView({ + model: quote, + template: _.template($('#quote-template').html()), + tagName: 'li', + className: 'quote', + }); + quoteView.render(); + $('.quotes').append(quoteView.$el); + // $('.quotes').append(quoteView.render().$el); + }); + simulator.start(); }); diff --git a/src/collections/trader_list.js b/src/collections/trader_list.js new file mode 100644 index 0000000..e69de29 diff --git a/src/models/quote.js b/src/models/quote.js index 4fbf466..cb57040 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -7,10 +7,13 @@ const Quote = Backbone.Model.extend({ }, buy() { - // Implement this function to increase the price by $1.00 - }, + const newPrice = this.get('price') + 1.0 + this.set('price', newPrice); + }, sell() { + const newPrice = this.get('price') - 1.0 + this.set('price', newPrice) // Implement this function to decrease the price by $1.00 }, }); diff --git a/src/models/trader.js b/src/models/trader.js new file mode 100644 index 0000000..30cb78f --- /dev/null +++ b/src/models/trader.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; +const Trader = Backbone.Model.extend({ +// initialize(attributes) { +// }, + +}) + + + +export default Trader; diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js new file mode 100644 index 0000000..2829fc4 --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,6 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +import QuoteList from '../collections/quote_list'; + + +export default QuoteListView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js new file mode 100644 index 0000000..e6fe504 --- /dev/null +++ b/src/views/quote_view.js @@ -0,0 +1,29 @@ +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) + }, + events: { + 'click .btn-buy': 'buyQuote', + 'click .btn-sell': 'sellQuote', + }, + buyQuote(){ + // console.log("inside buy"); + this.model.buy() + }, + sellQuote(){ + // console.log("inside sell"); + this.model.sell() + }, + render(){ + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this + } +}); + + +export default QuoteView; diff --git a/src/views/trader_view.js b/src/views/trader_view.js new file mode 100644 index 0000000..e69de29 From 9d9458bbe51a0b2ccc11167599b67dbe9bb3fabd Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 13 Dec 2017 12:29:29 -0800 Subject: [PATCH 2/6] show trade history --- src/app.js | 28 ++++++++++++++++------ src/models/quote.js | 13 ++++++++++- src/models/trader.js | 16 ++++++------- src/views/quote_list_view.js | 44 ++++++++++++++++++++++++++++++----- src/views/quote_view.js | 2 +- src/views/trader_list_view.js | 32 +++++++++++++++++++++++++ src/views/trader_view.js | 19 +++++++++++++++ 7 files changed, 131 insertions(+), 23 deletions(-) create mode 100644 src/views/trader_list_view.js diff --git a/src/app.js b/src/app.js index 263572f..cd91297 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,8 @@ import 'foundation-sites/dist/foundation.css'; import 'css/app.css'; import QuoteView from './views/quote_view'; +import TraderListView from './views/trader_list_view'; +import QuoteListView from './views/quote_list_view'; import $ from 'jquery'; import _ from 'underscore'; @@ -38,18 +40,30 @@ $(document).ready(function() { const simulator = new Simulator({ quotes: quotes, }); -quotes.each((quote) => { - const quoteView = new QuoteView({ - model: quote, - template: _.template($('#quote-template').html()), - tagName: 'li', - className: 'quote', + + + + quotes.each((quote) => { + _.extend(quote, Backbone.events); + const quoteView = new QuoteView({ + model: quote, + template: _.template($('#quote-template').html()), + tagName: 'li', + className: 'quote', }); quoteView.render(); $('.quotes').append(quoteView.$el); - // $('.quotes').append(quoteView.render().$el); + }); + const traderListView = new TraderListView({ + model: quotes, + template: _.template($('#trade-template').html()), + el: "#trades-container" + }); + + + simulator.start(); }); diff --git a/src/models/quote.js b/src/models/quote.js index cb57040..7d6809c 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -9,11 +9,22 @@ const Quote = Backbone.Model.extend({ buy() { const newPrice = this.get('price') + 1.0 this.set('price', newPrice); - }, + // TODO trigger costume event + this.trigger('buy', { + price: this.get('price'), + symbol: this.get('symbol'), + buy: true + }); + }, sell() { const newPrice = this.get('price') - 1.0 this.set('price', newPrice) + this.trigger('sell', { + price: this.price, + symbol: this.symbol, + buy: false + }); // Implement this function to decrease the price by $1.00 }, }); diff --git a/src/models/trader.js b/src/models/trader.js index 30cb78f..03b3f1d 100644 --- a/src/models/trader.js +++ b/src/models/trader.js @@ -1,10 +1,10 @@ -import Backbone from 'backbone'; -const Trader = Backbone.Model.extend({ +// import Backbone from 'backbone'; +// const Trader = Backbone.Model.extend({ // initialize(attributes) { // }, - -}) - - - -export default Trader; +// +// }) +// +// +// +// export default Trader; diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 2829fc4..7c3a98c 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -1,6 +1,38 @@ -import Backbone from 'backbone'; -import Quote from '../models/quote'; -import QuoteList from '../collections/quote_list'; - - -export default QuoteListView; +// import Backbone from 'backbone'; +// import Quote from '../models/quote'; +// import QuoteList from '../collections/quote_list'; +// +// const QuoteListView = Backbone.View.extend({ +// initialize(params){ +// this.template = params.template; +// this.listenTo(this.model, 'update', this.render) +// // TODO to change click, I want to add the element to the list after they click buy or sellQuote +// }, +// events: { +// 'click .btn-buy': 'addTraderBuy', +// 'click .btn-sell': 'addTraderSell' +// }, +// addTraderBuy(){ +// console.log("inside the addTraderBuy"); +// }, +// addTraderSell(){ +// console.log('inside the addTraderSell'); +// }, +// // copy +// // addTraderBuy(event){ +// // event.preventDefault(); +// // // TODO get form data +// // const formData = this.getFormData(); +// // const newTask = new Task(formData); +// // +// // this.model.add(newTask); +// // +// // endcopy +// render(){ +// const compiledTemplate = this.template(this.model.toJSON()); +// this.$el.html(compiledTemplate); +// return this +// } +// }); +// +// export default QuoteListView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js index e6fe504..706379d 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -11,8 +11,8 @@ const QuoteView = Backbone.View.extend({ 'click .btn-sell': 'sellQuote', }, buyQuote(){ - // console.log("inside buy"); this.model.buy() + }, sellQuote(){ // console.log("inside sell"); diff --git a/src/views/trader_list_view.js b/src/views/trader_list_view.js new file mode 100644 index 0000000..74cdc84 --- /dev/null +++ b/src/views/trader_list_view.js @@ -0,0 +1,32 @@ +import Backbone from 'backbone'; +import TraderView from '../views/trader_view'; + +const TraderListView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + // Liste the but, sell event + this.listenTo(this.model, 'buy', this.addTraderBuy); + this.listenTo(this.model, 'sell', this.addTraderSell); + // TODO to change click, I want to add the element to the list after they click buy or sellQuote + }, + addTraderBuy(trade){ + const traderView = new TraderView({ + model: trade, + template: this.template, + }); + + this.$('.trades').prepend(traderView.render().$el); + console.log("inside the addTraderBuy"); + }, + + addTraderSell(trade){ + const traderView = new TraderView({ + model: trade, + template: this.template, + }); + + this.$('.trades').prepend(traderView.render().$el); + }, +}); + +export default TraderListView; diff --git a/src/views/trader_view.js b/src/views/trader_view.js index e69de29..44cabfe 100644 --- a/src/views/trader_view.js +++ b/src/views/trader_view.js @@ -0,0 +1,19 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +import QuoteList from '../collections/quote_list'; + +const TraderView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + // TODO to change click, I want to add the element to the list after they click buy or sellQuote + }, + render(){ + // TODO + const compiledTemplate = this.template(this.model); + this.$el.html(compiledTemplate); + // this.$('#todo-items').append(taskView.render().$el); + return this + } +}); + +export default TraderView; From 948771bd13ede9c9ce21c70917498704a190241c Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 13 Dec 2017 17:08:51 -0800 Subject: [PATCH 3/6] add dropdown menu --- dist/index.html | 3 ++- src/app.js | 3 ++- src/models/quote.js | 4 ++-- src/views/open_list_view.js | 11 +++++++++++ src/views/open_view.js | 0 src/views/order_view.js | 11 +++++++++++ 6 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 src/views/open_list_view.js create mode 100644 src/views/open_view.js create mode 100644 src/views/order_view.js diff --git a/dist/index.html b/dist/index.html index 8a046fa..cffa973 100644 --- a/dist/index.html +++ b/dist/index.html @@ -59,7 +59,8 @@

Open Orders

Order Entry Form

- + diff --git a/src/app.js b/src/app.js index cd91297..1049b49 100644 --- a/src/app.js +++ b/src/app.js @@ -53,11 +53,12 @@ $(document).ready(function() { }); quoteView.render(); $('.quotes').append(quoteView.$el); + $('#option').append(` `); }); const traderListView = new TraderListView({ - model: quotes, + // model: pensar que pongo aca template: _.template($('#trade-template').html()), el: "#trades-container" }); diff --git a/src/models/quote.js b/src/models/quote.js index 7d6809c..e36bd31 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -21,8 +21,8 @@ const Quote = Backbone.Model.extend({ const newPrice = this.get('price') - 1.0 this.set('price', newPrice) this.trigger('sell', { - price: this.price, - symbol: this.symbol, + price: this.get('price'), + symbol: this.get('symbol'), buy: false }); // Implement this function to decrease the price by $1.00 diff --git a/src/views/open_list_view.js b/src/views/open_list_view.js new file mode 100644 index 0000000..bf46923 --- /dev/null +++ b/src/views/open_list_view.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; + +const OpenLitsView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + // TODO to change click, I want to add the element to the list after they click buy or sellQuote + }, +}); + + +export default OpenListView; diff --git a/src/views/open_view.js b/src/views/open_view.js new file mode 100644 index 0000000..e69de29 diff --git a/src/views/order_view.js b/src/views/order_view.js new file mode 100644 index 0000000..7c72457 --- /dev/null +++ b/src/views/order_view.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; + +const OrderView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + // TODO to change click, I want to add the element to the list after they click buy or sellQuote + }, +}); + + +export default OrderView; From a1bd0444b37490ae6f4132e322f4810f8d73eedc Mon Sep 17 00:00:00 2001 From: Mariana Date: Fri, 15 Dec 2017 14:41:37 -0800 Subject: [PATCH 4/6] refactor wave 2 --- dist/index.html | 2 +- src/app.js | 6 ++- src/models/quote.js | 10 ++--- src/views/quote_list_view.js | 73 ++++++++++++++++++----------------- src/views/quote_view.js | 6 ++- src/views/trader_list_view.js | 17 ++++++-- src/views/trader_view.js | 5 +-- 7 files changed, 67 insertions(+), 52 deletions(-) diff --git a/dist/index.html b/dist/index.html index cffa973..57f66f3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -60,7 +60,7 @@

Order Entry Form

diff --git a/src/app.js b/src/app.js index 1049b49..11546aa 100644 --- a/src/app.js +++ b/src/app.js @@ -41,6 +41,7 @@ $(document).ready(function() { quotes: quotes, }); + const bus = _.extend({}, Backbone.Events); quotes.each((quote) => { @@ -50,6 +51,7 @@ $(document).ready(function() { template: _.template($('#quote-template').html()), tagName: 'li', className: 'quote', + bus: bus, }); quoteView.render(); $('.quotes').append(quoteView.$el); @@ -58,9 +60,9 @@ $(document).ready(function() { }); const traderListView = new TraderListView({ - // model: pensar que pongo aca template: _.template($('#trade-template').html()), - el: "#trades-container" + el: "#trades-container", + bus: bus }); diff --git a/src/models/quote.js b/src/models/quote.js index e36bd31..907ade7 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -10,11 +10,11 @@ const Quote = Backbone.Model.extend({ const newPrice = this.get('price') + 1.0 this.set('price', newPrice); // TODO trigger costume event - this.trigger('buy', { - price: this.get('price'), - symbol: this.get('symbol'), - buy: true - }); + // this.bus.trigger('buy', { + // price: this.get('price'), + // symbol: this.get('symbol'), + // buy: true + // }); }, sell() { diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 7c3a98c..507274c 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -1,38 +1,39 @@ -// import Backbone from 'backbone'; -// import Quote from '../models/quote'; -// import QuoteList from '../collections/quote_list'; +import Backbone from 'backbone'; +import Quote from '../models/quote'; +import QuoteList from '../collections/quote_list'; +import _ from 'underscore'; + +const QuoteListView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + this.listenTo(this.model, 'update', this.render) + // TODO to change click, I want to add the element to the list after they click buy or sellQuote + }, + events: { + 'click .btn-buy': 'addTraderBuy', + 'click .btn-sell': 'addTraderSell' + }, + addTraderBuy(){ + console.log("inside the addTraderBuy"); + }, + addTraderSell(){ + console.log('inside the addTraderSell'); + }, + // copy +// addTraderBuy(event){ +// event.preventDefault(); +// // TODO get form data +// const formData = this.getFormData(); +// const newTask = new Task(formData); // -// const QuoteListView = Backbone.View.extend({ -// initialize(params){ -// this.template = params.template; -// this.listenTo(this.model, 'update', this.render) -// // TODO to change click, I want to add the element to the list after they click buy or sellQuote -// }, -// events: { -// 'click .btn-buy': 'addTraderBuy', -// 'click .btn-sell': 'addTraderSell' -// }, -// addTraderBuy(){ -// console.log("inside the addTraderBuy"); -// }, -// addTraderSell(){ -// console.log('inside the addTraderSell'); -// }, -// // copy -// // addTraderBuy(event){ -// // event.preventDefault(); -// // // TODO get form data -// // const formData = this.getFormData(); -// // const newTask = new Task(formData); -// // -// // this.model.add(newTask); -// // -// // endcopy -// render(){ -// const compiledTemplate = this.template(this.model.toJSON()); -// this.$el.html(compiledTemplate); -// return this -// } -// }); +// this.model.add(newTask); // -// export default QuoteListView; + // endcopy + render(){ + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this + } +}); + +export default QuoteListView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js index 706379d..2dcca11 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -3,6 +3,7 @@ import Quote from '../models/quote'; const QuoteView = Backbone.View.extend({ initialize(params){ + this.bus = params.bus; this.template = params.template; this.listenTo(this.model, 'change', this.render) }, @@ -11,8 +12,9 @@ const QuoteView = Backbone.View.extend({ 'click .btn-sell': 'sellQuote', }, buyQuote(){ - this.model.buy() - + this.model.buy(), + this.bus.trigger('buyQuote', this.model) + console.log("inside buyQuote"); }, sellQuote(){ // console.log("inside sell"); diff --git a/src/views/trader_list_view.js b/src/views/trader_list_view.js index 74cdc84..08b7b3a 100644 --- a/src/views/trader_list_view.js +++ b/src/views/trader_list_view.js @@ -1,18 +1,29 @@ import Backbone from 'backbone'; import TraderView from '../views/trader_view'; +import _ from 'underscore'; + const TraderListView = Backbone.View.extend({ initialize(params){ + this.bus = params.bus; this.template = params.template; // Liste the but, sell event - this.listenTo(this.model, 'buy', this.addTraderBuy); - this.listenTo(this.model, 'sell', this.addTraderSell); + this.listenTo(params.bus, 'buyQuote', this.addTraderBuy); + // this.listenTo(this.model, 'buy', this.addTraderBuy); + // this.listenTo(this.model, 'sell', this.addTraderSell); // TODO to change click, I want to add the element to the list after they click buy or sellQuote }, - addTraderBuy(trade){ + addTraderBuy(quote){ + const trade = { + symbol:quote.get('symbol'), + price: quote.get('price'), + buy: true + + } const traderView = new TraderView({ model: trade, template: this.template, + bus: this.bus, }); this.$('.trades').prepend(traderView.render().$el); diff --git a/src/views/trader_view.js b/src/views/trader_view.js index 44cabfe..ac7081e 100644 --- a/src/views/trader_view.js +++ b/src/views/trader_view.js @@ -1,17 +1,16 @@ import Backbone from 'backbone'; import Quote from '../models/quote'; import QuoteList from '../collections/quote_list'; +import _ from 'underscore'; const TraderView = Backbone.View.extend({ initialize(params){ this.template = params.template; - // TODO to change click, I want to add the element to the list after they click buy or sellQuote + this.bus = params.bus; }, render(){ - // TODO const compiledTemplate = this.template(this.model); this.$el.html(compiledTemplate); - // this.$('#todo-items').append(taskView.render().$el); return this } }); From 662621ab9e34a8930e0610a1fa47d93f8a09e9b7 Mon Sep 17 00:00:00 2001 From: Mariana Date: Sun, 17 Dec 2017 19:15:18 -0800 Subject: [PATCH 5/6] Can add a new order to the list --- dist/index.html | 6 +-- src/app.js | 13 ++++++- src/collections/order_list.js | 8 ++++ src/collections/trader_list.js | 0 src/models/order.js | 12 ++++++ src/models/quote.js | 16 +++----- src/models/trader.js | 10 ----- src/views/open_view.js | 0 src/views/order_list_view.js | 67 ++++++++++++++++++++++++++++++++++ src/views/order_view.js | 5 +++ 10 files changed, 112 insertions(+), 25 deletions(-) create mode 100644 src/collections/order_list.js delete mode 100644 src/collections/trader_list.js create mode 100644 src/models/order.js delete mode 100644 src/models/trader.js delete mode 100644 src/views/open_view.js create mode 100644 src/views/order_list_view.js diff --git a/dist/index.html b/dist/index.html index 57f66f3..46e7eca 100644 --- a/dist/index.html +++ b/dist/index.html @@ -57,14 +57,14 @@

Open Orders

Order Entry Form

- + - - + + diff --git a/src/app.js b/src/app.js index 11546aa..40103f8 100644 --- a/src/app.js +++ b/src/app.js @@ -3,12 +3,14 @@ import 'css/app.css'; import QuoteView from './views/quote_view'; import TraderListView from './views/trader_list_view'; import QuoteListView from './views/quote_list_view'; +import OrderListView from './views/order_list_view'; import $ from 'jquery'; import _ from 'underscore'; import Simulator from 'models/simulator'; import QuoteList from 'collections/quote_list'; +import OrderList from 'collections/order_list'; const quoteData = [ { @@ -55,16 +57,25 @@ $(document).ready(function() { }); quoteView.render(); $('.quotes').append(quoteView.$el); - $('#option').append(` `); + $('#option').append(``); }); + const orderList = new OrderList(); + const traderListView = new TraderListView({ template: _.template($('#trade-template').html()), el: "#trades-container", bus: bus }); + const orderListView = new OrderListView({ + model: orderList, + el: '#order-workspace', + template: _.template($('#order-template').html()) + }); + + orderListView.renderOrders() 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/collections/trader_list.js b/src/collections/trader_list.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/models/order.js b/src/models/order.js new file mode 100644 index 0000000..2518a64 --- /dev/null +++ b/src/models/order.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; + +const Order = Backbone.Model.extend({ + // defaults: { + // symbol: 'UNDEF', + // targetPrice: 0.00, + // buy: true, + // } + +}); + +export default Order; diff --git a/src/models/quote.js b/src/models/quote.js index 907ade7..7146aa4 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -9,22 +9,16 @@ const Quote = Backbone.Model.extend({ buy() { const newPrice = this.get('price') + 1.0 this.set('price', newPrice); - // TODO trigger costume event - // this.bus.trigger('buy', { - // price: this.get('price'), - // symbol: this.get('symbol'), - // buy: true - // }); }, sell() { const newPrice = this.get('price') - 1.0 this.set('price', newPrice) - this.trigger('sell', { - price: this.get('price'), - symbol: this.get('symbol'), - buy: false - }); + // this.trigger('sell', { + // price: this.get('price'), + // symbol: this.get('symbol'), + // buy: false + // }); // Implement this function to decrease the price by $1.00 }, }); diff --git a/src/models/trader.js b/src/models/trader.js deleted file mode 100644 index 03b3f1d..0000000 --- a/src/models/trader.js +++ /dev/null @@ -1,10 +0,0 @@ -// import Backbone from 'backbone'; -// const Trader = Backbone.Model.extend({ -// initialize(attributes) { -// }, -// -// }) -// -// -// -// export default Trader; diff --git a/src/views/open_view.js b/src/views/open_view.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js new file mode 100644 index 0000000..20fe68f --- /dev/null +++ b/src/views/order_list_view.js @@ -0,0 +1,67 @@ +import Backbone from 'backbone'; +import Order from '../models/order'; +import OrderView from '../views/order_view'; +import OrderList from '../collections/order_list'; +import _ from 'underscore'; + +const OrderListView = Backbone.View.extend({ + initialize(params){ + this.template = params.template; + this.listenTo(this.model, 'update', this.renderOrders) + }, + events: { + 'click .btn-buy, .btn-sell': 'addOrder', + }, + renderOrders(){ + + this.model.each((order) => { + + const orderView = new OrderView({ + model: order, + template: this.template, + tagName: 'li', + className: 'order', + // bus: this.bus, + }); + this.$('#orders').append(orderView.renderOrder().$el); + }); + return this; + + }, + + addOrder(event) { + event.preventDefault(); + const formData = this.getFormData(); + formData['buy'] = event.target.classList[0] === ('btn-buy') ? true : false; + const newOrder = new Order(formData); + // const viewOrder = new OrderView({ + // model: newOrder, + // template: this.$('#order-template'), + // el: 'li' + // // _.template(this.$('#order-template')), + // }); + + // TODO necesito algo parecido a esto en el futuro + // this.$('#todo-items').append(taskView.render().$el); + this.model.add(newOrder) + // console.log(viewOrder); + }, + + getFormData() { + const orderData = {}; + // ['symbol', 'price-target'].forEach((field) => { + const val = Number(this.$('#order-form input[name="targetPrice"]').val()); + console.log(`this is the price ${val}`); + console.log(this.$('#order-form')); + // this.$(`#add-task-form input[name=${field}]`).val(); + // if (val !== '') { + orderData['targetPrice'] = val; + // } + // }); + orderData['symbol'] = this.$('select[name=symbol]').val(); + return orderData; + }, + +}); + +export default OrderListView; diff --git a/src/views/order_view.js b/src/views/order_view.js index 7c72457..7e533e6 100644 --- a/src/views/order_view.js +++ b/src/views/order_view.js @@ -5,6 +5,11 @@ const OrderView = Backbone.View.extend({ this.template = params.template; // TODO to change click, I want to add the element to the list after they click buy or sellQuote }, + renderOrder(){ + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this + }, }); From 3653d6526ba560bb8af541e246372af1522dc6ae Mon Sep 17 00:00:00 2001 From: Mariana Date: Sun, 17 Dec 2017 20:07:44 -0800 Subject: [PATCH 6/6] sekll button quote working --- src/views/order_list_view.js | 5 +---- src/views/quote_view.js | 4 ++-- src/views/trader_list_view.js | 36 ++++++++++++++++++++++++++++++++--- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js index 20fe68f..2435804 100644 --- a/src/views/order_list_view.js +++ b/src/views/order_list_view.js @@ -41,8 +41,6 @@ const OrderListView = Backbone.View.extend({ // // _.template(this.$('#order-template')), // }); - // TODO necesito algo parecido a esto en el futuro - // this.$('#todo-items').append(taskView.render().$el); this.model.add(newOrder) // console.log(viewOrder); }, @@ -51,8 +49,7 @@ const OrderListView = Backbone.View.extend({ const orderData = {}; // ['symbol', 'price-target'].forEach((field) => { const val = Number(this.$('#order-form input[name="targetPrice"]').val()); - console.log(`this is the price ${val}`); - console.log(this.$('#order-form')); + // this.$(`#add-task-form input[name=${field}]`).val(); // if (val !== '') { orderData['targetPrice'] = val; diff --git a/src/views/quote_view.js b/src/views/quote_view.js index 2dcca11..77c38ab 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -17,8 +17,8 @@ const QuoteView = Backbone.View.extend({ console.log("inside buyQuote"); }, sellQuote(){ - // console.log("inside sell"); - this.model.sell() + this.model.sell(), + this.bus.trigger('sellQuote', this.model) }, render(){ const compiledTemplate = this.template(this.model.toJSON()); diff --git a/src/views/trader_list_view.js b/src/views/trader_list_view.js index 08b7b3a..6d87ee5 100644 --- a/src/views/trader_list_view.js +++ b/src/views/trader_list_view.js @@ -9,6 +9,7 @@ const TraderListView = Backbone.View.extend({ this.template = params.template; // Liste the but, sell event this.listenTo(params.bus, 'buyQuote', this.addTraderBuy); + this.listenTo(params.bus, 'sellQuote', this.addTraderSell); // this.listenTo(this.model, 'buy', this.addTraderBuy); // this.listenTo(this.model, 'sell', this.addTraderSell); // TODO to change click, I want to add the element to the list after they click buy or sellQuote @@ -30,14 +31,43 @@ const TraderListView = Backbone.View.extend({ console.log("inside the addTraderBuy"); }, - addTraderSell(trade){ + addTraderSell(quote){ + + + const tradesell = { + symbol:quote.get('symbol'), + price: quote.get('price'), + buy: false + + }; + const traderView = new TraderView({ - model: trade, + model: tradesell, template: this.template, + bus: this.bus, }); this.$('.trades').prepend(traderView.render().$el); - }, + console.log("inside the addSell"); + +} + + + + + + + + + + + // const traderView = new TraderView({ + // model: trade, + // template: this.template, + // }); + // + // this.$('.trades').prepend(traderView.render().$el); + // }, }); export default TraderListView;