client/src/components/SessionForm.js
changeset 135 b5aafa462956
parent 134 be36eed5e6e0
child 143 cfcbf4bc66f1
--- a/client/src/components/SessionForm.js	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/components/SessionForm.js	Thu Aug 03 19:11:06 2017 +0200
@@ -1,17 +1,18 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
-import GroupForm from './GroupForm';
+import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap';
 import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as authActions from '../actions/authActions';
 import _ from 'lodash';
+import './SessionForm.css';
 
 class SessionForm extends Component {
 
   state = {
-    createGroup: false
+    createGroup: false,
+    protocolOpen: false
   }
 
   onChange = (e) => {
@@ -38,6 +39,13 @@
     }
   }
 
+  toggleProtocol = (e) => {
+    e.preventDefault();
+    this.setState({
+      protocolOpen: !this.state.protocolOpen
+    });
+  }
+
   render() {
 
     if (!this.props.currentSession) {
@@ -71,18 +79,13 @@
           </FormGroup>
           <FormGroup>
             <ControlLabel>Group</ControlLabel>
-            <FormControl
-              name="group"
-              componentClass="select"
-              value={ this.props.group ? this.props.group.get('name') : '' }
-              onChange={ this.onGroupChange }>
-              { this.props.groups.map((group, key) =>
-                <option key={ key } value={ group.get('name') }>{ group.get('name') }</option>
-              ) }
-            </FormControl>
+            <p>{this.props.currentSession.group}</p>
           </FormGroup>
-           <FormGroup>
-            <GroupForm session={this.props.session} />
+          <FormGroup>
+            <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</ControlLabel>
+            <Collapse in={this.state.protocolOpen}>
+            <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
+            </Collapse>
           </FormGroup>
         </form>
       </Panel>