Add timer to loading page to track how long the process has been running

1 files changed, 22 insertions, 3 deletions

diff --git a/wqflask/wqflask/templates/loading.html b/wqflask/wqflask/templates/loading.html
index 1edde31e..ccf810b0 100644
--- a/wqflask/wqflask/templates/loading.html
+++ b/wqflask/wqflask/templates/loading.html
@@ -12,6 +12,8 @@
           {% if start_vars.tool_used == "Mapping" %}
           <h1>Computing the Maps</h1>
           <br>
+          <b>Time Elapsed:</b> <span class="timer"></span>
+          <br>
           <b>Trait Metadata</b>
           <br>
           species = <b><i>{{ start_vars.species[0] | upper }}{{ start_vars.species[1:] }}</i></b>
@@ -101,9 +103,6 @@
 <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
 <script src="{{ url_for('js', filename='bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
 <script  type="text/javascript">
-$("#loading_form").attr("action", "{{ start_vars.form_url }}");
-setTimeout(function(){ $("#loading_form").submit()}, 350);
-
 $('#show_full_diff').click(function() {
   if ($('#diff_table_container').is(':visible')){
     $('#diff_table_container').hide();
@@ -111,4 +110,24 @@ $('#show_full_diff').click(function() {
     $('#diff_table_container').show();
   }
 })
+
+var start = new Date;
+
+setInterval(function() {
+  minutes = Math.floor((new Date - start) / 1000 / 60)
+  seconds = Math.round(((new Date - start) / 1000) % 60)
+  if (seconds < 10 && minutes >= 1){
+    seconds_text = "0" + seconds.toString()
+  } else {
+    seconds_text = seconds.toString()
+  }
+  if (minutes < 1) {
+    $('.timer').text(seconds_text + " seconds");
+  } else {
+    $('.timer').text(minutes.toString() + ":" + seconds_text);
+  }
+}, 100);
+
+$("#loading_form").attr("action", "{{ start_vars.form_url }}");
+setTimeout(function(){ $("#loading_form").submit()}, 350);
 </script>