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

The BIG frontend update

Browse Source
This commit is contained in:
Leon
2023-05-16 22:58:08 +02:00
parent 04b5bd60f2
commit bd9f629690
22 changed files with 459 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/frontend/auth/login.eta.html Normal file
View File

@ -0,0 +1,12 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Login"}) %>
<link href="/css/login.css" rel="stylesheet" />
<div class="background text-center">
<div class="row align-items-start">
<div class="col-9"></div>
<div class="col-3 sidePanel ps-4 text-black">
<h1>Log into AssetFlow</h1>
</div>
</div>
<%~ E.includeFile("../partials/foot.eta.html") %>
</div>

22
src/frontend/items.eta.html
View File

@ -3,7 +3,7 @@
<!-- TODO: Center table content -->
<h1>Items</h1>
<div class="container">
<table class="table">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">SKU</th>
@ -12,6 +12,13 @@
<th scope="col">Actions</th>
</tr>
</thead>
<% if(it.items.length == 0) { %>
<tbody>
<tr>
<td colspan="4" class="text-center">No items found</td>
</tr>
</tbody>
<% } %>
<tbody>
<% it.items.forEach(function(user){ %>
<tr>
@ -23,6 +30,19 @@
<% }) %>
</tbody>
</table>
<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>
</ul>
</nav>
<% } %>
</div>
<%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>

2
src/frontend/manage/categoryManager.eta.html
View File

@ -43,7 +43,7 @@
</div>
<!-- Table with all categories -->
<table class="table">
<table class="table align-middle">
<thead>
<tr>
<!-- <th scope="col">#</th> -->

46
src/frontend/manage/storageManager.eta.html
View File

