- 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	32	'''
33	33
34	34	APP_NAME = 'perguntations'
35		-APP_VERSION = '2020.04.dev4'
	35	+APP_VERSION = '2020.04.dev5'
36	36	APP_DESCRIPTION = __doc__
37	37
38	38	__author__ = 'Miguel Barão'
...	...
...	...	@@ -44,8 +44,12 @@
44	44	<!-- ===================================================================== -->
45	45	<body>
46	46	<!-- ===================================================================== -->
	47	+<div class="progress fixed-top" style="height: 60px; border-radius: 0px;">
	48	+ <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	49	+</div>
47	50
48	51	<nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
	52	+
49	53	<a class="navbar-brand" href="#">
50	54	<img src="/static/logo_horizontal.png" height="30" alt="">
51	55	</a>
...	...	@@ -62,6 +66,7 @@
62	66	<li class="nav-item"><h5>
63	67	<span class="navbar-text" id="clock"> --:-- </span>
64	68	</h5>
	69	+
65	70	</li>
66	71	</ul>
67	72
...	...	@@ -76,6 +81,7 @@
76	81	</li>
77	82	</ul>
78	83	</div>
	84	+
79	85	</nav>
80	86
81	87	<!-- ===================================================================== -->
...	...	@@ -152,7 +158,8 @@
152	158	</script>
153	159
154	160	<script>
155		- var finishtime = new Date().getTime() + {{ t['duration']601000 }};
	161	+ var duration = {{ t['duration']601000 }}; // ms
	162	+ var finishtime = new Date().getTime() + duration;
156	163
157	164	{% if t['duration'] == 0 %}
158	165	$("#clock").html("+\u221e");
...	...	@@ -161,7 +168,7 @@
161	168	// Update the count down every 1 second
162	169	var x = setInterval(function() {
163	170	var now = new Date().getTime();
164		- var distance = finishtime - now;
	171	+ var distance = finishtime - now; // ms
165	172
166	173	// Time calculations for days, hours, minutes and seconds
167	174	var minutes = Math.floor((distance / (1000 * 60)));
...	...	@@ -180,6 +187,9 @@
180	187	$("#test").submit();
181	188	{% end %}
182	189	}
	190	+
	191	+ var progress = distance/duration*100 + '%'
	192	+ $('.progress-bar').css('width', progress).attr('aria-valuenow', progress);
183	193	}, 1000);
184	194
185	195	{% end %}
...	...