Correct timer behaviour, reload when time up

app/app.py

@@ -14,6 +14,7 @@ from flask_login import LoginManager
 from flask_migrate import Migrate, MigrateCommand
 from flask_oauthlib.client import OAuth, OAuthException
 from flask_script import Manager, Server
+from markupsafe import Markup
 
 from login import init_login
 from models import db
@@ -146,17 +147,24 @@ def add_template_filters(app: Flask) -> None:
     # pylint: disable=W0612
     @app.template_filter("countdown")
     def countdown(value, only_positive: bool = True,
-                  show_text: bool = True) -> str:
+                  show_text: bool = True, reload: bool = True) -> str:
-        "A function which returns time until the order is done"
+        delta = int(value.timestamp() - datetime.now().timestamp())
-        delta = value - datetime.now()
+        if delta < 0 and only_positive:
-        if delta.total_seconds() < 0 and only_positive:
+            text = "closed"
-            return "closed"
+        else:
-        hours, remainder = divmod(delta.seconds, 3600)
+            carry, seconds = divmod(delta, 60)
-        minutes, seconds = divmod(remainder, 60)
+            carry, minutes = divmod(carry, 60)
-        time = "%02d:%02d:%02d" % (hours, minutes, seconds)
+            days, hours    = divmod(carry, 24)
-        if show_text:
+
-            return f"{time} left"
+            days_text = f"{days} days, " if days else ""
-        return time
+
+            appendix = " left" if show_text else ""
+            text = f"{days_text}{hours:02d}:{minutes:02d}:{seconds:02d}{appendix}"
+
+        reload_str = "yes" if reload else "no"
+
+        return Markup(f"<span class='time' data-seconds='{delta}' data-reload='{reload_str}'>" +
+                      text + "</span>")
 
     @app.template_filter("year")
     def current_year(_value: typing.Any) -> str:

app/static/js/timer.js

@@ -1,36 +1,56 @@
-/**
+var haldisCountdownStart = new Date();
-* Created by feliciaan on 30/03/15.
-*/
 $.ready(function(){
-	$('.time').each(function() {
+	$(".time").each(function() {
-		var timeEl = $( this );
+		var timeEl = $(this);
-		var time = timeEl.text().split(' ')[0].split(':');
 
-		if (timeEl.text().indexOf('closed') < 0) {
+		var delta = parseInt(timeEl.data("seconds"), 10);
-			window.setInterval(function () {
+		var end = new Date(haldisCountdownStart.getTime() + delta * 1000);
-				time = my_tick(time);
+
-				if (time !== "closed") {
+		var now = new Date();
-					timeS = ("0" + time[0]).slice(-2) + ":" + ("0" + time[1]).slice(-2) + ":" + ("0" + time[2]).slice(-2) + " left";
+		var delta = Math.floor((end - now) / 1000);
+		if (delta <= 0) {
+			timeEl.html("closed");
+			return;
+		}
+
+		function zeroPad(value) {
+			return ("0" + value).slice(-2)
+		}
+
+		var intervalId;
+
+		function update() {
+			var now = new Date();
+			var delta = Math.floor((end - now) / 1000);
+			if (delta <= 0) {
+				window.clearInterval(intervalId);
+				if (timeEl.data("reload") === "yes") {
+					$("#form").slideUp();
+					timeEl.html("closed, refreshing page...");
+					window.setTimeout(function () {
+						window.location.reload();
+					}, 2000);
 				} else {
-					timeS = "closed"
+					timeEl.html("closed");
 				}
-				timeEl.html(timeS);
+				return;
-			}, 1000);
 			}
+
+			var seconds = delta % 60;
+			var carry   = Math.floor(delta / 60);
+			var minutes = carry % 60;
+			carry       = Math.floor(carry / 60);
+			var hours = carry % 24;
+			var days  = Math.floor(carry / 24);
+
+			var text = "";
+			if (days) text = days + " days, ";
+			text += zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
+			text += " left";
+
+			timeEl.html(text);
+		}
+		intervalId = window.setInterval(update, 1000);
+		update();
 	});
-
-	function my_tick(time) {
-		if (time[2] > 0) {
-			time[2] = time[2] - 1;
-		} else if(time[1] > 0) {
-			time[2] = 59;
-			time[1] = time[1] - 1;
-		} else if(time[0] > 0) {
-			time[1] = 59;
-			time[0] = time[0] - 1;
-		} else {
-			return "closed";
-		}
-		return time;
-	}
 }());

app/templates/order.html

@@ -35,7 +35,7 @@
 		{% endif %}
 		start: {{ order.starttime.strftime("%d/%m/%Y %H:%M") }}<br>
 		{% if order.stoptime %}
-			closing time: {{ order.stoptime.strftime("%H:%M") }} (<span class="time">{{  order.stoptime|countdown }}</span>)
+			closing time: {{ order.stoptime.strftime("%H:%M") }} ({{  order.stoptime|countdown }})
 		{% else %}open{% endif %}<br/>
 		total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
 	</div>
@@ -193,6 +193,7 @@
 	{{ super() }}
 	<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
 	<script type="text/javascript">
+{% if form %}
 		function sortArg(sortable) {
 			return sortable.sort();
 		}
@@ -204,8 +205,9 @@
 			var choice = options[index]
 			select.val(choice.value).trigger("change")
 		}
+{% endif %}
 
-{% if order.location %}
+{% if form and order.location %}
 		function updateChoices() {
 			$("#submit-reveals-options-msg").hide(0);
 			$dish_choices = $("#dish_choices");

app/templates/order_items.html

@@ -15,6 +15,9 @@ Haldis - Order {{ order.id }}
 {% block scripts %}
 	{{ super() }}
 	<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
+	<script type="text/javascript">
+		$("#open-message").html("Wait until order is closed!");
+	</script>
 {% endblock %}
 
 {% block content -%}
@@ -25,8 +28,8 @@ Haldis - Order {{ order.id }}
 
 		{% if not order.is_closed() %}
 		<div class="open-order-warning">
-			<span class="time">{{ order.stoptime|countdown }}</span><br/>
+			{{ order.stoptime|countdown }}
-			Refresh page when closed!
+			<div id="open-message">Refresh page when closed!</div>
 		</div>
 		{% endif %}
 

app/templates/utils.html

@@ -5,7 +5,7 @@
 		<b class="amount_of_orders">{{ order.items.count() }} orders</b></p>
 		<p class="time_data">
 		{% if order.stoptime %}
-			<span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span><span class="time">{{  order.stoptime|countdown }}</span>
+			<span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span>{{ order.stoptime|countdown }}
 		{% else %}open{% endif %}<br/>
 	</div>
 	<div class="col-md-4 col-lg-3 expand_button_wrapper">