inventory/templates/inventory.html

225 lines
No EOL
9.3 KiB
HTML

<!-- templates/inventory.html -->
{% extends "layout.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ breadcrumbs.breadcrumb_header(
breadcrumbs=[
{'label': "Inventory", 'url': url_for('main.list_inventory')}
],
title=title,
save_button=True,
delete_button= item.id != None
) }}
<input type="hidden" id="inventoryId" value="{{ item.id }}">
<div class="container">
<div class="row">
<div class="col-6">
<label for="timestamp" class="form-label">Date Entered</label>
<input type="date" class="form-control" name="timestamp" value="{{ item.timestamp.date().isoformat() }}">
</div>
<div class="col-6">
<label for="identifier" class="form-label">Identifier</label>
<input type="text" class="form-control-plaintext" value="{{ item.identifier }}" readonly>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="inventory_name" class="form-label">Inventory #</label>
<input type="text" class="form-control" name="inventory_name" placeholder="-"
value="{{ item.inventory_name or '' }}">
</div>
<div class="col-4">
<label for="serial" class="form-label">Serial #</label>
<input type="text" class="form-control" name="serial" placeholder="-"
value="{{ item.serial if item.serial else '' }}">
</div>
<div class="col-4">
<label for="barcode" class="form-label">Bar Code #</label>
<input type="text" class="form-control" name="barcode" placeholder="-"
value="{{ item.barcode if item.barcode else '' }}">
</div>
</div>
<div class="row">
<div class="col-4">
<label for="brand" class="form-label">Brand</label>
<select class="form-select" id="brand" name="brand">
<option>-</option>
{% for brand in brands %}
<option value="{{ brand.id }}" {% if brand.id==item.brand_id %} selected{% endif %}>{{ brand.name }}
</option>
{% endfor %}
</select>
</div>
<div class="col-4">
<label for="model" class="form-label">Model</label>
<input type="text" class="form-control" name="model" placeholder="-" value="{{ item.model if item.model else '' }}">
</div>
<div class="col-4">
<label for="type" class="form-label">Category</label>
<select name="type" id="type" class="form-select">
<option>-</option>
{% for t in types %}
<option value="{{ t.id }}" {% if t.id==item.type_id %} selected{% endif %}>{{ t.description }}
</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="owner" class="form-label">
Contact
{% if item.owner %}
{{ links.entry_link('user', item.owner_id) }}
{% endif %}
</label>
<select class="form-select" id="userList">
<option>-</option>
{% for user in users %}
<option value="{{ user.id }}" {% if user.id==item.owner_id %} selected{% endif %}>{{ user.full_name
}}</option>
{% endfor %}
</select>
</div>
<div class="col-4">
<label for="location" class="form-label">Location</label>
<select class="form-select" id="room">
<option>-</option>
{% for room in rooms %}
<option value="{{ room.id }}" {% if room.id==item.location_id %} selected{% endif %}>{{
room.full_name }}</option>
{% endfor %}
</select>
</div>
<div class="col-2">
<label for="condition" class="form-label">Condition</label>
<select name="condition" id="condition" class="form-select">
<option>-</option>
{% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified",
"Removed", "Disposed"] %}
<option value="{{ condition }}" {% if item.condition==condition %} selected{% endif %}>{{ condition }}
</option>
{% endfor %}
</select>
</div>
<div class="col-2 d-flex align-items-center justify-content-center" style="margin-top: 1.9rem;">
<div class="form-check mb-0">
<input type="checkbox" class="form-check-input" id="shared" name="shared" {% if item.shared %}checked{%
endif %}>
<label for="shared" class="form-check-label">Shared?</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="notes" class="form-label">Notes &amp; Comments</label>
<textarea name="notes" id="notes" class="form-control"
rows="10">{{ item.notes if item.notes else '' }}</textarea>
</div>
{% if worklog %}
<div class="col">
{{ tables.render_table(headers=worklog_headers, rows=worklog_rows, id='worklog',
entry_route='worklog_entry', title='Work Log') }}
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block script %}
const saveButton = document.getElementById("saveButton");
const deleteButton = document.getElementById("deleteButton");
if (saveButton) {
saveButton.addEventListener("click", async (e) => {
e.preventDefault();
const payload = {
timestamp: document.querySelector("input[name='timestamp']").value,
condition: document.querySelector("select[name='condition']").value,
needed: "", // ← either add a field for this or drop it if obsolete
type_id: parseInt(document.querySelector("select[name='type']").value),
inventory_name: document.querySelector("input[name='inventory_name']").value || null,
serial: document.querySelector("input[name='serial']").value || null,
model: document.querySelector("input[name='model']").value || null,
notes: document.querySelector("textarea[name='notes']").value || null,
owner_id: parseInt(document.querySelector("select#userList").value) || null,
brand_id: parseInt(document.querySelector("select[name='brand']").value) || null,
location_id: parseInt(document.querySelector("select#room").value) || null,
barcode: document.querySelector("input[name='barcode']").value || null,
shared: document.querySelector("input[name='shared']").checked
};
try {
const id = document.querySelector("#inventoryId").value;
const isEdit = id && id !== "None";
const endpoint = isEdit ? `/api/inventory/${id}` : "/api/inventory";
const method = isEdit ? "PUT" : "POST";
const response = await fetch(endpoint, {
method,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.success) {
localStorage.setItem("toastMessage", JSON.stringify({
message: isEdit ? "Inventory item updated!" : "Inventory item created!",
type: "success"
}));
window.location.href = `/inventory_item/${result.id}`;
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}
if (deleteButton) {
deleteButton.addEventListener("click", async () => {
const id = document.querySelector("#inventoryId").value;
if (!id || id === "None") {
renderToast({ message: "No item ID found to delete.", type: "danger }");
return;
}
if (!confirm("Are you sure you want to delete this inventory item? This action cannot be undone.")) {
return;
}
try {
const response = await fetch(`/api/inventory/${id}`, {
method: "DELETE"
});
const result = await response.json();
if (result.success) {
localStorage.setItem("toastMessage", JSON.stringify({
message: "Inventory item deleted.",
type: "success"
}));
window.location.href = "/inventory";
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}
{% endblock %}