main page stub

This commit is contained in:
Giulio De Pasquale 2020-12-18 14:02:53 +00:00
parent 87a18b8387
commit b36a6fac8a

View File

@ -1,14 +1,10 @@
import React, {Component} from "react";
import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
import {PositionTable} from "./Tables";
import {EventProp, Events} from "./Events";
import {Helmet} from "react-helmet";
import {CurrencyDropdown} from "./Currency";
import {EventProp} from "./Events";
import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
import {socket} from "../index";
import {symbolToPair} from "../utils";
import {Helmet} from "react-helmet";
import {Navbar, Sidebar} from "./Navbars";
type AppState = {
current_price: number,
@ -78,49 +74,245 @@ class App extends Component<{}, AppState> {
render() {
return (
<div className="d-flex flex-fill flex-column">
<>
<Helmet>
{/* TODO: fix currency */}
<title> Rustico
- {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title>
</Helmet>
<div className="h-screen w-full flex overflow-hidden select-none">
<Navbar/>
<main
className="my-1 pt-2 pb-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
transition duration-500 ease-in-out overflow-y-auto">
</main>
{/* <main*/}
{/* className="my-1 pt-2 pb-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*/}
{/*transition duration-500 ease-in-out overflow-y-auto">*/}
{/* <div className="flex">*/}
{/* <div*/}
{/* className="mr-6 w-1/2 mt-8 py-2 flex-shrink-0 flex flex-col bg-white*/}
{/* dark:bg-gray-600 rounded-lg">*/}
{/* /!* Card list container *!/*/}
{/* <h3*/}
{/* className="flex items-center pt-1 pb-1 px-8 text-lg font-semibold*/}
{/* capitalize dark:text-gray-300">*/}
{/* /!*Header*!/*/}
{/* <span>nearby jobs</span>*/}
{/* <button className="ml-2">*/}
{/* <svg className="h-5 w-5 fill-current" viewBox="0 0 256 512">*/}
{/* <path*/}
{/* d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9*/}
{/* 0l-22.6-22.6c-9.4-9.4-9.4-24.6*/}
{/* 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6*/}
{/* 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136*/}
{/* 136c9.5 9.4 9.5 24.6.1 34z"></path>*/}
{/* </svg>*/}
{/* </button>*/}
{/* </h3>*/}
<Navbar bg="light" expand="lg" className="border-bottom">
<Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
<CurrencyDropdown active_pair={this.state.active_pair} pairs={this.state.available_pairs}/>
</Navbar>
{/* <div>*/}
{/* <!-- List -->*/}
<Container fluid className="mt-2 border flex-fill d-flex">
<Row className="flex-fill">
{/* Toolbar column */}
<Col md={4} lg={4} className="border-right d-flex flex-column">
<Row className="justify-content-center border-bottom py-2">
<HCard title="Current tick:" content={String(this.state.current_tick)}
update={this.state.last_update}/>
<HCard title="Current price:" content={String(this.state.current_price)}
update={this.state.last_update}/>
</Row>
<Row className={"flex-fill"}>
{this.state.positions.length > 0 ?
<PositionTable positions={this.state.positions}/> : null}
</Row>
<Row className={"my-2"}>
{this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
</Row>
</Col>
{/* <ul className="pt-1 pb-2 px-3 overflow-y-auto">*/}
{/* Graph column */}
<Col md={8} lg={8} className="flex-fill">
<RPlot/>
</Col>
</Row>
</Container>
<footer className="footer py-3 bg-light border-top">
<Container className="text-center">
<span className="text-muted">Made with by the Pepe</span>
</Container>
</footer>
</div>
{/* <li className="mt-2">*/}
{/* <a*/}
{/* className="p-5 flex flex-col justify-between*/}
{/* bg-gray-100 dark:bg-gray-200 rounded-lg"*/}
{/* href="/">*/}
{/* <div*/}
{/* className="flex items-center justify-between*/}
{/* font-semibold capitalize dark:text-gray-700">*/}
{/* <!-- Top section -->*/}
{/* <span>english lesson</span>*/}
{/* <div className="flex items-center">*/}
{/* <svg*/}
{/* className="h-5 w-5 fill-current mr-1*/}
{/* text-gray-600"*/}
{/* viewBox="0 0 24 24">*/}
{/* <path*/}
{/* d="M14 12l-4-4v3H2v2h8v3m12-4a10*/}
{/* 10 0 01-19.54 3h2.13a8 8 0*/}
{/* 100-6H2.46A10 10 0 0122 12z"></path>*/}
{/* </svg>*/}
{/* <span>4.2 mi</span>*/}
{/* </div>*/}
{/* </div>*/}
{/* <p*/}
{/* className="text-sm font-medium leading-snug*/}
{/* text-gray-600 my-3">*/}
{/* <!-- Middle section -->*/}
{/* Lorem ipsum, dolor sit amet consectetur*/}
{/* adipisicing elit. Explicabo assumenda porro*/}
{/* sapiente, cum nobis tempore delectus*/}
{/* consectetur ullam reprehenderit quis ducimus,*/}
{/* iusto dolor nam corporis id perspiciatis*/}
{/* consequuntur saepe excepturi.*/}
{/* </p>*/}
{/* <div className="flex justify-between">*/}
{/* <!-- Bottom section -->*/}
{/* <div className="flex">*/}
{/* <img*/}
{/* className="h-6 w-6 rounded-full mr-3"*/}
{/* src="https://i.pinimg.com/originals/b7/06/0b/b7060b60f6ee1beeedf7d648dabd89a1.jpg"*/}
{/* alt=""/>*/}
{/* <span>*/}
{/* <span*/}
{/* className="text-blue-500*/}
{/* font-semibold">*/}
{/* Regina C.*/}
{/* </span>*/}
{/* via HeyTutor*/}
{/* </span>*/}
{/* </div>*/}
{/* <p*/}
{/* className="text-sm font-medium leading-snug*/}
{/* text-gray-600">*/}
{/* 14 hours ago*/}
{/* </p>*/}
{/* </div>*/}
{/* </a>*/}
{/* </li>*/}
{/* <li className="mt-2">*/}
{/* <a*/}
{/* className="p-5 flex flex-col justify-between*/}
{/* bg-gray-100 dark:bg-gray-200 rounded-lg"*/}
{/* href="/">*/}
{/* <div*/}
{/* className="flex items-center justify-between*/}
{/* font-semibold capitalize dark:text-gray-700">*/}
{/* <!-- Top section -->*/}
{/* <span>english lesson</span>*/}
{/* <div className="flex items-center">*/}
{/* <svg*/}
{/* className="h-5 w-5 fill-current mr-1*/}
{/* text-gray-600"*/}
{/* viewBox="0 0 24 24">*/}
{/* <path*/}
{/* d="M14 12l-4-4v3H2v2h8v3m12-4a10*/}
{/* 10 0 01-19.54 3h2.13a8 8 0*/}
{/* 100-6H2.46A10 10 0 0122 12z"></path>*/}
{/* </svg>*/}
{/* <span>4.2 mi</span>*/}
{/* </div>*/}
{/* </div>*/}
{/* <p*/}
{/* className="text-sm font-medium leading-snug*/}
{/* text-gray-600 my-3">*/}
{/* <!-- Middle section -->*/}
{/* Lorem ipsum, dolor sit amet consectetur*/}
{/* adipisicing elit. Explicabo assumenda porro*/}
{/* sapiente, cum nobis tempore delectus*/}
{/* consectetur ullam reprehenderit quis ducimus,*/}
{/* iusto dolor nam corporis id perspiciatis*/}
{/* consequuntur saepe excepturi.*/}
{/* </p>*/}
{/* <div className="flex justify-between">*/}
{/* <!-- Bottom section -->*/}
{/* <div className="flex">*/}
{/* <img*/}
{/* className="h-6 w-6 rounded-full mr-3"*/}
{/* src="https://i.pinimg.com/originals/b7/06/0b/b7060b60f6ee1beeedf7d648dabd89a1.jpg"*/}
{/* alt="Issue"/>*/}
{/* <span>*/}
{/* <span*/}
{/* className="text-blue-500*/}
{/* font-semibold">*/}
{/* Regina C.*/}
{/* </span>*/}
{/* via HeyTutor*/}
{/* </span>*/}
{/* </div>*/}
{/* <p*/}
{/* className="text-sm font-medium leading-snug*/}
{/* text-gray-600">*/}
{/* 14 hours ago*/}
{/* </p>*/}
{/* </div>*/}
{/* </a>*/}
{/* </li>*/}
{/* </ul>*/}
{/* <a*/}
{/* href="/"*/}
{/* className="flex justify-center capitalize text-blue-500*/}
{/* dark:text-blue-200">*/}
{/* <span>see all</span>*/}
{/* </a>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div*/}
{/* className="mr-6 w-1/2 mt-8 py-2 flex-shrink-0 flex flex-col*/}
{/* bg-purple-300 rounded-lg text-white">*/}
{/* <h3*/}
{/* className="flex items-center pt-1 pb-1 px-8 text-lg font-bold*/}
{/* capitalize">*/}
{/* <!-- Header -->*/}
{/* <span>scheduled lessons</span>*/}
{/* <button className="ml-2">*/}
{/* <svg className="h-5 w-5 fill-current" viewBox="0 0 256 512">*/}
{/* <path*/}
{/* d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9*/}
{/* 0l-22.6-22.6c-9.4-9.4-9.4-24.6*/}
{/* 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6*/}
{/* 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136*/}
{/* 136c9.5 9.4 9.5 24.6.1 34z"></path>*/}
{/* </svg>*/}
{/* </button>*/}
{/* </h3>*/}
{/* <div className="flex flex-col items-center mt-12">*/}
{/* <img*/}
{/* src="https://cdni.iconscout.com/illustration/premium/thumb/empty-state-2130362-1800926.png"*/}
{/* alt=" empty schedule"/>*/}
{/* <span className="font-bold mt-8">Your schedule is empty</span>*/}
{/* <span className="text-purple-500">*/}
{/* Make your first appointment*/}
{/* </span>*/}
{/* <button className="mt-8 bg-purple-800 rounded-lg py-2 px-4">*/}
{/* Find a Job*/}
{/* </button>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </main>*/}
<Sidebar price={this.state.current_price} tick={this.state.current_tick}
positions={this.state.positions}/>
</div>
</>
)
}
}