Add form to add multiple things to a box
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
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

This commit is contained in:
2025-12-28 22:50:37 +01:00
parent f30627196e
commit f6a953158d
7 changed files with 400 additions and 3 deletions

View File

@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Things to Box {{ box.id }} - LabHelper</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
form {
display: table;
width: 100%;
}
.form-row {
display: table-row;
}
.form-cell {
display: table-cell;
padding: 8px;
}
.form-header {
font-weight: 600;
color: #333;
padding-bottom: 8px;
}
.form-header-cell {
padding-top: 0;
}
.form-cell input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
.form-cell input:focus {
outline: none;
border-color: #4a90a4;
}
.form-cell textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
resize: vertical;
}
.form-cell textarea:focus {
outline: none;
border-color: #4a90a4;
}
.form-cell select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: white;
}
.form-cell select:focus {
outline: none;
border-color: #4a90a4;
}
.btn {
background-color: #4a90a4;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
font-weight: 600;
}
.btn:hover {
background-color: #3d7a96;
}
.back-link {
margin-bottom: 20px;
display: inline-block;
color: #4a90a4;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.error-list {
color: #d9534f;
list-style: none;
padding: 0;
}
.error-list li {
padding: 8px 0;
margin-bottom: 8px;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}
.required {
color: #d9534f;
}
</style>
</head>
<body>
<a href="/" class="back-link">&larr; Home</a>
<h1>Add Things to Box {{ box.id }}</h1>
<div class="container">
<p>
<strong>Box:</strong> {{ box.id }} ({{ box.box_type.name }})
</p>
{% if formset.non_form_errors %}
<div class="error-list">
{% for form_errors in formset.non_form_errors %}
{% for field, errors in form_errors.items %}
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% if formset.total_form_count %}
<form method="post" action="">
{% csrf_token %}
<table>
<tr class="form-row">
<th class="form-header-cell"></th>
<th class="form-header form-header-cell">Name</th>
<th class="form-header form-header-cell">Type</th>
<th class="form-header form-header-cell">Description</th>
<th class="form-header form-header-cell">Picture</th>
</tr>
{{ formset.management_form }}
{% for form in formset %}
<tr class="form-row">
<td class="form-cell">
{{ form.id }}
</td>
<td class="form-cell">
{{ form.name }}
{% for error in form.name.errors %}
<div class="error-list">
{% for e in error %}
<li>{{ e }}</li>
{% endfor %}
</div>
{% endfor %}
<label class="required">*</label>
</td>
<td class="form-cell">
{{ form.thing_type }}
{% for error in form.thing_type.errors %}
<div class="error-list">
{% for e in error %}
<li>{{ e }}</li>
{% endfor %}
</div>
{% endfor %}
<label class="required">*</label>
</td>
<td class="form-cell">
{{ form.description }}
{% for error in form.description.errors %}
<div class="error-list">
{% for e in error %}
<li>{{ e }}</li>
{% endfor %}
</div>
{% endfor %}
</td>
<td class="form-cell">
{{ form.picture }}
{% for error in form.picture.errors %}
<div class="error-list">
{% for e in error %}
<li>{{ e }}</li>
{% endfor %}
</div>
{% endfor %}
</td>
</tr>
{% endfor %}
<tr class="form-row">
<td class="form-cell" colspan="5">
<button type="submit" class="btn">Save Things</button>
</td>
</tr>
</table>
</form>
{% endif %}
</div>
</body>
</html>

View File

@@ -79,6 +79,8 @@
<div class="box-info">
<strong>Type:</strong> {{ box.box_type.name }}
({{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm)
<br><br>
<a href="/box/{{ box.id }}/add/">+ Add Things</a>
</div>
{% if things %}