k-space/inventory-app
13
0
Fork 0
Code Issues 16 Pull Requests 1 Packages Activity

Reformat inventory view

Browse Source 
This should all deserve flex
..or move to off the shelf inventory sofwtare
This commit is contained in:
rasmus
2025-05-26 01:49:09 +03:00
parent 35dc28a8f5
commit 971920f94c
5 changed files with 125 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
inventory-app/inventory.py
View File

@@ -129,7 +129,7 @@ class InventoryForm(Form):
owner = FormField(MemberForm, label="Owner") owner = FormField(MemberForm, label="Owner")
user = FormField(MemberForm, label="Current User") user = FormField(MemberForm, label="Current User")
usable = BooleanField("Usable") usable = BooleanField("Usable")
visibility = SelectField("Visibility", choices=['public', 'unlisted', 'secret'], default='unlisted') visibility = SelectField("Visibility", choices=['public', 'unlisted', 'secret', 'archived'], default='unlisted')
class HardwareForm(Form): class HardwareForm(Form):
serial = StringField("Serial Number") serial = StringField("Serial Number")
@@ -143,7 +143,6 @@ class ShortenerForm(Form):
class InventoryItemForm(CustomForm): class InventoryItemForm(CustomForm):
type = SelectField("Type", choices=fetch_type_select()) type = SelectField("Type", choices=fetch_type_select())
name = StringField('Name') name = StringField('Name')
external_link = StringField('External link')
comment = StringField('Comment') comment = StringField('Comment')
inventory = FormField(InventoryForm) inventory = FormField(InventoryForm)
hardware = FormField(HardwareForm) hardware = FormField(HardwareForm)

41
inventory-app/templates/base.html
View File

@@ -68,8 +68,14 @@ span.tooltipped {
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-style: dotted; text-decoration-style: dotted;
} }
</style>
.horizontalRow {
display: flex;
justify-content: flex-start;
gap: 20px;
padding: 10px;
}
</style>
</head> </head>
<body> <body>
<script <script
@@ -98,24 +104,43 @@ span.tooltipped {
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-ZOED+d9HxogEQwD+jFvux96iGQR9TxfJO+mPF2ZS0TuKH6eWrmvPsDpO6I0OWdiX" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-ZOED+d9HxogEQwD+jFvux96iGQR9TxfJO+mPF2ZS0TuKH6eWrmvPsDpO6I0OWdiX" crossorigin="anonymous"></script>
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() { document.addEventListener("DOMContentLoaded", function () {
$("time.timeago").timeago(); $("time.timeago").timeago();
var elems = document.querySelectorAll('.tooltipped'); var elems = document.querySelectorAll(".tooltipped");
var instances = M.Tooltip.init(elems, {}); var instances = M.Tooltip.init(elems, {});
var elems = document.querySelectorAll('.sidenav'); var elems = document.querySelectorAll(".sidenav");
var instances = M.Sidenav.init(elems, {}); var instances = M.Sidenav.init(elems, {});
var elems = document.querySelectorAll('select'); var elems = document.querySelectorAll("select");
var instances = M.FormSelect.init(elems, {}); var instances = M.FormSelect.init(elems, {});
var elems = document.querySelectorAll('.materialboxed'); var elems = document.querySelectorAll(".materialboxed");
var instances = M.Materialbox.init(elems, {}); var instances = M.Materialbox.init(elems, {});
var elems = document.querySelectorAll('.collapsible.expandable'); var elems = document.querySelectorAll(".collapsible.expandable");
var instances = M.Collapsible.init(elems, { accordion: false }); var instances = M.Collapsible.init(elems, { accordion: false });
}); });
$("button.audit-button").on("click", function () {
let button = $(this);
$.ajax({
method: "POST",
url: "/m/inventory/" + button.data("itemId") + "/audit",
data: { noRedirect: true },
success: function () {
button.unbind("click");
button.removeClass([
"orange",
"red",
"waves-effect",
"waves-light",
]);
button.addClass(["unclickable", "green"]);
button.text("Just now");
},
});
});
</script> </script>
</body> </body>
</html> </html>

18
inventory-app/templates/inventory.html
View File

