Adrian A. Baumann
20e5e0b0c1
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 12s
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 3s
106 lines
4.5 KiB
HTML
106 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load mptt_tags %}
|
|
{% load dict_extras %}
|
|
|
|
{% block title %}LabHelper - Home{% endblock %}
|
|
|
|
{% block page_header %}
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-home"></i> Welcome to LabHelper</h1>
|
|
<p class="breadcrumb">Organize and track your lab inventory</p>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<h2><i class="fas fa-box"></i> Boxes</h2>
|
|
{% if boxes %}
|
|
<div class="box-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
|
|
{% for box in boxes %}
|
|
<div class="box-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 20px; border-radius: 12px; border: 1px solid #e0e0e0; transition: all 0.3s ease; cursor: pointer;">
|
|
<a href="{% url 'box_detail' box.id %}" style="text-decoration: none; color: #333; display: block;">
|
|
<div class="box-id" style="font-size: 20px; font-weight: 700; color: #667eea; margin-bottom: 8px;">
|
|
<i class="fas fa-cube"></i> Box {{ box.id }}
|
|
</div>
|
|
<div class="box-type" style="font-size: 15px; color: #555; margin-bottom: 5px;">
|
|
{{ box.box_type.name }}
|
|
</div>
|
|
<div class="box-type" style="font-size: 13px; color: #777; margin-bottom: 5px;">
|
|
<i class="fas fa-ruler-combined"></i> {{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm
|
|
</div>
|
|
<div class="box-type" style="font-size: 13px; color: #777;">
|
|
<i class="fas fa-layer-group"></i> {{ box.things.count }} item{{ box.things.count|pluralize }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p style="text-align: center; color: #888; font-size: 16px; padding: 40px;">
|
|
<i class="fas fa-box-open" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
|
|
No boxes found.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2><i class="fas fa-folder-tree"></i> Thing Types</h2>
|
|
{% if thing_types %}
|
|
<ul class="tree" style="list-style: none; padding-left: 0;">
|
|
{% recursetree thing_types %}
|
|
<li style="padding: 8px 0;">
|
|
<div class="tree-item" style="display: flex; align-items: center; gap: 8px;">
|
|
{% if children %}
|
|
<span class="toggle-handle" style="display: inline-block; width: 24px; color: #667eea; font-weight: bold; cursor: pointer; transition: transform 0.2s;">[+]</span>
|
|
{% else %}
|
|
<span class="toggle-handle" style="display: inline-block; width: 24px; color: #ccc;"> </span>
|
|
{% endif %}
|
|
<a href="{% url 'thing_type_detail' node.pk %}" style="color: #667eea; text-decoration: none; font-size: 16px; font-weight: 500; transition: color 0.2s;">{{ node.name }}</a>
|
|
{% with count=type_counts|get_item:node.pk %}
|
|
{% if count and count > 0 %}
|
|
<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;">{{ count }}</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
{% if children %}
|
|
<ul style="list-style: none; padding-left: 32px; display: none;">
|
|
{{ children }}
|
|
</ul>
|
|
{% endif %}
|
|
</li>
|
|
{% endrecursetree %}
|
|
</ul>
|
|
{% else %}
|
|
<p style="text-align: center; color: #888; font-size: 16px; padding: 40px;">
|
|
<i class="fas fa-folder-open" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
|
|
No thing types found.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.toggle-handle').click(function(e) {
|
|
e.stopPropagation();
|
|
var $ul = $(this).closest('li').children('ul');
|
|
if ($ul.length) {
|
|
$ul.slideToggle(200);
|
|
$(this).text($ul.is(':visible') ? '[-]' : '[+]');
|
|
}
|
|
});
|
|
|
|
$('.box-card').hover(
|
|
function() {
|
|
$(this).css('transform', 'translateY(-5px)');
|
|
$(this).css('box-shadow', '0 12px 24px rgba(102, 126, 234, 0.2)');
|
|
},
|
|
function() {
|
|
$(this).css('transform', 'translateY(0)');
|
|
$(this).css('box-shadow', 'none');
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
{% endblock %} |