aboutsummaryrefslogtreecommitdiff
path: root/templates/progress.html
diff options
context:
space:
mode:
authorHao Chen2019-05-12 06:51:20 -0500
committerHao Chen2019-05-12 06:51:20 -0500
commit5abc13ae06b2ce7e53480340a1b9292701dc4ab5 (patch)
tree63e4737852d5acccb49f8dd2a7633cb4dbb48b39 /templates/progress.html
parentbc6a6e1d5974cb1c9f8a181728d93dafc531da01 (diff)
downloadgenecup-5abc13ae06b2ce7e53480340a1b9292701dc4ab5.tar.gz
progress working
Diffstat (limited to 'templates/progress.html')
-rw-r--r--templates/progress.html44
1 files changed, 27 insertions, 17 deletions
diff --git a/templates/progress.html b/templates/progress.html
index 322604d..7b4a9d0 100644
--- a/templates/progress.html
+++ b/templates/progress.html
@@ -3,25 +3,35 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script>
- var source = new EventSource("/search");
- source.onmessage = function(event) {
- $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
- $('.progress-bar-label').text(event.data+'%');
-
- if(event.data == 100){
- window.location.replace("/cytoscape")
- source.close()
- }
- }
- </script>
+<script>
+
+
+var r = Math.floor(Math.random() * Math.floor(125));
+var g = Math.floor(Math.random() * Math.floor(125));
+var b = Math.floor(Math.random() * Math.floor(125));
+document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.1)'
- <div id="progs" class="progress" style="width: 50%; margin: 50px;">
- <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
- <span class="progress-bar-label">0%</span>
- </div>
+var source = new EventSource("/search");
+source.onmessage = function(event) {
+ $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
+ $('.progress-bar-label').text(event.data+'%');
+ var alpha = event.data/150
+ document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.3)'.replace(/[^,]+(?=\))/, alpha)
+
+ if(event.data == 100){
+ window.location.replace("/cytoscape")
+ source.close()
+ }
+}
+</script>
+<br>
+<b> We hope this won't take too long ... </b>
+<div id="progs" class="progress" style="width: 50%; margin: 50px;">
+ <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+ <span class="progress-bar-label">0%</span>
</div>
-
+</div>
+
{% endblock %}