From 6ea8fbd6b181d98229ddd4571dfc7d4cf7e1c697 Mon Sep 17 00:00:00 2001
From: Miguel Barão <mjsb@uevora.pt>
Date: Thu, 30 Apr 2020 13:33:44 +0100
Subject: [PATCH] - progress bar under the menu shows the remaining time.

---
 perguntations/__init__.py         |  2 +-
 perguntations/templates/test.html | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)
diff --git a/perguntations/__init__.py b/perguntations/__init__.py
index 2efbf51..10f463f 100644
--- a/perguntations/__init__.py
+++ b/perguntations/__init__.py
@@ -32,7 +32,7 @@ proof of submission and for review.
 '''
 
 APP_NAME = 'perguntations'
-APP_VERSION = '2020.04.dev4'
+APP_VERSION = '2020.04.dev5'
 APP_DESCRIPTION = __doc__
 
 __author__ = 'Miguel Barão'
diff --git a/perguntations/templates/test.html b/perguntations/templates/test.html
index bc38c36..2f4a5bb 100644
--- a/perguntations/templates/test.html
+++ b/perguntations/templates/test.html
@@ -44,8 +44,12 @@
 <!-- ===================================================================== -->
 <body>
 <!-- ===================================================================== -->
+<div class="progress fixed-top" style="height: 60px; border-radius: 0px;">
+  <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 
 <nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
+
   <a class="navbar-brand" href="#">
     <img src="/static/logo_horizontal.png" height="30" alt="">
   </a>
@@ -62,6 +66,7 @@
         <li class="nav-item"><h5>
           <span class="navbar-text" id="clock"> --:-- </span>
           </h5>
+
         </li>
     </ul>
 
@@ -76,6 +81,7 @@
         </li>
     </ul>
   </div>
+
 </nav>
 
 <!-- ===================================================================== -->
@@ -152,7 +158,8 @@
 </script>
 
 <script>
-  var finishtime = new Date().getTime() + {{ t['duration']*60*1000 }};
+  var duration = {{ t['duration']*60*1000 }}; // ms
+  var finishtime = new Date().getTime() + duration;
 
   {% if t['duration'] == 0 %}
     $("#clock").html("+\u221e");
@@ -161,7 +168,7 @@
     // Update the count down every 1 second
     var x = setInterval(function() {
       var now = new Date().getTime();
-      var distance = finishtime - now;
+      var distance = finishtime - now; // ms
 
       // Time calculations for days, hours, minutes and seconds
       var minutes = Math.floor((distance / (1000 * 60)));
@@ -180,6 +187,9 @@
           $("#test").submit();
         {% end %}
       }
+
+      var progress = distance/duration*100 + '%'
+      $('.progress-bar').css('width', progress).attr('aria-valuenow', progress);
     }, 1000);
 
   {% end %}
--
libgit2 0.21.2

