Merge pull request #69 from AugurProject/#29-open-orders

Open orders

src/app.jsx

@@ -87,6 +87,7 @@ export default function (appElement, selectors) {
 			<MarketPage
 				siteHeader={p.siteHeader}
 				selectedOutcome={p.selectedOutcome}
+				cancelOrder={p.cancelOrder}
 				market={p.market}
 				numPendingReports={p.marketsTotals.numPendingReports}
 			/>

src/assertions.js

@@ -20,6 +20,8 @@ import siteHeader from '../test/assertions/site-header';
 import transactions from '../test/assertions/transactions';
 import transactionsTotals from '../test/assertions/transactions-totals';
 import url from '../test/assertions/url';
+import selectedUserOpenOrdersGroup from '../test/assertions/selected-user-open-orders-group';
+import cancelOrder from '../test/assertions/cancel-order';
 
 export default {
 	activePage,
@@ -43,5 +45,7 @@ export default {
 	siteHeader,
 	transactions,
 	transactionsTotals,
-	url
+	url,
+	selectedUserOpenOrdersGroup,
+	cancelOrder
 };

src/modules/common/less/general.less

@@ -38,6 +38,14 @@ a {
 	}
 }
 
+th {
+    padding: 0 0.5em;
+    text-align: left;
+    font-size: 0.8em;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
 hr {
 	border-color: @color-border;
 }

src/modules/common/less/variables.less

@@ -35,7 +35,7 @@
 @color-plain-active: #76838f;
 
 @color-dark-normal: #222229;
-@color-dark-hover: #32323a;
+@color-dark-hover: #32323a; // font/text color
 @color-dark-active: #43505c;
 
 @color-light-normal: #eaeaef;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import OpenOrdersSummary from '../../open-orders/components/open-orders-summary';
+import OpenOrdersGroup from '../../open-orders/components/open-orders-group';
+
+const OpenOrders = (p) => (
+	<div className="market-open-orders">
+		<OpenOrdersSummary
+			userOpenOrdersSummary={p.userOpenOrdersSummary}
+		/>
+
+		<div className="open-orders-list">
+			{
+				p.outcomes.map(outcome => (
+					<OpenOrdersGroup
+						key={outcome.id}
+						id={outcome.id}
+						name={outcome.name}
+						userOpenOrders={outcome.userOpenOrders}
+						cancelOrder={p.cancelOrder}
+					/>
+				))
+			}
+		</div>
+	</div>
+);
+
+OpenOrders.propTypes = {
+	userOpenOrdersSummary: React.PropTypes.object,
+	outcomes: React.PropTypes.array,
+	cancelOrder: React.PropTypes.func.isRequired
+};
+
+export default OpenOrders;

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 MarketOpenOrders from '../../market/components/market-open-orders';
 import Chart from '../../market/components/chart';
 
 export default class MarketPage extends Component {
@@ -15,7 +16,8 @@ export default class MarketPage extends Component {
 		market: PropTypes.object,
 		selectedOutcome: PropTypes.object,
 		priceTimeSeries: PropTypes.array,
-		numPendingReports: PropTypes.number
+		numPendingReports: PropTypes.number,
+		cancelOrder: PropTypes.func.isRequired
 	};
 	constructor(props) {
 		super(props);
@@ -60,6 +62,18 @@ export default class MarketPage extends Component {
 					/>
 				);
 
+				// open orders
+				if (p.market.userOpenOrdersSummary != null && p.market.userOpenOrdersSummary.openOrdersCount != null && p.market.userOpenOrdersSummary.openOrdersCount.value != null) {
+					nodes.push(
+						<MarketOpenOrders
+							key="market-open-orders"
+							userOpenOrdersSummary={p.market.userOpenOrdersSummary}
+							outcomes={p.market.outcomes}
+							cancelOrder={p.cancelOrder}
+						/>
+					);
+				}
+
 				// positions
 				if (p.market.positionsSummary && p.market.positionsSummary.numPositions && p.market.positionsSummary.numPositions.value) {
 					nodes.push(

src/modules/market/less/market.less

@@ -1,10 +1,13 @@
 .market {
 	.page-content {
-	  margin-top: @site-header-height;
-	  color: @color-dark-normal;
-		background: white;
+		margin-top: @site-header-height;
+		color: @color-dark-normal;
 		font-size: 1.7vmin;
 
+		.l-container {
+			background: white;
+		}
+
 		.basics {
 			padding: @market-section-padding;
 			line-height: 2em;

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

@@ -0,0 +1,48 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+import classnames from 'classnames';
+
+import ValueDenomination from '../../common/components/value-denomination';
+
+const OpenOrder = (p) => (
+	<tr className={classnames('open-order', { 'is-disabled': p.isCancelling || p.isCancelled })}>
+		<td className="outcome-name">
+			{p.outcomeName}
+		</td>
+		<td className="type">
+			{p.type}
+		</td>
+		<td className="shares">
+			<ValueDenomination {...p.unmatchedShares} />
+		</td>
+		<td className="price">
+			<ValueDenomination {...p.avgPrice} />
+		</td>
+		<td className="cancel">
+			<button
+				className="button cancel-order-action"
+				disabled={p.isCancelling || p.isCancelled}
+				title="Cancel order"
+				onClick={(event) => { p.cancelOrder(p.id, p.marketID, p.type); }}
+			>Cancel</button>
+
+		</td>
+	</tr>
+);
+
+OpenOrder.propTypes = {
+	id: React.PropTypes.string.isRequired,
+	marketID: React.PropTypes.string.isRequired,
+	outcomeName: React.PropTypes.string.isRequired,
+	type: React.PropTypes.string.isRequired,
+	avgPrice: React.PropTypes.object.isRequired,
+	unmatchedShares: React.PropTypes.object.isRequired,
+	isCancelling: React.PropTypes.bool.isRequired,
+	isCancelled: React.PropTypes.bool.isRequired,
+	cancelOrder: React.PropTypes.func.isRequired
+};
+
+export default OpenOrder;

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

@@ -0,0 +1,43 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+
+import OpenOrder from '../../open-orders/components/open-order';
+
+const OpenOrdersGroup = (p) => {
+	if (p.userOpenOrders == null || p.userOpenOrders.length === 0) {
+		return null;
+	}
+
+	return (
+		<table className="open-orders-group">
+			<tbody>
+				<tr>
+					<th className="outcome-name">Outcome</th>
+					<th className="type">Type</th>
+					<th className="shares">Shares</th>
+					<th className="price">Price</th>
+					<th className="cancel">&nbsp;</th>
+				</tr>
+				{p.userOpenOrders.map(openOrder => (
+					<OpenOrder
+						key={openOrder.id}
+						outcomeName={p.name}
+						{...openOrder}
+						cancelOrder={p.cancelOrder}
+					/>
+				))}
+			</tbody>
+		</table>
+	);
+};
+
+OpenOrdersGroup.propTypes = {
+	userOpenOrders: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+	name: React.PropTypes.string.isRequired,
+	cancelOrder: React.PropTypes.func.isRequired
+};
+
+export default OpenOrdersGroup;

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

@@ -0,0 +1,23 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+import ValueDenomination from '../../common/components/value-denomination';
+
+const OpenOrdersSummary = (p) => {
+	const hasOpenOrders = p.userOpenOrdersSummary != null && p.userOpenOrdersSummary.openOrdersCount != null && p.userOpenOrdersSummary.openOrdersCount.value > 0;
+	return (
+		<div className="market-section-header">
+			{
+				hasOpenOrders ? (<ValueDenomination {...p.userOpenOrdersSummary.openOrdersCount} />) : 'No Open Orders'
+			}
+		</div>
+	);
+};
+
+OpenOrdersSummary.propTypes = {
+	userOpenOrdersSummary: React.PropTypes.object
+};
+
+export default OpenOrdersSummary;

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

@@ -0,0 +1,73 @@
+.market-open-orders {
+	.open-orders-list {
+		margin: 0 0 0 -1.5em;
+		padding: 4vmin 6vmin;
+
+		.open-orders-group {
+			display: inline-block;
+			margin: 0 0 2em 0;
+			padding: 0 1.5em;
+			vertical-align: top;
+			border-right: 1px solid @color-border;
+
+			td {
+				padding: 0.1em 0.5em;
+			}
+
+			.outcome-name {
+				min-width: 9rem;
+				text-align: left;
+			}
+			.type {
+				text-align: right;
+			}
+			.shares {
+				text-align: right;
+			}
+			.price {
+				text-align: right;
+			}
+			.cancel {
+				padding: 0.1em 0em;
+				text-align: left;
+
+				.cancel-order-action {
+					padding: 0;
+					height: unset;
+					line-height: unset;
+					text-align: left;
+					color: @color-danger-active;
+					background: transparent;
+					font-size: 0.6em;
+
+					&:before {
+						content: '\f00d';
+						display: inline-block; position: relative;
+						left: -0.2em;
+						font-family: FontAwesome;
+						font-weight: 700;
+
+					}
+
+					&:hover, &:active {
+						font-weight: 900;
+					}
+
+					&[disabled] {
+						color: @color-muted-active !important;
+						background: transparent !important;
+					}
+				}
+			}
+
+			.open-order {
+				.outcome-name {
+					text-transform: uppercase;
+				}
+				.is-disabled {
+					text-decoration: line-through;
+				}
+			}
+		}
+	}
+}

src/modules/trade/less/trade-builder.less

@@ -4,10 +4,6 @@
     border-spacing: 0 0.6rem;
 
     th {
-        padding: 0 0.5em;
-        font-size: 0.8em;
-        font-weight: 700;
-        text-transform: uppercase;
         border-bottom: solid 1px @color-dark-active;
     }
 

src/selectors.js

@@ -1,5 +1,6 @@
 import activePage from './selectors/active-page';
 import authForm from './selectors/auth-form';
+import { cancelOrder } from './selectors/cancel-order';
 import createMarketForm from './selectors/create-market-form';
 import filters from './selectors/filters';
 import keywords from './selectors/keywords';
@@ -18,6 +19,7 @@ import url from './selectors/url';
 const selectors = {
 	activePage,
 	authForm,
+	cancelOrder,
 	createMarketForm,
 	filters,
 	keywords,

src/selectors/cancel-order.js

@@ -0,0 +1,27 @@
+/*
+ * Author: priecint
+ */
+
+export const cancelOrder = orderId => setTimeout(() => {
+	require('../selectors').markets.forEach((market) => {
+		market.outcomes.forEach(outcome => {
+			const order = outcome.userOpenOrders.find(openOrder => openOrder.id === orderId);
+			if (order != null) {
+				order.isCancelling = true;
+				require('../selectors').update({});
+			}
+		});
+	});
+	setTimeout(() => {
+		require('../selectors').markets.forEach((market) => {
+			market.outcomes.forEach(outcome => {
+				const order = outcome.userOpenOrders.find(openOrder => openOrder.id === orderId);
+				if (order != null) {
+					const index = outcome.userOpenOrders.findIndex(openOrder => openOrder.id === orderId);
+					outcome.userOpenOrders.splice(index, 1);
+					require('../selectors').update({});
+				}
+			});
+		});
+	}, 2000);
+}, 1);