adebaumann/labhelper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: adebaumann:feature/boxform
Branches Tags
adebaumann:master adebaumann:feature/sso adebaumann:improvement/redesign adebaumann:feature/tagging adebaumann:improvement/design adebaumann:feature/boxform
..
compare: adebaumann:02e949d0ad55b1a3c724dc20eb4eeefb1dd99fb9
Branches Tags
adebaumann:master adebaumann:feature/sso adebaumann:improvement/redesign adebaumann:feature/tagging adebaumann:improvement/design adebaumann:feature/boxform

6 Commits
feature/bo ... 02e949d0ad

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
8 changed files with 498 additions and 15 deletions
Expand all files Collapse all files

2
argocd/deployment.yaml
View File

@@ -27,7 +27,7 @@ spec:
mountPath: /data mountPath: /data
containers: containers:
- name: web - name: web
image: git.baumann.gr/adebaumann/labhelper:0.025 image: git.baumann.gr/adebaumann/labhelper:0.027
imagePullPolicy: Always imagePullPolicy: Always
ports: ports:
- containerPort: 8000 - containerPort: 8000

13
boxes/templates/boxes/box_detail.html
View File

@@ -43,20 +43,21 @@
background-color: #f8f9fa; background-color: #f8f9fa;
} }
.thumbnail { .thumbnail {
width: 200px; width: 50px;
height: 200px; height: 50px;
object-fit: cover; object-fit: cover;
border-radius: 4px; border-radius: 4px;
} }
.no-image { .no-image {
width: 200px; width: 50px;
height: 200px; height: 50px;
background-color: #e0e0e0; background-color: #e0e0e0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #999; color: #999;
border-radius: 4px; border-radius: 4px;
font-size: 12px;
} }
.back-link { .back-link {
margin-bottom: 20px; margin-bottom: 20px;
@@ -98,14 +99,14 @@
<tr> <tr>
<td> <td>
{% if thing.picture %} {% 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"> <img src="{{ thumb.url }}" alt="{{ thing.name }}" class="thumbnail">
{% endthumbnail %} {% endthumbnail %}
{% else %} {% else %}
<div class="no-image">No image</div> <div class="no-image">No image</div>
{% endif %} {% endif %}
</td> </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.thing_type.name }}</td>
<td>{{ thing.description|default:"-" }}</td> <td>{{ thing.description|default:"-" }}</td>
</tr> </tr>

205
boxes/templates/boxes/index.html Normal file
View File

@@ -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>

54
boxes/templates/boxes/thing_detail.html
View File

@@ -83,6 +83,45 @@
.nav-links a { .nav-links a {
margin-right: 15px; 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> </style>
</head> </head>
<body> <body>
@@ -125,7 +164,22 @@
<div class="detail-value description">{{ thing.description }}</div> <div class="detail-value description">{{ thing.description }}</div>
</div> </div>
{% endif %} {% endif %}
</div>
</div> </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> </body>
</html> </html>

183
boxes/templates/boxes/thing_type_detail.html Normal file
View File

@@ -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>

52
boxes/views.py
View File

@@ -2,13 +2,17 @@ from django.http import HttpResponse, JsonResponse
from django.shortcuts import get_object_or_404, redirect, render from django.shortcuts import get_object_or_404, redirect, render
from .forms import ThingFormSet from .forms import ThingFormSet
from .models import Box, Thing from .models import Box, Thing, ThingType
def index(request): 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): 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'), Thing.objects.select_related('thing_type', 'box', 'box__box_type'),
pk=thing_id 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): def search(request):
@@ -65,7 +83,7 @@ def add_things(request, box_id):
success_message = None success_message = None
if request.method == 'POST': if request.method == 'POST':
formset = ThingFormSet(request.POST) formset = ThingFormSet(request.POST, queryset=Thing.objects.filter(box=box))
if formset.is_valid(): if formset.is_valid():
things = formset.save(commit=False) things = formset.save(commit=False)
@@ -77,10 +95,30 @@ def add_things(request, box_id):
created_count += 1 created_count += 1
if created_count > 0: if created_count > 0:
success_message = f'Added {created_count} thing{"s" if created_count > 1 else ""} successfully.' 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', { return render(request, 'boxes/add_things.html', {
'box': box, 'box': box,
'formset': formset, 'formset': formset,
'success_message': success_message, '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,
})

1
labhelper/settings.py
View File

@@ -38,6 +38,7 @@ INSTALLED_APPS = [
'django.contrib.sessions', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'mptt',
'django_mptt_admin', 'django_mptt_admin',
'sorl.thumbnail', 'sorl.thumbnail',
'boxes', 'boxes',

3
labhelper/urls.py
View File

@@ -19,12 +19,13 @@ from django.conf.urls.static import static
from django.contrib import admin from django.contrib import admin
from django.urls import path 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 = [ urlpatterns = [
path('', index, name='index'), path('', index, name='index'),
path('box/<str:box_id>/', box_detail, name='box_detail'), path('box/<str:box_id>/', box_detail, name='box_detail'),
path('thing/<int:thing_id>/', thing_detail, name='thing_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('box/<str:box_id>/add/', add_things, name='add_things'),
path('search/', search, name='search'), path('search/', search, name='search'),
path('search/api/', search_api, name='search_api'), path('search/api/', search_api, name='search_api'),