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 { withNamespaces } from 'react-i18next'; |
|
6 import ProtocolSummary from './ProtocolSummary'; |
|
7 import { extractAnnotationCategories } from '../constants'; |
6 |
8 |
7 class CreateSession extends Component { |
9 class CreateSession extends Component { |
8 |
10 |
9 static propTypes = { |
11 static propTypes = { |
10 history: PropTypes.object.isRequired, |
12 history: PropTypes.object.isRequired, |
67 } |
69 } |
68 |
70 |
69 render() { |
71 render() { |
70 |
72 |
71 const t = this.props.t; |
73 const t = this.props.t; |
|
74 const protocol = this.getGroupProtocol(); |
|
75 const categories = extractAnnotationCategories(protocol); |
|
76 const modalStyles = {overlay: {zIndex: 1021}}; |
72 return ( |
77 return ( |
73 <div className="container-fluid"> |
78 <div className="container-fluid"> |
74 <span className="nav-link btn" onClick={this.openSessionModal}>{t('create_session.new_session')}</span> |
79 <span className="nav-link btn" onClick={this.openSessionModal}>{t('create_session.new_session')}</span> |
75 <Modal |
80 <Modal |
76 className="Modal__Bootstrap modal-dialog ml-5 mt-5 fixed-top w-100" |
81 className="Modal__Bootstrap modal-dialog ml-5 mt-5 fixed-top w-100" |
77 isOpen={this.state.modalIsOpen} |
82 isOpen={this.state.modalIsOpen} |
78 onRequestClose={this.handleModalCloseRequest} |
83 onRequestClose={this.handleModalCloseRequest} |
|
84 style={modalStyles} |
79 > |
85 > |
80 <div className="modal-content bg-primary w-75"> |
86 <div className="modal-content bg-primary w-75"> |
81 <div className="modal-body mt-3"> |
87 <div className="modal-body mt-3"> |
82 <form onSubmit={ e => { e.preventDefault() } }> |
88 <form onSubmit={ e => { e.preventDefault() } }> |
83 <div className="form-group"> |
89 <div className="form-group"> |
84 <label className="col-form-label text-secondary font-weight-bold pt-3 text-capitalize">{t('common.title')}</label> |
90 <label className="col-form-label text-secondary font-weight-bold pt-2 text-capitalize">{t('common.title')}</label> |
85 <input className="form-control text-primary w-100" |
91 <input className="form-control text-primary w-100" |
86 name="title" |
92 name="title" |
87 onChange={ this.onChange } |
93 onChange={ this.onChange } |
88 type="text" |
94 type="text" |
89 placeholder="Entrez un titre" |
95 placeholder="Entrez un titre" |
90 /> |
96 /> |
91 </div> |
97 </div> |
92 <div className="form-group"> |
98 <div className="form-group"> |
93 <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3 text-capitalize">{t('common.description')}</label> |
99 <label className="col-form-label text-secondary font-weight-bold pt-2 mt-2 text-capitalize">{t('common.description')}</label> |
94 <textarea className="form-control text-primary w-100" |
100 <textarea className="form-control text-primary w-100" |
95 type="textarea" |
101 type="textarea" |
96 name="description" |
102 name="description" |
97 onChange={ this.onChange } |
103 onChange={ this.onChange } |
98 placeholder="Entrez une description" |
104 placeholder="Entrez une description" |
99 ></textarea> |
105 ></textarea> |
100 </div> |
106 </div> |
101 <div className="form-group"> |
107 <div className="form-group"> |
102 <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> |
108 <label className="col-form-label text-secondary font-weight-bold pt-2 mt-2" 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':'')} > |
109 <div className={ "protocol collapse" + (this.state.protocolOpen?'in':'') } > |
104 {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */} |
110 <ProtocolSummary annotationCategories={categories} /> |
105 <pre className=" protocol text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre> |
|
106 </div> |
111 </div> |
107 </div> |
112 </div> |
108 <div className="text-center"> |
113 <div className="text-center"> |
109 <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> |
114 <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> |
115 </div> |