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 %}
--
GitLab