sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +00:00
Code Issues Projects Releases Wiki Activity

Add loading animation for query request

Browse Source
This commit is contained in:
Stephan Porada 2019-12-04 10:54:40 +01:00
parent c3fe3d9247
commit 947e9f984b
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/templates/corpora/analyse_corpus.html.j2
View File

@ -103,11 +103,23 @@
</div> </div>
</div> </div>
<div class="col s12 m9"> <div class="col s12 m9 hide" id="getting-query-results">
<div class="card">
<div class="card-content">
<span class="card-title">Fetching your results!</span>
<div>
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m9 hide" id="recieved-query-results">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<span class="card-title">Query Results</span> <span class="card-title">Query Results</span>
<div>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -119,7 +131,6 @@
</thead> </thead>
<tbody id="query-results"></tbody> <tbody id="query-results"></tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -193,6 +204,8 @@
var queryFormSubmitElement = document.getElementById("query-form-submit"); var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results"); var queryResultsElement = document.getElementById("query-results");
var contextResultsElement = document.getElementById("recieved-data"); var contextResultsElement = document.getElementById("recieved-data");
var queryLoadingElement = document.getElementById("getting-query-results");
var queryResultsTableElement = document.getElementById("recieved-query-results");
queryFormSubmitElement.addEventListener("click", function(event) { queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault(); event.preventDefault();
let formData = new FormData(queryFormElement); let formData = new FormData(queryFormElement);
@ -200,12 +213,17 @@
"hits_per_page": formData.get("hits_per_page"), "hits_per_page": formData.get("hits_per_page"),
"query": formData.get("query")}; "query": formData.get("query")};
socket.emit("corpus_analysis", queryData); socket.emit("corpus_analysis", queryData);
queryLoadingElement.classList.remove("hide");
queryResultsTableElement.classList.add("hide");
M.toast({html: "Query has been sent!"}); M.toast({html: "Query has been sent!"});
}); });
socket.on("corpus_analysis", function(message) { socket.on("corpus_analysis", function(message) {
queryLoadingElement.classList.add("hide");
queryResultsTableElement.classList.remove("hide");
console.log(message); console.log(message);
if (message === null) { if (message === null) {
queryResultsTableElement.classList.add("hide");
M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"}); M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
} else { } else {
var matchElement; var matchElement;