Add Results viewer functionality with ne javascript and fix some errors.

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

@@ -187,6 +187,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                   listenForMetaData,
                                   listenForViewNotification,
                                   listenForResults]);
+  console.log(client.eventListeners);
   // Load the listeners so that they will be executed if triggered
   client.loadSocketEventListeners();
   /**
@@ -225,21 +226,21 @@ document.addEventListener("DOMContentLoaded", () => {
   });
   // Get all needed HTMLElements for the following event listeners.
   resultsList.getHTMLElements([
-    '#display-options-form-results_per_page',
+    '.pagination',
+    '#display-options-form-expert_mode',
     '#display-options-form-result_context',
-    '#show-meta-data',
-    '#meta-data-modal',
-    '#meta-data-modal-content',
-    '#full-results-create',
-    '#sub-results-create',
-    '#full-results-export',
-    '#sub-results-export',
+    '#display-options-form-results_per_page',
     '#download-results-json',
+    '#full-results-create',
+    '#full-results-export',
+    '#inspect-results-export',
+    '#meta-data-modal-content',
+    '#meta-data-modal',
     '#query-results-download-modal',
     '#query-results-table',
-    '#display-options-form-expert_mode',
-    '.pagination',
-    '#inspect-results-export',
+    '#show-meta-data',
+    '#sub-results-create',
+    '#sub-results-export',
   ]);
 
   /**
@@ -280,7 +281,7 @@ document.addEventListener("DOMContentLoaded", () => {
     let dataIndex;
     if (event.target.classList.contains('inspect-btn')) {
       dataIndex = parseInt(event.target.closest('tr').dataset.index);
-      resultsList.inspect([dataIndex], 'inspect');
+      resultsList.inspect(client, results, [dataIndex], 'inspect');
     } else if (event.target.classList.contains('add-btn')) {
       dataIndex = parseInt(event.target.closest('tr').dataset.index);
       resultsList.addToSubResults(dataIndex, client);

web/app/templates/modals/context_modal.html.j2

@@ -42,7 +42,7 @@
             </div>
           </div>
         </div>
-        <div class="col s12 m6 l6">
+        <div class="col s12 m6 l6" id="create-from-inspect">
           <div class="section">
             <h6 style="margin-top: 0px;">Create</h6>
             <div class="divider" style="margin-bottom: 10px;"></div>

web/app/templates/query_results/inspect.html.j2

@@ -34,11 +34,15 @@
 <div class="col s12" id="query-display">
   <div class="card">
     <div class="card-content" id="result-list" style="overflow: hidden;">
-      <div class="row">
+      <div class="row" id="interactions-menu">
         {% include 'interactions/infos.html.j2' %}
         {% include 'interactions/display.html.j2' %}
         {% include 'interactions/analysis.html.j2' %}
         {% include 'interactions/cite.html.j2' %}
+        <div class="hide">
+          {% include 'interactions/export.html.j2' %}
+          {% include 'interactions/create.html.j2' %}
+        </div>
       </div>
       {% include 'tables/query_results.html.j2' %}
     </div>
@@ -93,6 +97,10 @@ import {
   ResultsList,
   ViewEventListener,
 } from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
+// Import listener which will be registered to the ViewEventListener class.
+import {
+  recieveClientNotification,
+} from '../../static/js/modules/corpus_analysis/view/listeners.js';
 import {
   scrollToTop,
 } from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
@@ -130,7 +138,116 @@ document.addEventListener("DOMContentLoaded", () => {
                                                  saveQueryData,
                                                  [client, results]);
   listenForQueryData.setCallbacks([queryDataCallback]);
-  // TODO: execute callbacks manually with right input
+  // Set the event listeners
+  client.setSocketEventListeners([
+    listenForQueryStatus,
+    listenForQueryData,
+  ]);
+  /**
+   * Register resultsList listeners listening to notification events emitted by
+   * the Client class.
+   */
+  const listenForClientNotification = new ViewEventListener('notify-view',
+                                                            recieveClientNotification);
+  resultsList.setNotificationListeners([listenForClientNotification]);
+  resultsList.loadNotificationListeners();
+  // Get all needed HTMLElements for the following event listeners.
+  resultsList.getHTMLElements([
+    '.add-btn',
+    '.pagination',
+    '#display-options-form-expert_mode',
+    '#display-options-form-result_context',
+    '#display-options-form-results_per_page',
+    '#full-results-create',
+    '#meta-data-modal-content',
+    '#meta-data-modal',
+    '#query-results-table',
+    '#show-meta-data',
+    '#sub-results-create',
+  ]);
+  // Execute client event listener callbacks manually because dynamicMode is false
+  client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson])
+  client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson])
+  /**
+   * The following listener handles what functions are called when the user
+   * does use the page navigation to navigate to a new page.
+   */
+  for (let element of resultsList.pagination) {
+    element.addEventListener("click", (event) => {
+      // Shows match context according to the user picked value on a new page.
+      resultsList.changeContext();
+      // De- or activates expertMode on new page depending on switch value.
+      if (resultsList.displayOptionsFormExpertMode.checked) {
+        resultsList.expertModeOn('query-display', results);
+      } else {
+        resultsList.expertModeOff('query-display');
+      }
+      // Activates inspect buttons on new page if client is not busy.
+      resultsList.toggleInspectButtons(client);
+    });
+  }
+
+  /**
+   * The following event Listener handles the expert mode switch for the list.
+   */
+  resultsList.displayOptionsFormExpertMode.onchange = (event) => {
+    if (event.target.checked) {
+      resultsList.expertModeOn('query-display', results);
+    } else {
+      resultsList.expertModeOff('query-display');
+    }
+  };
+
+  /**
+   * The following event Listener handles the add-btn and the inspect-btn
+   * onclick events via bubbleing.
+   */
+  resultsList.queryResultsTable.addEventListener('click', (event) => {
+    let dataIndex;
+    if (event.target.classList.contains('inspect-btn')) {
+      dataIndex = parseInt(event.target.closest('tr').dataset.index);
+      resultsList.inspect(client, results, [dataIndex], 'inspect');
+    } else if (event.target.classList.contains('add-btn')) {
+      dataIndex = parseInt(event.target.closest('tr').dataset.index);
+      resultsList.addToSubResults(dataIndex, client);
+    }
+  })
+
+  /**
+   * Following event listeners handle the change of Context size per match and
+   * the number of matches shown per page.
+   */
+  resultsList.displayOptionsFormResultsPerPage.onchange = (event) => {
+    resultsList.changeHitsPerPage(client, results);
+  };
+  resultsList.displayOptionsFormResultContext.onchange = (event) => {
+    resultsList.changeContext();
+  };
+
+  /**
+   * The following event listener handles the show metadata button and its
+   * functionality. Before the needed modal is initialized.
+   */
+  resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
+    'preventScrolling': false,
+    'opacity': 0.0,
+    'dismissible': false,
+    'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
+  });
+  resultsList.showMetaData.onclick = () => {
+    resultsList.metaDataModalContent.textContent = '';
+    let table = resultsList.createMetaDataForModal(results.metaData);
+    resultsList.metaDataModalContent.insertAdjacentHTML('afterbegin', table);
+    resultsList.metaDataModal.open();
+    let collapsibles = resultsList.metaDataModalContent.querySelectorAll(".text-metadata");
+    for (let collapsible of collapsibles) {
+      collapsible.onclick = () => {
+        let elems = resultsList.metaDataModalContent.querySelectorAll('.collapsible');
+        let instances = M.Collapsible.init(elems, {accordion: false});
+        resultsList.createTextDetails(results.metaData);
+      }
+    }
+  };
   // Enable scroll to Top functionality.
   scrollToTop('#headline', '#menu-scroll-to-top-div');
 });