First commit of POC version

templates/items_show.html

@@ -0,0 +1,64 @@
+{% 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) {
+    const response = fetch('/item_update/'+cb.name+'/'+cb.checked);
+  }
+</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 %}
+      {{ item.quantity }}{{ item.unit }}
+    {% endif %}
+    <img src="/static/categories/{{ item.category }}.svg" style="height: 2em;" alt="...">
+    </div>
+</label>
+    {% endfor %}
+</div>
+
+
+
+
+{% endblock %}