integrate flash method into the nopaque appClient

web/app/static/js/modules/corpus_analysis/view/callbacks.js

@@ -61,7 +61,7 @@ function clientFailedCallback(resultsList, detail) {
     resultsList.analysisInitError.classList.toggle('hide');
     resultsList.analysisInitError.textContent = detail.msg;
   } else {
-    nopaque.flash(detail.msg, 'error')
+    nopaque.appClient.flash(detail.msg, 'error')
   }
 }
 
@@ -241,4 +241,4 @@ export {
   resultsDataRecievedCallback,
   disableElementsGeneralCallback,
   enableElementsGeneralCallback,
-};
+};

web/app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js

@@ -36,12 +36,12 @@ class CorpusDisplay extends RessourceDisplay {
 
   requestCorpusExport() {
     nopaque.appClient.socket.emit('export_corpus', this.user.data.corpora[this.corpusId].id);
-    nopaque.flash('Preparing your corpus export...', 'corpus');
+    nopaque.appClient.flash('Preparing your corpus export...', 'corpus');
     for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', true);}
   }
 
   downloadCorpus() {
-    nopaque.flash('Corpus export is done. Your corpus download is ready!', 'corpus');
+    nopaque.appClient.flash('Corpus export is done. Your corpus download is ready!', 'corpus');
     for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', false);}
     // Little trick to call the download view after ziping has finished
     let fakeBtn = document.createElement('a');

web/app/static/js/nopaque/main.js

@@ -1,9 +1,37 @@
 class AppClient {
   constructor(currentUserId) {
-    this.socket = io({transports: ['websocket']});
+    if (currentUserId) {
-    this.users = {};
+      this.socket = io({transports: ['websocket']});
-    this.users.self = this.loadUser(currentUserId);
+      this.users = {};
-    this.users.self.eventListeners.job.addEventListener((eventType, payload) => this.jobEventHandler(eventType, payload));
+      this.users.self = this.loadUser(currentUserId);
+      this.users.self.eventListeners.job.addEventListener((eventType, payload) => this.jobEventHandler(eventType, payload));
+    }
+  }
+
+  flash(message, category) {
+    let toast;
+    let toastCloseActionElement;
+
+    switch (category) {
+      case "corpus":
+        message = `<i class="left material-icons">book</i>${message}`;
+        break;
+      case "error":
+        message = `<i class="left material-icons red-text">error</i>${message}`;
+        break;
+      case "job":
+        message = `<i class="left material-icons">work</i>${message}`;
+        break;
+      default:
+        message = `<i class="left material-icons">notifications</i>${message}`;
+    }
+
+    toast = M.toast({html: `<span>${message}</span>
+                            <button data-action="close" class="btn-flat toast-action white-text">
+                              <i class="material-icons">close</i>
+                            </button>`});
+    toastCloseActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
+    toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
   }
 
   jobEventHandler(eventType, payload) {
@@ -35,7 +63,7 @@ class AppClient {
     for (let operation of jobStatusPatches) {
       let [match, jobId] = operation.path.match(/^\/jobs\/(\d+)\/status$/);
       if (this.users.self.data.settings.job_status_site_notifications === "end" && !['complete', 'failed'].includes(operation.value)) {continue;}
-      nopaque.flash(`[<a href="/jobs/${jobId}">${this.users.self.data.jobs[jobId].title}</a>] New status: ${operation.value}`, 'job');
+      this.flash(`[<a href="/jobs/${jobId}">${this.users.self.data.jobs[jobId].title}</a>] New status: ${operation.value}`, 'job');
     }
   }
 }
@@ -150,32 +178,6 @@ class User {
  */
 var nopaque = {};
 
-nopaque.flash = function(message, category) {
-  let toast;
-  let toastActionElement;
-
-  switch (category) {
-    case "corpus":
-      message = `<i class="left material-icons">book</i>${message}`;
-      break;
-    case "error":
-      message = `<i class="left material-icons red-text">error</i>${message}`;
-      break;
-    case "job":
-      message = `<i class="left material-icons">work</i>${message}`;
-      break;
-    default:
-      message = `<i class="left material-icons">notifications</i>${message}`;
-  }
-
-  toast = M.toast({html: `<span>${message}</span>
-                          <button data-action="close" class="btn-flat toast-action white-text">
-                            <i class="material-icons">close</i>
-                          </button>`});
-  toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
-  toastActionElement.addEventListener('click', () => {toast.dismiss();});
-};
-
 nopaque.Forms = {};
 nopaque.Forms.init = function() {
   var abortRequestElement, parentElement, progressElement, progressModal,

web/app/templates/nopaque.html.j2

@@ -277,11 +277,8 @@
   M.AutoInit();
   M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="email"], input[data-length][type="password"], input[data-length][type="text"], textarea[data-length]'));
   M.Dropdown.init(document.querySelectorAll('#nav-more-dropdown-trigger'), {alignment: 'right', constrainWidth: false, coverTrigger: false});
+  nopaque.appClient = new AppClient({% if current_user.is_authenticated %}{{ current_user.id }}{% endif %});
   nopaque.Forms.init();
-  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {nopaque.flash(flashedMessage[1], flashedMessage[0]);}
+  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {nopaque.appClient.flash(flashedMessage[1], flashedMessage[0]);}
-
-  {% if current_user.is_authenticated %}
-  nopaque.appClient = new AppClient({{ current_user.id }});
-  {% endif %}
 </script>
 {% endblock scripts %}