1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap'; |
4 import { Collapse } from 'react-bootstrap'; |
5 import '../App.css'; |
5 import '../App.css'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
7 import * as authActions from '../actions/authActions'; |
7 import * as authActions from '../actions/authActions'; |
8 import _ from 'lodash'; |
8 import _ from 'lodash'; |
9 import './SessionForm.css'; |
9 import './SessionForm.css'; |
53 <form></form> |
53 <form></form> |
54 ) |
54 ) |
55 } |
55 } |
56 |
56 |
57 return ( |
57 return ( |
58 <Panel> |
58 <div className="panel-default"> |
59 <form onSubmit={ e => { e.preventDefault() } }> |
59 <div class="panel-body"> |
60 <FormGroup> |
60 <form onSubmit={ e => { e.preventDefault() } }> |
61 <ControlLabel>Title</ControlLabel> |
61 <div className="form-group"> |
62 <FormControl |
62 <label className="control-label">Titre</label> |
63 name="title" |
63 <input className="form-control" |
64 defaultValue={ this.props.currentSession.title } |
64 name="title" |
65 onChange={ this.onChange } |
65 defaultValue={ this.props.currentSession.title } |
66 type="text" |
66 onChange={ this.onChange } |
67 placeholder="Enter a title" |
67 type="text" |
68 /> |
68 placeholder="Entrez un titre" |
69 </FormGroup> |
69 /> |
70 <FormGroup> |
70 </div> |
71 <ControlLabel>Description</ControlLabel> |
71 <div className="form-group"> |
72 <FormControl |
72 <label className="control-label">Description</label> |
73 name="description" |
73 <input className="form-control" |
74 componentClass="textarea" |
74 type="textarea" |
75 defaultValue={ this.props.currentSession.description } |
75 name="description" |
76 onChange={ this.onChange } |
76 defaultValue={ this.props.currentSession.description } |
77 placeholder="Enter a description" |
77 onChange={ this.onChange } |
78 /> |
78 placeholder="Entrez une description" |
79 </FormGroup> |
79 /> |
80 <FormGroup> |
80 </div> |
81 <ControlLabel>Group</ControlLabel> |
81 <div className="form-group"> |
82 <p>{this.props.currentSession.group}</p> |
82 <label className="control-label">Group</label> |
83 </FormGroup> |
83 <p>{this.props.currentSession.group}</p> |
84 <FormGroup> |
84 </div> |
85 <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</ControlLabel> |
85 <div className="form-group"> |
86 <Collapse in={this.state.protocolOpen}> |
86 <label className="control-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
87 <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> |
87 <Collapse in={this.state.protocolOpen}> |
88 </Collapse> |
88 <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> |
89 </FormGroup> |
89 </Collapse> |
90 </form> |
90 </div> |
91 </Panel> |
91 </form> |
|
92 </div> |
|
93 </div> |
92 ); |
94 ); |
93 } |
95 } |
94 } |
96 } |
95 |
97 |
96 function mapStateToProps(state, props) { |
98 function mapStateToProps(state, props) { |