pankaj

import React, {Component} from 'react';
import axios from 'axios';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import Drawer from 'material-ui/Drawer';
import logo from './logo.png';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
} from 'react-router-dom'
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';
import {rootURL} from './API'
import DialogExampleSimple from './DialogExampleSimple'
import {Card, CardHeader, CardText, CardActions} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Person from 'material-ui/svg-icons/social/person';
import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';
import {login, logout, loggedIn} from './auth'

class ScoreRequest extends Component {
  state = {
    requests: [],
    hightlight: false,
  };

  componentDidMount() {
    axios
      .get(rootURL + '/api/ScoreResponse/?ordering=-id', {
        headers: {
          'Authorization': 'Token ' + localStorage.token
        }
      })
      .then(res => {
        const requests = res.data
        this.setState({ requests })
      })
  }

  hightlight(value) {
    this.setState({hightlight: value})
    this.componentDidMount()
    setTimeout(() => {this.setState({hightlight: false});}, 3500);
  }

  render() {
    const requests = this.state.requests
    const hightlight = this.state.hightlight

    return (
      <div>
        <h2>Score Requests</h2>
        <DialogExampleSimple hightlight={this.hightlight.bind(this)}/>
        <Table>
          <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
            <TableRow>
              <TableHeaderColumn>Company Name</TableHeaderColumn>
              <TableHeaderColumn>Instrument</TableHeaderColumn>
              <TableHeaderColumn>Maturity Date</TableHeaderColumn>
              <TableHeaderColumn>Tenor</TableHeaderColumn>
              <TableHeaderColumn>Request Date</TableHeaderColumn>
              <TableHeaderColumn>Actions</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody displayRowCheckbox={false}>
            {requests ? requests.map(item => {
              return (
                <TableRow key={item.score_request.id} selected={hightlight && hightlight === item.score_request.id ? true : false}>
                  <TableRowColumn style={{
                    whiteSpace: 'normal',
                    wordWrap: 'break-word'}}>{item.score_request.company.name}</TableRowColumn>
                  <TableRowColumn>{item.score_request.instrument.name}</TableRowColumn>
                  <TableRowColumn>{item.score_request.maturity_call_date.slice(0, 10)}</TableRowColumn>
                  <TableRowColumn>{item.score_request.tenor}</TableRowColumn>
                  <TableRowColumn>{item.modified.slice(0, 10)}</TableRowColumn>
                  <TableRowColumn><Link to={"/score-request/"+ item.id} >View</Link> | Download</TableRowColumn>
                </TableRow>
              )
            }) : null}
          </TableBody>
        }
        </Table>
    </div>
    );
  }
}


class Logout extends Component {
  state = {
    redirect: false
  }

  componentWillMount() {
    logout()
    this.setState({redirect: true})
  }

  render() {
    const redirect = this.state
    return redirect ? <Redirect to={{ pathname: '/login' }}/> : null
  }
}


class Home extends Component {
  render() {
    return <Redirect to={{ pathname: '/score-request' }}/>
  }
}

class Login extends Component {
  state = {
    redirectToReferrer: false,
    username: '',
    password: ''
  }

  handleLogin() {
    if (localStorage.token) {
      this.setState({redirectToReferrer:true})
    }
    login(this.state.username, this.state.password).then(() => this.setState({redirectToReferrer:true}))
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/score-request/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer) {
      return (
        <Redirect to={from}/>
      )
    }

    return (
      <div>
         <TextField
           hintText="Enter your Username"
           floatingLabelText="Username"
           onChange = {(event,newValue) => this.setState({username:newValue})}
           />
         <br/>
           <TextField
             type="password"
             hintText="Enter your Password"
             floatingLabelText="Password"
             onChange = {(event,newValue) => this.setState({password:newValue})}
             />
           <br/>
           <RaisedButton label="Login" primary={true} onClick={this.handleLogin.bind(this)}/>
      </div>
    );
    }
}


