Add order form

web/static/js/actions/venues.js

@@ -1,8 +1,36 @@
-import { httpGet } from '../utils';
+import { httpGet, httpPost } from '../utils';
 
 const Actions = {
+  placeOrder: (orderInfo) => {
+    console.log(orderInfo);
+    const order = {
+      account: orderInfo.username,
+      venue: orderInfo.venue,
+      stock: orderInfo.symbol,
+      price: orderInfo.price,
+      qty: orderInfo.qty,
+      direction: orderInfo.direction,
+      orderType: orderInfo.orderType
+    };
+
+    const url = `/ob/api/venues/${order.venue}/stocks/${order.stock}/orders`
+
+    return dispatch => {
+      dispatch({type: 'PLACING_ORDER'});
+
+      httpPost(url, order)
+      .then((data) => {
+        console.log(data);
+        dispatch({
+          type: 'ORDER_PLACED',
+          order: data,
+          venue: order.venue
+        });
+      });
+    }
+  },
+
   fetchVenues: () => {
-    var that = this;
     return dispatch => {
       dispatch({type: 'VENUES_FETCHING'});
 
@@ -19,7 +47,7 @@ const Actions = {
 
         venues.forEach(function(venue) {
           dispatch(Actions.fetchStocksOnVenue(venue.venue));
-        })
+        });
       });
     };
   },

web/static/js/components/orderform.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Actions from '../actions/venues';
+import { Link } from 'react-router';
+
+class OrderForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      direction: "buy",
+      venue: this.props.venue,
+      symbol: "",
+      price: "",
+      qty: "",
+      orderType: "market",
+      username: this.props.username
+    };
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.venue != undefined) {
+      this.setState({venue: props.venue});
+    }
+  }
+
+  handleInputChange(field, event) {
+    var newState = {};
+    var newValue = event.target.value;
+
+    if (field === 'price' || field === 'qty') {
+      if (!isNaN(parseInt(newValue)) || newValue === '') {
+        newState[field] = newValue === '' ? newValue : parseInt(newValue);
+        this.setState(newState);
+      } else {
+        this.setState({error: true})
+      }
+    } else {
+      newState[field] = newValue;
+      this.setState(newState);
+    }
+  }
+
+  handleSubmit(orderInfo) {
+    this.props.dispatch(Actions.placeOrder(orderInfo));
+  }
+
+  render() {
+    var self = this;
+    return (
+      <div className="row">
+        <div className="form-inline">
+          <div className="form-group">
+            <label className="sr-only">Direction</label>
+            <select className="form-control" id="direction" value={this.state.direction} onChange={this.handleInputChange.bind(this, 'direction')}>
+              <option>buy</option>
+              <option>sell</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label className="sr-only">Venue</label>
+            <input type="text" className="form-control" id="venue" placeholder="venue" value={this.props.venue} onChange={this.handleInputChange.bind(this, 'venue')}></input>
+          </div>
+          <div className="form-group">
+            <label className="sr-only">Symbol</label>
+            <input type="text" className="form-control" id="symbol" placeholder="symbol" value={this.state.symbol} onChange={this.handleInputChange.bind(this, 'symbol')}></input>
+          </div>
+          <div className="form-group">
+            <label className="sr-only">Price</label>
+            <input type="text" className="form-control" id="price" placeholder="px" value={this.state.price} onChange={this.handleInputChange.bind(this, 'price')}></input>
+          </div>
+          <div className="form-group">
+            <label className="sr-only">Quantity</label>
+            <input type="text" className="form-control" id="quantity" placeholder="qty" value={this.state.qty} onChange={this.handleInputChange.bind(this, 'qty')}></input>
+          </div>
+          <div className="form-group">
+            <label className="sr-only">Order Type</label>
+            <select className="form-control" id="orderType" value={this.state.orderType} onChange={this.handleInputChange.bind(this, 'orderType')}>
+              <option>market</option>
+              <option>limit</option>
+              <option>fill-or-kill</option>
+              <option>immediate-or-cancel</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <button className="btn btn-primary" id="submit" onClick={this.handleSubmit.bind(this, this.state)} disabled={!(this.state.venue != "" && this.state.symbol != "" && this.state.price != "" && this.state.qty != "")}>Place Order</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  venues: state.venues.venues,
+  username: state.session.username
+});
+
+export default connect(mapStateToProps)(OrderForm);

web/static/js/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import { routerReducer }   from 'react-router-redux';
 import session from './session';
 import venues from './venues';
+import orders from './orders';
 
 export default combineReducers({
   routing: routerReducer,
   session: session,
-  venues: venues
+  venues: venues,
+  orders: orders
 });

web/static/js/reducers/orders.js

@@ -0,0 +1,24 @@
+const initialState = {
+  orders: {},
+  fetching: false
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'PLACING_ORDER':
+      return { ...state, fetching: true };
+    case 'ORDER_PLACED':
+      var orders = state.orders;
+      var venue = action.venue;
+
+      if (state.orders[venue] === undefined) {
+        state.orders[venue] = [];
+      }
+
+      state.orders[venue].unshift(action.order);
+
+      return { fetching: false, orders: orders };
+    default:
+      return state;
+  }
+}

web/static/js/reducers/venues.js

@@ -1,5 +1,3 @@
-import Actions from '../actions/venues';
-
 const initialState = {
   venues: [],
   fetching: false

web/static/js/views/venues/venue.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Ticker from '../ticker/ticker';
 import Actions from '../../actions/venues';
+import OrderForm from '../../components/orderform'
 
 class Venue extends React.Component {
   render() {
@@ -25,6 +26,7 @@ class Venue extends React.Component {
               <Ticker venue={venueName} stock={stock.symbol} />
             </div>
           })}
+          <OrderForm venue={venueName} stocks={stocks} />
         </div>
       );
     } else {

web/templates/layout/app.html.eex

@@ -12,7 +12,7 @@
   </head>
 
   <body>
-    <div class="container" role="main">
+    <div class="container-fluid" role="main">
       <nav class="navbar navbar-default">
         <div class="container-fluid">
           <div class="navbar-header">