Work on View notifications

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

@@ -41,8 +41,7 @@
 <div class="col s12" id="query-display">
   <div class="card">
     <div class="card-content" id="result-list" style="overflow: hidden;">
-      <div class="error-container hide show-on-error"></div>
-      <div class=" row hide show-on-success">
+      <div id="interactions-menu" class="row hide">
         {% include 'interactions/infos.html.j2' %}
         {% include 'interactions/export.html.j2' %}
         {% include 'interactions/create.html.j2' %}
@@ -90,6 +89,13 @@ import {
   saveQueryData,
   saveMetaData,
 } from '../../static/js/modules/corpus_analysis/client/callbacks.js';
+import {
+  NotificationListener,
+  ResultsList,
+} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
+import {
+  recieveNotification,
+} from '../../static/js/modules/corpus_analysis/view/listeners.js';
 
 /**
  * Second Phase:
@@ -104,9 +110,11 @@ document.addEventListener("DOMContentLoaded", () => {
                              'dynamicMode': true});
   /**
   * Initializing the results object as a model holding all the data of a query.
-  * Also holds the metadata of one query.
+  * Also holds the metadata of one query. After that initialize the ResultsList
+  * object as the View handeling the represnetation of the data.
   */
   let results = new Results();
+  let resultsView = new ResultsList('result-list', ResultsList.options);
   /**
   * Register listeners listening to socket.io events and their callbacks
   * Afterwards load them.
@@ -136,8 +144,17 @@ document.addEventListener("DOMContentLoaded", () => {
                                   listenForQueryData,
                                   listenForMetaData]);
   client.loadSocketEventListeners();
+  /**
+  * Register resultsView listeners listening to nitification events.
+  */
+  const listenForNotification = new NotificationListener('notify',
+                                                         recieveNotification);
+  resultsView.setNotificationListeners([listenForNotification]);
+  resultsView.loadNotificationListeners();
   // Connect client to server
+  client.notifyView('connecting');
   client.connect();
+
   // Send a query and recieve its answer data
   let queryFormElement = document.getElementById('query-form');
   queryFormElement.addEventListener('submit', (event) => {

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

@@ -1,12 +1,17 @@
 <!-- Analysis init modal. User feedback showing that the analysis session is
 loading. -->
 
-<div class="modal no-autoinit" id="init-display">
+<div class="modal no-autoinit" id="analysis-init-modal">
   <div class="modal-content">
     <h4>Initializing your corpus analysis session...</h4>
-    <div class="error-container hide show-on-error"></div>
-    <div class="hide progress show-while-waiting">
+    <p>If the loading takes to long or an error occured,
+      <a onclick="window.location.reload()" href="#">click here</a>
+      to refresh your session or
+      <a href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}">go back</a>!
+    </p>
+    <div id="analysis-init-progress" class="progress">
       <div class="indeterminate"></div>
     </div>
+    <p id="analysis-init-error" class="hide red-text"></p>
   </div>
 </div>

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

@@ -34,7 +34,7 @@
 <div class="col s12" id="query-display">
   <div class="card">
     <div class="card-content" id="result-list" style="overflow: hidden;">
-      <div class=" row show-on-success">
+      <div class="row">
         {% include 'interactions/infos.html.j2' %}
         {% include 'interactions/display.html.j2' %}
         {% include 'interactions/analysis.html.j2' %}