# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1544032808 -3600
# Node ID 99e342f9fb0cb1c36267d9d3df7165d1245e5d17
# Parent  e4c2c1919c2050cd85fc7d923e67df7f31e72de4
Display protocol graphically

diff -r e4c2c1919c20 -r 99e342f9fb0c client/src/components/CreateSession.js
--- a/client/src/components/CreateSession.js	Tue Dec 04 18:56:31 2018 +0100
+++ b/client/src/components/CreateSession.js	Wed Dec 05 19:00:08 2018 +0100
@@ -3,6 +3,8 @@
 import PropTypes from 'prop-types';
 import uuidV1 from 'uuid/v1';
 import { withNamespaces } from 'react-i18next';
+import ProtocolSummary from './ProtocolSummary';
+import { extractAnnotationCategories } from '../constants';
 
 class CreateSession extends Component {
 
@@ -69,6 +71,9 @@
   render() {
 
     const t = this.props.t;
+    const protocol = this.getGroupProtocol();
+    const categories = extractAnnotationCategories(protocol);
+    const modalStyles = {overlay: {zIndex: 1021}};
     return (
       <div className="container-fluid">
       <span className="nav-link btn" onClick={this.openSessionModal}>{t('create_session.new_session')}</span>
@@ -76,12 +81,13 @@
       className="Modal__Bootstrap modal-dialog ml-5 mt-5 fixed-top w-100"
       isOpen={this.state.modalIsOpen}
       onRequestClose={this.handleModalCloseRequest}
+      style={modalStyles}
       >
         <div className="modal-content bg-primary w-75">
           <div className="modal-body mt-3">
             <form onSubmit={ e => { e.preventDefault() } }>
               <div className="form-group">
-                <label className="col-form-label text-secondary font-weight-bold pt-3 text-capitalize">{t('common.title')}</label>
+                <label className="col-form-label text-secondary font-weight-bold pt-2 text-capitalize">{t('common.title')}</label>
                 <input className="form-control text-primary w-100"
                   name="title"
                   onChange={ this.onChange }
@@ -90,7 +96,7 @@
                 />
               </div>
               <div className="form-group">
-                <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3 text-capitalize">{t('common.description')}</label>
+                <label className="col-form-label text-secondary font-weight-bold pt-2 mt-2 text-capitalize">{t('common.description')}</label>
                 <textarea className="form-control text-primary w-100"
                   type="textarea"
                   name="description"
@@ -99,10 +105,9 @@
                   ></textarea>
               </div>
               <div className="form-group">
-                <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">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
-                <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
-                  {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
-                  <pre className=" protocol text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
+                <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">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
+                <div className={ "protocol collapse" + (this.state.protocolOpen?'in':'') } >
+                  <ProtocolSummary annotationCategories={categories} />
                 </div>
               </div>
               <div className="text-center">
diff -r e4c2c1919c20 -r 99e342f9fb0c client/src/constants/index.js
--- a/client/src/constants/index.js	Tue Dec 04 18:56:31 2018 +0100
+++ b/client/src/constants/index.js	Wed Dec 05 19:00:08 2018 +0100
@@ -20,7 +20,7 @@
   return metacategories.map((m) => {
     return {
       key: m.id,
-      name: m.name,
+      name: m.name || m.title,
       description: m.description,
       color: m.color,
       hasComment: m.has_comment
diff -r e4c2c1919c20 -r 99e342f9fb0c client/src/scss/components/_Navbar.scss
--- a/client/src/scss/components/_Navbar.scss	Tue Dec 04 18:56:31 2018 +0100
+++ b/client/src/scss/components/_Navbar.scss	Wed Dec 05 19:00:08 2018 +0100
@@ -1,3 +1,7 @@
+nav.navbar {
+    z-index: 1050;
+}
+
 .offline-message {
     font-size: .9rem;
 }
diff -r e4c2c1919c20 -r 99e342f9fb0c client/src/scss/components/_ProtocolSummary.scss
--- a/client/src/scss/components/_ProtocolSummary.scss	Tue Dec 04 18:56:31 2018 +0100
+++ b/client/src/scss/components/_ProtocolSummary.scss	Wed Dec 05 19:00:08 2018 +0100
@@ -2,5 +2,5 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 0.75rem 1.25rem;
-
+    background: $white;
 }