add header and basic admin page
This commit is contained in:
parent
2bb59c4fd1
commit
9b61c3da45
|
@ -1,10 +1,13 @@
|
|||
/*global web3*/
|
||||
import React from 'react';
|
||||
import React, {Fragment} from 'react';
|
||||
import {HashRouter, Route, Redirect, Switch} from "react-router-dom";
|
||||
import ThemeProvider from 'react-bootstrap/ThemeProvider';
|
||||
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
|
||||
import Header from './components/Header';
|
||||
import Home from './components/Home';
|
||||
import Admin from './components/Admin';
|
||||
|
||||
const MAINNET = 1;
|
||||
const TESTNET = 3;
|
||||
|
@ -50,11 +53,15 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
return (<HashRouter>
|
||||
<ThemeProvider prefixes={{ btn: 'my-btn' }}>
|
||||
<Header/>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home}/>
|
||||
<Route exact path="/admin" component={Admin}/>
|
||||
|
||||
<Redirect to="/404"/>
|
||||
</Switch>
|
||||
</ThemeProvider>
|
||||
</HashRouter>);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
/*global web3*/
|
||||
import React from 'react';
|
||||
|
||||
class Admin extends React.Component {
|
||||
|
||||
render() {
|
||||
|
||||
return (<div>
|
||||
<h3>Admin Panel</h3>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export default Admin;
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
import {Navbar, Nav} from 'react-bootstrap';
|
||||
|
||||
const Header = () => (<Navbar bg="light" expand="lg">
|
||||
<Navbar.Brand href="/#/">Meritocracy</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<Nav.Link href="/#/">Home</Nav.Link>
|
||||
<Nav.Link href="/#/admin">Admin</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Navbar>
|
||||
);
|
||||
|
||||
export default Header
|
|
@ -1,13 +1,11 @@
|
|||
/*global web3*/
|
||||
import React from 'react';
|
||||
import {Button, Grid, Row, Col, Alert } from 'react-bootstrap';
|
||||
import * as NumericInput from 'react-numeric-input';
|
||||
import {Row, Col, Alert, Button, Container, Form} from 'react-bootstrap';
|
||||
import NumericInput from 'react-numeric-input';
|
||||
import Select from 'react-select';
|
||||
|
||||
import Meritocracy from 'Embark/contracts/Meritocracy';
|
||||
|
||||
// import './css/dapp.css';
|
||||
|
||||
/*
|
||||
TODO:
|
||||
- list praise for contributor
|
||||
|
@ -189,8 +187,6 @@ class Home extends React.Component {
|
|||
const maxAllocation = selectedContributors.length ? currentContributor.allocation / selectedContributors.length : 0;
|
||||
|
||||
return (<div>
|
||||
<h3>Status Meritocracy</h3>
|
||||
|
||||
{errorMsg && <Alert bsStyle="danger">{errorMsg}</Alert>}
|
||||
|
||||
{currentContributor.name && <h2>Hello, {currentContributor.name} !</h2>}
|
||||
|
@ -206,27 +202,31 @@ class Home extends React.Component {
|
|||
placeholder="Choose Contributor(s)..."
|
||||
isDisabled={busy}
|
||||
/>
|
||||
<span>Your Allocatable Kudos: { currentContributor.allocation } SNT</span> <br/>
|
||||
<p>Your Allocatable Kudos: { currentContributor.allocation } SNT</p>
|
||||
|
||||
{selectedContributors.length === 0 && <Alert variant="warning">
|
||||
Please select one or more contributors
|
||||
</Alert>}
|
||||
|
||||
<br/>
|
||||
<NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy} /> <br/>
|
||||
<NumericInput mobile step={5} min={0} max={maxAllocation} onChange={this.handleAwardChange} value={award} disabled={busy}/>
|
||||
|
||||
<input disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange} value={praise} /> <br/>
|
||||
<Form>
|
||||
<Form.Control disabled={busy} placeholder="Enter your praise..." onChange={this.handlePraiseChange}
|
||||
value={praise} />
|
||||
</Form>
|
||||
<span> Total Awarding: {award * selectedContributors.length} SNT </span> <br/>
|
||||
<Button disabled={busy} variant="outline-primary" onClick={this.awardTokens}>Award</Button>
|
||||
|
||||
|
||||
<h4>Your Kudos History</h4>
|
||||
<span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary" onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span> <br/>
|
||||
<Grid>
|
||||
<span>Your Received Kudos: <b>{ currentContributor.received } SNT</b> <Button variant="outline-primary" onClick={this.withdrawTokens} disabled={busy}>Withdraw</Button></span> <br/>
|
||||
<Container>
|
||||
<Row>
|
||||
{currentContributor.praises && currentContributor.praises.map((item, i) => {
|
||||
const name = options.find(x => x.value === item.author);
|
||||
return <Col key={i}>{(name && name.label) || item.author} has sent you {web3.utils.fromWei(item.amount, "ether")} SNT {item.praise && "\"" + item.praise + "\""}</Col>;
|
||||
})}
|
||||
</Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
</div>);
|
||||
}
|
||||
|
|
|
@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
|
|||
|
||||
import App from './App';
|
||||
|
||||
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<App/>,
|
||||
document.getElementById('app')
|
||||
|
|
Loading…
Reference in New Issue