Files
lapp/templates/items_show.html
T

67 lines
1.8 KiB
HTML

{% extends "base.html" %}
{% block content %}
<script>
const IDLE_TIME = 10000; // 10 seconds of inactivity required after user activity
const MIN_REFRESH_GAP = 20000; // 20 seconds minimum between refreshes
function recordInteraction() {
// Reset idle timer
if (idleTimeout) {
clearTimeout(idleTimeout);
}
idleTimeout = setTimeout(checkAndRefresh, IDLE_TIME);
}
function checkAndRefresh() {
window.location.reload(true);
idleTimeout = setTimeout(checkAndRefresh, MIN_REFRESH_GAP);
}
// User activity listeners
["click", "touchstart", "keydown"].forEach(event => {
document.addEventListener(event, recordInteraction, { passive: true });
});
// Start idle timer on load
idleTimeout = setTimeout(checkAndRefresh, MIN_REFRESH_GAP);
document.addEventListener("visibilitychange", () => {
if (document.hidden && idleTimeout) clearTimeout(idleTimeout);
if (!document.hidden) checkAndRefresh();
});
// handle Checboc clicks
function handleCBClick(cb) {
lappQueueItemRequest('/item_update/'+cb.name+'/'+cb.checked, {
coalesceKey: 'checked:' + cb.name
});
}
</script>
<div class="list-group">
{% for item in items %}
<label class="list-group-item {% if item.is_checked %}text-muted{% endif %} d-flex justify-content-between">
<div>
<input class="form-check-input me-1" type="checkbox" value="" name="{{ item.id }}" {% if item.is_checked %}CHECKED{% endif %} onclick='handleCBClick(this);'>
{{ item.label }}
</div>
<div>
{% if item.quantity > 1 or item.unit != 'x' %}
{{ item.quantity }}{{ item.unit }}
{% endif %}
<img src="/static/categories/{{ item.category }}.svg" style="height: 2em;" alt="...">
</div>
</label>
{% endfor %}
</div>
{% endblock %}