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

Updated styles and Added storageManager.

Browse Source 
- Dark/White-mode support
- Collapsible navs
- Renamed items template.
- StorageBuilding's are now StorageUnit's
- Formatting, general cleanup, some bug fixing.
This commit is contained in:
Leon Meier 2023-05-12 23:57:21 +02:00
parent 96853debe2
commit 3b1b4f3092
14 changed files with 236 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -1,4 +1,15 @@
# Assetflow # Assetflow
## Theme? Assetflow is an inventory management solution targeted at the event industry.
https://bootswatch.com/darkly/
## Formats and conventions (WiP)
SKU
Stock Keeping Unit
LocID
LocID_Regal16_Fach7
StorageLocation_LocID_Regal16_Fach7

3
allowedStaticPaths.json
View File

@ -9,7 +9,8 @@
"/bootstrap/dist/css/bootstrap.min.css.map", "/bootstrap/dist/css/bootstrap.min.css.map",
"/@popperjs/core/dist/umd/popper.min.js", "/@popperjs/core/dist/umd/popper.min.js",
"/@popperjs/core/dist/umd/popper.min.js.map", "/@popperjs/core/dist/umd/popper.min.js.map",
"/bootstrap/dist/js/bootstrap.bundle.min.js.map" "/bootstrap/dist/js/bootstrap.bundle.min.js.map",
"/bootstrap-icons/font/fonts/bootstrap-icons.woff"
], ],
"debugMode": false "debugMode": false
} }

22
prisma/schema.prisma
View File

