Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Current (non-working-frontend) state

Browse Source
This commit is contained in:
Leon
2023-05-22 18:39:47 +02:00
parent b29550f429
commit cfc28c5959
13 changed files with 354 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/frontend/items.eta.html
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>

98
src/frontend/partials/controls.eta.html
View File

@@ -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>

6
src/frontend/partials/head.eta.html
View File

@@ -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" />