From edbe6002df0f2baf6b35ec92fd36708a7d030332 Mon Sep 17 00:00:00 2001
From: Giulio De Pasquale <depasquale@giugl.io>
Date: Sat, 19 Dec 2020 21:52:40 +0000
Subject: [PATCH] revamped position table

---
 websrc/components/Tables.tsx | 142 ++++++++++++++++++++---------------
 1 file changed, 83 insertions(+), 59 deletions(-)

diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx
index 8987a2b..09786b4 100644
--- a/websrc/components/Tables.tsx
+++ b/websrc/components/Tables.tsx
@@ -1,87 +1,111 @@
 import React, {Component} from "react"
-import {Badge, Button, Container, Table} from "react-bootstrap"
-import {socket} from '../';
-import {PositionCloseMessage, PositionProp} from "../types";
+import {PositionProp} from "../types";
 
-
-export class PositionTable extends Component<{ positions: Array<PositionProp> }> {
+export class PositionsTable extends Component<{ positions: Array<PositionProp> }> {
     constructor(props) {
-        super(props)
+        super(props);
     }
 
-    stateVariantFromStr(state: string): string {
+    stateColor(state: string): string {
         const lower_state = state.toLowerCase()
-        let res: string;
+        let res: string
 
         if (lower_state.includes("profit")) {
-            res = "success"
+            res = "green"
         } else if (lower_state.includes("break")) {
-            res = "primary"
+            res = "yellow"
         } else {
-            res = "danger"
+            res = "red"
         }
 
         return res
     }
 
-    plColorFromStr(amount: number): string {
-        if (amount > 0) {
-            return "success"
-        } else {
-            return "danger"
-        }
+
+    renderTableHead() {
+        return ["status", "currency pair", "base price", "amount", "Profit/Loss", "actions"].map((entry) => {
+                return (
+                    <th scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {entry}
+                    </th>
+                )
+            }
+        )
     }
 
-    tableData() {
-        return this.props.positions.map((position: PositionProp) => {
-            let row_bg = "";
+    renderTableRows() {
+        return this.props.positions.map((position) => {
+            const stateBg = "bg-".concat(this.stateColor(position.state)).concat("-100 ")
+            const stateText = "text-".concat(this.stateColor(position.state)).concat("-800 ")
+            const stateClass = "px-2 inline-flex text-xs leading-5 font-semibold rounded-full ".concat(stateBg).concat(stateText)
 
-            if (!position.state.toLowerCase().includes("break")) {
-                row_bg = "table-" + this.plColorFromStr(position.profit_loss)
-            }
+            return (
+                <tr key={position.id}>
+                    {/* Status */}
+                    <td className="px-6 py-4 whitespace-nowrap">
+                        <span
+                            className={stateClass}>
+                          {position.state}
+                        </span>
+                    </td>
 
-            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>)
+                    <td className="px-6 py-1 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{position.symbol}</div>
+                        {/*<div className="text-sm text-gray-500">{position.}</div>*/}
+                    </td>
+
+                    <td className="px-6 py-1 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{position.base_price.toLocaleString()} USD/BTC</div>
+                        {/*<div className="text-sm text-gray-500">Insert total % here?</div>*/}
+                    </td>
+
+                    <td className="px-6 py-1 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{position.amount.toFixed(5)} BTC</div>
+                        <div className="text-sm text-gray-500">Insert total % here?</div>
+                    </td>
+
+                    <td className="px-6 py-1 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{position.profit_loss.toLocaleString()} USD</div>
+                        <div className="text-sm text-gray-500">{position.profit_loss_percentage.toFixed(2)}%</div>
+                    </td>
+
+                    <td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
+                        <div className="p-2 md:w-40">
+                            <div
+                                className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100">
+                                <span className="ml-2">Close</span>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            )
         })
     }
 
     render() {
         return (
-            <Container className="d-flex flex-column mt-2">
-                <div className="border-bottom">
-                    <h2>Open positions</h2>
+            <div className="flex flex-col">
+                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                            <table className="min-w-full divide-y divide-gray-200">
+
+                                <thead className="bg-gray-50">
+                                <tr>
+                                    {this.renderTableHead()}
+                                </tr>
+                                </thead>
+
+                                <tbody className="bg-white divide-y divide-gray-200">
+                                {this.renderTableRows()}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </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>
+            </div>
+
         )
     }
 }
\ No newline at end of file