@@ -40,7 +40,7 @@
</td> </td>
<td>{{ item.inventory.visibility }}</td> <td>{{ item.inventory.visibility }}</td>
<td>{{ item.type }}</td> <td>{{ item.type }}</td>
<td><a href="/m/inventory/{{ item._id }}/view">{{ item | format_name }} {{ item.comment }}</a></td> <td><a href="/m/inventory/{{ item._id }}/view">{{ item | format_name }}</a> {{ item.comment }}</td>
<td>{{ item.location }}</td> <td>{{ item.location }}</td>
<td>{{ item | owner_link }}</td> <td>{{ item | owner_link }}</td>
<td>{{ item | user_link }}</td> <td>{{ item | user_link }}</td>
@@ -63,20 +63,4 @@
</table> </table>
{{ add_item_button() }} {{ add_item_button() }}
</div> </div>
<script>
$('button.audit-button').on('click', function() {
let button = $(this);
$.ajax({
method: 'POST',
url: "/m/inventory/" + button.data('itemId') + "/audit",
data: { noRedirect: true },
success: function() {
button.unbind('click');
button.removeClass(['orange', 'red', 'waves-effect', 'waves-light']);
button.addClass(['unclickable', 'green']);
button.text('Just now');
}
})
});
</script>
{% endblock %} {% endblock %}

51
inventory-app/templates/inventory_edit.html
View File

@@ -3,7 +3,6 @@
<div class="container"> <div class="container">
<form method="POST" autocomplete="off"> <form method="POST" autocomplete="off">
{{ form.csrf_token }} {{ form.csrf_token }}
<p>Inventory item.</p>
<div id="errors" style="background-color: red;"> <div id="errors" style="background-color: red;">
{% for field, errors in form.errors.items() %} {% for field, errors in form.errors.items() %}
@@ -33,15 +32,36 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>Location</td>
<td>{{ form.location }}</td>
<td></td>
<td><button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</td>
</tr>
<tr>
<td>k6.ee/</td>
<td>{{ form.shortener.slug }}</td>
</tr>
<tr> <tr>
<td>Type</td> <td>Type</td>
<td>{{ form["type"] }}</td> <td>{{ form["type"] }}</td>
<td>Visibility</td>
<td>{{ form.inventory.visibility }}</td>
</tr> </tr>
<tr> <tr>
<td>Vendor</td> <td>Vendor</td>
<td>{{ form.hardware.vendor }}</td> <td>{{ form.hardware.vendor }}</td>
<td>Serial number</td>
<td>{{ form.hardware.serial }}</td>
</tr> </tr>
<tr> <tr>
@@ -49,11 +69,6 @@
<td>{{ form.hardware.product }}</td> <td>{{ form.hardware.product }}</td>
</tr> </tr>
<tr>
<td>Serial number</td>
<td>{{ form.hardware.serial }}</td>
</tr>
<tr> <tr>
<td>Name</td> <td>Name</td>
<td>{{ form.name }}</td> <td>{{ form.name }}</td>
@@ -75,33 +90,10 @@
<span> <span>
</td> </td>
<td>{{ form.inventory.owner.username }}</td> <td>{{ form.inventory.owner.username }}</td>
</tr>
<tr>
<td>Current user</td> <td>Current user</td>
<td>{{ form.inventory.user.username }}</td> <td>{{ form.inventory.user.username }}</td>
</tr> </tr>
<tr>
<td>External link</td>
<td>{{ form.external_link }}</td>
</tr>
<tr>
<td>URL slug</td>
<td>{{ form.shortener.slug }}</td>
</tr>
<tr>
<td>Location</td>
<td>{{ form.location }}</td>
</tr>
<tr>
<td>Visibility</td>
<td>{{ form.inventory.visibility }}</td>
</tr>
</tbody> </tbody>
</table> </table>
@@ -196,4 +188,3 @@ $(function() {
}); });
</script> </script>
{% endblock %} {% endblock %}

227
inventory-app/templates/inventory_view.html
View File

