Add new front page with boxes and thing types tree

- Replace simple HTML index with full template - Add grid of all boxes with details and item counts - Add expandable tree view of thing types using MPTT - Add 'mptt' to INSTALLED_APPS for recursetree tag - Add jQuery for tree toggle functionality Bump container version to 0.027
Add thing type detail page and move functionality
2025-12-29 00:09:23 +01:00 · 2025-12-28 23:33:47 +01:00 · 2025-12-28 23:22:13 +01:00 · 2025-12-28 23:19:51 +01:00 · 2025-12-28 22:12:06 +00:00 · 2025-12-28 21:55:14 +00:00
8 changed files with 498 additions and 15 deletions
--- a/argocd/deployment.yaml
+++ b/argocd/deployment.yaml
@@ -27,7 +27,7 @@ spec:
              mountPath: /data
      containers:
        - name: web
-          image: git.baumann.gr/adebaumann/labhelper:0.025
+          image: git.baumann.gr/adebaumann/labhelper:0.027
          imagePullPolicy: Always
          ports:
            - containerPort: 8000
--- a/boxes/templates/boxes/box_detail.html
+++ b/boxes/templates/boxes/box_detail.html
@@ -43,20 +43,21 @@
            background-color: #f8f9fa;
        }
        .thumbnail {
-            width: 200px;
+            width: 50px;
-            height: 200px;
+            height: 50px;
            object-fit: cover;
            border-radius: 4px;
        }
        .no-image {
-            width: 200px;
+            width: 50px;
-            height: 200px;
+            height: 50px;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            border-radius: 4px;
            font-size: 12px;
        }
        .back-link {
            margin-bottom: 20px;
@@ -98,14 +99,14 @@
            <tr>
                <td>
                    {% if thing.picture %}
-                    {% thumbnail thing.picture "200x200" crop="center" as thumb %}
+                    {% thumbnail thing.picture "50x50" crop="center" as thumb %}
                    <img src="{{ thumb.url }}" alt="{{ thing.name }}" class="thumbnail">
                    {% endthumbnail %}
                    {% else %}
                    <div class="no-image">No image</div>
                    {% endif %}
                </td>
-                <td>{{ thing.name }}</td>
+                <td><a href="{% url 'thing_detail' thing.id %}">{{ thing.name }}</a></td>
                <td>{{ thing.thing_type.name }}</td>
                <td>{{ thing.description|default:"-" }}</td>
            </tr>
--- a/boxes/templates/boxes/index.html
+++ b/boxes/templates/boxes/index.html
@@ -0,0 +1,205 @@
 {% load mptt_tags %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LabHelper</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .nav-links {
            margin-bottom: 20px;
            text-align: right;
        }
        .nav-links a {
            color: #4a90a4;
            text-decoration: none;
            margin-left: 20px;
        }
        .nav-links a:hover {
            text-decoration: underline;
        }
        .section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .section h2 {
            color: #333;
            margin-top: 0;
            font-size: 20px;
            border-bottom: 2px solid #4a90a4;
            padding-bottom: 10px;
        }
        .box-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        .box-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            transition: all 0.2s;
        }
        .box-card:hover {
            border-color: #4a90a4;
            box-shadow: 0 2px 5px rgba(74, 144, 164, 0.2);
        }
        .box-card a {
            text-decoration: none;
            color: #333;
            display: block;
        }
        .box-card .box-id {
            font-size: 18px;
            font-weight: 600;
            color: #4a90a4;
            margin-bottom: 5px;
        }
        .box-card .box-type {
            font-size: 14px;
            color: #666;
        }
        .tree {
            list-style: none;
            padding-left: 20px;
        }
        .tree ul {
            list-style: none;
            padding-left: 20px;
        }
        .tree li {
            padding: 5px 0;
        }
        .tree li a {
            color: #4a90a4;
            text-decoration: none;
            font-size: 15px;
        }
        .tree li a:hover {
            text-decoration: underline;
        }
        .tree-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .tree-toggle {
            cursor: pointer;
            color: #999;
            font-size: 14px;
            user-select: none;
        }
        .tree ul {
            list-style: none;
            padding-left: 20px;
            display: none;
        }
        .tree > li > ul {
            display: block;
        }
        .tree li {
            cursor: pointer;
        }
        .tree li a {
            cursor: pointer;
        }
        .toggle-handle {
            display: inline-block;
            width: 20px;
            color: #999;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.toggle-handle').click(function(e) {
                e.stopPropagation();
                var $ul = $(this).closest('li').children('ul');
                if ($ul.length) {
                    $ul.toggle();
                }
            });
        });
    </script>
 </head>
 <body>
    <div class="container">
        <h1>LabHelper</h1>
        <div class="nav-links">
            <a href="/search/">Search Things</a>
            <a href="/admin/">Admin</a>
        </div>
        <div class="section">
            <h2>Boxes</h2>
            {% if boxes %}
            <div class="box-grid">
                {% for box in boxes %}
                <div class="box-card">
                    <a href="{% url 'box_detail' box.id %}">
                        <div class="box-id">Box {{ box.id }}</div>
                        <div class="box-type">{{ box.box_type.name }}</div>
                        <div class="box-type" style="font-size: 12px; margin-top: 3px;">
                            {{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm
                        </div>
                        <div class="box-type" style="font-size: 12px; margin-top: 3px;">
                            {{ box.things.count }} item{{ box.things.count|pluralize }}
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p>No boxes found.</p>
            {% endif %}
        </div>
        <div class="section">
            <h2>Thing Types</h2>
            {% if thing_types %}
            <ul class="tree">
                {% recursetree thing_types %}
                <li>
                    {% if children %}
                    <span class="toggle-handle">[-]</span>
                    {% else %}
                    <span class="toggle-handle">&nbsp;</span>
                    {% endif %}
                    <a href="{% url 'thing_type_detail' node.pk %}">{{ node.name }}</a>
                    {% if node.things.exists %}
                    <span style="color: #999; font-size: 13px;">({{ node.things.count }})</span>
                    {% endif %}
                    {% if children %}
                    <ul>
                        {{ children }}
                    </ul>
                    {% endif %}
                </li>
                {% endrecursetree %}
            </ul>
            {% else %}
            <p>No thing types found.</p>
            {% endif %}
        </div>
    </div>
 </body>
 </html>
--- a/boxes/templates/boxes/thing_detail.html
+++ b/boxes/templates/boxes/thing_detail.html
@@ -83,6 +83,45 @@
        .nav-links a {
            margin-right: 15px;
        }
        .move-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .move-form label {
            font-weight: 600;
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
            display: block;
        }
        .move-form select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: white;
            margin-right: 10px;
        }
        .move-form select:focus {
            outline: none;
            border-color: #4a90a4;
        }
        .btn {
            background-color: #4a90a4;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 600;
        }
        .btn:hover {
            background-color: #3d7a96;
        }
    </style>
 </head>
 <body>
@@ -125,7 +164,22 @@
                <div class="detail-value description">{{ thing.description }}</div>
            </div>
            {% endif %}
            </div>
        </div>
    </div>
    <form method="post" class="move-form">
        {% csrf_token %}
        <label for="new_box">Move to:</label>
        <select name="new_box" id="new_box">
            <option value="">Select a box...</option>
            {% for box in boxes %}
            <option value="{{ box.id }}" {% if box.id == thing.box.id %}selected{% endif %}>
                Box {{ box.id }} ({{ box.box_type.name }})
            </option>
            {% endfor %}
        </select>
        <button type="submit" class="btn">Move</button>
    </form>
 </body>
 </html>
--- a/boxes/templates/boxes/thing_type_detail.html
+++ b/boxes/templates/boxes/thing_type_detail.html
@@ -0,0 +1,183 @@
 {% load thumbnail %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ thing_type.name }} - LabHelper</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
        }
        .type-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .type-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .type-section h2 {
            color: #333;
            margin-top: 0;
            font-size: 18px;
        }
        .type-hierarchy {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .type-hierarchy span {
            margin-right: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f8f9fa;
            color: #666;
            font-weight: 600;
            font-size: 14px;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .thumbnail {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 4px;
        }
        .no-image {
            width: 50px;
            height: 50px;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            border-radius: 4px;
            font-size: 12px;
        }
        .back-link {
            margin-bottom: 20px;
            display: inline-block;
            color: #4a90a4;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
        .thing-name {
            font-weight: 500;
        }
        .thing-name a {
            color: #4a90a4;
            text-decoration: none;
        }
        .thing-name a:hover {
            text-decoration: underline;
        }
        .box-link {
            color: #4a90a4;
            text-decoration: none;
            font-size: 14px;
        }
        .box-link:hover {
            text-decoration: underline;
        }
        .empty-message {
            color: #999;
            text-align: center;
            padding: 20px;
        }
    </style>
 </head>
 <body>
    <a href="/" class="back-link">&larr; Home</a>
    <h1>{{ thing_type.name }}</h1>
    <div class="type-header">
        {% if thing_type.parent %}
        <div class="type-hierarchy">
            Parent: <a href="{% url 'thing_type_detail' thing_type.parent.id %}" class="box-link">{{ thing_type.parent.name }}</a>
        </div>
        {% endif %}
        {% if thing_type.children.exists %}
        <div class="type-hierarchy">
            Subtypes:
            {% for child in thing_type.children.all %}
            <span><a href="{% url 'thing_type_detail' child.id %}" class="box-link">{{ child.name }}</a></span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    {% if things_by_type %}
    {% for subtype, things in things_by_type.items %}
    <div class="type-section">
        <h2>{{ subtype.name }}</h2>
        {% if things %}
        <table>
            <thead>
                <tr>
                    <th>Picture</th>
                    <th>Name</th>
                    <th>Box</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {% for thing in things %}
                <tr>
                    <td>
                        {% if thing.picture %}
                        {% thumbnail thing.picture "50x50" crop="center" as thumb %}
                        <img src="{{ thumb.url }}" alt="{{ thing.name }}" class="thumbnail">
                        {% endthumbnail %}
                        {% else %}
                        <div class="no-image">No image</div>
                        {% endif %}
                    </td>
                    <td class="thing-name">
                        <a href="{% url 'thing_detail' thing.id %}">{{ thing.name }}</a>
                    </td>
                    <td>
                        <a href="{% url 'box_detail' thing.box.id %}" class="box-link">Box {{ thing.box.id }}</a>
                        <br><small>{{ thing.box.box_type.name }}</small>
                    </td>
                    <td>{{ thing.description|default:"-" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-message">No things in this category</div>
        {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <div class="type-section">
        <div class="empty-message">No things found in this category or its subcategories</div>
    </div>
    {% endif %}
 </body>
 </html>
--- a/boxes/views.py
+++ b/boxes/views.py
@@ -2,13 +2,17 @@ from django.http import HttpResponse, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from .forms import ThingFormSet
-from .models import Box, Thing
+from .models import Box, Thing, ThingType
 def index(request):
-    """Simple index page."""
+    """Home page with boxes and thing types."""
-    html = '<h1>LabHelper</h1><p><a href="/search/">Search Things</a> | <a href="/admin/">Admin</a></p>'
+    boxes = Box.objects.select_related('box_type').all().order_by('id')
-    return HttpResponse(html)
+    thing_types = ThingType.objects.all()
    return render(request, 'boxes/index.html', {
        'boxes': boxes,
        'thing_types': thing_types,
    })
 def box_detail(request, box_id):
@@ -27,7 +31,21 @@ def thing_detail(request, thing_id):
        Thing.objects.select_related('thing_type', 'box', 'box__box_type'),
        pk=thing_id
    )
-    return render(request, 'boxes/thing_detail.html', {'thing': thing})
+    
    boxes = Box.objects.select_related('box_type').all().order_by('id')
    if request.method == 'POST':
        new_box_id = request.POST.get('new_box')
        if new_box_id:
            new_box = get_object_or_404(Box, pk=new_box_id)
            thing.box = new_box
            thing.save()
            return redirect('thing_detail', thing_id=thing.id)
    return render(request, 'boxes/thing_detail.html', {
        'thing': thing,
        'boxes': boxes,
    })
 def search(request):
@@ -65,7 +83,7 @@ def add_things(request, box_id):
    success_message = None
    if request.method == 'POST':
-        formset = ThingFormSet(request.POST)
+        formset = ThingFormSet(request.POST, queryset=Thing.objects.filter(box=box))
        if formset.is_valid():
            things = formset.save(commit=False)
@@ -77,10 +95,30 @@ def add_things(request, box_id):
                    created_count += 1
            if created_count > 0:
                success_message = f'Added {created_count} thing{"s" if created_count > 1 else ""} successfully.'
-            formset = ThingFormSet()
+            formset = ThingFormSet(queryset=Thing.objects.filter(box=box))
    else:
        formset = ThingFormSet(queryset=Thing.objects.filter(box=box))
    return render(request, 'boxes/add_things.html', {
        'box': box,
        'formset': formset,
        'success_message': success_message,
    })
 def thing_type_detail(request, type_id):
    """Display details of a thing type with its hierarchy and things."""
    thing_type = get_object_or_404(ThingType, pk=type_id)
    descendants = thing_type.get_descendants(include_self=True)
    things_by_type = {}
    for descendant in descendants:
        things = descendant.things.select_related('box', 'box__box_type').all()
        if things:
            things_by_type[descendant] = things
    return render(request, 'boxes/thing_type_detail.html', {
        'thing_type': thing_type,
        'things_by_type': things_by_type,
    })
--- a/labhelper/settings.py
+++ b/labhelper/settings.py
@@ -38,6 +38,7 @@ INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mptt',
    'django_mptt_admin',
    'sorl.thumbnail',
    'boxes',
--- a/labhelper/urls.py
+++ b/labhelper/urls.py
@@ -19,12 +19,13 @@ from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import path
-from boxes.views import add_things, box_detail, index, search, search_api, thing_detail
+from boxes.views import add_things, box_detail, index, search, search_api, thing_detail, thing_type_detail
 urlpatterns = [
    path('', index, name='index'),
    path('box/<str:box_id>/', box_detail, name='box_detail'),
    path('thing/<int:thing_id>/', thing_detail, name='thing_detail'),
    path('thing-type/<int:type_id>/', thing_type_detail, name='thing_type_detail'),
    path('box/<str:box_id>/add/', add_things, name='add_things'),
    path('search/', search, name='search'),
    path('search/api/', search_api, name='search_api'),
Author	SHA1	Message	Date
Adrian A. Baumann	02e949d0ad	Add new front page with boxes and thing types tree All checks were successful Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 29s Details Build containers when image tags change / build-if-image-changed (data-loader, loader, initContainers, init-container, git.baumann.gr/adebaumann/labhelper-data-loader) (push) Successful in 6s Details - Replace simple HTML index with full template - Add grid of all boxes with details and item counts - Add expandable tree view of thing types using MPTT - Add 'mptt' to INSTALLED_APPS for recursetree tag - Add jQuery for tree toggle functionality Bump container version to 0.027	2025-12-29 00:09:23 +01:00
Adrian A. Baumann	fbd3c9bee5	Add thing type detail page and move functionality All checks were successful Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 29s Details Build containers when image tags change / build-if-image-changed (data-loader, loader, initContainers, init-container, git.baumann.gr/adebaumann/labhelper-data-loader) (push) Successful in 7s Details - Add thing type detail page showing hierarchical structure and things - Add move to box functionality on thing detail page - Fix add things form to only show items in current box - Update thumbnails to 50x50 on box detail page - Make thing names linkable on box detail page Bump container version to 0.026	2025-12-28 23:33:47 +01:00
Adrian A. Baumann	bcba59b5e4	fixed Unbound error	2025-12-28 23:22:13 +01:00
Adrian A. Baumann	ed44deb5a6	Updated boxes page with links and smaller thumbnails	2025-12-28 23:19:51 +01:00
Adrian A. Baumann	00861f8945	Merge pull request 'feature/boxform' (#2 ) from feature/boxform into master All checks were successful Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 9s Details Build containers when image tags change / build-if-image-changed (data-loader, loader, initContainers, init-container, git.baumann.gr/adebaumann/labhelper-data-loader) (push) Successful in 8s Details Reviewed-on: #2	2025-12-28 22:12:06 +00:00
Adrian A. Baumann	da1ef00072	Merge pull request 'Add form to add multiple things to a box' (#1 ) from feature/boxform into master All checks were successful Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 8s Details Build containers when image tags change / build-if-image-changed (data-loader, loader, initContainers, init-container, git.baumann.gr/adebaumann/labhelper-data-loader) (push) Successful in 7s Details Reviewed-on: #1	2025-12-28 21:55:14 +00:00