Amy Cash - Pipes - Ada Trader

dist/index.html

@@ -21,6 +21,7 @@ <h1 class="logo">Ada Trader</h1>
  <h2>Quotes</h2>
  <div class="quotes-list-container">
  <ul id="quotes" class="quotes">
+ <!-- Where quotes will be displayed as lis -->
  </ul>
  </div>
  </div>
@@ -33,6 +34,7 @@ <h2>Quotes</h2>
  <h2>Trade History</h2>
  <div class="trades-list-container">
  <ul id="trades" class="trades">
+ <!-- Trade history entries from template should go here.-->
  </ul>
  </div>
  </div>
@@ -45,33 +47,36 @@ <h2>Trade History</h2>
  <div id="order-workspace" class="order-workspace row">
 
  <div class="columns large-8 small-12">
- <div class="orders-container columns large-10 large-offset-1">
+ <div id="orders-container" class="orders-container columns large-10 large-offset-1">
  <h2>Open Orders</h2>
  <div class="orders-list-container">
  <ul id="orders" class="orders">
+ <!-- Where open orders will be displayed as LIs -->
  </ul>
  </div>
  </div>
  </div>
 
  <div class="columns large-4 small-12 trade-column">
  <div class="order-entry-form columns small-10 small-offset-1">
- <h3>Order Entry Form</h3>
- <form>
+ <h3 id="testings">Order Entry Form</h3>
+ <form id="order-entry-form">
  <label for="symbol">Symbol</label>
- <select name="symbol">
+ <select id="symbol" name="symbol">
+
  <!-- Option entries should be added here using JavaScript -->
  </select>
  <label for="price-target">Price</label>
  <input type="number" name="price-target" step="0.10" min="0.00" placeholder="100.00" />
  <label>Action</label>
- <button class="btn-buy alert button">Buy</button>
- <button class="btn-sell success button">Sell</button>
+ <button id="buy-order" class="btn-buy alert button">Buy</button>
+ <button id="sell-order" class="btn-sell success button">Sell</button>
  </form>
  <div class="form-errors">
  </div>
  </div>
 
+
  </div>
 
  </div>
@@ -85,7 +90,7 @@ <h3>Order Entry Form</h3>
  <script type="text/template" id="quote-template">
  <!-- The provided styles assume that you will insert this template
  within an element with the class "quote" applied -->
- <!-- <li class="quote"> -->
+ <li class="quote">
  <div class="row small-12 columns">
  <h3 class="symbol"><%- symbol %></h3>
  <h3 class="price">$<%- price.toFixed(2) %></h3>
@@ -94,7 +99,7 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
  <button class="btn-sell success button">Sell</button>
  </div>
  </div>
- <!-- </li> -->
+ </li>
  </script>
 
  <script type="text/template" id="trade-template">
@@ -106,10 +111,11 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
  </script>
 
  <script type="text/template" id="order-template">
+ <h3>This is the open orders template</h3>
  <h3 class="symbol"><%- symbol %></h3>
  <div class="detail">
  <span class="action"><%- buy ? 'buy' : 'sell' %></span>
- at
+
  <span class="price">$<%- targetPrice.toFixed(2) %></span>
  </div>
  <button class="btn-cancel button secondary">Cancel</button>

src/app.js

@@ -1,10 +1,26 @@
+import Backbone from 'backbone';
+
 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 TradeHistoryView from './views/trade_history_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 +41,77 @@ const quoteData = [
  },
 ];
 
