yrexpert-js/src/js/andy/RobotAndyPanel.js

L'interface Web pour votre système expert...

/*

!----------------------------------------------------------------------------!
!                                                                            !
! YRexpert : (Your Relay) Système Expert sous Mumps GT.M et GNU/Linux        !
! Copyright (C) 2001-2015 by Hamid LOUAKED (HL).                             !
!                                                                            !
!----------------------------------------------------------------------------!

*/

'use strict'

var React = require('react')
var createReactClass = require('create-react-class')
var ReactBootstrap = require('react-bootstrap')

var {
  Button,
  Panel,
  FormGroup,
  ControlLabel,
  FormControl,
  HelpBlock,
  Well
} = ReactBootstrap

var RobotAndyPanel = createReactClass({

  componentWillMount: function () {
    this.controller = require('./controller-RobotAndyPanel')(this.props.controller, this)

    this.title = (
      <h1>Robot Andy</h1>
    )
  },

  getInitialState () {
    return {
      status: 'initial',
      value: '',
      partition: 'DMO',
      nameSpace: [],
      isLoading: false
    }
  },

  onPickPartition (e) {
    // console.log('----- onPickPartition : ', this.inputEl.value);
    this.setState({ partition: this.inputEl.value })
    // if (this.inputEl.value != '') this.choix(this.inputEl.value);
  },

  handleChange (event) {
    this.setState({ value: event.target.value })
  },

  handleSubmit (event) {
    event.preventDefault()
  },

  handleClick () {
    // alert("-----partition: " + JSON.stringify(this.state.partition));
    this.setState({ isLoading: true })
    var indice = (new Date()).getTime()
    this.ajouter_nom(this.state.partition)
    this.ajouter_date_creation(this.state.partition)
    this.ajouter_cree_par(this.state.partition)
    this.set_question(this.state.partition, this.state.value, indice)
    this.get_reponse(this.state.partition, indice)

    // C'est probablement là où vous auriez un appel `ajax`
    setTimeout(() => {
      // Achevée d'une action asynchrone, rétablit l'état de chargement
      this.setState({ isLoading: false })
      this.setState({ value: '' })
    }, 1000)
  },

  componentWillReceiveProps: function (newProps) {
    this.onNewProps(newProps)
  },

  render: function () {
    // var componentPath = this.controller.updateComponentPath(this);

    /**
     * @todo Améliorer le test sur laille de la partition
     * @todo La taille ne doit pas excéder 50% de la taille disponible en local
    */

    // var options = [
    //    { value: 'DMO', label: 'DMO' },
    //    { value: 'YXP', label: 'YXP' }
    // ];
    var options = []
    // var nameSpace = [ 'DMO', 'YXP' ];
    var nameSpace = this.nameSpace
    for (var i = 0; i < nameSpace.length; i++) {
      var items = { value: nameSpace[i].toUpperCase(), label: nameSpace[i].toUpperCase() }
      options.push(items)
    }
    // alert("-----options: " + JSON.stringify(options));

    const isLoading = this.state.isLoading

    // Créer un clone de données pour assurer un nouveau rendu
    if (this.data) {
      var newData = {}
      Object.assign(newData, this.data)
    }

    return (
      <Panel
        collapsible
        expanded={this.expanded}
        header={this.title}
        bsStyle='primary'
      >

        <form onSubmit={this.handleSubmit}>

          <div>
            <FormGroup controlId='formControlsSelect'>
              <ControlLabel>Choisir votre partition</ControlLabel>
              <FormControl
                onChange={this.onPickPartition.bind(null, this)}
                inputRef={el => this.inputEl = el}
                defaultValue={this.props.partition}
                componentClass='select' placeholder='Partition'
              >
                <option value=''>Votre partition</option>
                <option value='YXP'>YXP</option>
                <option value='DMO'>DMO</option>
              </FormControl>
            </FormGroup>

            <p />
            {this.state.partition && <p>La partition active est {this.state.partition}</p>}

          </div>

          <div>
            <FormGroup
              controlId='formBasicText'
            >
              <ControlLabel>Dialoguer avec Andy.</ControlLabel>
              <FormControl
                type='text'
                value={this.state.value}
                placeholder='Saisir votre question'
                onChange={this.handleChange}
              />
              <FormControl.Feedback />
              <HelpBlock>Posez à Andy votre question et il fera de son mieux pour vous aider.</HelpBlock>
            </FormGroup>

            <Button
              bsStyle='primary'
              disabled={isLoading}
              onClick={!isLoading ? this.handleClick : null}
            >
              {isLoading ? 'En traitement...' : 'Soumettre'}
            </Button>

            <p />
            <Well>{this.reponse && <p>{this.reponse}</p>}</Well>
          </div>

        </form>

      </Panel>
    )
  }
})

module.exports = RobotAndyPanel