Current (non-working-frontend) state
This commit is contained in:
@ -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>
|
||||
|
||||
|
||||
@ -1,39 +1,32 @@
|
||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 test-white-50" onclick="doTheConfetti()">AssetFlow</a>
|
||||
<script>
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function doTheConfetti() {
|
||||
confetti({
|
||||
angle: randomInRange(40, 150),
|
||||
spread: randomInRange(50, 100),
|
||||
particleCount: randomInRange(50, 150),
|
||||
origin: { y: 0.6 }
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<button
|
||||
class="navbar-toggler position-absolute d-md-none collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarMenu"
|
||||
aria-controls="sidebarMenu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search" id="SearchBox" />
|
||||
<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%"></div>
|
||||
|
||||
<div class="navbar-nav">
|
||||
<div class="nav-item text-nowrap">
|
||||
<a class="nav-link px-3" id="logoutButton">Sign out</a>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" style="z-index: 9999">
|
||||
<div class="container-fluid">
|
||||
<img src="/logo/Design_icon.svg" height="10%">
|
||||
<a class="navbar-brand" href="#" onclick="doTheConfetti()">AssetFlow</a>
|
||||
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button> -->
|
||||
<button
|
||||
class="navbar-toggler position-absolute d-md-none collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarMenu"
|
||||
aria-controls="sidebarMenu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="SearchBox" />
|
||||
<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">Hello, world! This is a toast message.</div>
|
||||
@ -49,37 +42,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<strong class="me-auto">Notification</strong>
|
||||
<small>Just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastText">The button you just pressed is very useless.</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let texti = 0;
|
||||
alltexts = ['Nope, still useless', 'Stop pressing me!', 'There are NO USERS!', 'Please stop.', 'PLEASE!', 'Do you want an achivment or what?', 'This is not a game, please stop.', 'This is not the stanley parable.'];
|
||||
const toastLiveExample = document.getElementById('liveToast');
|
||||
const logoutButton = document.getElementById('logoutButton');
|
||||
logoutButton.addEventListener('click', () => {
|
||||
toastFunction();
|
||||
texti++;
|
||||
if (texti >= alltexts.length) texti = 0;
|
||||
});
|
||||
|
||||
function toastFunction() {
|
||||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
|
||||
toastBootstrap.show();
|
||||
setTimeout(function () {
|
||||
toastBootstrap.hide();
|
||||
document.getElementById('toastText').innerHTML = alltexts[texti];
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
|
||||
@ -187,17 +149,17 @@
|
||||
}
|
||||
modeLight.addEventListener('click', () => {
|
||||
localStorage.setItem('bs.theme', 'light');
|
||||
updateColorMode()
|
||||
updateColorMode();
|
||||
//document.documentElement.setAttribute('data-bs-theme', 'light');
|
||||
});
|
||||
modeAuto.addEventListener('click', () => {
|
||||
localStorage.setItem('bs.theme', 'auto');
|
||||
updateColorMode()
|
||||
updateColorMode();
|
||||
//document.documentElement.setAttribute('data-bs-theme', 'auto');
|
||||
});
|
||||
modeDark.addEventListener('click', () => {
|
||||
localStorage.setItem('bs.theme', 'dark');
|
||||
updateColorMode()
|
||||
updateColorMode();
|
||||
//document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
<title>AssetFlow - <%= it.title %></title>
|
||||
<meta name="author" content="[Project-Name-Here]" />
|
||||
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
<!--<link rel="icon" href="/favicon.ico" />-->
|
||||
<link rel="icon" href="/logo/Design_icon.svg" type="image/svg+xml" />
|
||||
|
||||
<script src="/js/handleColorMode.js"></script>
|
||||
<script src="/js/toastHandler.js"></script>
|
||||
<script src="/static/jquery/dist/jquery.min.js"></script>
|
||||
<script src="/js/toastHandler.js"></script>
|
||||
<script src="/js/confettiHeader.js"></script>
|
||||
<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
|
||||
<link href="/css/dashboard.css" rel="stylesheet" />
|
||||
|
||||
Reference in New Issue
Block a user