-$(document).ready(function() {
+
+const quoteList = new QuoteList(quoteData);
+const orderList = new OrderList();
+
+
+let quoteTemplate;
+let tradeTemplate;
+let orderTemplate;
+
+$(document).ready( () => {
+
+ let bus = {}; //can trigger/subscribe to BB events
+ bus = _.extend(bus, Backbone.Events);
+
+
+ quoteTemplate = _.template($('#quote-template').html());
+ tradeTemplate = _.template($('#trade-template').html());
+ orderTemplate = _.template($('#order-template').html());
+
  const quotes = new QuoteList(quoteData);
+ // const orders = new OrderList();
+
  const simulator = new Simulator({
  quotes: quotes,
  });
 
- simulator.start();
+ simulator.start();
+
+ const order = new Order ({
+ bus: bus,
+ });
+
+// I'm making an instance of quoteListView and I'm saying that el is the quotes-container, the model to use is quoteList, which I've filled with some data, the template to use is the quote Template and the bus to use is bus (that was set up at top of document ready. )
+
+
+ const quoteListView = new QuoteListView({
+ el: '#quotes-container',
+ model: quoteList,
+ template: quoteTemplate,
+ bus: bus,
+ });
+
+ const tradeHistoryView = new TradeHistoryView({
+ bus: bus,
+ template: tradeTemplate,
+ el: '.trades'
+ });
+
+ const orderListView = new OrderListView({
+ el: '#order-workspace',
+ model: orderList,
+ template: orderTemplate,
+ bus: bus,
+ });
+
+
+
+ // tradeHistoryView.render();
+
+ quoteListView.render();
+
+ orderListView.render();
+
+
+
+
 });
+
+
+
+
+
+
+//

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;

src/models/order.js

@@ -0,0 +1,44 @@
+import Backbone from 'backbone';
+
+const Order = Backbone.Model.extend({
+
+// need to do validations
+ validate(attributes) {
+
+ const errors = {};
+ // create a hash for errors
+
+ if(!attributes.symbol) {
+ errors['symbol'] = ['Need to know what you\'re buying or selling'];
+ //if there's no symbol, give this message
+ }
+
+ if(!attributes.targetPrice) {
+ errors['targetPrice'] = ['Please enter a target price'];
+ }
+
+ if(attributes.buy && ( attributes.targetPrice >= attributes.quote.get('price') ) ){
+ errors['buyPriceError'] = ['Your offered price higher than the current price.'];
+ console.log("too high to get over");
+ }
+
+ if(attributes.buy === false && (attributes.targetPrice <= attributes.quote.get('price'))) {
+ errors['sellPriceError'] = ['Your offered price is lower than the current price.'];
+ console.log("too low to get under");
+ }
+
+ if ( Object.keys(errors).length > 0) {
+ return errors;
+ //if there are errors, return them
+ } else {
+ return false;
+ }
+ },
+
+ cancelOrder() {
+ console.log("we're cancelling your order!");
+ this.destroy();//
+ },
+});
+
+export default Order;

src/models/quote.js

@@ -7,11 +7,15 @@ const Quote = Backbone.Model.extend({
  },
 
  buy() {
- // Implement this function to increase the price by $1.00
+ let buyPrice = this.get('price');
+ let newPrice = buyPrice + 1.00;
+ this.set('price', newPrice)
  },
 
  sell() {
- // Implement this function to decrease the price by $1.00
+ let sellPrice = this.get('price');
+ let newPrice = sellPrice - 1.00;
+ this.set('price', newPrice)
  },
 });
 

src/views/order_list_view.js

@@ -0,0 +1,110 @@
+import Backbone from 'backbone';
+
+import OrderView from './order_view';
+import Order from '../models/order';
+
+
+const OrderListView = Backbone.View.extend({
+
+ initialize(params) {
+ this.template = params.template;
+ this.bus = params.bus;
+ this.listenTo(this.model, 'update', this.render);
+ this.listenTo(this.bus, 'send_quotes', this.getQuotes);
+ // this.listenTo(this.bus, 'price_check', this.checkPrice);
+
+ },
+ render(){
+ this.$('.orders').empty();
+
+ this.model.each((order) => {
+
+ const orderView = new OrderView({
+ model: order,
+ template: this.template,
+ tagName: 'li',
+ className: 'order',
+ bus: this.bus,
+ }); // end orderView const
+
+ this.$('.orders').append(orderView.render().$el);
+
+ }); // end each
+
+ return this;
+ },
+
+ events: {
+ 'click button.btn-buy': 'createBuyOrder',
+ 'click button.btn-sell': 'createSellOrder',
+ },
+
+ createBuyOrder(event) {
+ event.preventDefault();
+ console.log("you clicked the buy button");
+ this.createOrder(true);
+ },
+
+ createSellOrder(event) {
+ event.preventDefault();
+ console.log("you clicked the sell button");
+ this.createOrder(false);
+ },
+
+ createOrder(buy) {
+ const orderData = this.getOrderData(buy);
+ this.quoteList.each((quote) => {
+ if (orderData['symbol'] == quote.get('symbol') ) {
+ orderData['quote'] = quote;
+ }
+ });
+
+ const newOrder = new Order(orderData);
+
+ if (newOrder.isValid()) {
+ this.model.add(newOrder);
+ console.log("instance was added");
+ this.clearFormData();
+ } else {
+ this.updateStatusMessageFrom(newOrder.validationError);
+ newOrder.destroy();
+ }
+ },
+
+ getOrderData(buy) {
+ const orderData = {};
+ orderData["symbol"] = this.$(`#order-entry-form #symbol option:checked`).val();
+ let stringPrice = this.$(`#order-entry-form input[name=price-target]`).val();
+ orderData["targetPrice"] = parseFloat(stringPrice);
+ orderData["buy"] = buy;
+ this.bus.trigger('get_quote', this.model);
+
+ return orderData;
+ },
+
+ clearFormData() {
+ this.$(`#order-entry-form input[name=price-target]`).val('');
+ },
+
+ getQuotes(quotelist){
+ this.quoteList = quotelist;
+ },
+
+ updateStatusMessageFrom(messageHash) {
+ const $formErrors = this.$('.form-errors');
+ $formErrors.empty();
+ Object.keys(messageHash).forEach((messageType) => {
+ messageHash[messageType].forEach((message) => {
+ $formErrors.append(`<li>${message}</li>`);
+ });
+ });
+
+ $formErrors.show();
+ },
+
+
+}); //end orderlistview
+
+
+
+export default OrderListView;