Correct timer behaviour, reload when time up
This commit is contained in:
parent
aba8301758
commit
289b36b918
5 changed files with 78 additions and 45 deletions
30
app/app.py
30
app/app.py
|
@ -14,6 +14,7 @@ from flask_login import LoginManager
|
||||||
from flask_migrate import Migrate, MigrateCommand
|
from flask_migrate import Migrate, MigrateCommand
|
||||||
from flask_oauthlib.client import OAuth, OAuthException
|
from flask_oauthlib.client import OAuth, OAuthException
|
||||||
from flask_script import Manager, Server
|
from flask_script import Manager, Server
|
||||||
|
from markupsafe import Markup
|
||||||
|
|
||||||
from login import init_login
|
from login import init_login
|
||||||
from models import db
|
from models import db
|
||||||
|
@ -146,17 +147,24 @@ def add_template_filters(app: Flask) -> None:
|
||||||
# pylint: disable=W0612
|
# pylint: disable=W0612
|
||||||
@app.template_filter("countdown")
|
@app.template_filter("countdown")
|
||||||
def countdown(value, only_positive: bool = True,
|
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")
|
@app.template_filter("year")
|
||||||
def current_year(_value: typing.Any) -> str:
|
def current_year(_value: typing.Any) -> str:
|
||||||
|
|
|
@ -1,36 +1,56 @@
|
||||||
/**
|
var haldisCountdownStart = new Date();
|
||||||
* Created by feliciaan on 30/03/15.
|
|
||||||
*/
|
|
||||||
$.ready(function(){
|
$.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 {
|
} else {
|
||||||
timeS = "closed"
|
timeEl.html("closed");
|
||||||
}
|
}
|
||||||
timeEl.html(timeS);
|
return;
|
||||||
}, 1000);
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function my_tick(time) {
|
var seconds = delta % 60;
|
||||||
if (time[2] > 0) {
|
var carry = Math.floor(delta / 60);
|
||||||
time[2] = time[2] - 1;
|
var minutes = carry % 60;
|
||||||
} else if(time[1] > 0) {
|
carry = Math.floor(carry / 60);
|
||||||
time[2] = 59;
|
var hours = carry % 24;
|
||||||
time[1] = time[1] - 1;
|
var days = Math.floor(carry / 24);
|
||||||
} else if(time[0] > 0) {
|
|
||||||
time[1] = 59;
|
var text = "";
|
||||||
time[0] = time[0] - 1;
|
if (days) text = days + " days, ";
|
||||||
} else {
|
text += zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
|
||||||
return "closed";
|
text += " left";
|
||||||
|
|
||||||
|
timeEl.html(text);
|
||||||
}
|
}
|
||||||
return time;
|
intervalId = window.setInterval(update, 1000);
|
||||||
}
|
update();
|
||||||
|
});
|
||||||
}());
|
}());
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
start: {{ order.starttime.strftime("%d/%m/%Y %H:%M") }}<br>
|
start: {{ order.starttime.strftime("%d/%m/%Y %H:%M") }}<br>
|
||||||
{% if order.stoptime %}
|
{% 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/>
|
{% else %}open{% endif %}<br/>
|
||||||
total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
|
total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
@ -193,6 +193,7 @@
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
{% if form %}
|
||||||
function sortArg(sortable) {
|
function sortArg(sortable) {
|
||||||
return sortable.sort();
|
return sortable.sort();
|
||||||
}
|
}
|
||||||
|
@ -204,8 +205,9 @@
|
||||||
var choice = options[index]
|
var choice = options[index]
|
||||||
select.val(choice.value).trigger("change")
|
select.val(choice.value).trigger("change")
|
||||||
}
|
}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% if order.location %}
|
{% if form and order.location %}
|
||||||
function updateChoices() {
|
function updateChoices() {
|
||||||
$("#submit-reveals-options-msg").hide(0);
|
$("#submit-reveals-options-msg").hide(0);
|
||||||
$dish_choices = $("#dish_choices");
|
$dish_choices = $("#dish_choices");
|
||||||
|
|
|
@ -15,6 +15,9 @@ Haldis - Order {{ order.id }}
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content -%}
|
{% block content -%}
|
||||||
|
@ -25,8 +28,8 @@ Haldis - Order {{ order.id }}
|
||||||
|
|
||||||
{% if not order.is_closed() %}
|
{% if not order.is_closed() %}
|
||||||
<div class="open-order-warning">
|
<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>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<b class="amount_of_orders">{{ order.items.count() }} orders</b></p>
|
<b class="amount_of_orders">{{ order.items.count() }} orders</b></p>
|
||||||
<p class="time_data">
|
<p class="time_data">
|
||||||
{% if order.stoptime %}
|
{% 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/>
|
{% else %}open{% endif %}<br/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 col-lg-3 expand_button_wrapper">
|
<div class="col-md-4 col-lg-3 expand_button_wrapper">
|
||||||
|
|
Loading…
Reference in a new issue