From 388e7eaa607290f1063e730af4882f9d2364ed46 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 11 Nov 2019 15:57:55 +0100
Subject: [PATCH] Add first implementation of loading modal

---
 app/corpora/events.py                         |  1 +
 app/templates/base.html.j2                    |  8 ++++---
 app/templates/corpora/corpus_analysis.html.j2 | 22 +++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/corpora/events.py b/app/corpora/events.py
index 601cd654..3da43763 100644
--- a/app/corpora/events.py
+++ b/app/corpora/events.py
@@ -55,6 +55,7 @@ def observe_corpus_analysis_connection(app, corpus_id, session_id):
                                      username='opaque')
         analysis_client.connect()
         analysis_clients[session_id] = analysis_client
+        socketio.emit('init_corpus_analysis', 'Ready', room=session_id)
         while session_id in connected_sessions:
             try:
                 analysis_client.ctrl_ping()
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index 2febaeab..1f0e4647 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -158,9 +158,7 @@
     </header>
 
     <main class="grey lighten-5">
-          {% block main_block %}
-          {% endblock %}
-
+      {% block main_block %}{% endblock %}
     </main>
 
     <footer class="page-footer">
@@ -188,6 +186,10 @@
           document.getElementById("new-job"),
           {"coverTrigger": false}
         );
+        var loadingModal = document.getElementById("loading-modal");
+        console.log(loadingModal);
+        M.Modal.init(loadingModal, {"dismissible": false});
+        M.Modal.getInstance(loadingModal).open();
         var entry;
         for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
           if (entry.href === window.location.href) {
diff --git a/app/templates/corpora/corpus_analysis.html.j2 b/app/templates/corpora/corpus_analysis.html.j2
index 39599272..a742e919 100644
--- a/app/templates/corpora/corpus_analysis.html.j2
+++ b/app/templates/corpora/corpus_analysis.html.j2
@@ -3,6 +3,9 @@
 {% block page_content %}
 <script>
 socket.emit('init_corpus_analysis', {{ corpus_id }});
+socket.on('init_corpus_analysis', function(msg) {
+  if (msg === 'Ready') {M.Modal.getInstance(document.getElementById("loading-modal")).close();}
+});
 </script>
 
 
@@ -125,4 +128,23 @@ function sendQueryData() {
   console.log('Query data has been sent!')
 }
 </script>
+
+<div id="loading-modal" class="modal no-autoinit">
+  <div class="modal-content">
+    <h4>Waiting for analysis software</h4>
+    <div class="preloader-wrapper big active">
+      <div class="spinner-layer spinner-blue-only">
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="gap-patch">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}