@@ -1,25 +1,69 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<div class="container"> <div class="container">
<p>Inventory item.</p> <title>{% if item.get("shortener").slug %}/{{ item.get("shortener").slug }}{% else %}k6{% endif %}: {{ item.name }}</title>
<div class="horizontalRow">
<div class="col s12"><a {% if not can_edit %} disabled="" {% endif %} href="/m/inventory/{{ item._id }}/edit" class="waves-effect waves-light btn">Edit</a></div>
<div class="col s12"><a href="/m/inventory/{{ item._id }}/clone" class="waves-effect waves-light btn">Clone</a></div>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Value</th> <th>Value</th>
<th>Key</th>
<th>Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>Location</td>
<td>{{ item.location }}</td>
<td>Last audited</td>
<td><div>
<form onsubmit="return false;">
<button
data-item-id="{{ item._id }}"
class="audit-button {{ item.inventory | audit_color }} waves-effect waves-light btn"
{% if not can_audit %}disabled=""{% endif %}
>
{{item.inventory | audit_text}}
</button>
</form>{% if item.inventory.get("audit") %} by {{ item.inventory.audit.username }}{% endif %}
</div>
</tr>
<tr>
<td>URL slug</td>
<td>
{% if item.get("shortener").slug %}
{{ item.get("shortener", {}).get("slug") | qr_code }}
<a href="http://k6.ee/{{ item.get("shortener").slug }}">
k6.ee/{{ item.get("shortener").slug }}
</a>
{% endif %}
</td>
</tr>
<tr> <tr>
<td>Type</td> <td>Type</td>
<td>{{ item["type"] }}</td> <td>{{ item["type"] }}</td>
<td class="tooltip" data-tooltip="Who can see the item">Visibility</td>
<td>{{ item.inventory.visibility }}</td>
</tr> </tr>
<tr> <tr>
<td>Vendor</td> <td>Vendor</td>
<td>{{ item.get("hardware").vendor }}</td> <td>{{ item.get("hardware").vendor }}</td>
<td>Serial number</td>
<td>{{ item.get("hardware").serial }}</td>
</tr> </tr>
<tr> <tr>
@@ -27,11 +71,6 @@
<td>{{ item.get("hardware").product }}</td> <td>{{ item.get("hardware").product }}</td>
</tr> </tr>
<tr>
<td>Serial number</td>
<td>{{ item.get("hardware").serial }}</td>
</tr>
{% if item.mac %} {% if item.mac %}
<tr> <tr>
<td>MAC address</td> <td>MAC address</td>
@@ -57,95 +96,24 @@
<tr> <tr>
<td>Owner</td> <td>Owner</td>
<td>{{ item.inventory.get("owner").username | display_name }}</td> <td>{{ item | owner_link }}</td>
<td>User</td>
<td>{{ item | user_link }}</td>
</tr> </tr>
<tr> <tr>
<td>Current user</td> <td>Tags</td>
<td>{{ item.inventory.get("user").username | display_name }}</td> {% for tag in item.tags %}
</tr> <div class="chip"> {{ tag }} </div>
{% macro auditLine(timestamp, user) -%}
{{ timestamp | timeago }}
by
{{ user | display_name }}
{%- endmacro %}
<tr>
<td>Last audited</td>
<td>
{% if item.inventory.get("audit") %}
{% if item.inventory.get("audit", {}).get("log") %}
<details>
<summary>
{{ auditLine(item.inventory.audit.timestamp, item.inventory.audit.username) }}
</summary>
<ul class="browser-default">
{% for audit in item.inventory.audit.log | reverse %}
<li>{{ auditLine(audit.timestamp, audit.username) }}</li>
{% endfor %} {% endfor %}
</ul>
</details>
{% else %}
{{ auditLine(item.inventory.audit.timestamp, item.inventory.audit.username) }}
{% endif %}
{% else %}
Never
{% endif %}
</td>
</tr>
<tr>
<td>URL slug</td>
<td>
{% if item.get("shortener").slug %}
<a href="http://k6.ee/{{ item.get("shortener").slug }}">
k6.ee/{{ item.get("shortener").slug }}
</a>
{% endif %}
</td>
</tr>
<tr>
<td>QR Code (WIP)</td>
<td>
{% if item.get("shortener").slug %}
{{ item.get("shortener", {}).get("slug") | qr_code }}
{% endif %}
</td>
</tr>
<tr>
<td>External link</td>
<td><a href="{{ item.external_link }}">External link</a></td>
</tr>
<tr>
<td>Location</td>
<td>{{ item.location }}</td>
</tr>
<tr>
<td class="tooltip" data-tooltip="Who can see the item">Visibility</td>
<td>{{ item.inventory.visibility }}</td>
</tr>
<tr>
<td class="tooltip" data-tooltip="Other members can make use of this inventory item">Usable</td>
<td>{% if item.inventory.usable %}<i class="material-icons">check_circle</i>{% endif %}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h3>Tags</h3> <div>
{% for tag in item.tags %}
<div class="chip"> {{ tag }} </div>
{% endfor %}
<h3>Photo</h3> <h3>Photo</h3>
{% if item.has_photo %}
<img src="{{ photo_url }}" alt="" style="max-width: 800px; width: 100%;">
{% endif %}
<form id="photo-form" action="/inventory/{{ item._id }}/upload-photo" method="post" enctype="multipart/form-data"> <form id="photo-form" action="/inventory/{{ item._id }}/upload-photo" method="post" enctype="multipart/form-data">
<div class="row placeholder-dark"> <div class="row placeholder-dark">
<div class="file-field input-field col s6"> <div class="file-field input-field col s6">
@@ -165,97 +133,13 @@
</div> </div>
</div> </div>
</form> </form>
<h3>Actions</h3> {% if item.has_photo %}
{% if not item.inventory.user and item.inventory.usable %} <img src="{{ photo_url }}" alt="" style="max-width: 800px; width: 100%;">
<div class="row">
<div class="col s12">
<form action="/m/inventory/{{ item._id }}/use" method="post" style="display: inline;">
<button class="waves-effect waves-light btn" type="submit">Use</button>
</form>
</div>
</div>
{% endif %} {% endif %}
{% if is_using %}
<div class="row">
<div class="col s12">
<form action="/m/inventory/{{ item._id }}/vacate" method="post" style="display: inline;">
<button class="waves-effect waves-light btn" type="submit">Vacate</button>
</form>
</div>
</div>
{% endif %}
<div class="row">
<div class="col s12">
<a {% if not can_edit %} disabled="" {% endif %} href="/m/inventory/{{ item._id }}/edit" class="waves-effect waves-light btn">
Edit
</a>
</div>
</div> </div>
<div class="row">
<div class="col s12">
<a href="/m/inventory/{{ item._id }}/clone" class="waves-effect waves-light btn">Clone</a>
</div>
</div> </div>
<div class="row">
<div class="col s12">
<button {% if can_audit %} data-target="audit-modal" {% else %} disabled="" {% endif %} class="modal-trigger orange waves-effect waves-light btn">
<i class="material-icons left">done</i>Audit
</button>
</div>
</div>
<div class="row">
<div class="col s12">
<form action="/m/inventory/{{ item._id }}/archive" method="post" style="display: inline;">
<button {% if not can_edit %} disabled="" {% endif %} class="red lighten-1 waves-effect waves-light btn" type="submit">
<i class="material-icons left">archive</i>Archive
</button>
</form>
</div>
</div>
{% if can_audit %}
<div id="audit-modal" class="modal">
<div class="modal-content">
<h4>Check that:</h4>
<p>
<label>
<input class="audit-check" type="checkbox"/>
<span>Object is present at the space</span>
</label>
</p>
<p>
<label>
<input class="audit-check" type="checkbox"/>
<span>There is no obvious issues and it does not present danger</span>
</label>
</p>
<p>
<label>
<input class="audit-check" type="checkbox"/>
<span>Object has QR code attached to it and it's up to date</span>
</label>
</p>
<p>
<label>
<input class="audit-check" type="checkbox"/>
<span>Picture is up to date</span>
</label>
</p>
</div>
<div class="modal-footer">
<form action="/m/inventory/{{ item._id }}/audit" method="post" style="display: inline;">
<button id="audit-modal-send" disabled="" type="submit" class="orange waves-effect waves-light btn"><i class="material-icons left">done</i>Confirm</button>
</form>
</div>
</div>
{% endif %}
</div>
<script> <script>
$(function() { $(function() {
var photoInput = $("#photo-form input[type=file]"); var photoInput = $("#photo-form input[type=file]");
@@ -291,4 +175,3 @@ $(function() {
}); });
</script> </script>
{% endblock %} {% endblock %}