diff --git a/dist/index.html b/dist/index.html index 8a046fa..46e7eca 100644 --- a/dist/index.html +++ b/dist/index.html @@ -57,13 +57,14 @@

Open Orders

Order Entry Form

-
+ - + - - + + diff --git a/src/app.js b/src/app.js index 03ec910..40103f8 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,16 @@ 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 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 = [ { @@ -25,11 +31,53 @@ const quoteData = [ }, ]; + + + + + + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); + const bus = _.extend({}, Backbone.Events); + + + quotes.each((quote) => { + _.extend(quote, Backbone.events); + const quoteView = new QuoteView({ + model: quote, + template: _.template($('#quote-template').html()), + tagName: 'li', + className: 'quote', + bus: bus, + }); + quoteView.render(); + $('.quotes').append(quoteView.$el); + $('#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() + + + 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..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 4fbf466..7146aa4 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -7,10 +7,18 @@ 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) + // 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/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/order_list_view.js b/src/views/order_list_view.js new file mode 100644 index 0000000..2435804 --- /dev/null +++ b/src/views/order_list_view.js @@ -0,0 +1,64 @@ +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')), + // }); + + 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()); + + // 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 new file mode 100644 index 0000000..7e533e6 --- /dev/null +++ b/src/views/order_view.js @@ -0,0 +1,16 @@ +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 + }, + renderOrder(){ + 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 new file mode 100644 index 0000000..507274c --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,39 @@ +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); +// +// 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 new file mode 100644 index 0000000..77c38ab --- /dev/null +++ b/src/views/quote_view.js @@ -0,0 +1,31 @@ +import Backbone from 'backbone'; +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) + }, + events: { + 'click .btn-buy': 'buyQuote', + 'click .btn-sell': 'sellQuote', + }, + buyQuote(){ + this.model.buy(), + this.bus.trigger('buyQuote', this.model) + console.log("inside buyQuote"); + }, + sellQuote(){ + this.model.sell(), + this.bus.trigger('sellQuote', this.model) + }, + render(){ + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this + } +}); + + +export default QuoteView; diff --git a/src/views/trader_list_view.js b/src/views/trader_list_view.js new file mode 100644 index 0000000..6d87ee5 --- /dev/null +++ b/src/views/trader_list_view.js @@ -0,0 +1,73 @@ +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(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 + }, + 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); + console.log("inside the addTraderBuy"); + }, + + addTraderSell(quote){ + + + const tradesell = { + symbol:quote.get('symbol'), + price: quote.get('price'), + buy: false + + }; + + const traderView = new TraderView({ + 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; diff --git a/src/views/trader_view.js b/src/views/trader_view.js new file mode 100644 index 0000000..ac7081e --- /dev/null +++ b/src/views/trader_view.js @@ -0,0 +1,18 @@ +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; + this.bus = params.bus; + }, + render(){ + const compiledTemplate = this.template(this.model); + this.$el.html(compiledTemplate); + return this + } +}); + +export default TraderView;