97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import React, {Component} from "react"
|
|
import {Badge, Button, Container, Table} from "react-bootstrap"
|
|
import {PositionState} from '../';
|
|
|
|
|
|
export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
|
|
testPosition: PositionState = {
|
|
base_price: 1,
|
|
id: 1,
|
|
profit_loss: 1000,
|
|
profit_loss_percentage: 1000,
|
|
state: "loss",
|
|
symbol: "PAPARCOIN"
|
|
}
|
|
|
|
state = {
|
|
positions: [this.testPosition]
|
|
}
|
|
|
|
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"
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({
|
|
positions: [this.testPosition]
|
|
})
|
|
|
|
// socket.on('new_tick', (data: NewTickData) => {
|
|
// this.setState({
|
|
// positions: [...this.state.positions, data.positions]
|
|
// })
|
|
// })
|
|
}
|
|
|
|
tableData() {
|
|
return this.state.positions.map((position: PositionState) => {
|
|
return (<tr key={position.id}>
|
|
<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.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"}>Close</Button></td>
|
|
</tr>)
|
|
})
|
|
}
|
|
|
|
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">
|
|
<thead>
|
|
<tr>
|
|
<th>State</th>
|
|
<th>Symbol</th>
|
|
<th>Base price</th>
|
|
<th>P/L</th>
|
|
<th>P/L %</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{this.tableData()}
|
|
</tbody>
|
|
</Table>
|
|
</Container>
|
|
)
|
|
}
|
|
} |