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

current state

Browse Source
This commit is contained in:
Leon
2023-05-15 18:49:02 +02:00
parent b5314cb552
commit 3b9813a680
23 changed files with 937 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/dashboard.eta.html
View File

@ -23,7 +23,7 @@
</div>
</div>
</div>
<div class="alert alert-light" role="alert">A new version is available. <a href="#" class="alert-link">Click here to update</a></div>
<!-- TODO: Center table content -->
<h2>Recent items</h2>

8
src/frontend/errors/400.eta.html Normal file
View File

@ -0,0 +1,8 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Error 400"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "error_400"}) %>
<div class="text-center">
<i class="bi bi-bug-fill " style="font-size: 5rem"></i>
<p class="mt-2 mb-0 fs-4">Bad Request!</p>
</div>
<%~ E.includeFile("../partials/controlsFoot.eta.html") %> <%~ E.includeFile("../partials/foot.eta.html") %>

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

@ -1,5 +1,23 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Category"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_CAT"}) %>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Do you really want to delete <strong id="deleteNamePlaceholder">Placeholder</strong>?</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">This will permanently delete the category and all its associated data.<br />Items will be kept but will be unassigned from this category.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancle</button>
<button type="button" class="btn btn-danger" id="deleteActionBtn"><i class="bi bi-trash"></i> Yes, delete.</button>
</div>
</div>
</div>
</div>
<h1>Categories</h1>
<div class="container">
<!-- Create new category button -->
@ -17,8 +35,8 @@
<h1 class="modal-title fs-5" id="createNewCategoryModalLabel">Create a new category</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post">
<form class="frontendForm" method="post" data-target="/api/v1/categories">
<div class="modal-body">
<div class="mb-3">
<label for="createNewCategoryModalName" class="form-label">Name</label>
<input type="text" class="form-control" id="createNewCategoryModalName" name="name" required />
@ -29,13 +47,20 @@
<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />
<div id="createNewCategoryModalDescText" class="form-text">Optional</div>
</div>
</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 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>
<!-- loader overlay -->
<div class="loader-overlay">
<div class="loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@ -47,8 +72,8 @@
<h1 class="modal-title fs-5" id="editCategoryModalLabel">Edit a category</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post">
<form class="frontendForm" method="patch" data-target="/api/v1/categories">
<div class="modal-body">
<div class="mb-3">
<label for="editCategoryModalName" class="form-label">Name</label>
<input type="text" class="form-control" id="editCategoryModalName" name="name" required />
@ -59,25 +84,22 @@
<input type="text" class="form-control" id="editCategoryModalDescription" name="description" />
<div id="editCategoryModalDescText" class="form-text">Optional</div>
</div>
<input type="text" id="editCategoryModalIsEdit" name="editCategoryModalIsEdit" hidden value="isEdit"/>
<input type="text" id="editCategoryModalId" name="editCategoryModalId" 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>
<input type="text" id="editCategoryModalId" 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>
<!-- Table with all categories -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<!-- <th scope="col">#</th> -->
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Action</th>
@ -86,10 +108,12 @@
<tbody>
<% it.items.forEach(function(user){ %>
<tr id="listEntry-<%= user.id %>">
<th scope="row"><%= user.id %></th>
<td><%= user.name %></td>
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.name %></td>
<td><%= user.description %></td>
<td><button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="selectDataForEdit('<%= user.id %>')"><i class="bi bi-pencil"></i></button></td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="getDataForEdit('<%= user.name %>')"><i class="bi bi-pencil"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= user.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>
</tbody>

45
src/frontend/manage/imports/jsonImport.eta.html Normal file
View File

@ -0,0 +1,45 @@
<%~ E.includeFile("../../partials/head.eta.html", {"title": "Importer - JSON" }) %> <%~ E.includeFile("../../partials/controls.eta.html", {"active": "SETT_IMPORT_JSON" }) %>
<h1>JSON Import</h1>
Upload a JSON file to import into the database. The JSON file must have the following columns:
<ul>
<li>name</li>
<li>amount</li>
<li>manufacturer</li>
<li>category</li>
</ul>
The following columns are optional:
<ul>
<li>sku</li>
<li>comment</li>
<li>StorageLocation (import currently not supported)</li>
</ul>
It should be formated as a list of objects, like this:
<pre>
[
{
"name": "Item 1",
"amount": 1,
"manufacturer": "Manufacturer 1",
"category": "Category 1",
"sku": "SKU 1",
"comment": "Comment 1"
},
{
"name": "Item 2",
"amount": 2,
"manufacturer": "Manufacturer 2",
"category": "Category 2",
"sku": "SKU 2",
"comment": "Comment 2"
}
]
</pre>
<form method="post" enctype="multipart/form-data">
<label for="formFile" class="form-label">JSON Inventory File Upload</label>
<input class="form-control" type="file" id="formFile" name="formFile" /><br />
<input type="submit" value="Run import" class="btn btn-primary" />
</form>
<%~ E.includeFile("../../partials/controlsFoot.eta.html") %> <%~ E.includeFile("../../partials/foot.eta.html") %>

11
src/frontend/manage/startpage.eta.html
View File

@ -1,7 +1,7 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT"}) %>
<h1>Manage your AssetFlow instance</h1>
<div class="alert alert-success" role="alert">A new version is available. <a href="#" class="alert-link">Click here to update</a></div>
<div class="container text-center">
<div class="row">
<a class="card col m-2" href="/manage/categories">
@ -15,12 +15,19 @@
<h1 class="card-title"><i class="bi bi-box-seam"></i></h1>
<p class="card-text">Manage storages</p>
</div>
</a><a class="card col m-2" href="/manage/import/csv">
</a>
<a class="card col m-2" href="/manage/import/csv">
<div class="card-body">
<h1 class="card-title"><i class="bi bi-filetype-csv"></i></h1>
<p class="card-text">Import data via CSV</p>
</div>
</a>
<a class="card col m-2" href="/manage/import/json">
<div class="card-body">
<h1 class="card-title"><i class="bi bi-filetype-json"></i></h1>
<p class="card-text">Import data via JSON</p>
</div>
</a>
</div>
</div>

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

@ -1,5 +1,19 @@
<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" href="https://shattereddisk.github.io/rickroll/rickroll.mp4">AssetFlow</a>
<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"
@ -20,6 +34,14 @@
</div>
</div>
</header>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</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">
@ -33,7 +55,7 @@
</div>
<script>
let texti = 0;
alltexts = ['Nope, still useless', 'Stop pressing me!', 'There are NO USERS!', 'Please stop.', 'PLEASE!'];
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', () => {
@ -58,7 +80,7 @@
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link <%= it.active == 'Dashboard' ? 'active' : ''%>" aria-current="page" href="/"> <i class="bi bi-house"></i> Dashboard </a>
<a class="nav-link <%= it.active == 'Dashboard' ? 'active' : ''%>" aria-current="page" href="/"> <i class="bi bi-house"></i> <strong>Dashboard</strong> </a>
</li>
<li class="nav-item">
<a class="nav-link <%= it.active == 'Items' ? 'active' : ''%>" href="/items"> <i class="bi bi-list-ul"></i> Items </a>
@ -78,7 +100,13 @@
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<a href="/manage/" class="nav-link">Settings</a>
<a href="/manage/" class="nav-link"
>Settings
<span class="badge rounded-pill bg-danger invisible">
2
<span class="visually-hidden">changes or updates</span>
</span>
</a>
</h6>
<ul class="nav flex-column mb-2">
@ -92,9 +120,7 @@
data-bs-target="#collapseSettingsStorages"
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
aria-controls="collapseSettingsStorages">
<span class="dropdownIndicator" data-ref-target="#collapseSettingsStorages">
<i class="bi bi-caret-left-fill" ></i>
</span>
<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 -->
</span>
</a>
@ -118,7 +144,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" data-ref-target="#collapseSettingsImport"></i>
<i class="bi bi-caret-left-fill dropdownIndicator magicalTriangle" data-ref-target="#collapseSettingsImport"></i>
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
</span>
</a>

4
src/frontend/partials/controlsFoot.eta.html
View File

@ -1,5 +1,7 @@
</main>
</div>
</div>
<script src="/js/searchBox.js"></script>
<script src="/js/handleSidebarTriangles.js"></script>
<script src="/js/handleSidebarTriangles.js"></script>
<script src="/js/formHandler.js"></script>

1
src/frontend/partials/foot.eta.html
View File

@ -1,4 +1,3 @@
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script>
// Enable all bootstrap tooltips.
// https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips

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

@ -17,6 +17,7 @@
<link href="/css/dashboard.css" rel="stylesheet" />
<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
<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.

109
src/routes/api/v1/categories.ts Normal file
View File

@ -0,0 +1,109 @@
import { Request, Response } from 'express';
import { prisma, __path, log } from '../../../index.js';
// Get category.
function get(req: Request, res: Response) {
// Check if required fields are present.
if (!req.query.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
prisma.itemCategory
.findUnique({
where: {
name: req.query.name.toString()
}
})
.then((item) => {
if (item) {
res.status(200).json(JSON.stringify(item));
} else {
res.status(410).json({error: 'Item does not exist'});
}
})
.catch((err) => {
console.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
// Create category.
function post(req: Request, res: Response) {
// Check if required fields are present.
if (!req.body.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
// Save data.
prisma.itemCategory
.create({
data: {
name: req.body.name,
description: req.body.description
}
})
.then(() => {
res.status(201).json({ status: 'created' });
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
// Update category.
function patch(req: Request, res: Response) {
// Check if required fields are present.
if (!req.body.id || !req.body.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
prisma.itemCategory
.update({
where: {
id: parseInt(req.body.id)
},
data: {
name: req.body.name,
description: req.body.description
}
})
.then(() => {
res.status(201).json({ status: 'updated' });
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
// Delete category.
function del(req: Request, res: Response) {
// Check if required fields are present.
if (!req.body.id) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
prisma.itemCategory
.delete({
where: {
id: parseInt(req.body.id)
}
})
.then(() => {
res.status(201).json({ status: 'deleted' });
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
export default { get, post, patch, del };

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

@ -2,11 +2,12 @@ import express from 'express';
// Route imports
import testRoute from './test.js';
import categoryRoute from './categories.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);
Router.route('/test').get(testRoute.get);
export default Router;

53
src/routes/frontend/manage/categoryManager.ts
View File

@ -1,4 +1,4 @@
import express, { Request, Response } from 'express';
import { Request, Response } from 'express';
import { prisma, __path, log } from '../../../index.js';
function get(req: Request, res: Response) {
@ -15,53 +15,4 @@ function get(req: Request, res: Response) {
});
}
function post(req: Request, res: Response) {
console.log(req.body);
// Check if required fields are filled in
if (!req.body.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
if (!req.body.editCategoryModalIsEdit) {
console.log('is not edit');
// Save data to category table
prisma.itemCategory
.create({
data: {
name: req.body.name,
description: req.body.description
}
})
.then(() => {
res.redirect('categories');
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
} else {
// Save data to category table
prisma.itemCategory
.update({
where: {
id: parseInt(req.body.editCategoryModalId)
},
data: {
name: req.body.name,
description: req.body.description
}
})
.then(() => {
res.redirect('categories');
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
}
export default { get, post };
export default { get };

102
src/routes/frontend/manage/import/jsonImport.ts Normal file
View File

@ -0,0 +1,102 @@
import express, { Request, Response } from 'express';
import { prisma, __path, log } from '../../../../index.js';
import { UploadedFile } from 'express-fileupload';
import { itemStatus, itemCategory, PrismaPromise } from '@prisma/client';
function post(req: Request, res: Response) {
// Handle file upload and import
console.log(req.files);
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
const file: UploadedFile = req.files.formFile as UploadedFile;
const jsonRaw = file.data.toString();
const json = JSON.parse(jsonRaw);
// Get all unqiue categories
const categories = new Set<string>();
json.forEach((item: any) => {
categories.add(item.category);
});
log.db.debug(categories);
prisma.itemCategory
.findMany({
where: {
name: {
in: Array.from(categories)
}
}
})
.then((values) => {
values.forEach((value) => {
categories.delete(value.name);
});
log.db.debug(categories);
const categoryPromises: PrismaPromise<itemCategory>[] = [];
categories.forEach((category: string) => {
const promise = prisma.itemCategory.create({
data: {
name: category,
description: ''
}
});
categoryPromises.push(promise);
});
Promise.all(categoryPromises)
.then((values) => {
// Create items
const listOfPromises = [];
for (let i = 0; i < json.length; i++) {
const record = json[i];
const promise = prisma.item.create({
data: {
name: record.name,
amount: parseInt(record.amount),
comment: record.comment,
category: {
connect: {
name: record.category,
}
},
SKU: record.sku,
manufacturer: record.manufacturer,
status: itemStatus.normal,
importedBy: 'CSV_IMPORT'
}
});
listOfPromises.push(promise);
}
Promise.all(listOfPromises)
.then((values) => {
console.log(values);
res.send('ok');
})
.catch((err) => {
res.send('failed to create items');
log.db.error(err);
return;
});
})
.catch((err) => {
// res.send('failed to create categories');
log.db.error(err);
});
})
.catch((err) => {
res.send('failed to find categories');
log.db.error(err);
return;
});
// res.status(501).end("Not implemented yet");
}
function get(req: Request, res: Response) {
// Render page
res.render(__path + '/src/frontend/manage/imports/jsonImport.eta.html');
}
export default { get, post };

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

@ -3,6 +3,7 @@ import express from 'express';
// Route imports
import testRoute from './test.js';
import csvImportRoute from './import/csvImport.js';
import jsonImportRoute from './import/jsonImport.js';
import categoryManager from './categoryManager.js';
import storageManager from './storageManager.js';
import startpageRoute from './startpage.js';
@ -11,9 +12,10 @@ import startpageRoute from './startpage.js';
const Router = express.Router({ strict: false });
Router.route('/test').get(testRoute.get);
Router.route('/categories').get(categoryManager.get).post(categoryManager.post);
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('/').get(startpageRoute.get);
export default Router;

5
src/sass/dashboard-mod.scss Normal file
View File

@ -0,0 +1,5 @@
.magicalTriangle[aria-expanded=true] {
transform: rotate(180deg);
transition: transform 0.3s ease;
}