first change with new MVCish pattern

web/app/templates/corpora/analyse_corpus.html.j2

@@ -65,7 +65,102 @@
 {% include 'modals/export_query_results.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
 
-<script type="text/javascript"
-        src="web/app/static/js/modules/corpus_analysis/main.js">
+<!-- import modules -->
+<script type="module">
+/**
+ * First Phase:
+ * Document content is loaded and scripts are being imported and executed.
+ */
+import {
+  Client,
+  SocketEventListener,
+  ListenerCallback,
+} from '../../static/js/modules/corpus_analysis/client/Client.js';
+import {
+  recieveConnected,
+  recieveMetaData,
+  recieveQueryStatus,
+  recieveQueryData,
+} from '../../static/js/modules/corpus_analysis/client/listeners.js';
+import {
+  Results,
+} from '../../static/js/modules/corpus_analysis/model/Results.js';
+import {
+  prepareQueryData,
+  saveQueryData,
+  saveMetaData,
+} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
+
+/**
+ * Second Phase:
+ * Asynchronus and event driven code
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the client for server client communication in dynamic mode
+  let corpusId = {{ corpus_id }}
+  const client = new Client({'corpusId': corpusId,
+                             'socket': nopaque.socket,
+                             'logging': true,
+                             'dynamicMode': true});
+  /**
+  * Initializing the results object as a model holding all the data of a query.
+  * Also holds the metadata of one query.
+  */
+  let results = new Results();
+  /**
+  * Register listeners listening to socket.io events and their callbacks
+  * Afterwards load them.
+  */
+  const listenForConnected = new SocketEventListener('corpus_analysis_init',
+                                                     recieveConnected);
+  const listenForMetaData = new SocketEventListener('corpus_analysis_meta_data',
+                                                    recieveMetaData);
+  const metaDataCallback = new ListenerCallback('corpus_analysis_meta_data',
+                                                saveMetaData,
+                                                [client, results]);
+  listenForMetaData.setCallbacks([metaDataCallback]);
+  const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
+                                                       recieveQueryStatus);
+  const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
+                                                   prepareQueryData,
+                                                   [client, results]);
+  listenForQueryStatus.setCallbacks([queryStatusCallback]);
+  const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
+                                                     recieveQueryData);
+  const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
+                                                 saveQueryData,
+                                                 [client, results]);
+  listenForQueryData.setCallbacks([queryDataCallback]);
+  client.setSocketEventListeners([listenForConnected,
+                                  listenForQueryStatus,
+                                  listenForQueryData,
+                                  listenForMetaData]);
+  client.loadSocketEventListeners();
+  // Connect client to server
+  client.connect();
+  // Send a query and recieve its answer data
+  let queryFormElement = document.getElementById('query-form');
+  queryFormElement.addEventListener('submit', (event) => {
+    try {
+      /**
+       * Selects first page of result list if pagination is already available
+       * from an query submitted before.
+       * This avoids confusion for the user e.g.: The user was on page 24
+       * reviewing the results and issues a new query. He would not see any
+       * results until the new results reach page 24 or he clicks on another
+       * valid result page element from the new pagination.
+       */
+      let firstPageElement = document.querySelector('a.page');
+      firstPageElement.click();
+    } catch (e) {
+      // No page element is present if first query is submitted.
+    }
+    // Prevent page from reloading on submit
+    event.preventDefault();
+    // Get query string and send query to server
+    results.data.getQueryStr(queryFormElement);
+    client.query(results.data.query);
+  });
+});
 </script>
 {% endblock %}