AutoMate/frontend/components/Instrument.js

import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import InstrumentSubsystem, { InstrumentSubsystemFormFields, InstrumentSubsystemFields } from './InstrumentSubsystem'
import File, { FileFormFields } from './File'
import Gallery from './Gallery'
import { INTERFACES_FULL } from './InterfaceList'

const CREATE_INSTRUMENT = gql`
  mutation CREATE_INSTRUMENT($name: String!, $description: String!, $interfaces: [String]!) {
    createInstrument(name: $name, description: $description, interfaces: $interfaces) {
      id
    }
  }
`

const InstrumentFields = {
  id: null,
  name: '',
  description: '',
  documents: [],
  interfaces: [],
  commands: [],
  parameters: [],
  subsystems: []
}

const MockInterfaces = { interfaces: [{ name: 'serial' }, { name: 'usbtmc' }] }

class InstrumentForm extends React.Component {
  state = {
    ...InstrumentFields,
    ...this.props.instrument
  }

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

  handleInterface = event => {
    let interfaces = this.state.interfaces
    const ifaceSelected = event.target.checked
    const index = this.state.interfaces.findIndex(iface => iface === event.target.value)
    if (ifaceSelected && index < 0) interfaces = [
      ...this.state.interfaces,
      event.target.value
    ]
    if (!ifaceSelected && index >= 0) interfaces = [
      ...this.state.interfaces.slice(0, index),
      ...this.state.interfaces.slice(index + 1)
    ]
    this.setState({ interfaces })
  }

  render() {
    return (
      <form>
        <h1>Create new instrument.</h1>
        <fieldset>
          <label htmlFor='name'>Name</label>
          <input type='text' name='name' id='name' placeholder='Name'
            value={this.state.name}
            onChange={this.toState} />
          <label htmlFor='description'>Description</label>
          <textarea name='description' id='description' placeholder='Description'
            value={this.state.description}
            onChange={this.toState} />
        </fieldset>
        {this.state.documents.map(file =>
          <FileFormFields />
        )}
        <Query query={INTERFACES_FULL}>
          {({ data, error, loading }) => {
            if (loading) return <p>Loading interfaces.</p>
            //if (error) return <p>Error loading interfaces: {error.message}</p>
            //if (!data.length) return <p>No interfaces found.</p>
            return (
              <fieldset>
                {MockInterfaces.interfaces.map((iface, index) =>
                  <div key={iface.name}>
                    <label htmlFor={iface.name}>{iface.name}</label>
                    <input type='checkbox' name='interface' id={iface.name}
                      value={iface.name}
                      checked={this.state.interfaces.includes(iface.name)}
                      onChange={this.handleInterface} />
                  </div>
                )}
              </fieldset>
            )
          }}
        </Query>
        {this.state.subsystems.map((subsystem, index) =>
          <InstrumentSubsystemFormFields key={index} state={subsystem} onChange={event => {
            const updatedSubsystem = { ...this.state.subsystems[index] }
            updatedSubsystem[event.target.name] = event.target.value
            this.setState({
              subsystems: [
                ...this.state.subsystems.slice(0, index),
                updatedSubsystem,
                ...this.state.subsystems.slice(index + 1)
              ]
            })
          }} />
        )}
        <button type='button' onClick={event => {
          this.setState({ subsystems: [...this.state.subsystems, InstrumentFields] })
        }}>Add subsystem</button>
      </form>
    )
  }
}

const Instrument = props => {
  const { instrument } = props
  return instrument ? (
    <div>
      <h1>{instrument.name}</h1>
      <p>{instrument.description}</p>
      <Gallery title='Documents' items={['Hallo']} />
      <Gallery title='Interfaces' items={['serial', 'usbtmc'].map(item => <div>{item}</div>)} />
      <Gallery title='Subsystems' items={instrument.subsystems.map(subsystem =>
        <InstrumentSubsystem subsystem={subsystem} />
      )} />
    </div>
  ) : (
      <p>Instrument not found.</p>
    )
}

export default Instrument
export { InstrumentFields, InstrumentForm }