Add basic bootstrap dashboard with sample data.

allowedStaticPaths.json

@@ -7,7 +7,7 @@
 		"/darkreader/darkreader.js",
 		"/bootstrap-icons/font/fonts/bootstrap-icons.woff2",
 		"/bootstrap/dist/css/bootstrap.min.css.map",
-		"/@popperjs/core/dist/cjs/popper.js"
+		"/@popperjs/core/dist/umd/popper.min.js"
 	],
-	"debugMode": true
+	"debugMode": false
 }

prisma/schema.prisma

@@ -10,14 +10,6 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-enum Category {
-  Light
-  Audio
-  Laptop
-  Adapter
-  Other
-}
-
 enum Status {
   normal
   borrowed
@@ -32,7 +24,8 @@ model Item {
   Comment           String?
   name              String
   manufacturer      String
-  category          Category
+  category          Category         @relation(fields: [categoryId], references: [id])
+  categoryId        Int
   status            Status
   StorageLocation   StorageLocation? @relation(fields: [storageLocationId], references: [id])
   storageLocationId Int?
@@ -58,3 +51,10 @@ model StorageBuilding {
   country         String
   StorageLocation StorageLocation[]
 }
+
+model Category {
+  id          Int     @id @default(autoincrement())
+  name        String
+  description String?
+  Item        Item[]
+}

src/frontend/demopage.eta.html

@@ -1,8 +1,73 @@
-<%~ E.includeFile("head.eta.html", {"title": "Bootstrap Demo Page"}) %>
+<%~ E.includeFile("partials/head.eta.html", {"title": "Bootstrap Demo Page"}) %>
+<%~ E.includeFile("partials/controls.eta.html", {"active": "Orders"}) %>
 
-<div class="alert alert-primary" role="alert">
+
-	A simple primary alert—check it out!
+<h1>
+	Good evening, ${user}
+</h1>
+<div class="container text-center">
+	<div class="row">
+		<div class="card col m-2">
+			<div class="card-body">
+			  <h5 class="card-title">+10</h5>
+			  <p class="card-text">New Stock</p>
+			</div>
+		</div>
+		      <div class="card col m-2">
+			<div class="card-body">
+			  <h5 class="card-title">10</h5>
+			  <p class="card-text">Uncategorized items</p>
+			</div>
+		</div>
+		      <div class="card col m-2">
+			<div class="card-body">
+			  <h5 class="card-title">Everything ok</h5>
+			  <p class="card-text">Instance Status</p>
+			</div>
+		      </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>
       
+      <h2>Recent items</h2>
+      <div class="container">
+	<table class="table">
+		<thead>
+		  <tr>
+		    <th scope="col">#</th>
+		    <th scope="col">Name</th>
+		    <th scope="col">Status</th>
+		    <th scope="col">SKU</th>
+		    <th scope="col">Actions</th>
+		  </tr>
+		</thead>
+		<tbody>
+		  <tr>
+		    <th scope="row">1</th>
+		    <td>Samsung 65W USB-C Ladegerät</td>
+		    <td><span class="badge text-bg-success">Normal</span></td>
+		    <td>DB8031E8</td>
+		    <td><a href="#" class="btn btn-primary">Edit</a></td>
+		  </tr>
+		  <tr>
+		    <th scope="row">2</th>
+		    <td>2.5mm Klinken Verlängerung 40mm</td>
+		    <td><span class="badge text-bg-success">Normal</span></td>
+		    <td>25A1E9DE</td>
+		    <td><a href="#" class="btn btn-primary">Edit</a></td>
+		  </tr>
+		  <tr>
+			<th scope="row">3</th>
+			<td>Elgato Streamdeck XL</td>
+			<td><span class="badge text-bg-danger">Stolen</span></td>
+			<td>9AF2388E</td>
+			<td><a href="#" class="btn btn-primary">Edit</a></td>
+		  </tr>
+		</tbody>
+	      </table>
+	            </div>
 
-<%~ E.includeFile("foot.eta.html") %>
+<%~ E.includeFile("partials/controlsFoot.eta.html") %>
+<%~ E.includeFile("partials/foot.eta.html") %>

src/frontend/foot.eta.html

@@ -1,4 +0,0 @@
-<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-<script src="/static/@popperjs/core/dist/cjs/popper.js"></script>
-</body>
-</html>

src/frontend/index.eta.html

@@ -0,0 +1,6 @@
+<%~ E.includeFile("partials/head.eta.html", {"title": "Bootstrap Demo Page"}) %>
+<%~ E.includeFile("partials/controls.eta.html") %>
+
+<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
+
+<%~ E.includeFile("partials/foot.eta.html") %>

src/frontend/partials/controls.eta.html

@@ -0,0 +1,67 @@
+<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="#">AssetFlow</a>
+	<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" />
+	<div class="navbar-nav">
+		<div class="nav-item text-nowrap">
+			<a class="nav-link px-3" href="#">Sign out</a>
+		</div>
+	</div>
+</header>
+
+<div class="container-fluid">
+	<div class="row">
+		<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+			<div class="position-sticky pt-3">
+				<ul class="nav flex-column">
+					<li class="nav-item">
+						<a class="nav-link active" aria-current="page" href="#"> Dashboard </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Orders </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Products </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Customers </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Reports </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Integrations </a>
+					</li>
+				</ul>
+
+				<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+					<span>Saved reports</span>
+					<a class="link-secondary" href="#" aria-label="Add a new report"> </a>
+				</h6>
+				<ul class="nav flex-column mb-2">
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Current month </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Last quarter </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Social engagement </a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"> Year-end sale </a>
+					</li>
+				</ul>
+			</div>
+		</nav>
+
+		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

src/frontend/partials/controlsFoot.eta.html

@@ -0,0 +1,3 @@
+</main>
+</div>
+</div>

src/frontend/partials/foot.eta.html

@@ -0,0 +1,5 @@
+<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>
+</body>
+</html>

src/frontend/partials/head.eta.html

@@ -15,6 +15,7 @@
 		<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">
+		<link href="css/dashboard.css" rel="stylesheet">
 		
 	</head>
 	<body>

src/index.ts

@@ -3,8 +3,8 @@ import ConfigHandler from './assets/configHandler';
 import express, { Request, Response } from 'express';
 import { PrismaClient } from '@prisma/client';
 import { Status, Category } from '@prisma/client';
-import * as Path from 'path';
+import * as eta from 'eta';
-import * as fs from 'fs';
+
 import routes from './routes/index.js';
 
 // Get app directory.
@@ -26,10 +26,11 @@ export const log = {
 };
 
 // Create a new config instance.
-const config = new ConfigHandler(__path + '/config.json', {
+export const config = new ConfigHandler(__path + '/config.json', {
 	db_connection_string: 'mysql://USER:PASSWORD@HOST:3306/DATABASE',
 	http_listen_address: '127.0.0.1',
-	http_port: 3000
+	http_port: 3000,
+	debug: false
 });
 
 export const prisma = new PrismaClient({
@@ -41,7 +42,11 @@ export const prisma = new PrismaClient({
 });
 
 export const app = express();
-app.engine("html", require("eta").renderFile)
+app.engine("html", eta.renderFile)
+// Configure static https://expressjs.com/de/starter/static-files.html
+// app.use('/static', express.static('public'));
+app.use(express.static(__path + '/static'));
+
 routes(app);
 
 app.listen(config.global.http_port, config.global.http_listen_address, () => {

src/routes/dev/setDemoData.ts

@@ -5,6 +5,7 @@ import { Status, Category } from '@prisma/client';
 export default (req: Request, res: Response) => {
 	// fill database with demo data
 
+	/*
 	prisma.item
 		.create({
 			data: {
@@ -21,5 +22,6 @@ export default (req: Request, res: Response) => {
 		})
 		.catch((err) => {
 			res.send('Error adding demo data: ' + err);
-		});
+		});*/
+	res.send('No data was added');
 };

src/routes/frontend/etaTest.ts

@@ -1,5 +1,4 @@
 import express, { Request, Response } from 'express';
-import * as Eta from 'eta';
 import { prisma, __path } from '../../index.js';
 
 export default (req: Request, res: Response) => {

src/routes/frontend/index.ts

@@ -3,12 +3,12 @@ import express from 'express';
 // Route imports
 import skuRoute from './:id.js';
 import testRoute from './test.js';
-import etaTest from './etaTest.js';
+import etaTestRoute from './etaTest.js';
 
 // Router base is '/'
 const Router = express.Router();
 
-Router.use('/etaTest', etaTest);
+Router.use('/etaTest', etaTestRoute);
 Router.use('/:id(\\w{8})', skuRoute);
 Router.use('/test', testRoute);
 

static/css/dashboard.css

@@ -0,0 +1,100 @@
+body {
+	font-size: 0.875rem;
+}
+
+.feather {
+	width: 16px;
+	height: 16px;
+	vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+	position: fixed;
+	top: 0;
+	/* rtl:raw:
+  right: 0;
+  */
+	bottom: 0;
+	/* rtl:remove */
+	left: 0;
+	z-index: 100; /* Behind the navbar */
+	padding: 48px 0 0; /* Height of navbar */
+	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 767.98px) {
+	.sidebar {
+		top: 5rem;
+	}
+}
+
+.sidebar-sticky {
+	position: relative;
+	top: 0;
+	height: calc(100vh - 48px);
+	padding-top: 0.5rem;
+	overflow-x: hidden;
+	overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+	font-weight: 500;
+	color: #333;
+}
+
+.sidebar .nav-link .feather {
+	margin-right: 4px;
+	color: #727272;
+}
+
+.sidebar .nav-link.active {
+	color: #2470dc;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+	color: inherit;
+}
+
+.sidebar-heading {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+	padding-top: 0.75rem;
+	padding-bottom: 0.75rem;
+	font-size: 1rem;
+	background-color: rgba(0, 0, 0, 0.25);
+	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
+}
+
+.navbar .navbar-toggler {
+	top: 0.25rem;
+	right: 1rem;
+}
+
+.navbar .form-control {
+	padding: 0.75rem 1rem;
+	border-width: 0;
+	border-radius: 0;
+}
+
+.form-control-dark {
+	color: #fff;
+	background-color: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.1);
+}
+
+.form-control-dark:focus {
+	border-color: transparent;
+	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
+}