- progress bar under the menu shows the remaining time.

Miguel Barão
1 parent 77962168
Showing 2 changed files with 13 additions and 3 deletions Show diff stats
perguntations/__init__.py
perguntations/templates/test.html
@@ -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'
@@ -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 %}
	@@ -32,7 +32,7 @@ proof of submission and for review.		@@ -32,7 +32,7 @@ proof of submission and for review.
32	'''	32	'''
33		33
34	APP_NAME = 'perguntations'	34	APP_NAME = 'perguntations'
35	-APP_VERSION = '2020.04.dev4'	35	+APP_VERSION = '2020.04.dev5'
36	APP_DESCRIPTION = __doc__	36	APP_DESCRIPTION = __doc__
37		37
38	__author__ = 'Miguel Barão'	38	__author__ = 'Miguel Barão'