Adrian A. Baumann
acde0cb2f8
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 20s
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 5s
217 lines
13 KiB
HTML
217 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Box Management - LabHelper{% endblock %}
|
|
|
|
{% block page_header %}
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-boxes"></i> Box Management</h1>
|
|
<p class="breadcrumb">
|
|
<a href="/"><i class="fas fa-home"></i> Home</a> /
|
|
Box Management
|
|
</p>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<h2><i class="fas fa-cube"></i> Box Types</h2>
|
|
|
|
<form method="post" action="{% url 'add_box_type' %}" style="margin-bottom: 30px; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 10px;">
|
|
{% csrf_token %}
|
|
<h3 style="margin-bottom: 15px; color: #667eea; font-size: 18px;">Add New Box Type</h3>
|
|
<div style="display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Name</label>
|
|
{{ box_type_form.name }}
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Width (mm)</label>
|
|
{{ box_type_form.width }}
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Height (mm)</label>
|
|
{{ box_type_form.height }}
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Length (mm)</label>
|
|
{{ box_type_form.length }}
|
|
</div>
|
|
<button type="submit" class="btn">
|
|
<i class="fas fa-plus"></i> Add
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
|
|
{% for box_type in box_types %}
|
|
<div class="box-type-card" style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid #f0f0f0; transition: all 0.3s;" id="box-type-card-{{ box_type.id }}">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
|
|
<h3 style="margin: 0; color: #667eea; font-size: 20px; font-weight: 700;" id="box-type-name-{{ box_type.id }}">{{ box_type.name }}</h3>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button onclick="toggleEditBoxType({{ box_type.id }})" id="edit-btn-{{ box_type.id }}" style="background: none; border: none; cursor: pointer; color: #667eea; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#764ba2'" onmouseout="this.style.color='#667eea'">
|
|
<i class="fas fa-edit" style="font-size: 18px;"></i>
|
|
</button>
|
|
{% if not box_type.boxes.exists %}
|
|
<form method="post" action="{% url 'delete_box_type' box_type.id %}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this box type?');">
|
|
{% csrf_token %}
|
|
<button type="submit" style="background: none; border: none; cursor: pointer; color: #e74c3c; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#c0392b'" onmouseout="this.style.color='#e74c3c'">
|
|
<i class="fas fa-trash" style="font-size: 18px;"></i>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div id="box-type-view-{{ box_type.id }}" style="color: #666; font-size: 14px; line-height: 1.6;">
|
|
<p style="margin: 5px 0;"><i class="fas fa-ruler-horizontal" style="width: 20px; color: #999;"></i> Width: <strong>{{ box_type.width }} mm</strong></p>
|
|
<p style="margin: 5px 0;"><i class="fas fa-ruler-vertical" style="width: 20px; color: #999;"></i> Height: <strong>{{ box_type.height }} mm</strong></p>
|
|
<p style="margin: 5px 0;"><i class="fas fa-arrows-alt-h" style="width: 20px; color: #999;"></i> Length: <strong>{{ box_type.length }} mm</strong></p>
|
|
</div>
|
|
<form id="box-type-edit-{{ box_type.id }}" method="post" action="{% url 'edit_box_type' box_type.id %}" style="display: none;" onsubmit="return confirm('Save changes?');">
|
|
{% csrf_token %}
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Name</label>
|
|
<input type="text" name="name" value="{{ box_type.name }}" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
</div>
|
|
<div style="display: flex; gap: 10px;">
|
|
<div style="flex: 1;">
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Width</label>
|
|
<input type="number" name="width" value="{{ box_type.width }}" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Height</label>
|
|
<input type="number" name="height" value="{{ box_type.height }}" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Length</label>
|
|
<input type="number" name="length" value="{{ box_type.length }}" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-sm" style="width: 100%;">
|
|
<i class="fas fa-save"></i> Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e0e0; color: #888; font-size: 13px;">
|
|
<i class="fas fa-box"></i> {{ box_type.boxes.count }} box{{ box_type.boxes.count|pluralize:"es" }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2><i class="fas fa-box"></i> Boxes</h2>
|
|
|
|
<form method="post" action="{% url 'add_box' %}" style="margin-bottom: 30px; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 10px;">
|
|
{% csrf_token %}
|
|
<h3 style="margin-bottom: 15px; color: #667eea; font-size: 18px;">Add New Box</h3>
|
|
<div style="display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Box ID</label>
|
|
{{ box_form.id }}
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 8px; font-size: 14px;">Box Type</label>
|
|
{{ box_form.box_type }}
|
|
</div>
|
|
<button type="submit" class="btn">
|
|
<i class="fas fa-plus"></i> Add
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
|
|
{% for box in boxes %}
|
|
<div class="box-card" style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid #f0f0f0; transition: all 0.3s;" id="box-card-{{ box.id }}">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
|
|
<h3 style="margin: 0; color: #667eea; font-size: 24px; font-weight: 700;" id="box-id-{{ box.id }}">{{ box.id }}</h3>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button onclick="toggleEditBox('{{ box.id }}')" id="edit-box-btn-{{ box.id }}" style="background: none; border: none; cursor: pointer; color: #667eea; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#764ba2'" onmouseout="this.style.color='#667eea'">
|
|
<i class="fas fa-edit" style="font-size: 18px;"></i>
|
|
</button>
|
|
{% if not box.things.exists %}
|
|
<form method="post" action="{% url 'delete_box' box.id %}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this box?');">
|
|
{% csrf_token %}
|
|
<button type="submit" style="background: none; border: none; cursor: pointer; color: #e74c3c; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#c0392b'" onmouseout="this.style.color='#e74c3c'">
|
|
<i class="fas fa-trash" style="font-size: 18px;"></i>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div id="box-view-{{ box.id }}" style="color: #666; font-size: 14px; margin-bottom: 15px;">
|
|
<p style="margin: 5px 0;"><i class="fas fa-cube" style="width: 20px; color: #999;"></i> Type: <strong>{{ box.box_type.name }}</strong></p>
|
|
</div>
|
|
<form id="box-edit-{{ box.id }}" method="post" action="{% url 'edit_box' box.id %}" style="display: none;" onsubmit="return confirm('Save changes?');">
|
|
{% csrf_token %}
|
|
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px;">
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Box ID</label>
|
|
<input type="text" name="id" value="{{ box.id }}" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-weight: 600; color: #555; margin-bottom: 5px; font-size: 12px;">Box Type</label>
|
|
<select name="box_type" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px;">
|
|
{% for type in box_types %}
|
|
<option value="{{ type.id }}" {% if type.id == box.box_type.id %}selected{% endif %}>{{ type.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-sm" style="width: 100%;">
|
|
<i class="fas fa-save"></i> Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div style="padding-top: 15px; border-top: 1px solid #e0e0e0;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<a href="{% url 'box_detail' box.id %}" class="btn btn-sm">
|
|
<i class="fas fa-eye"></i> View Contents
|
|
</a>
|
|
<span style="color: #888; font-size: 13px;">
|
|
<i class="fas fa-cube"></i> {{ box.things.count }} thing{{ box.things.count|pluralize }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function toggleEditBoxType(id) {
|
|
var viewDiv = document.getElementById('box-type-view-' + id);
|
|
var editForm = document.getElementById('box-type-edit-' + id);
|
|
var editBtn = document.getElementById('edit-btn-' + id);
|
|
|
|
if (editForm.style.display === 'none') {
|
|
viewDiv.style.display = 'none';
|
|
editForm.style.display = 'block';
|
|
editBtn.innerHTML = '<i class="fas fa-times" style="font-size: 18px;"></i>';
|
|
} else {
|
|
viewDiv.style.display = 'block';
|
|
editForm.style.display = 'none';
|
|
editBtn.innerHTML = '<i class="fas fa-edit" style="font-size: 18px;"></i>';
|
|
}
|
|
}
|
|
|
|
function toggleEditBox(id) {
|
|
var viewDiv = document.getElementById('box-view-' + id);
|
|
var editForm = document.getElementById('box-edit-' + id);
|
|
var editBtn = document.getElementById('edit-box-btn-' + id);
|
|
|
|
if (editForm.style.display === 'none') {
|
|
viewDiv.style.display = 'none';
|
|
editForm.style.display = 'block';
|
|
editBtn.innerHTML = '<i class="fas fa-times" style="font-size: 18px;"></i>';
|
|
} else {
|
|
viewDiv.style.display = 'block';
|
|
editForm.style.display = 'none';
|
|
editBtn.innerHTML = '<i class="fas fa-edit" style="font-size: 18px;"></i>';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|