Current (non-working-frontend) state

This commit is contained in:
2023-05-22 18:39:47 +02:00
parent b29550f429
commit cfc28c5959
13 changed files with 354 additions and 89 deletions

View File

@ -1,8 +1,80 @@
<%~ E.includeFile("partials/head.eta.html", {"title": "Items"}) %> <%~ E.includeFile("partials/controls.eta.html", {"active": "Items"}) %>
<div class="modal fade" id="itemModifyModal" tabindex="-1" aria-labelledby="itemModifyModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="itemModifyModalLabel">Edit a item</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="frontendForm" method="patch" data-target="/api/v1/items" id="CategoryModalForm">
<div class="modal-body">
<div class="mb-3">
<label for="itemModifyModalName" class="form-label">Name</label>
<input type="text" class="form-control" id="itemModifyModalName" name="name" required />
<div id="itemModifyModalNameText" class="form-text">This name should be unqiue.</div>
</div>
<div class="mb-3">
<label for="itemModifyModalComment" class="form-label">Comment</label>
<input type="text" class="form-control" id="itemModifyModalComment" name="comment" />
<div id="itemModifyModalDescText" class="form-text">Optional</div>
</div>
<div class="mb-3">
<label for="itemModifyModalStorageLocation" class="form-label">Select a storage location</label>
<select class="form-select" id="itemModifyModalStorageLocation" name="storageLocation" required>
<option value="undefined"><i>Do not assign a storage location</i></option>
<% it.storeLocs.forEach(function(locs){ %>
<option value="<%= locs.id %>"><%= locs.name %></option>
<% }) %>
</select>
<div id="itemModifyModalStorageLocationText" class="form-text">You have to create a storage location beforehand.</div>
</div>
<div class="mb-3">
<label for="itemModifyModalAmount" class="form-label">Amount</label>
<input type="number" min="0" class="form-control" id="itemModifyModalAmount" name="amount" />
</div>
<div class="mb-3">
<label for="itemModifyModalSKU" class="form-label">SKU</label>
<input type="text" class="form-control" id="itemModifyModalSKU" name="sku" />
<div id="itemModifyModalSKUText" class="form-text">Optional</div>
</div>
<div class="mb-3">
<label for="itemModifyModalManuf" class="form-label">Manufacturer</label>
<input type="number" min="0" class="form-control" id="itemModifyModalManuf" name="manufacturer" />
<div id="itemModifyModalSKUText" class="form-text">Optional</div>
</div>
<div class="mb-3">
<label for="itemModifyModalCategory" class="form-label">Select a category</label>
<select class="form-select" id="itemModifyModalCategory" name="category" required>
<option value="undefined"><i>Do not assign a category</i></option>
<% it.categories.forEach(function(cat){ %>
<option value="<%= cat.id %>"><%= cat.name %></option>
<% }) %>
</select>
<div id="storageLocationModalLocationText" class="form-text">You have to create a storage location beforehand.</div>
<input type="hidden" id="storageLocationModalIdHidden" name="id" />
</div>
<input type="text" id="itemModifyModalId" name="id" hidden />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- TODO: Center table content -->
<h1>Items</h1>
<div class="container">
<div class="row">
<div class="col-12">
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModifyModal" onclick="primeCreateNew()">Create new item</a>
</div>
</div>
<table class="table align-middle">
<thead>
<tr>
@ -30,27 +102,27 @@
<% } else if(user.status == "stolen") { %>
<td><span class="badge text-bg-danger"><%= user.status %></span></td>
<% } else if(user.status == "lost") { %>
<td><span class="badge text-bg-warning"><%= user.status %></span></td>
<td><span class="badge text-bg-warning"><%= user.status %></span></td>
<% } else if(user.status == "borrowed") { %>
<td><span class="badge text-bg-info"><%= user.status %></span></td>
<td><span class="badge text-bg-info"><%= user.status %></span></td>
<% } %>
<td><a href="#" class="btn btn-primary">Edit</a></td>
</tr>
<% }) %>
</tbody>
</table>
<br>
<br />
<% if(it.maxPages > 1) { %>
<nav aria-label="Page selector">
<ul class="pagination justify-content-center">
<li class="page-item <%= it.currentPage-1 < 1 ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage - 1 %>">Previous</a></li>
<% for (var i = 1; i <= it.maxPages; i++) { %>
<li class="page-item <%= it.currentPage == i ? 'active' : ''%> "><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
<% } %>
<li class="page-item <%= it.currentPage+1 > it.maxPages ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage + 1 %>">Next</a></li>
<li class="page-item <%= it.currentPage-1 < 1 ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage - 1 %>">Previous</a></li>
<% for (var i = 1; i <= it.maxPages; i++) { %>
<li class="page-item <%= it.currentPage == i ? 'active' : ''%>"><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
<% } %>
<li class="page-item <%= it.currentPage+1 > it.maxPages ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage + 1 %>">Next</a></li>
</ul>
</nav>
</nav>
<% } %>
</div>