@ -13,14 +13,14 @@ datasource db {
// https://github.com/pantharshit00/prisma-docs-generator // https://github.com/pantharshit00/prisma-docs-generator
generator docs { generator docs {
provider = "node node_modules/prisma-docs-generator" provider = "node node_modules/prisma-docs-generator"
output = "../docs" output = "../docs"
} }
// https://github.com/notiz-dev/prisma-dbml-generator // https://github.com/notiz-dev/prisma-dbml-generator
// Viewer: https://dbdiagram.io/d // Viewer: https://dbdiagram.io/d
generator dbml { generator dbml {
provider = "prisma-dbml-generator" provider = "prisma-dbml-generator"
output = "../docs" output = "../docs"
outputName = "schema.dbml" outputName = "schema.dbml"
projectName = "AssetFlow" projectName = "AssetFlow"
} }
@ -34,7 +34,7 @@ enum Status {
model Item { model Item {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
SKU String? @unique SKU String? @unique
Amount Int Amount Int
Comment String? Comment String?
name String name String
@ -50,14 +50,14 @@ model Item {
} }
model StorageLocation { model StorageLocation {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
name String name String @unique
storageBuilding StorageBuilding? @relation(fields: [storageBuildingId], references: [id]) storageUnit StorageUnit? @relation(fields: [storageUnitId], references: [id])
storageBuildingId Int? storageUnitId Int?
Item Item[] Item Item[]
} }
model StorageBuilding { model StorageUnit {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
name String name String
street String street String
@ -70,7 +70,7 @@ model StorageBuilding {
model Category { model Category {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
name String @unique name String @unique
description String? description String?
Item Item[] Item Item[]
} }

6
src/frontend/allItems.eta.html → src/frontend/items.eta.html
View File

@ -5,20 +5,18 @@
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">SKU</th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Status</th> <th scope="col">Status</th>
<th scope="col">SKU</th>
<th scope="col">Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% it.items.forEach(function(user){ %> <% it.items.forEach(function(user){ %>
<tr> <tr>
<th scope="row"><%= user.id %></th> <td><%= user.SKU %></td>
<td><%= user.name %></td> <td><%= user.name %></td>
<td><span class="badge text-bg-success"><%= user.status %></span></td> <td><span class="badge text-bg-success"><%= user.status %></span></td>
<td><%= user.SKU %></td>
<td><a href="#" class="btn btn-primary">Edit</a></td> <td><a href="#" class="btn btn-primary">Edit</a></td>
</tr> </tr>
<% }) %> <% }) %>

75
src/frontend/manage/storageManager.eta.html Normal file
View File

@ -0,0 +1,75 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Storage Manager"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_STORE"}) %>
<h1>Storages</h1>
<ul class="nav nav-underline" id="storageTabList" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="storage-loc-tab"
data-bs-toggle="tab"
data-bs-target="#storage-loc-tab-pane"
type="button"
role="tab"
aria-controls="storage-loc-tab-pane"
aria-selected="true">
<i class="bi bi-bookshelf"></i> Storage Location
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="storage-unit-tab"
data-bs-toggle="tab"
data-bs-target="#storage-unit-tab-pane"
type="button"
role="tab"
aria-controls="storage-unit-tab-pane"
aria-selected="false">
<i class="bi bi-buildings"></i> Storage Unit
</button>
</li>
</ul>
<div class="tab-content" id="storageTabListContent">
<div class="tab-pane fade show active" id="storage-loc-tab-pane" role="tabpanel" aria-labelledby="storage-loc-tab-pane" tabindex="0">
<br>
<div class="row">
<div class="col-12">
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageLocationModal"><i class="bi bi-plus-lg"></i> Create new Location</a>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">LocId</th>
<th scope="col">Name</th>
<th scope="col">Storage Unit</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="storage-unit-tab-pane" role="tabpanel" aria-labelledby="storage-unit-tab-pane" tabindex="0">
<br>
<div class="row">
<div class="col-12">
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageUnitModal"><i class="bi bi-building-add"></i> Create new unit</a>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
</div>
</div>
<script src="/js/editStorages.js"></script>
<%~ E.includeFile("../partials/controlsFoot.eta.html") %> <%~ E.includeFile("../partials/foot.eta.html") %>

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

@ -10,12 +10,9 @@
aria-label="Toggle navigation"> aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </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>
<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="navbar-nav">
<div class="nav-item text-nowrap"> <div class="nav-item text-nowrap">
@ -24,60 +21,59 @@
</div> </div>
</header> </header>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<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 id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"> <div class="toast-header">
<strong class="me-auto">Notification</strong> <strong class="me-auto">Notification</strong>
<small>Just now</small> <small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body" id="toastText"> <div class="toast-body" id="toastText">The button you just pressed is very useless.</div>
The button you just pressed is very useless.
</div>
</div> </div>
</div> </div>
<script> <script>
let texti = 0; 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!'];
const toastLiveExample = document.getElementById('liveToast') const toastLiveExample = document.getElementById('liveToast');
const logoutButton = document.getElementById('logoutButton') const logoutButton = document.getElementById('logoutButton');
logoutButton.addEventListener('click', () => { logoutButton.addEventListener('click', () => {
toastFunction(); toastFunction();
texti++; texti++;
if(texti >= alltexts.length) texti = 0; if (texti >= alltexts.length) texti = 0;
}) });
function toastFunction() { function toastFunction() {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
toastBootstrap.show() toastBootstrap.show();
setTimeout(function(){ toastBootstrap.hide(); document.getElementById("toastText").innerHTML = alltexts[texti] }, 3000); setTimeout(function () {
toastBootstrap.hide();
document.getElementById('toastText').innerHTML = alltexts[texti];
}, 3000);
} }
</script> </script>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
<div class="position-sticky pt-3"> <div class="position-sticky pt-3">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <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> Dashboard </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= it.active == 'AllItems' ? 'active' : ''%>"" href="/items"> <i class="bi bi-list-ul"></i> All Items </a> <a class="nav-link <%= it.active == 'AllItems' ? 'active' : ''%>" href="/items"> <i class="bi bi-list-ul"></i> All Items </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Products </a> <a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Products </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Customers </a> <a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Customers </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Reports </a> <a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Reports </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Integrations </a> <a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Integrations </a>
</li> </li>
</ul> </ul>
@ -96,12 +92,39 @@
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Settings</span> <span>Settings</span>
</h6> </h6>
<!--
<ul class="nav flex-column mb-4"></ul>
-->
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-2">
<li class="nav-item"> <a class="nav-link <%= it.active == 'SETT_STORE' ? 'active' : ''%>" href="/manage/storages"
<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a> ><i class="bi bi-box-seam"></i> Manage storages
</li> <span
</ul> class="<%= it.active == 'SETT_STORE' ? 'active' : ''%>"
type="button"
onclick="return false"
data-bs-toggle="collapse"
data-bs-target="#collapseSettingsStorages"
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
aria-controls="collapseSettingsStorages">
<i class="bi bi-caret-down-fill"></i>
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
</span>
</a>
<div class="collapse <%= it.active == 'SETT_STORE' ? 'show' : ''%>" id="collapseSettingsStorages">
<a class="nav-link ms-4" href="/manage/storages#storage-loc-tab"><i class="bi bi-bookshelf"></i> Manage locations </a>
<a class="nav-link ms-4" href="/manage/storages#storage-unit-tab"><i class="bi bi-buildings"></i> Manage units </a>
</div>
<li class="nav-item">
<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a>
</li>
</ul>
</div> </div>
</nav> </nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%;"> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">
<!-- The main tag needs to be left open! -->

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

@ -1,5 +1,3 @@
<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

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

@ -12,9 +12,34 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<script src="/static/jquery/dist/jquery.min.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/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link href="/css/dashboard.css" rel="stylesheet"> <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>
// 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';
const isLight = currentTheme === 'light';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
if (currentTheme === 'auto') {
if (prefersDark) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else if (prefersLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
} else if (isDark) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else if (isLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
})();
</script>
</head> </head>
<body> <body>

1
src/routes/frontend/dashboard.ts
View File

@ -4,6 +4,7 @@ import { prisma, __path } from '../../index.js';
export default (req: Request, res: Response) => { export default (req: Request, res: Response) => {
// TODO: Fix it? Express behaves like fucking shit with routers and /. Do not ask about it or touch it. EVER! (But if you can fix it a PR is welcome!) // TODO: Fix it? Express behaves like fucking shit with routers and /. Do not ask about it or touch it. EVER! (But if you can fix it a PR is welcome!)
if (req.originalUrl !== '/') { if (req.originalUrl !== '/') {
// TODO: Respond based on content-type (with req.is('application/json'))
res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl }); res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
} else { } else {
prisma.item prisma.item

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

@ -6,7 +6,7 @@ export default (req: Request, res: Response) => {
.findMany({}) .findMany({})
.then((items) => { .then((items) => {
// Count amount of total items // Count amount of total items
res.render(__path + '/src/frontend/allItems.eta.html', { items: items }); res.render(__path + '/src/frontend/items.eta.html', { items: items });
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);

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

@ -4,12 +4,14 @@ import express from 'express';
import testRoute from './test.js'; import testRoute from './test.js';
import csvImportRoute from './import/csvImport.js'; import csvImportRoute from './import/csvImport.js';
import categoryManager from './categoryManager.js'; import categoryManager from './categoryManager.js';
import storageManager from './storageManager.js';
// Router base is '/manage' // Router base is '/manage'
const Router = express.Router({ strict: false }); const Router = express.Router({ strict: false });
Router.use('/test', testRoute); Router.use('/test', testRoute);
Router.use('/categories', categoryManager) Router.use('/categories', categoryManager)
Router.use('/storages', storageManager)
Router.use('/import/csv', csvImportRoute); Router.use('/import/csv', csvImportRoute);
export default Router; export default Router;

15
src/routes/frontend/manage/storageManager.ts Normal file
View File

@ -0,0 +1,15 @@
import express, { Request, Response } from 'express';
import { prisma, __path } from '../../../index.js';
export default (req: Request, res: Response) => {
// prisma.item
// .findMany({})
// .then((items) => {
// Count amount of total items
res.render(__path + '/src/frontend/manage/storageManager.eta.html'); //, { items: items });
// })
// .catch((err) => {
// console.error(err);
// res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
// });
};

17
static/css/dashboard.css
View File

@ -9,11 +9,8 @@ body {
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0; bottom: 0;
/* rtl:remove */
left: 0; left: 0;
z-index: 100; /* Behind the navbar */ z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */ padding: 48px 0 0; /* Height of navbar */
@ -37,12 +34,13 @@ body {
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; /* color: #333; */
color: var(--bs-body-color);
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
margin-right: 4px; margin-right: 4px;
color: #727272; color: var(--bs-body-color);
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
@ -59,6 +57,10 @@ body {
text-transform: uppercase; text-transform: uppercase;
} }
#sidebarMenu {
background-color: var(--bs-secondary-bg);
}
/* /*
* Navbar * Navbar
*/ */
@ -67,7 +69,6 @@ body {
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
font-size: 1rem; font-size: 1rem;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
} }
@ -83,8 +84,6 @@ body {
} }
.form-control-dark { .form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
} }

23
static/js/editStorages.js Normal file
View File

@ -0,0 +1,23 @@
// Javascript to enable link to tab
// This magic js codes enables anchor links to work with bootstrap tabs
// Taken from https://stackoverflow.com/a/9393768/11317151 (and edited, like a lot)
// Also update on location change
window.addEventListener("hashchange", function() {
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
}
}, false);
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
}
// Change hash for page-reload
$('.nav-link').on('click', function (e) {
window.location.hash = e.target.id;
})