@ -9,7 +9,7 @@
<h1 class="modal-title fs-5" id="storageLocationModalTitle">Edit or create a storage location</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="frontendForm" method="post" data-target="/api/v1/storagelocation">
<form id="storageLocationModalForm" class="frontendForm" method="post" data-target="/api/v1/storageLocations">
<div class="modal-body">
<div class="mb-3">
<label for="storageLocationModalName" class="form-label">Name</label>
@ -18,7 +18,8 @@
</div>
<div class="mb-3">
<label for="storageLocationModalUnit" class="form-label">Select a storage unit</label>
<select class="form-select" id="storageLocationModalUnit" name="description" required>
<select class="form-select" id="storageLocationModalUnit" name="storageUnitId" required>
<option value="undefined"><i>Do not assign a storage unit</i></option>
<% it.storUnits.forEach(function(storageunits){ %>
<option value="<%= storageunits.id %>"><%= storageunits.name %></option>
<% }) %>
@ -26,6 +27,7 @@
<!--<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />-->
<div id="storageLocationModalUnitText" class="form-text">You have to create a storage unit beforehand.</div>
<input type="hidden" id="storageLocationModalIdHidden" name="id" />
</div>
</div>
<div class="modal-footer">
@ -62,8 +64,8 @@
<div class="mb-3">
<label for="storageUnitModalLocationSelect" class="form-label">Storage Location</label>
<select class="form-select" id="storageUnitModalLocationSelect" name="location" onchange="handleSelector()" required>
<option value="META_CREATENEW">➕ Create new location</option>
<select class="form-select" id="storageUnitModalLocationSelect" name="locationId" onchange="handleSelector()" required>
<option value="META_CREATENEW" id="createNewLocationSelection">➕ Create new location</option>
<% it.address.forEach(function(address){ %>
<option value="<%= address.id %>"><%= address.street %> <%= address.houseNumber %>, <%= address.city %> <%= address.country %></option>
<% }) %>
@ -71,6 +73,7 @@
<!--<input type="text" class="form-control" id="storageUnitModalLocationSelect" name="select" required />-->
<div id="storageUnitModalLocationSelectText" class="form-text">Select or create a new address.</div>
<input type="hidden" id="storageUnitModalLocationSelectHidden" name="id" />
</div>
<div id="storageUnitModalContactInfoCreator" class="d-none">
@ -82,13 +85,13 @@
</div>
<div class="mb-3">
<label for="storageUnitModalHouseNumber" class="form-label">Housenumber</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="housenumber" />
<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="houseNumber" />
<div id="storageUnitModalHouseNumberText" class="form-text">6a</div>
</div>
<div class="mb-3">
<label for="storageUnitModalzipcode" class="form-label">Zipcode</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipcode" />
<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipCode" />
<div id="storageUnitModalzipcodeText" class="form-text">123456</div>
</div>
@ -147,10 +150,9 @@
>
</div>
</div>
<table class="table">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">LocId</th>
<th scope="col">Name</th>
<th scope="col">Storage Unit</th>
<th scope="col">Actions</th>
@ -160,18 +162,34 @@
<% it.storLocs.forEach(function(locations){ %>
<tr id="listEntry-<%= locations.id %>">
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= locations.id %>"><%= locations.name %></td>
<td><%= locations.contactInfo %></td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEdit('<%= locations.name %>')">
<% if (locations.storageUnit == null) { %>
<i>No storage unit connected</i>
<% } else { %>
<%= locations.storageUnit.name %>
<% } %>
</td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('<%= locations.id %>')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= locations.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModalLoc('<%= locations.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<!-- Storage Unit -->
<div class="tab-pane fade" id="storage-unit-tab-pane" role="tabpanel" aria-labelledby="storage-unit-tab-pane" tabindex="0">
<br />
A storage unit is a physical place, like a warehouse. This contains an address and a name.
@ -181,7 +199,7 @@
<a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeCreateNew()"><i class="bi bi-building-add"></i> Create new unit</a>
</div>
</div>
<table class="table">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">Name</th>
@ -195,10 +213,10 @@
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= units.id %>"><%= units.name %></td>
<td><%= units.contactInfo.street %> <%= units.contactInfo.houseNumber %>, <%= units.contactInfo.city %> <%= units.contactInfo.country %></td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.name %>')">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.id %>')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>

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

@ -120,8 +120,7 @@
data-bs-target="#collapseSettingsStorages"
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
aria-controls="collapseSettingsStorages">
<i class="bi bi-caret-left-fill magicalTriangle"></i>
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
<i class="bi bi-caret-left-fill dropdownIndicator"></i>
</span>
</a>
@ -144,7 +143,7 @@
aria-expanded="<%= it.active.includes('SETT_IMPORT') ? 'true' : 'false'%>"
aria-controls="collapseSettingsImport">
<i class="bi bi-box-seam"></i> Import
<i class="bi bi-caret-left-fill dropdownIndicator magicalTriangle" data-ref-target="#collapseSettingsImport"></i>
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsImport"></i>
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
</span>
</a>

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

@ -11,6 +11,7 @@
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<script src="/js/normalizeToast.js"></script>
<script src="/static/jquery/dist/jquery.min.js"></script>
<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
@ -20,7 +21,6 @@
<script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script>
<script>
// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
(function () {
const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
const isDark = currentTheme === 'dark';

0
src/frontend/style.css
View File

2
src/routes/api/v1/categories.ts
View File

@ -80,7 +80,7 @@ async function patch(req: Request, res: Response) {
});
if (result === null) {
res.status(410).json({ error: 'category does not exist.' });
res.status(410).json({ error: 'Category does not exist.' });
return;
}
} catch (err) {

5
src/routes/api/v1/index.ts
View File

@ -4,12 +4,17 @@ import express from 'express';
import testRoute from './test.js';
import categoryRoute from './categories.js';
import storageUnitRoute from './storageUnits.js';
import storageLocationRoute from './storageLocations.js';
// Router base is '/api/v1'
const Router = express.Router({ strict: false });
Router.route('/categories').get(categoryRoute.get).post(categoryRoute.post).patch(categoryRoute.patch).delete(categoryRoute.del);
// TODO: Migrate routes to lowercase.
Router.route('/storageUnits').get(storageUnitRoute.get).post(storageUnitRoute.post).patch(storageUnitRoute.patch).delete(storageUnitRoute.del);
Router.route('/storageLocations').get(storageLocationRoute.get).post(storageLocationRoute.post).patch(storageLocationRoute.patch).delete(storageLocationRoute.del);
Router.route('/test').get(testRoute.get);
export default Router;

28
src/routes/frontend/items.ts
View File

@ -1,12 +1,32 @@
import { Request, Response } from 'express';
import { prisma, __path } from '../../index.js';
function get(req: Request, res: Response) {
async function get(req: Request, res: Response) {
// If no page is provided redirect to first
if (req.query.page === undefined) {
res.redirect('?page=1');
return;
}
let page = parseInt(req.query.page.toString());
const itemCount = await prisma.item.count({}); // Count all items in the DB
const takeSize = 25; // Amount of times per page
const pageSize = Math.ceil(itemCount / takeSize); // Amount of pages, always round up
// If page is less then 1 or more then the max page size redirect to first or last page
if (page < 1) {
res.redirect('?page=1');
return;
} else if (page > pageSize) {
res.redirect('?page=' + pageSize);
return;
}
prisma.item
.findMany({})
.findMany({ skip: (page - 1) * takeSize, take: takeSize }) // Skip the amount of items per page times the page number minus 1; skip has to be (page-1)*takeSize because skip is 0 indexed
.then((items) => {
// Count amount of total items
res.render(__path + '/src/frontend/items.eta.html', { items: items });
res.render(__path + '/src/frontend/items.eta.html', { items: items, currentPage: page, maxPages: pageSize });
})
.catch((err) => {
console.error(err);

8
src/routes/frontend/manage/demo.ts Normal file
View File

@ -0,0 +1,8 @@
import express, { Request, Response } from 'express';
import { prisma, __path } from '../../../index.js';
function get(req: Request, res: Response) {
res.render(__path + '/src/frontend/auth/login.eta.html'); //, { items: items });
}
export default { get };

2
src/routes/frontend/manage/index.ts
View File

@ -7,6 +7,7 @@ import jsonImportRoute from './import/jsonImport.js';
import categoryManager from './categoryManager.js';
import storageManager from './storageManager.js';
import startpageRoute from './startpage.js';
import demoLoginRoute from './demo.js'
// Router base is '/manage'
const Router = express.Router({ strict: false });
@ -16,6 +17,7 @@ Router.route('/categories').get(categoryManager.get);
Router.route('/storages').get(storageManager.get);
Router.route('/import/csv').get(csvImportRoute.get).post(csvImportRoute.post);
Router.route('/import/json').get(jsonImportRoute.get).post(jsonImportRoute.post);
Router.route('/demo/login').get(demoLoginRoute.get);
Router.route('/').get(startpageRoute.get);
export default Router;

1
src/routes/frontend/manage/startpage.ts
View File

@ -5,4 +5,5 @@ function get(req: Request, res: Response) {
res.render(__path + '/src/frontend/manage/startpage.eta.html'); //, { items: items });
}
export default { get };

16
src/routes/frontend/manage/storageManager.ts
View File

@ -2,12 +2,18 @@ import express, { Request, Response } from 'express';
import { prisma, __path } from '../../../index.js';
function get(req: Request, res: Response) {
prisma.storageUnit.findMany({include: {contactInfo: true}}).then((storUnits) => {
prisma.storageLocation.findMany().then((storLocs) => {
prisma.contactInfo.findMany().then((contactInfos) => {
res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
prisma.storageUnit.findMany({ include: { contactInfo: true } }).then((storUnits) => {
prisma.storageLocation
.findMany({
include: {
storageUnit: true
}
})
.then((storLocs) => {
prisma.contactInfo.findMany().then((contactInfos) => {
res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
});
});
});
});
}

4
src/routes/index.ts
View File

@ -16,9 +16,9 @@ Router.use('/', frontend_routes);
Router.all('*', function (req, res) {
// TODO: Respond based on content-type (with req.is('application/json'))
if (req.is('application/json')) {
res.status(404).json({ errorcode: '404' });
res.status(418)//.json({ errorcode: '404' });
} else {
res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
res.status(418)//.render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
}
});