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;
-            height: 200px;
+            width: 50px;
+            height: 50px;
            object-fit: cover;
            border-radius: 4px;
        }
        .no-image {
-            width: 200px;
-            height: 200px;
+            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;
@@ -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."""
-    html = '<h1>LabHelper</h1><p><a href="/search/">Search Things</a> | <a href="/admin/">Admin</a></p>'
-    return HttpResponse(html)
+    """Home page with boxes and thing types."""
+    boxes = Box.objects.select_related('box_type').all().order_by('id')
+    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