sztm-excel/src/scraper/components/ScraperInterface.js

import React from 'react'
import { FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'

class ScraperLogin extends React.Component {
  constructor () {
    super()
    this.loginStart = this.loginStart.bind(this)
  }

  loginStart (event) {
    event.preventDefault()
    const { actions } = this.props
    actions.loginStart({id: this.formId.value, pwd: this.formPwd.value})
  }

  render () {
    const { loginState } = this.props.state

    return (
      <form>
        <FormGroup controlId='id'>
          <ControlLabel>Turniernummer</ControlLabel>
          <FormControl inputRef={input => { this.formId = input }} type='text' placeholder='Turniernummer eingeben' />
        </FormGroup>
        <FormGroup controlId='pwd'>
          <ControlLabel>Passwort</ControlLabel>
          <FormControl inputRef={input => { this.formPwd = input }} type='password' />
        </FormGroup>
        <Button type='submit' onClick={this.loginStart}>
          Login
        </Button>
        {(loginState === 'not_logged_in')
          ? <div className='alert alert-warning'>Nicht eingeloggt.</div>
          : (loginState === 'logging_in')
          ? <div className='alert alert-info'>Login läft...</div>
          : (loginState === 'login_failure')
          ? <div className='alert alert-danger'>Login fehlgeschlagen.</div>
          : <div className='alert alert-info'>Erfolgreich eingeloggt.</div>
        }
      </form>
    )
  }
}

class ScraperTournamentSelection extends React.Component {
  render () {
    return (
      <form>
        <FormGroup controlId='formControlsSelect'>
          <ControlLabel>Turnier</ControlLabel>
          <FormControl componentClass='select' placeholder='Turnier auswählen'>
            <option value='select'>select</option>
            <option value='other'>...</option>
          </FormControl>
        </FormGroup>
        <Button type='submit'>
          Turnier laden
        </Button>
      </form>
    )
  }
}

class ScraperProgress extends React.Component {
  render () {
    return (
      <div />
    )
  }
}

class ScraperInterface extends React.Component {
  render () {
    const { actions } = this.props

    return (
      <div>
        <ScraperLogin {...this.props} />
        <ScraperTournamentSelection />
        <button onClick={actions.startScraping}>Turnier laden</button>
        <ScraperProgress />
      </div>
    )
  }
}

export default ScraperInterface