1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import Modal from 'react-modal'; |
2 import Modal from 'react-modal'; |
3 import PropTypes from 'prop-types'; |
3 import PropTypes from 'prop-types'; |
4 import uuidV1 from 'uuid/v1'; |
4 import uuidV1 from 'uuid/v1'; |
|
5 import { withNamespaces } from 'react-i18next'; |
5 import '../App.css'; |
6 import '../App.css'; |
6 import './CreateSession.css'; |
7 import './CreateSession.css'; |
7 |
8 |
8 export default class CreateSession extends Component { |
9 class CreateSession extends Component { |
9 |
10 |
10 static propTypes = { |
11 static propTypes = { |
11 history: PropTypes.object.isRequired, |
12 history: PropTypes.object.isRequired, |
12 group: PropTypes.object, |
13 group: PropTypes.object, |
13 createSession: PropTypes.func.isRequired, |
14 createSession: PropTypes.func.isRequired, |
67 this.setState({modalIsOpen: false}); |
68 this.setState({modalIsOpen: false}); |
68 } |
69 } |
69 |
70 |
70 render() { |
71 render() { |
71 |
72 |
|
73 const t = this.props.t; |
72 return ( |
74 return ( |
73 <div className="container-fluid"> |
75 <div className="container-fluid"> |
74 <a className="nav-link" onClick={this.openSessionModal}>Nouvelle session</a> |
76 <a className="nav-link" onClick={this.openSessionModal}>{t('create_session.new_session')}</a> |
75 <Modal |
77 <Modal |
76 className="Modal__Bootstrap modal-dialog ml-5 mt-5 fixed-top w-100" |
78 className="Modal__Bootstrap modal-dialog ml-5 mt-5 fixed-top w-100" |
77 isOpen={this.state.modalIsOpen} |
79 isOpen={this.state.modalIsOpen} |
78 onRequestClose={this.handleModalCloseRequest} |
80 onRequestClose={this.handleModalCloseRequest} |
79 > |
81 > |
80 <div className="modal-content bg-primary w-75"> |
82 <div className="modal-content bg-primary w-75"> |
81 <div className="modal-body mt-3"> |
83 <div className="modal-body mt-3"> |
82 <form onSubmit={ e => { e.preventDefault() } }> |
84 <form onSubmit={ e => { e.preventDefault() } }> |
83 <div className="form-group"> |
85 <div className="form-group"> |
84 <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label> |
86 <label className="col-form-label text-secondary font-weight-bold pt-3 text-capitalize">{t('common.title')}</label> |
85 <input className="form-control text-primary w-100" |
87 <input className="form-control text-primary w-100" |
86 name="title" |
88 name="title" |
87 onChange={ this.onChange } |
89 onChange={ this.onChange } |
88 type="text" |
90 type="text" |
89 placeholder="Entrez un titre" |
91 placeholder="Entrez un titre" |
90 /> |
92 /> |
91 </div> |
93 </div> |
92 <div className="form-group"> |
94 <div className="form-group"> |
93 <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3">Description</label> |
95 <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3 text-capitalize">{t('common.description')}</label> |
94 <textarea className="form-control text-primary w-100" |
96 <textarea className="form-control text-primary w-100" |
95 type="textarea" |
97 type="textarea" |
96 name="description" |
98 name="description" |
97 onChange={ this.onChange } |
99 onChange={ this.onChange } |
98 placeholder="Entrez une description" |
100 placeholder="Entrez une description" |
99 ></textarea> |
101 ></textarea> |
100 </div> |
102 </div> |
101 <div className="form-group"> |
103 <div className="form-group"> |
102 <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
104 <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>{t('create_session.protocol')} {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
103 <div className={ "collapse" + (this.state.protocolOpen?'in':'')} > |
105 <div className={ "collapse" + (this.state.protocolOpen?'in':'')} > |
104 {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */} |
106 {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */} |
105 <pre className=" protocol text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre> |
107 <pre className=" protocol text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre> |
106 </div> |
108 </div> |
107 </div> |
109 </div> |
108 <div className="text-center"> |
110 <div className="text-center"> |
109 <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" onClick={this.createSession}>Commencer</button> |
111 <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3 text-capitalize" onClick={this.createSession}>{t('common.begin')}</button> |
110 </div> |
112 </div> |
111 </form> |
113 </form> |
112 </div> |
114 </div> |
113 </div> |
115 </div> |
114 </Modal> |
116 </Modal> |
115 </div> |
117 </div> |
116 ); |
118 ); |
117 } |
119 } |
118 } |
120 } |
|
121 |
|
122 export default withNamespaces()(CreateSession); |