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
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:
215
boxes/templates/boxes/add_things.html
Normal file
215
boxes/templates/boxes/add_things.html
Normal 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">← 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>
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user