Change corpus analyse ui

app/corpora/forms.py

@@ -50,8 +50,8 @@ class EditCorpusFileForm(FlaskForm):
 
 
 class QueryForm(FlaskForm):
-    query = TextAreaField('CQP Query', validators=[DataRequired(),
-                                                   (Length(1, 1024))])
+    query = StringField('CQP Query',
+                        validators=[DataRequired(), Length(1, 1024)])
     hits_per_page = SelectField('Hits per page',
                                 choices=[('', 'Nr. of hits per page'),
                                          ('10', '10'),

app/templates/corpora/analyse_corpus.html.j2

@@ -36,24 +36,35 @@
 }
 </style>
 
-<div class="col s12 m3 sticky">
+<form id="query-form">
+  <div class="col s12">
     <div class="card">
       <div class="card-content">
-      <form id="query-form" method="POST">
-        {{ query_form.hidden_tag() }}
-        <span class="card-title">Query and analysis</span>
+        <div class="row">
+          <div class="col s12 m11">
             <div class="input-field">
-          {{ query_form.query(class='materialize-textarea') }}
+              <i class="material-icons prefix">search</i>
+              {{ query_form.query() }}
               {{ query_form.query.label }}
+              <span class="helper-text" data-error="wrong" data-success="right"><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/"><i class="material-icons" style="font-size: inherit;">help</i> CQP query language tutorial</a></span>
               {% for error in query_form.query.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
               {% endfor %}
             </div>
-        <button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
-        <p>&nbsp;</p>
-        <span class="card-title">Help</span>
-        <p><a target="_blank" rel="noopener noreferrer" href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
-        <p>&nbsp;</p>
+          </div>
+          <div class="col s12 m1">
+            <p class="hide-on-small-only">&nbsp;</p>
+            <button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col s12 m3">
+    <div class="card">
+      <div class="card-content">
+        <div id="query-form">
           <span class="card-title">Options</span>
           <div class="input-field">
             <i class="material-icons prefix">format_list_numbered</i>
@@ -78,15 +89,16 @@
               <span class="lever"></span>
             </label>
           </div>
-      </form>
         </div>
       </div>
+    </div>
+  </div>
+</form>
 
+<div class="col s12 hide">
     <div class="card">
       <div class="card-content">
         <span class="card-title">Query Link</span>
-      <form id="download-form" method="POST">
-        {{ query_download_form.hidden_tag() }}
         <span class="card-title">Download Results</span>
         <p>Downlaod all results of the current query as csv, excel or json file.</p>
         <div class="input-field">
@@ -98,10 +110,9 @@
           {% endfor %}
         </div>
         <button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
-      </form>
       </div>
     </div>
-</div>
+  </div>
 
 <div class="col s12 m9 hide" id="getting-query-results">
   <div class="card">
@@ -116,11 +127,11 @@
   </div>
 </div>
 
-<div class="col s12 m9 hide" id="recieved-query-results">
+<div class="col s12 m9" id="recieved-query-results">
   <div class="card">
     <div class="card-content">
       <span class="card-title">Query Results</span>
-        <table>
+        <table class="hide">
           <thead>
             <tr>
               <th style="width: 5%">Title</th>
@@ -203,12 +214,11 @@
   })
 
   var queryFormElement = document.getElementById("query-form");
-  var queryFormSubmitElement = document.getElementById("query-form-submit");
   var queryResultsElement = document.getElementById("query-results");
   var contextResultsElement = document.getElementById("context-results");
   var queryLoadingElement = document.getElementById("getting-query-results");
   var queryResultsTableElement = document.getElementById("recieved-query-results");
-  queryFormSubmitElement.addEventListener("click", function(event) {
+  queryFormElement.addEventListener("submit", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
     let queryData = {"context": formData.get("context"),

docker-compose.yml

@@ -25,7 +25,7 @@ services:
         constraints:
           - node.role == manager
     environment:
-      - VIRTUAL_HOST=nopaque.localhost
+      - VIRTUAL_HOST=nopaque.localhost,129.70.216.233
     env_file: nopaque.env
     image: gitlab.ub.uni-bielefeld.de:4567/sfb1288inf/opaque:development
     volumes: