Add coffee route and template for interactive checkbox matrix

inventory/routes/index.py

@@ -1,5 +1,6 @@
 from flask import render_template
 import pandas as pd
+import random
 
 from . import main
 from .helpers import worklog_headers
@@ -7,6 +8,11 @@ from .. import db
 from ..models import WorkLog, Inventory
 from ..utils.load import eager_load_worklog_relationships, eager_load_inventory_relationships
 
+@main.route("/12648243")
+def coffee():
+    matrix = [[random.choice([True, False]) for _ in range(24)] for _ in range(24)]
+    return render_template("coffee.html", matrix=matrix)
+
 @main.route("/")
 def index():
     worklog_query = eager_load_worklog_relationships(

inventory/templates/coffee.html

@@ -0,0 +1,36 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+    <div class="container">
+        {% for x in range(24) %}
+            <div class="row">
+                {% for y in range(24) %}
+                <div class="col p-0">
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        {% endfor %}
+    </div>
+{% endblock %}
+
+{% block script %}
+    document.querySelectorAll('.form-check-input').forEach(checkbox => {
+        checkbox.addEventListener('change', function() {
+            const [x, y] = this.id.split('-').slice(1).map(Number);
+            const neighbors = [
+                [x - 1, y], [x + 1, y], [x, y - 1], [x, y + 1],
+                [x - 1, y - 1], [x - 1, y + 1], [x + 1, y - 1], [x + 1, y + 1]
+            ];
+
+            neighbors.forEach(([nx, ny]) => {
+                if (nx < 0 || nx >= 24 || ny < 0 || ny >= 24) return; // Skip out of bounds
+
+                const neighborCheckbox = document.querySelector(`#checkbox-${nx}-${ny}`);
+                neighborCheckbox.checked = !neighborCheckbox.checked;
+            });
+        });
+    });
+{% endblock %}

inventory/templates/layout.html

@@ -76,11 +76,11 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="{{ url_for('static', filename='js/combobox.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/csv.js') }}"></script>
     <script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
     <script src="{{ url_for('static', filename='js/editor.js') }}" defer></script>
     <script src="{{ url_for('static', filename='js/image.js') }}"></script>
     <script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
-    <script src="{{ url_for('static', filename='js/widget.js') }}"></script>
     <script>
         const searchInput = document.querySelector('#search');
         const searchButton = document.querySelector('#searchButton');