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 03ec910..4bc8c6c 100644 --- a/src/app.js +++ b/src/app.js @@ -2,9 +2,21 @@ 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'; + +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 = [ { @@ -25,11 +37,30 @@ const quoteData = [ }, ]; + $(document).ready(function() { const quotes = new QuoteList(quoteData); + const orders = new OrderList(); const simulator = new Simulator({ quotes: quotes, }); + const quoteListView = new QuoteListView({ + model: quotes, + template: _.template($('#quote-template').html()), + tradesTemplate: _.template($('#trade-template').html()), + 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/models/quote.js b/src/models/quote.js index 4fbf466..581533e 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -7,11 +7,15 @@ 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/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_list_view.js b/src/views/quote_list_view.js new file mode 100644 index 0000000..93af01c --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,35 @@ +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.tradesTemplate = params.tradesTemplate; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#quotes').empty(); + this.model.each((quote) => { + 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 new file mode 100644 index 0000000..9dcc901 --- /dev/null +++ b/src/views/quote_view.js @@ -0,0 +1,30 @@ +import Backbone from 'backbone'; +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() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, //end of render + events: { + 'click button.alert': 'buyStock', + 'click button.success': 'sellStock', + }, + buyStock: function(e) { + this.model.buy(); + this.trigger('listTrades', this); + }, + sellStock: function(e) { + this.model.sell(); + this.trigger('listTrades', this); + } +}); // end of QuoteView + +export default QuoteView;