#29 Add open orders (not finished)

package.json

@@ -69,6 +69,7 @@
     "inline-source-cli": "1.1.1",
     "less": "2.7.1",
     "mocha": "2.5.3",
+    "moment": "2.14.1",
     "npm-check-updates": "^2.7.0",
     "onchange": "2.5.0",
     "react": "15.2.0",

src/modules/market/components/market-page.jsx

@@ -6,6 +6,7 @@ import Basics from '../../market/components/basics';
 import TradePanel from '../../../modules/trade/components/trade-panel';
 import ReportPanel from '../../reports/components/report-panel';
 import MarketPositions from '../../market/components/market-positions';
+import OpenOrders from '../../market/components/open-orders';
 import Chart from '../../market/components/chart';
 
 export default class MarketPage extends Component {
@@ -74,6 +75,16 @@ export default class MarketPage extends Component {
 					);
 				}
 
+				if (p.market.openOrders && p.market.openOrders.length > 0) {
+					nodes.push(
+						<OpenOrders
+							key="open-orders"
+							onCancelOrder={p.market.onCancelOrder}
+							openOrders={p.market.openOrders}
+						/>
+					);
+				}
+
 				// chart
 				nodes.push(
 					<Chart

src/modules/market/components/open-orders.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import OpenOrder from '../../open-orders/components/open-order';
+
+const OpenOrders = (p) => (
+	<div className="open-orders">
+		<table>
+			<tbody>
+				<tr>
+					<th>Type</th>
+					<th>Qty.</th>
+					<th>Price</th>
+					<th>Matched</th>
+					<th>Unmatched</th>
+				</tr>
+				{
+					p.openOrders.map(openOrder => (
+						<OpenOrder
+							key={openOrder.id}
+							{...openOrder}
+							onCancelOrder={p.onCancelOrder}
+						/>
+						)
+					)
+				}
+			</tbody>
+		</table>
+	</div>
+);
+
+OpenOrders.propTypes = {
+	openOrders: React.PropTypes.array
+};
+
+export default OpenOrders;

src/modules/open-orders/components/open-order.jsx

@@ -0,0 +1,40 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+
+import ValueDenomination from '../../common/components/value-denomination';
+
+const OpenOrder = (p) => (
+	<tr className="open-order">
+		<td>
+			{p.type}
+		</td>
+		<td>
+			<ValueDenomination {...p.originalShares}/>
+		</td>
+		<td>
+			<ValueDenomination {...p.avgPrice}/>
+		</td>
+		<td>
+			<ValueDenomination {...p.matchedShares}/>
+		</td>
+		<td>
+			<ValueDenomination {...p.unmatchedShares}/>
+			<button className="cancel-order-action" disabled={p.isCancelling} title="Cancel order" onClick={p.onCancelOrder(p.id)}>x</button>
+		</td>
+	</tr>
+);
+
+OpenOrder.propTypes = {
+	id: React.PropTypes.string,
+	type: React.PropTypes.string,
+	originalShares: React.PropTypes.object,
+	avgPrice: React.PropTypes.object,
+	matchedShares: React.PropTypes.object,
+	unmatchedShares: React.PropTypes.object,
+	isCancelling: React.PropTypes.bool
+};
+
+export default OpenOrder;

src/modules/open-orders/less/open-order.less

@@ -0,0 +1,3 @@
+.open-order:not(:hover) .cancel-order-action {
+  display: none;
+}

src/selectors/markets.js

@@ -36,7 +36,7 @@ function makeMarkets(numMarkets = 25) {
 			makerFeePercent: makeNumber(randomInt(1, 5), '%', true),
 			volume: makeNumber(randomInt(0, 10000), 'shares', true),
 			isOpen: Math.random() > 0.1,
-			isPendingReport: Math.random() < 0.5,
+			isPendingReport: false,
 			marketLink: {
 				text: 'Trade',
 				className: 'trade',
@@ -129,6 +129,46 @@ function makeMarkets(numMarkets = 25) {
 			}
 		];
 
+		m.openOrders = [
+			{
+				id: 'order1',
+				type: 'sell',
+				originalShares: makeNumber(5, 'shares'),
+				avgPrice: makeNumber(0.7, 'ether'),
+				matchedShares: makeNumber(3, 'shares'),
+				unmatchedShares: makeNumber(2, 'shares'),
+				outcome: 'outcomeasdf123',
+				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+			},
+			{
+				id: 'order2',
+				type: 'buy',
+				originalShares: makeNumber(5, 'shares'),
+				avgPrice: makeNumber(0.7, 'ether'),
+				matchedShares: makeNumber(3, 'shares'),
+				unmatchedShares: makeNumber(2, 'shares'),
+				outcome: 'outcomeasdf123',
+				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+			},
+			{
+				id: 'order3',
+				type: 'buy',
+				originalShares: makeNumber(5, 'shares'),
+				avgPrice: makeNumber(0.7, 'ether'),
+				matchedShares: makeNumber(3, 'shares'),
+				unmatchedShares: makeNumber(2, 'shares'),
+				outcome: 'outcomeasdf123',
+				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+			},
+		];
+
+		m.onCancelOrder = (orderId) => {
+			setTimeout(() => {
+				require('../selectors').market.openOrders.find(openOrder => openOrder.id === orderId).isCancelling = true;
+				require('../selectors').update({});
+			}, 1);
+		};
+
 		// positions summary
 		m.positionsSummary = {
 			numPositions: makeNumber(3, 'Positions', true),

src/styles.less

@@ -34,3 +34,4 @@
 @import './modules/bids-asks/less/bids-asks';
 @import './modules/reports/less/report-form';
 @import './modules/reports/less/report-panel';
+@import './modules/open-orders/less/open-order';

test/assertions/market.js

@@ -498,6 +498,10 @@ export default function(market) {
 			});
 		});
 
+		describe('openOrders', () => {
+
+		});
+
 		describe('priceTimeSeries', () => {
 			it('[TODO] flesh out the full shape'); // Holding on this temporarily until we can better test trading