Emit query data via socketio

app/templates/corpora/corpus_analysis.html.j2

@@ -3,7 +3,7 @@
 {% block page_content %}
 <div class="col s12 m3 l3 sticky">
   <div class="card">
-    <form method="POST">
+    <form id="query_form" method="POST">
     <div class="card-content">
       {{ form.hidden_tag() }}
       <span class="card-title">Query and analysis</span>
@@ -16,7 +16,7 @@
         {% endfor %}
       </div>
       <div class="right-align">
-        <button class="btn" type="submit" name="action">Start Query
+        <button id="sent_query" class="btn" type="submit" name="action">Start Query
           <i class="material-icons left">search</i>
         </button>
       </div>
@@ -50,24 +50,24 @@
       </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>
+    <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>
   </div>
 </div>
@@ -97,4 +97,25 @@
     </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);
+  console.log('Query data has been sent!')
+}
+</script>
 {% endblock %}