include new dashboard elements

This commit is contained in:
Giulio De Pasquale 2020-12-19 16:17:48 +00:00
parent cd31780e96
commit eb129a3426

View File

@ -4,10 +4,8 @@ import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, Posi
import {socket} from "../index"; import {socket} from "../index";
import {symbolToPair} from "../utils"; import {symbolToPair} from "../utils";
import {Helmet} from "react-helmet"; import {Helmet} from "react-helmet";
import {Navbar} from "./Navbars"; import {Navbar, Sidebar} from "./Navbars";
import {SidebarCard} from "./HCard"; import {Statusbar} from "./Statusbar";
import {ClockIcon, DollarIcon} from "./Icons";
import RPlot from "./RPlot";
type AppState = { type AppState = {
current_price: number, current_price: number,
@ -68,9 +66,9 @@ class App extends Component<{}, AppState> {
this.event_id += 1 this.event_id += 1
this.setState({ this.setState((state) => ({
events: [...this.state.events, new_event] events: [...state.events, new_event]
}) }))
} }
}) })
} }
@ -83,29 +81,29 @@ class App extends Component<{}, AppState> {
- {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title> - {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title>
</Helmet> </Helmet>
<div className="bg-gray-800"> <div className="bg-gray-800">
<div className="h-screen max-w-screen-2xl flex mx-auto"> <div className="h-screen max-w-screen flex mx-auto">
<Navbar/> <Navbar/>
<main <main
className="my-1 pt-2 pb-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg* className="my-1 py-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
transition duration-500 ease-in-out overflow-y-auto flex flex-col"> transition duration-500 ease-in-out overflow-y-auto flex flex-col">
<div className="flex justify-center text-2xl my-4"> <div className="flex justify-center text-2xl my-4">
<SidebarCard logo={<DollarIcon width={10} height={10}/>} title={""} <Statusbar positions={this.state.positions} price={this.state.current_price}
content={"$" + this.state.current_price.toFixed(2).toString()}/> tick={this.state.current_tick}/>
<SidebarCard logo={<ClockIcon width={10} height={10}/>} title={""}
content={this.state.current_tick.toString()}/>
</div> </div>
<div className="flex flex-col flex-grow mx-3 my-8 shadow-md hover:shadow-lg"> <div className="flex flex-col flex-grow my-8 shadow-md hover:shadow-lg">
<div <div
className="py-2 flex-grow bg-white dark:bg-gray-600 rounded-lg"> className="py-2 flex-grow bg-white dark:bg-gray-600 rounded-lg">
<RPlot/> {/*<RPlot/>*/}
</div> </div>
</div> </div>
<footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">
<span className="my-1 mx-1">Made with by the Peperone in a scantinato</span> {/*<footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">*/}
</footer> {/* <span className="my-1 mx-1">Made with ❤️ by the Peperone in a scantinato</span>*/}
{/*</footer>*/}
</main> </main>
<Sidebar tick={1} price={1} positions={[]}/>
</div> </div>
</div> </div>
</> </>