core/websrc/components/Tables.tsx

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> }> {
    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"
        }
    }

    tableData() {
        return this.props.positions.map((position: PositionState) => {
            let row_bg = "";

            if (!position.state.toLowerCase().includes("break")) {
                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 = {
                        message_name: "close_position",
                        position_id: position.id,
                    }
                    socket.emit(message.message_name, (message))
                }}>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>Amount</th>
                        <th>P/L</th>
                        <th>P/L %</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tableData()}
                    </tbody>
                </Table>
            </Container>
        )
    }
}