Change HTML for corpus analysis

app/corpora/events.py

@@ -38,7 +38,7 @@ def init_corpus_analysis(corpus_id):
                                    corpus_id, request.sid)
 
 
-@socketio.on('query_event')
+@socketio.on('query')
 @login_required
 def recv_query(message):
     logger.warning(message)
@@ -80,7 +80,7 @@ def recv_query(message):
         match['word_list'] = [foo[cpos]['word'] for cpos in match['cpos_list']]
         match.pop('cpos_list', None)
     logger.warning(matches)
-    socketio.emit('query_results', matches, room=request.sid)
+    socketio.emit('query', matches, room=request.sid)
 
 
 def observe_corpus_analysis_connection(app, corpus_id, session_id):

app/templates/corpora/corpus_analysis.html.j2

 {% extends "full_width.html.j2" %}
 
 {% block page_content %}
-<div class="col s12 m3 l3 sticky">
+<div class="col s12 m3 sticky">
   <a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}"><i class="material-icons left">arrow_back</i>Back to corpus overview</a>
   <div class="card">
-    <form id="query_form" method="POST">
     <div class="card-content">
-      {{ form.hidden_tag() }}
-      <span class="card-title">Query and analysis</span>
-      <br>
-      <div class="input-field">
+      <form id="query-form" method="POST">
+        {{ form.hidden_tag() }}
+        <span class="card-title">Query and analysis</span>
+        <div class="input-field">
           {{ form.query(class='materialize-textarea') }}
           {{ form.query.label }}
-        {% for error in form.query.errors %}
-          <span class="helper-text red-text">{{ error }}</span>
-        {% endfor %}
-      </div>
-      <div class="right-align">
-        <button id="sent_query" class="btn" type="submit" name="action">Start Query
-          <i class="material-icons left">search</i>
-        </button>
-      </div>
-      <br>
-      <span class="card-title">Help</span>
-      <ul>
-        <li>
-          <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
-            CQP Query Language Tutorial</a>
-        </li>
-      </ul>
-      <br>
-      <span class="card-title">Options</span>
-      <br>
+          {% for error in 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 href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
+        <p>&nbsp;</p>
+        <span class="card-title">Options</span>
         <div class="input-field">
           <i class="material-icons prefix">format_list_numbered</i>
           {{ form.hits_per_page() }}
@@ -40,78 +29,46 @@
             <span class="helper-text red-text">{{ error }}</span>
           {% endfor %}
         </div>
-      <br>
-      <div class="input-field">
-        <i class="material-icons prefix">short_text</i>
-        {{ form.context() }}
-        {{ form.context.label }}
-        {% for error in form.context.errors %}
-          <span class="helper-text red-text">{{ error }}</span>
-        {% endfor %}
-      </div>
-      <br>
-    </form>
-    <span class="card-title">Download Results</span>
-    <p>Downlaod all results of the current query as csv, excel or json file.</p>
-    <form method="POST">
-      {{ form.hidden_tag() }}
-      <div class="input-field">
-        <i class="material-icons prefix">insert_drive_file</i>
-        {{ dl_form.file_type() }}
-        {{ dl_form.file_type.label }}
-        {% for error in dl_form.file_type.errors %}
-          <span class="helper-text red-text">{{ error }}</span>
-        {% endfor %}
-      </div>
-      <div class="right-align">
-        <button class="btn" type="submit" name="action">Download
-          <i class="material-icons left">file_download</i>
-        </button>
-      </div>
-    </form>
+        <div class="input-field">
+          <i class="material-icons prefix">short_text</i>
+          {{ form.context() }}
+          {{ form.context.label }}
+          {% for error in form.context.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-content">
+      <form id="download-form" method="POST">
+        {{ dl_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">
+          <i class="material-icons prefix">insert_drive_file</i>
+          {{ dl_form.file_type() }}
+          {{ dl_form.file_type.label }}
+          {% for error in dl_form.file_type.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+        <button class="btn waves-effect waves-light" id="download-form-submit" style="width: 100%;" type="submit">Download</button>
+      </form>
     </div>
   </div>
 </div>
-<script>
-socket.on('query_results', function(json_results) {
-  console.log('Results recieved')
-  console.log(json_results)
-  var queryResultsElement = document.getElementById("query-results");
-  for (let json_result of json_results) {
-    queryResultsElement.innerHTML += json_result['word_list'] + '<br>';
-  }
-});
-</script>
-<div class="col s12 m9 l9">
+
+<div class="col s12 m9">
   <div class="card">
     <div class="card-content">
       <span class="card-title">Query Results</span>
-      <p id="query-results"></p>
+      <div id="query-results"></div>
     </div>
   </div>
 </div>
-<script>
-let queryData = document.forms['query_form'].elements;
-console.log(queryData);
-var queryBtn = document.getElementById('sent_query');
-queryBtn.addEventListener('click', function(event) {
-  event.preventDefault();
-  sendQueryData();
-});
-function sendQueryData() {
-  var query_data = {};
-  for (element of queryData) {
-    if (!element.value || element.name == 'csrf_token' || !element.id) {
-      continue;
-    }
-    query_data[element.id] = element.value
-  }
-  console.log(query_data)
-  socket.emit('query_event', query_data);
-  M.toast({html: 'Query has been sent'});
-  console.log('Query data has been sent!');
-}
-</script>
 
 <div id="loading-modal" class="modal no-autoinit">
   <div class="modal-content">
@@ -133,16 +90,37 @@ function sendQueryData() {
 </div>
 
 <script>
-var loadingModal;
+  var loadingModal;
 
-document.addEventListener('DOMContentLoaded', function() {
-  loadingModal = M.Modal.init(document.getElementById("loading-modal"), {"dismissible": false});
-  loadingModal.open();
-});
+  document.addEventListener('DOMContentLoaded', function() {
+    loadingModal = M.Modal.init(document.getElementById("loading-modal"),
+                                {"dismissible": false});
+    loadingModal.open();
+  });
+  socket.emit('init_corpus_analysis', {{ corpus_id }});
 
-socket.emit('init_corpus_analysis', {{ corpus_id }});
-socket.on('init_corpus_analysis', function(msg) {
-  if (msg === 'Ready') {loadingModal.close();}
-});
+  var queryFormElement = document.getElementById("query-form");
+  var queryFormSubmitElement = document.getElementById("query-form-submit");
+  var queryResultsElement = document.getElementById("query-results");
+
+  queryFormSubmitElement.addEventListener('click', function(event) {
+    event.preventDefault();
+    let formData = new FormData(queryFormElement);
+    let queryData = {'context': formData.get('context'),
+                     'hits_per_page': formData.get('hits_per_page'),
+                     'query': formData.get('query')};
+    socket.emit('query', queryData);
+    M.toast({html: 'Query has been sent!'});
+  });
+
+  socket.on('init_corpus_analysis', function(msg) {
+    if (msg === 'Ready') {loadingModal.close();}
+  });
+  socket.on('query', function(results) {
+    queryResultsElement.innerHTML = '';
+    for (let result of results) {
+      queryResultsElement.innerHTML += '<p>' + result['word_list'] + '</p>';
+    }
+  });
 </script>
 {% endblock %}