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

Add search page and thing detail with AJAX
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 32s
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

Browse Source
This commit is contained in:
Adrian A. Baumann
2025-12-28 22:39:57 +01:00
parent 06cbae93dc
commit f30627196e
6 changed files with 539 additions and 5 deletions
Download Patch File Download Diff File 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.022 image: git.baumann.gr/adebaumann/labhelper:0.023
imagePullPolicy: Always imagePullPolicy: Always
ports: ports:
- containerPort: 8000 - containerPort: 8000

187
boxes/templates/boxes/search.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search - LabHelper</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
.search-container {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.search-input {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
.search-input:focus {
outline: none;
border-color: #4a90a4;
}
.search-hint {
color: #666;
font-size: 14px;
margin-top: 8px;
}
table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background-color: #4a90a4;
color: white;
font-weight: 600;
}
tr:hover {
background-color: #f8f9fa;
}
a {
color: #4a90a4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.back-link {
margin-bottom: 20px;
display: inline-block;
}
.no-results {
background: white;
padding: 40px;
text-align: center;
border-radius: 8px;
color: #666;
}
#results-container {
display: none;
}
.description {
color: #666;
font-size: 13px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<a href="/" class="back-link">&larr; Back to Home</a>
<h1>Search Things</h1>
<div class="search-container">
<input type="text"
id="search-input"
class="search-input"
placeholder="Search for things..."
autocomplete="off">
<div class="search-hint">Type at least 2 characters to search</div>
</div>
<div id="results-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Box</th>
<th>Description</th>
</tr>
</thead>
<tbody id="results-body">
</tbody>
</table>
</div>
<div id="no-results" class="no-results" style="display: none;">
No results found.
</div>
<script>
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results-container');
const resultsBody = document.getElementById('results-body');
const noResults = document.getElementById('no-results');
let searchTimeout = null;
searchInput.addEventListener('input', function() {
const query = this.value.trim();
// Clear previous timeout
if (searchTimeout) {
clearTimeout(searchTimeout);
}
// Hide results if query too short
if (query.length < 2) {
resultsContainer.style.display = 'none';
noResults.style.display = 'none';
return;
}
// Debounce search
searchTimeout = setTimeout(function() {
fetch('/search/api/?q=' + encodeURIComponent(query))
.then(response => response.json())
.then(data => {
resultsBody.innerHTML = '';
if (data.results.length === 0) {
resultsContainer.style.display = 'none';
noResults.style.display = 'block';
return;
}
noResults.style.display = 'none';
resultsContainer.style.display = 'block';
data.results.forEach(function(thing) {
const row = document.createElement('tr');
row.innerHTML =
'<td><a href="/thing/' + thing.id + '/">' + escapeHtml(thing.name) + '</a></td>' +
'<td>' + escapeHtml(thing.type) + '</td>' +
'<td><a href="/box/' + escapeHtml(thing.box) + '/">' + escapeHtml(thing.box) + '</a></td>' +
'<td class="description">' + escapeHtml(thing.description) + '</td>';
resultsBody.appendChild(row);
});
});
}, 200);
});
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Focus search input on page load
searchInput.focus();
</script>
</body>
</html>

131
boxes/templates/boxes/thing_detail.html Normal file
View File

@@ -0,0 +1,131 @@
{% 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.name }} - LabHelper</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
.thing-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
gap: 30px;
}
.thing-image {
flex-shrink: 0;
}
.thing-image img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.no-image {
width: 300px;
height: 300px;
background-color: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
border-radius: 8px;
}
.thing-details {
flex-grow: 1;
}
.detail-row {
margin-bottom: 15px;
}
.detail-label {
font-weight: 600;
color: #666;
font-size: 14px;
margin-bottom: 4px;
}
.detail-value {
font-size: 16px;
color: #333;
}
.detail-value a {
color: #4a90a4;
text-decoration: none;
}
.detail-value a:hover {
text-decoration: underline;
}
.description {
white-space: pre-wrap;
line-height: 1.5;
}
.back-link {
margin-bottom: 20px;
display: inline-block;
color: #4a90a4;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.nav-links {
margin-bottom: 20px;
}
.nav-links a {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="nav-links">
<a href="/" class="back-link">&larr; Home</a>
<a href="/search/" class="back-link">Search</a>
<a href="/box/{{ thing.box.id }}/" class="back-link">Box {{ thing.box.id }}</a>
</div>
<h1>{{ thing.name }}</h1>
<div class="thing-card">
<div class="thing-image">
{% if thing.picture %}
{% thumbnail thing.picture "300x300" crop="center" as thumb %}
<img src="{{ thumb.url }}" alt="{{ thing.name }}">
{% endthumbnail %}
{% else %}
<div class="no-image">No image</div>
{% endif %}
</div>
<div class="thing-details">
<div class="detail-row">
<div class="detail-label">Type</div>
<div class="detail-value">{{ thing.thing_type.name }}</div>
</div>
<div class="detail-row">
<div class="detail-label">Location</div>
<div class="detail-value">
<a href="/box/{{ thing.box.id }}/">Box {{ thing.box.id }}</a>
({{ thing.box.box_type.name }})
</div>
</div>
{% if thing.description %}
<div class="detail-row">
<div class="detail-label">Description</div>
<div class="detail-value description">{{ thing.description }}</div>
</div>
{% endif %}
</div>
</div>
</body>
</html>

176
boxes/tests.py
View File

@@ -487,3 +487,179 @@ class BoxDetailViewTests(TestCase):
"""Box detail URL should be reversible by name.""" """Box detail URL should be reversible by name."""
url = reverse('box_detail', kwargs={'box_id': 'BOX001'}) url = reverse('box_detail', kwargs={'box_id': 'BOX001'})
self.assertEqual(url, '/box/BOX001/') self.assertEqual(url, '/box/BOX001/')
class ThingDetailViewTests(TestCase):
"""Tests for thing detail view."""
def setUp(self):
"""Set up test fixtures."""
self.client = Client()
self.box_type = BoxType.objects.create(
name='Standard Box',
width=200,
height=100,
length=300
)
self.box = Box.objects.create(
id='BOX001',
box_type=self.box_type
)
self.thing_type = ThingType.objects.create(name='Electronics')
self.thing = Thing.objects.create(
name='Arduino Uno',
thing_type=self.thing_type,
box=self.box,
description='A microcontroller board'
)
def test_thing_detail_returns_200(self):
"""Thing detail page should return 200 status."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertEqual(response.status_code, 200)
def test_thing_detail_returns_404_for_invalid_thing(self):
"""Thing detail page should return 404 for non-existent thing."""
response = self.client.get('/thing/99999/')
self.assertEqual(response.status_code, 404)
def test_thing_detail_shows_thing_name(self):
"""Thing detail page should show thing name."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertContains(response, 'Arduino Uno')
def test_thing_detail_shows_type(self):
"""Thing detail page should show thing type."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertContains(response, 'Electronics')
def test_thing_detail_shows_description(self):
"""Thing detail page should show thing description."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertContains(response, 'A microcontroller board')
def test_thing_detail_shows_box(self):
"""Thing detail page should show box info."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertContains(response, 'BOX001')
self.assertContains(response, 'Standard Box')
def test_thing_detail_uses_correct_template(self):
"""Thing detail page should use correct template."""
response = self.client.get(f'/thing/{self.thing.id}/')
self.assertTemplateUsed(response, 'boxes/thing_detail.html')
def test_thing_detail_url_name(self):
"""Thing detail URL should be reversible by name."""
url = reverse('thing_detail', kwargs={'thing_id': 1})
self.assertEqual(url, '/thing/1/')
class SearchViewTests(TestCase):
"""Tests for search view."""
def setUp(self):
"""Set up test client."""
self.client = Client()
def test_search_returns_200(self):
"""Search page should return 200 status."""
response = self.client.get('/search/')
self.assertEqual(response.status_code, 200)
def test_search_contains_search_input(self):
"""Search page should contain search input field."""
response = self.client.get('/search/')
self.assertContains(response, 'id="search-input"')
def test_search_contains_results_container(self):
"""Search page should contain results table."""
response = self.client.get('/search/')
self.assertContains(response, 'id="results-container"')
class SearchApiTests(TestCase):
"""Tests for search API."""
def setUp(self):
"""Set up test fixtures."""
self.client = Client()
self.box_type = BoxType.objects.create(
name='Standard Box',
width=200,
height=100,
length=300
)
self.box = Box.objects.create(
id='BOX001',
box_type=self.box_type
)
self.thing_type = ThingType.objects.create(name='Electronics')
Thing.objects.create(
name='Arduino Uno',
thing_type=self.thing_type,
box=self.box,
description='A microcontroller board'
)
Thing.objects.create(
name='Raspberry Pi',
thing_type=self.thing_type,
box=self.box
)
def test_search_api_returns_empty_for_short_query(self):
"""Search API should return empty results for queries under 2 chars."""
response = self.client.get('/search/api/?q=a')
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()['results'], [])
def test_search_api_returns_results(self):
"""Search API should return matching results."""
response = self.client.get('/search/api/?q=ard')
self.assertEqual(response.status_code, 200)
results = response.json()['results']
self.assertEqual(len(results), 1)
self.assertEqual(results[0]['name'], 'Arduino Uno')
def test_search_api_is_case_insensitive(self):
"""Search API should be case-insensitive."""
response = self.client.get('/search/api/?q=ARDUINO')
self.assertEqual(response.status_code, 200)
results = response.json()['results']
self.assertEqual(len(results), 1)
self.assertEqual(results[0]['name'], 'Arduino Uno')
def test_search_api_truncates_description(self):
"""Search API should truncate long descriptions."""
Thing.objects.create(
name='Long Description Item',
thing_type=self.thing_type,
box=self.box,
description='A' * 200
)
response = self.client.get('/search/api/?q=long')
self.assertEqual(response.status_code, 200)
results = response.json()['results']
self.assertEqual(len(results), 1)
self.assertLessEqual(len(results[0]['description']), 100)
def test_search_api_limits_results(self):
"""Search API should limit results to 50."""
for i in range(60):
Thing.objects.create(
name=f'Item {i}',
thing_type=self.thing_type,
box=self.box
)
response = self.client.get('/search/api/?q=Item')
self.assertEqual(response.status_code, 200)
results = response.json()['results']
self.assertEqual(len(results), 50)
def test_search_api_includes_type_and_box(self):
"""Search API results should include type and box info."""
response = self.client.get('/search/api/?q=ard')
self.assertEqual(response.status_code, 200)
results = response.json()['results']
self.assertEqual(results[0]['type'], 'Electronics')
self.assertEqual(results[0]['box'], 'BOX001')

43
boxes/views.py
View File

@@ -1,12 +1,12 @@
from django.http import HttpResponse from django.http import HttpResponse, JsonResponse
from django.shortcuts import get_object_or_404, render from django.shortcuts import get_object_or_404, render
from .models import Box from .models import Box, Thing
def index(request): def index(request):
"""Simple index page.""" """Simple index page."""
html = '<h1>LabHelper</h1><p><a href="/admin/">Admin</a></p>' html = '<h1>LabHelper</h1><p><a href="/search/">Search Things</a> | <a href="/admin/">Admin</a></p>'
return HttpResponse(html) return HttpResponse(html)
@@ -18,3 +18,40 @@ def box_detail(request, box_id):
'box': box, 'box': box,
'things': things, 'things': things,
}) })
def thing_detail(request, thing_id):
"""Display details of a thing."""
thing = get_object_or_404(
Thing.objects.select_related('thing_type', 'box', 'box__box_type'),
pk=thing_id
)
return render(request, 'boxes/thing_detail.html', {'thing': thing})
def search(request):
"""Search page for things."""
return render(request, 'boxes/search.html')
def search_api(request):
"""AJAX endpoint for searching things."""
query = request.GET.get('q', '').strip()
if len(query) < 2:
return JsonResponse({'results': []})
things = Thing.objects.filter(
name__icontains=query
).select_related('thing_type', 'box')[:50]
results = [
{
'id': thing.id,
'name': thing.name,
'type': thing.thing_type.name,
'box': thing.box.id,
'description': thing.description[:100] if thing.description else '',
}
for thing in things
]
return JsonResponse({'results': results})

5
labhelper/urls.py
View File

@@ -19,11 +19,14 @@ 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 box_detail, index from boxes.views import box_detail, index, search, search_api, thing_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('search/', search, name='search'),
path('search/api/', search_api, name='search_api'),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
] ]