core/websrc/components/Tables.tsx

86 lines
3.0 KiB
TypeScript
Raw Normal View History

2020-12-14 18:52:43 +00:00
import React, {Component} from "react"
import {Badge, Button, Container, Table} from "react-bootstrap"
import {PositionCloseMessage, PositionState, socket} from '../';
export class PositionTable extends Component<{ positions: Array<PositionState> }> {
2020-12-14 18:52:43 +00:00
constructor(props) {
super(props)
}
stateVariantFromStr(state: string): string {
const lower_state = state.toLowerCase()
let res: string;
if (lower_state.includes("profit")) {
res = "success"
} else if (lower_state.includes("break")) {
res = "primary"
} else {
res = "danger"
}
return res
}
plColorFromStr(amount: number): string {
if (amount > 0) {
return "success"
} else {
return "danger"
}
}
2020-12-14 18:52:43 +00:00
tableData() {
return this.props.positions.map((position: PositionState) => {
2020-12-16 11:38:58 +00:00
let row_bg = "";
2020-12-16 15:05:51 +00:00
if (!position.state.toLowerCase().includes("break")) {
2020-12-16 11:38:58 +00:00
row_bg = "table-" + this.plColorFromStr(position.amount)
}
return (<tr key={position.id} className={row_bg}>
<td className={"align-middle"}><Badge
variant={this.stateVariantFromStr(position.state)}>{position.state}</Badge></td>
<td className={"align-middle"}>{position.symbol}</td>
<td className={"align-middle"}>{position.base_price.toFixed(2)}</td>
<td className={"align-middle"}>{position.amount.toFixed(5)}</td>
<td className={"align-middle"}>{position.profit_loss.toFixed(2)}</td>
<td className={"align-middle"}>{position.profit_loss_percentage.toFixed(2)} %</td>
<td className={"align-middle"}><Button size={"sm"} variant={"danger"} onClick={() => {
const message: PositionCloseMessage = {
2020-12-16 10:18:57 +00:00
message_name: "close_position",
position_id: position.id,
}
socket.emit(message.message_name, (message))
}}>Close</Button></td>
2020-12-14 18:52:43 +00:00
</tr>)
})
}
2020-12-14 18:52:43 +00:00
render() {
return (
<Container className="d-flex flex-column mt-2">
<div className="border-bottom">
<h2>Open positions</h2>
</div>
<Table id="positions" size="sm" hover striped bordered className="mt-2 text-center align-middle">
2020-12-14 18:52:43 +00:00
<thead>
<tr>
<th>State</th>
2020-12-14 18:52:43 +00:00
<th>Symbol</th>
<th>Base price</th>
<th>Amount</th>
2020-12-14 18:52:43 +00:00
<th>P/L</th>
<th>P/L %</th>
<th>Action</th>
2020-12-14 18:52:43 +00:00
</tr>
</thead>
<tbody>
{this.tableData()}
</tbody>
</Table>
</Container>
)
}
}