class Request extends Component {
  state = {
    // booleans
    fetched: false,
    editScore: false,
    editFinalScore: false,
    expanded: true,
    expandedFinalScore:true,
    // ---
    id: 0,
    base_score: 0.0,
    "industry_modifier": 0.0,
    "pb_modifier": 0.0,
    "z_score_modifier": 0.0,
    "financial_modifier": 0.0,
    "instrument_modifier": 0.0,
    "management_quality_modifier": 0.0,
    "final_score": 0.0,
    "pd_spread": 0.0,
    "lgd_percentage": 0.0,
    "treasury_yield": 0.0,
    "fair_yield": 0.0,
    "final_yield": 0.0,
    "score_request": {
      company: {
        accord_code: 0,
        name: ''
      }
    }
  };

  handleTextInputChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  componentDidMount() {
    axios
      .get(rootURL + '/api/ScoreResponse/' + this.props.match.params.id + '/', {
        headers: {
          'Authorization': 'Token ' + localStorage.token
        }
      })
      .then(res => {
        const request = res.data
        this.setState(request)
        this.setState({fetched:true})
      })
      .catch(err => {
        this.setState({fetched:false})
      })
  }

  submitForm() {
    var payload = {
      base_score: this.state.base_score,
      industry_modifier: this.state.industry_modifier,
      pb_modifier: this.state.pb_modifier,
      z_score_modifier: this.state.z_score_modifier,
      financial_modifier: this.state.financial_modifier,
      instrument_modifier: this.state.instrument_modifier,
      management_quality_modifier: this.state.management_quality_modifier,
      final_score: this.state.final_score,
      pd_spread: this.state.pd_spread,
      lgd_percentage: this.state.lgd_percentage,
      treasury_yield: this.state.treasury_yield,
      fair_yield: this.state.fair_yield,
      final_yield: this.state.final_yield,
    }
    axios.put(rootURL + '/api/ScoreResponse/' + this.props.match.params.id + '/', payload)
      .then(response => {
        console.log(response.data);
        this.setState({editScore:false, editFinalScore: false})
      }).catch(error => {
        this.setState({error:error.response})
        console.log('error', error.response)
      })
  }

  render() {
    const request = this.state
    const scoreRequest = request.score_request
    const editScore = this.state.editScore
    const editFinalScore = this.state.editFinalScore
    const fetched = this.state.fetched
    const industryMapping = {
      1: 'Public Manufacturin',
      2: 'Private Manufacturing',
      3: 'Others',
    }
    console.log(this.state)
    return (
      <div>
        {fetched && scoreRequest ?
        <div>
          <br />
          <Card>
            <CardHeader
              title={<span><span style={{color:'grey'}}>Score Request: </span>{scoreRequest.company.name}</span>}
              subtitle={
                scoreRequest.company.accord_code
                + ' | ' +
                scoreRequest.company.sector.name
                + ' | ' +
                (scoreRequest.company.listing_status === 1 ? 'Listed' :'UnListed')}
              actAsExpander={true}
              showExpandableButton={true}
              titleStyle={{fontSize:25}}
            />
            <CardText expandable={true}>
              <div>
            <Table>
                <TableBody displayRowCheckbox={false}>
                  <TableRow>
                    <TableRowColumn style={{width:250}}><strong>Company Rating:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.company_rating.name}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Company Rating Agency:</strong></TableRowColumn>
                    <TableRowColumn> {scoreRequest.company_rating_agency.name}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Instrument:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.instrument.name}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Instrument Rating:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.instrument_rating}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Instrument Rating Agency:</strong></TableRowColumn>
                    <TableRowColumn> {scoreRequest.instrument_rating_agency}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Type of Industry:</strong></TableRowColumn>
                    <TableRowColumn> {industryMapping[scoreRequest.type_of_industry]}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Maturity Date:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.maturity_call_date}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Tenor:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.tenor}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>For Year:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.for_year}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>YTM offered:</strong></TableRowColumn>
                    <TableRowColumn>{scoreRequest.ytm_offered}</TableRowColumn>
                  </TableRow>
                </TableBody>
              </Table>
              </div>
            </CardText>
          </Card>
          <br />
          <Card expanded={this.state.expanded} onExpandChange={(expanded)=> {this.setState({expanded})}}>
            <CardHeader
              title="Score"
              actAsExpander={true}
              showExpandableButton={true}
              titleStyle={{fontSize:25}}
            />
            <CardActions>
              <RaisedButton label="View" primary={true} onClick={() => {this.setState({editScore: false, expanded: true})}}/>
              <RaisedButton label="Edit" primary={true} onClick={() => {this.setState({editScore: true, expanded: true})}}/>
            </CardActions>
            <CardText expandable={true}>
              {editScore ?
                <form>
                  <div className="grid-x">
                      <TextField
                        floatingLabelText="BaseScore"
                        name='base_score'
                        value={request.base_score}
                        onChange={this.handleTextInputChange}
                        />
                  </div>
                  <div className="grid-x">
                      <TextField
                        floatingLabelText="Industry Modifier"
                        name='industry_modifier'
                        value={request.industry_modifier}
                        onChange={this.handleTextInputChange}
                        />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="PB Modifier"
                      name='pb_modifier'
                      value={request.pb_modifier}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="Z Score Modifier"
                      name='z_score_modifier'
                      value={request.z_score_modifier}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="Financial Modifier"
                      name='financial_modifier'
                      value={request.financial_modifier}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="Instrument Modifier"
                      name='instrument_modifier'
                      value={request.instrument_modifier}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="Management Quality Modifier"
                      name='management_quality_modifier'
                      value={request.management_quality_modifier}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <div className="grid-x">
                    <TextField
                      floatingLabelText="Final Score"
                      name='final_score'
                      disabled={true}
                      value={request.final_score}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                  <br />
                  <RaisedButton label="Submit" primary={true} onClick={this.submitForm.bind(this)}/>
                </form>
              :
              <div>
              <Table>
                <TableBody displayRowCheckbox={false}>
                  <TableRow>
                    <TableRowColumn style={{width:250}}><strong>BaseScore:</strong></TableRowColumn>
                    <TableRowColumn>{request.base_score}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Industry Modifier:</strong></TableRowColumn>
                    <TableRowColumn>{request.industry_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>PB Modifier:</strong></TableRowColumn>
                    <TableRowColumn> {request.pb_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Z Score Modifier:</strong></TableRowColumn>
                    <TableRowColumn>{request.z_score_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Financial Modifier:</strong></TableRowColumn>
                    <TableRowColumn>{request.financial_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Instrument Modifier:</strong></TableRowColumn>
                    <TableRowColumn>{request.instrument_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Management Quality Modifier:</strong></TableRowColumn>
                    <TableRowColumn>{request.management_quality_modifier}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Final Score:</strong></TableRowColumn>
                    <TableRowColumn>{request.final_score}</TableRowColumn>
                  </TableRow>
                </TableBody>
              </Table>
              </div>
              }
            </CardText>
          </Card>
          <Card expanded={this.state.expandedFinalScore} onExpandChange={(expandedFinalScore)=> {this.setState({expandedFinalScore})}}>
            <CardHeader
              title="Final Score"
              actAsExpander={true}
              showExpandableButton={true}
              titleStyle={{fontSize:25}}
            />
            <CardActions>
              <RaisedButton label="View" primary={true} onClick={() => {this.setState({editFinalScore: false, expandedFinalScore: true})}}/>
              <RaisedButton label="Edit" primary={true} onClick={() => {this.setState({editFinalScore: true, expandedFinalScore: true})}}/>
            </CardActions>
            <CardText expandable={true}>

              {editFinalScore ?
                <form>
                <br />
                <div className="grid-x">
                  <TextField
                    floatingLabelText="PD Spread"
                    name='pd_spread'
                    value={request.pd_spread}
                    onChange={this.handleTextInputChange}
                    />
                </div>
                <div className="grid-x">
                    <TextField
                      floatingLabelText="LGD Percentage"
                      name='lgd_percentage'
                      value={request.lgd_percentage}
                      onChange={this.handleTextInputChange}
                      />
                </div>
                <div className="grid-x">
                    <TextField
                      floatingLabelText="Treasury Yield"
                      name='treasury_yield'
                      value={request.treasury_yield}
                      onChange={this.handleTextInputChange}
                      />
                  </div>
                <div className="grid-x">
                    <TextField
                      floatingLabelText="Fair Yield"
                      name='fair_yield'
                      value={request.fair_yield}
                      disabled={true}
                      onChange={this.handleTextInputChange}
                      />
                </div>
                <div className="grid-x">
                  <TextField
                    floatingLabelText="Final Yield"
                    name='final_yield'
                    value={request.final_yield}
                    onChange={this.handleTextInputChange}
                    />
                </div>
                <br />
                <RaisedButton label="Submit" primary={true} onClick={this.submitForm.bind(this)}/>
                </form>

              :
              <div>
              <Table>
                <TableBody displayRowCheckbox={false}>
                  <TableRow>
                    <TableRowColumn style={{width:250}}><strong>PD Spread:</strong></TableRowColumn>
                    <TableRowColumn>{request.pd_spread}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>LGD Percentage:</strong></TableRowColumn>
                    <TableRowColumn>{request.lgd_percentage}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Treasury Yield:</strong></TableRowColumn>
                    <TableRowColumn> {request.treasury_yield}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Fair Yield:</strong></TableRowColumn>
                    <TableRowColumn>{request.fair_yield}</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn><strong>Final Yield:</strong></TableRowColumn>
                    <TableRowColumn>{request.final_yield}</TableRowColumn>
                  </TableRow>
                </TableBody>
              </Table>
              </div>
              }
            </CardText>
          </Card>
        </div>
        : <h1>Not Found</h1>}
      </div>
    );
  }
}


let fancyTitle = (
  <span>
    <img src={logo} style={{width: '80%'}} alt="Scient Capital"/>
  </span>
);


const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    loggedIn() ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

class AppNavbar extends Component {
  state = {
    logged: loggedIn,
    open: false,
    user: false
  };

  handleClose = () => this.setState({open: false});

  handleToggle = (e) => {
    this.setState({open: !this.state.open})
  }

  logout() {
    logout()
    this.setState({redirect: true, user: false})
  }

  componentDidMount() {
    if (localStorage.token) {
      axios
        .get(rootURL + '/auth/user_info', {
          headers: {
            'Authorization': 'Token ' + localStorage.token
          }
        })
        .then(res => {
          const user = res.data
          this.setState({ user })
        })
      } else {
        this.setState({user: false})
      }
  }

  render() {
    return (
      <div>
        <AppBar
          title='Home'
          onLeftIconButtonTouchTap={this.handleToggle}
          style={{backgroundColor: '#014e5e'}}
          iconElementRight={<FlatButton label={localStorage.token && this.state.user ? this.state.user.username : ''} icon={<Person />}/>}
        />
        <Drawer
          open={this.state.open}
          docked={false}
          width={200}
          style={{backgroundColor: '#014e5e'}}
          onRequestChange={(open) => this.setState({open})}>
          <AppBar
            title={fancyTitle}
            showMenuIconButton={false}
            onTitleTouchTap={this.handleToggle}
            style={{backgroundColor: '#014e5e'}}
          />
          <MenuItem
            primaryText="Score Request"
            containerElement={<Link to="/score-request/" />}
            onClick={this.handleClose}
          />
          <MenuItem
            primaryText="Logout"
            href='/account/logout/'
            containerElement={<Link to="/logout" />}
            onClick={this.handleClose}
          />
          <Divider />
          <p style={{position:'absolute', bottom:'0px', fontSize: 13, marginLeft: 10, color: 'grey', marginRight: 7}}>
            © 2017 Scient Capital Private Limited. <br />
            All Rights Reserved.
          </p>
        </Drawer>
      </div>
    );
  }
}

class Navbar extends Component {

  render() {
    return (
      <Router>
        <div>
          <AppNavbar />
          <div style={{marginLeft:'20%'}}>
            <Switch>
              <PrivateRoute path="/score-request/:id" component={Request}/>
              <PrivateRoute path="/score-request/" component={ScoreRequest}/>
              <Route path="/login" component={Login}/>
              <Route path="/logout" component={(Logout)}/>
              <Route exact path="/" component={Home}/>
            </Switch>
          </div>
        </div>
      </Router>
    );
  }

}

export default Navbar;