added url, apikey to lockscreen

.gitignore

@@ -4,3 +4,6 @@ dist/
 .env
 config.json
 .vsls.json
+
+images/*.png
+!images/default.png

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "1.0.0",
 			"license": "GPL-3.0",
 			"dependencies": {
+				"@hapi/bourne": "^3.0.0",
 				"@prisma/client": "^6.4.1",
 				"bootstrap-icons": "^1.11.3",
 				"bulma": "^1.0.3",
@@ -587,6 +588,12 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@hapi/bourne": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-3.0.0.tgz",
+			"integrity": "sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",

package.json

@@ -33,6 +33,7 @@
 		"typescript": "^5.8.2"
 	},
 	"dependencies": {
+		"@hapi/bourne": "^3.0.0",
 		"@prisma/client": "^6.4.1",
 		"bootstrap-icons": "^1.11.3",
 		"bulma": "^1.0.3",

prisma/schema.prisma

@@ -17,11 +17,12 @@ model user {
   id   Int    @id @unique @default(autoincrement())
   name String @unique
   code String?
+  email String?
 
   // TODO: Prüfen ob nötig, erstmal vorbereitet.
   transactions transactions[]
 
-  @@fulltext([name])
+  @@fulltext([name, email])
 } 
 
 model transactions {
@@ -32,9 +33,9 @@ model transactions {
   user   user @relation(fields: [userId], references: [id])
   userId Int
 
-  total Float
+  total     Decimal @db.Decimal(8,2)
   paid      Boolean @default(false)
-  paidAt    Boolean?
+  paidAt    DateTime?
   createdAt DateTime @default(now())
 
 }
@@ -54,7 +55,7 @@ model products {
   id   Int    @id @unique @default(autoincrement())
   gtin String @unique // Dont try to use BigInt -> https://github.com/prisma/studio/issues/614
   name String @unique
-  price Decimal @db.Decimal(5,2) // FIXME: input:  77.80 -> output: 77.8
+  price Decimal @db.Decimal(8,2)
   stock Int
   visible Boolean @default(true)
 
@@ -62,3 +63,5 @@ model products {
 
   @@fulltext([name])
 }
+
+// TODO: migrate all ids to uuid?

src/handlers/config.ts

@@ -1,16 +1,30 @@
-import log from './log.js';
 import ConfigManager from '../libs/configManager.js';
 import __path from './path.js';
 import _ from 'lodash';
 
 // Create a new config instance.
 const config = new ConfigManager(__path + '/config.json', true, {
-	db_connection_string: 'mysql://USER:PASSWORD@HOST:3306/DATABASE',
-	http_listen_address: '0.0.0.0',
-	http_port: 3000,
-	http_domain: 'example.org',
-	http_enable_hsts: false,
-	devmode: true
+//	db_connection_string: 'mysql://USER:PASSWORD@HOST:3306/DATABASE',
+	http: {
+		listen_address: '0.0.0.0',
+		port: 3000,
+		domain: 'example.org',
+		enable_hsts: false,
+		enable_csp: false
+	},
+	mysql: {
+		host: '',
+		port: 3306,
+		user: '',
+		password: '',
+		database: 'hydrationhub'
+	},
+	devmode: false,
+	devmode_fileupload: false,
+	galleryApiKey: '',
 });//, log.core); // Disabled due to Cyclic dependencies with log handler (specifically-> devmode for loglevel)
 
+
+
+
 export default config;

src/handlers/db.ts

@@ -1,13 +1,27 @@
 import { PrismaClient, Prisma } from '@prisma/client'; // Database
 import { Response } from 'express';
 import config from './config.js';
+import __path from './path.js';
 import log from './log.js';
+import fs from 'fs';
+import path from 'path';
+
+// Generate .env file for Prisma commands
+const dotEnvPath = path.join(__path, '/.env')
+const dotEnvExist = !fs.existsSync(dotEnvPath);
+
+fs.writeFileSync(dotEnvPath, `DATABASE_URL="mysql://${config.global.mysql.user}:${config.global.mysql.password}@${config.global.mysql.host}:${config.global.mysql.port}/${config.global.mysql.database}"`);
+log.core.info('Generated .env file for Prisma.');
+if (dotEnvExist) {
+	log.db.error('Please run "npx prisma db push" to synchronize the database.');
+	process.exit(1);
+}
 
 // TODO: Add errorhandling with some sort of message.
 const prisma = new PrismaClient({
 	datasources: {
 		db: {
-			url: config.global.db_connection_string
+			url: `mysql://${config.global.mysql.user}:${config.global.mysql.password}@${config.global.mysql.host}:${config.global.mysql.port}/${config.global.mysql.database}`
 		}
 	}
 });
@@ -17,7 +31,6 @@ export function handlePrismaError(errorObj: any, res: Response, source: string)
 	log.db.error(source, errorObj);
 	if (errorObj instanceof Prisma.PrismaClientKnownRequestError) {
 		switch (errorObj.code) {
-
 			// P2002 -> "Unique constraint failed on the {constraint}"
 			case 'P2002':
 				res.status(409).json({ status: 'ERROR', errorcode: 'DB_ERROR', message: 'The object needs to be unique', meta: errorObj.meta });
@@ -45,3 +58,10 @@ export function handlePrismaError(errorObj: any, res: Response, source: string)
 export default prisma;
 
 //FIXME: https://www.prisma.io/docs/orm/prisma-client/special-fields-and-types/null-and-undefined
+
+
+// // Simulate a Prisma error for testing purposes
+// throw new Prisma.PrismaClientKnownRequestError(
+// 	'Simulated Prisma error for testing',
+// 	{ code: 'P2000', clientVersion: 'unknown' } // Example error parameters
+// );

src/handlers/validation.ts

@@ -0,0 +1,23 @@
+import Bourne from '@hapi/bourne';
+import Joi from 'joi';
+
+const validator = Joi.extend((joi) => ({
+	type: 'array',
+	base: Joi.array(),
+	coerce: {
+		from: 'string',
+		method(value, helpers) {
+			if (typeof value !== 'string' || (value[0] !== '[' && !/^\s*\[/.test(value))) {
+				return { value };
+			}
+
+			try {
+				return { value: Bourne.parse(value) };
+			} catch (ignoreErr) {
+				return { value };
+			}
+		}
+	}
+}));
+
+export default validator;

src/helpers/prisma_helpers.ts

@@ -7,6 +7,7 @@
  * @returns {object}
  */
 export function parseDynamicSortBy(SortField: string, Order: string) {
+	// TODO: { [value.sort.toString()]: value.order.toString() }
 	return JSON.parse(`{ "${SortField}": "${Order}" }`);
 }
 

src/index.ts

@@ -11,7 +11,7 @@ import config from './handlers/config.js';
 // Express & more
 import express from 'express';
 import helmet from 'helmet';
-//import fileUpload from 'express-fileupload';
+import fileUpload from 'express-fileupload';
 import bodyParser from 'body-parser';
 import { Eta, Options } from 'eta';
 
@@ -61,15 +61,15 @@ app.set('view engine', 'eta');
 
 // MARK: Express Middleware & Config
 app.set('x-powered-by', false); // helmet does this too. But not in devmode
-if (!config.global.devmode) {
+if (!config.global.devmode && config.global.http.enable_csp) {
 	app.use(
 		helmet({
-			strictTransportSecurity: config.global.http_enable_hsts,
+			strictTransportSecurity: config.global.http.enable_hsts,
 			contentSecurityPolicy: {
 				useDefaults: false,
 				directives: {
 					defaultSrc: ["'self'"],
-					scriptSrc: ["'self'", config.global.http_domain],
+					scriptSrc: ["'self'", config.global.http.domain],
 					objectSrc: ["'none'"],
 					upgradeInsecureRequests: config.global.devmode ? null : []
 				}
@@ -78,19 +78,20 @@ if (!config.global.devmode) {
 	); // Add headers
 }
 
-//app.use(fileUpload());
+app.use(fileUpload({ useTempFiles: false, debug: config.global.devmode_fileupload }));
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 
 app.use(routes);
 
 // TODO: Remove hardcoded http
-app.listen(config.global.http_port, config.global.http_listen_address, () => {
-	log.web.info(`Listening at http://${config.global.http_listen_address}:${config.global.http_port}`);
+app.listen(config.global.http.port, config.global.http.listen_address, () => {
+	log.web.info(`Listening at http://${config.global.http.listen_address}:${config.global.http.port}`);
 });
 
 log.core.trace('Running from path: ' + __path);
-config.global.devmode && log.core.error('DEVMODE ACTIVE! Do NOT use this in prod!');
+config.global.devmode && log.core.error('DEVMODE ACTIVE! Do NOT use this in prod! (silly/trace/debug logging enabled, test route enabled, security features disabled )');
+config.global.devmode_fileupload && log.core.error('DEVMODE ACTIVE! Do NOT use this in prod! (express-fileupload debug mode)');
 
 
 // MARK: Helper Functions

src/routes/api/index.ts

@@ -1,11 +1,11 @@
 import express from 'express';
 
 // Route imports
-import v1_routes from './v1/index.js';
+import v1_router from './v1/index.js';
 
 // Router base is '/api'
 const Router = express.Router({ strict: false });
 
-Router.use('/v1', v1_routes);
+Router.use('/v1', v1_router);
 
 export default Router;

src/routes/api/v1/image/image.ts

@@ -1,10 +1,12 @@
 import { Request, Response } from 'express';
 import path from 'node:path';
 import fs from 'node:fs';
+
 import db, { handlePrismaError } from '../../../../handlers/db.js'; // Database
 import log from '../../../../handlers/log.js';
 import __path from '../../../../handlers/path.js';
 import { schema_get, schema_post, schema_del } from './image_schema.js';
+import { UploadedFile } from 'express-fileupload';
 
 // MARK: GET image
 async function get(req: Request, res: Response) {
@@ -14,6 +16,21 @@ async function get(req: Request, res: Response) {
 		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
 	} else {
 		log.api?.debug('GET image Success:', req.query, value);
+		const img_path = path.join(__path, 'images', `${value.id}.png`);
+		const img_default_path = path.join(__path, 'images', 'default.png');
+
+		const img_existing = fs.existsSync(img_path);
+		const img_default_existing = fs.existsSync(img_default_path);
+
+		if (value.check) {
+			res.status(200).json(img_existing);
+			return;
+		}
+
+		if (!img_default_existing) {
+			log.api?.warn('Default image not found! Please make sure the following path contains an png file:', img_default_path);
+		}
+
 		await db.products
 			.findUnique({
 				where: {
@@ -22,49 +39,64 @@ async function get(req: Request, res: Response) {
 			})
 			.then((result) => {
 				if (result) {
-					const img_path = path.join(__path, 'images', `${value.id}.png`);
 					// Serve stored or default image
-					fs.existsSync(img_path) ? res.sendFile(img_path) : res.sendFile(path.join(__path, 'images', 'default.png'));
+					log.api?.debug('Image exists:', img_existing);
+					img_existing ? res.sendFile(img_path) : res.sendFile(img_default_path);
 				} else {
 					// Product does not exist
-					res.sendFile(path.join(__path, 'images', 'default.png'));
+					log.api?.debug('Product does not exist, using default image ');
+					res.sendFile(img_default_path);
 				}
 			})
 			.catch((err) => {
-				handlePrismaError(err, res, 'GET image_provider');
+				handlePrismaError(err, res, 'GET image');
 			});
 	}
 }
 
-// MARK: CREATE image (upload)
+// MARK: CREATE/UPDATE image (upload)
 async function post(req: Request, res: Response) {
 	const { error, value } = schema_post.validate(req.query);
 	if (error) {
 		log.api?.debug('POST image Error:', req.query, value, error.details[0].message);
 		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
 	} else {
-		log.api?.debug('POST image Success:', req.query, value);
+		// Check if multipart has image with file
+		if (!req.files || !req.files.image) {
+			res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: 'Missing image' });
+			return;
+		}
 
-		// 	if (!req.files || Object.keys(req.files).length === 0) {
-		// 		res.status(400).send('No files were uploaded.');
-		// 	}
+		const upload_file = req.files.image as UploadedFile;
+		const upload_path = path.join(__path, 'images', `${value.id}.png`);
+		const allowedMimeTypes = ['image/png'];
 
-		// 	const upload_file = req.files?.file;
-		// 	let upload_path;
+		// Check if mimetype is allowed
+		if (!allowedMimeTypes.includes(upload_file.mimetype)) {
+			res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: 'Only image/png is allowed' });
+			return;
+		}
+		// Check if product exists
+		const result = await db.products.findUnique({
+			where: {
+				id: value.id
+			}
+		});
 
-		// 	//uploadPath = __dirname + '/somewhere/on/your/server/' + sampleFile.name;
+		if (!result) {
+			res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified product' });
+			return;
+		}
 
-		// 	const allowedMimeTypes = ['image/png', 'image/jpeg'];
-		// 	// if (!allowedMimeTypes.includes(upload_file.mimetype)) {
-		// 	// 	return res.status(400).send('Invalid file type. Only PNG and JPEG are allowed.');
-		// 	// }
-
-		// 	uploadedFile.mv(`/path/to/save/${uploadedFile.name}`, (err) => {
-		// 		if (err) {
-		// 		    return res.status(500).send(err);
-		// 		}
-
-		// 		res.send('File uploaded!');
+		// Write file
+		upload_file.mv(upload_path, (err) => {
+			if (err) {
+				res.status(500).json({ status: 'ERROR', errorcode: 'IO_ERROR', message: 'Could not write image to disk' });
+				return;
+			}
+			log.api?.debug('File uploaded to:', upload_path);
+			res.status(200).json({ status: 'CREATED', message: 'Successfully uploaded image', id: result.id });
+		});
 	}
 }
 
@@ -76,18 +108,34 @@ async function del(req: Request, res: Response) {
 		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
 	} else {
 		log.api?.debug('DEL image Success:', req.query, value);
-		// await db.products
-		// 	.delete({
-		// 		where: {
-		// 			id: value.id
-		// 		}
-		// 	})
-		// 	.then((result) => {
-		// 		res.status(200).json({ status: 'DELETED', message: 'Successfully deleted product', id: result.id });
-		// 	})
-		// 	.catch((err) => {
-		// 		handlePrismaError(err, res, 'DEL products');
-		// 	});
+		const del_path = path.join(__path, 'images', `${value.id}.png`);
+		await db.products
+			.findUnique({
+				where: {
+					id: value.id
+				}
+			})
+			.then((result) => {
+				if (result) {
+					if (!fs.existsSync(del_path)) {
+						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Product exists but no image found' });
+						return;
+					}
+					fs.unlink(del_path, (err) => {
+						if (err) {
+							res.status(500).json({ status: 'ERROR', errorcode: 'IO_ERROR', message: 'Could not delete image' });
+							return;
+						}
+						res.status(200).json({ status: 'DELETED', message: 'Successfully deleted image', id: result.id });
+						log.api?.debug('File removed from:', del_path);
+					});
+				} else {
+					res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified product (image)' });
+				}
+			})
+			.catch((err) => {
+				handlePrismaError(err, res, 'DEL products');
+			});
 	}
 }
 

src/routes/api/v1/image/image_schema.ts

@@ -3,22 +3,25 @@ import validator from 'joi'; // DOCS: https://joi.dev/api
 
 // MARK: GET image
 const schema_get = validator.object({
-	id: validator.number().positive().precision(0)
+	id: validator.number().positive().precision(0).default(0).note('product id'), // id 0 should never exist, since id autoincrement starts at 1
+	check: validator.boolean().default(false)
 });
 
-// MARK: CREATE image
+// MARK: CREATE / UPDATE image
 const schema_post = validator.object({
-	id: validator.number().positive().precision(0)
+	id: validator.number().positive().precision(0).required().note('product id')
+	//image: validator.string().required().note('product image as multipart/form-data')
 });
 
 // MARK: DELETE products
 const schema_del = validator.object({
-	id: validator.number().positive().precision(0)
+	id: validator.number().positive().precision(0).required().note('product id')
 });
 
 // Describe all schemas
 const schema_get_desc = schema_get.describe();
 const schema_post_desc = schema_post.describe();
+const schema_patch_desc = schema_post.describe(); // Just for show (POST = PATCH)
 const schema_del_desc = schema_del.describe();
 
 // GET route
@@ -26,6 +29,7 @@ export default async function get(req: Request, res: Response) {
 	res.status(200).json({
 		GET: schema_get_desc,
 		POST: schema_post_desc,
+		PATCH: schema_patch_desc,
 		DELETE: schema_del_desc
 	});
 }

src/routes/api/v1/index.ts

@@ -1,8 +1,8 @@
 import express from 'express';
 
 // Route imports
-import testRoute from './test.js';
-import versionRoute from './version.js';
+import test_route from './test.js';
+import version_route from './version.js';
 
 import user_route from './user/user.js';
 import user_schema from './user/user_schema.js';
@@ -16,6 +16,9 @@ import products_schema from './products/products_schema.js';
 import image_route from './image/image.js';
 import image_schema from './image/image_schema.js';
 
+import transaction_route from './transaction/transaction.js';
+import transaction_schema from './transaction/transaction_schema.js';
+
 // Router base is '/api/v1'
 const Router = express.Router({ strict: false });
 
@@ -29,6 +32,16 @@ Router.use('*', function (req, res, next) {
 	next();
 });
 
+// All empty strings are undefined (not null!) values (query)
+Router.use('*', function (req, res, next) {
+	for (let key in req.query) {
+		if (req.query[key] === '') {
+			req.query[key] = undefined;
+		}
+	}
+	next();
+});
+
 // All api routes lowercase! Yea I know but when strict: true it matters.
 Router.route('/user').get(user_route.get).post(user_route.post).patch(user_route.patch).delete(user_route.del);
 Router.route('/user/describe').get(user_schema);
@@ -39,10 +52,13 @@ Router.route('/user/codecheck/describe').get(user_codecheck_schema);
 Router.route('/products').get(products_route.get).post(products_route.post).patch(products_route.patch).delete(products_route.del);
 Router.route('/products/describe').get(products_schema);
 
-Router.route('/image').get(image_route.get).post(image_route.post).delete(image_route.del);
-Router.route('/image/describe').get(image_schema); // TODO: Checken, ob das probleme mit dem image_provider endpoint macht.
+Router.route('/image').get(image_route.get).post(image_route.post).patch(image_route.post).delete(image_route.del); // POST and PATCH are handled in 'image_route.post'
+Router.route('/image/describe').get(image_schema);
 
-Router.route('/version').get(versionRoute.get);
-Router.route('/test').get(testRoute.get);
+Router.route('/transaction').get(transaction_route.get).post(transaction_route.post).patch(transaction_route.patch).delete(transaction_route.del);
+Router.route('/transaction/describe').get(transaction_schema);
+
+Router.route('/version').get(version_route.get);
+Router.route('/test').get(test_route.get);
 
 export default Router;

src/routes/api/v1/products/products.ts

@@ -86,7 +86,6 @@ async function post(req: Request, res: Response) {
 		await db.products
 			.create({
 				data: {
-					id: value.id,
 					gtin: value.gtin,
 					name: value.name,
 					price: value.price,

src/routes/api/v1/transaction/transaction.ts

@@ -0,0 +1,265 @@
+import { Request, Response } from 'express';
+import db, { handlePrismaError } from '../../../../handlers/db.js'; // Database
+import log from '../../../../handlers/log.js';
+import { parseDynamicSortBy } from '../../../../helpers/prisma_helpers.js';
+import { schema_get, schema_post, schema_patch, schema_del } from './transaction_schema.js';
+import { Prisma } from '@prisma/client';
+
+class AbortError extends Error {
+	constructor(public http_status: number, public status: string, public errorcode: string, public message: string, public details?: any) {
+		super(message);
+		this.name = 'AbortError';
+	}
+}
+
+// MARK: GET transaction
+async function get(req: Request, res: Response) {
+	const { error, value } = schema_get.validate(req.query);
+	if (error) {
+		log.api?.debug('GET transaction Error:', req.query, value, error.details[0].message);
+		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
+	} else {
+		log.api?.debug('GET transaction Success:', req.query, value);
+
+		if (value.id !== undefined || value.user_id !== undefined) {
+			// get by id or user_id
+			await db
+				.$transaction([
+					// Same query for count and findMany
+					db.transactions.count({
+						where: {
+							OR: [{ id: value.id }, { userId: value.user_id }],
+							paid: value.paid
+						},
+						orderBy: parseDynamicSortBy(value.sort.toString(), value.order.toString()),
+						skip: value.skip,
+						take: value.take
+					}),
+					db.transactions.findMany({
+						where: {
+							OR: [{ id: value.id }, { userId: value.user_id }],
+							paid: value.paid
+						},
+						orderBy: parseDynamicSortBy(value.sort.toString(), value.order.toString()),
+						skip: value.skip,
+						take: value.take
+					})
+				])
+				.then(([count, result]) => {
+					if (result.length !== 0) {
+						res.status(200).json({ count, result });
+					} else {
+						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified transaction' });
+					}
+				})
+				.catch((err) => {
+					handlePrismaError(err, res, 'GET transaction');
+				});
+		} else {
+			// get all
+			await db
+				.$transaction([
+					// Same query for count and findMany
+					db.transactions.count({
+						where: {
+							paid: value.paid
+						},
+						orderBy: parseDynamicSortBy(value.sort.toString(), value.order.toString()),
+						skip: value.skip,
+						take: value.take
+					}),
+					db.transactions.findMany({
+						where: {
+							paid: value.paid
+						},
+						orderBy: parseDynamicSortBy(value.sort.toString(), value.order.toString()),
+						skip: value.skip,
+						take: value.take
+					})
+				])
+				.then(([count, result]) => {
+					if (result.length !== 0) {
+						res.status(200).json({ count, result });
+					} else {
+						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified transaction' });
+					}
+				})
+				.catch((err) => {
+					handlePrismaError(err, res, 'GET transaction');
+				});
+		}
+	}
+}
+
+// MARK: CREATE transaction
+async function post(req: Request, res: Response) {
+	const { error, value } = schema_post.validate(req.body);
+	if (error) {
+		log.api?.debug('POST transaction Error:', req.body, value, error.details[0].message);
+		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
+	} else {
+		log.api?.debug('POST transaction Success:', req.body, value);
+
+		const products: Array<number> = value.products;
+		const outOfStockProducts: { id: number; name: string }[] = [];
+		const notFoundProducts: { id: number; name: string }[] = [];
+		const salesData: { productId: number; price: number }[] = [];
+		let total = new Prisma.Decimal(0);
+
+		// Start Prisma transaction
+		await db
+			.$transaction(async (prisma) => {
+				// Iterate over all products for this transaction(not prisma)
+				for (let i = 0; i < products.length; i++) {
+					log.api?.debug('Product:', i + 1, 'of', products.length, '(Loop)');
+
+					// Get product (price, stock, name)
+					const product = await prisma.products.findUnique({
+						where: { id: products[i] },
+						select: { price: true, stock: true, name: true }
+					});
+
+					// Check if product exists
+					if (product) {
+						log.api?.debug('Price:', product.price, '[Name:' + product.name + ']', '[ID:' + products[i] + ']');
+
+						if (product.stock > 0) {
+							// Add price of current product to total
+							total = total.add(product.price);
+
+							// Add product to salesData -> Later generate sales entry for each product
+							salesData.push({
+								productId: products[i],
+								price: Number(product.price)
+							});
+
+							// Reduce stock by 1
+							await prisma.products.update({
+								where: { id: products[i] },
+								data: { stock: { decrement: 1 } }
+							});
+						} else {
+							// Product is out of stock
+							outOfStockProducts.push({ id: products[i], name: product.name });
+						}
+					} else {
+						// Product not found
+						notFoundProducts.push({ id: products[i], name: 'unknown' });
+					}
+				}
+
+				log.api?.debug('Total:', total.toFixed(2));
+
+				// Abort the Prisma transaction if there are not existing products
+				if (notFoundProducts.length > 0) {
+					log.api?.debug('Aborting. missing products:', notFoundProducts);
+
+					throw new AbortError(
+						400, // http_status
+						'ERROR', // status
+						'NOT_FOUND', // errorcode
+						'Some of the products included in the transaction do not exist, therefore the transaction has not been processed.', // message
+						notFoundProducts // details
+					);
+				}
+
+				// Abort the Prisma transaction if there are products with insufficient stock
+				if (outOfStockProducts.length > 0) {
+					log.api?.debug('Aborting. out of stock products:', outOfStockProducts);
+					throw new AbortError(
+						400, // http_status
+						'ERROR', // status
+						'OUT_OF_STOCK', // errorcode
+						'Some of the products included in the transaction are out of stock, therefore the transaction has not been processed.', // message
+						outOfStockProducts // details
+					);
+				}
+
+				// Create transaction with salesData
+				const transaction = await prisma.transactions.create({
+					data: {
+						userId: value.user_id,
+						total: total,
+						paid: false,
+						sales: {
+							create: salesData
+						}
+					},
+					select: {
+						id: true
+					}
+				});
+
+				// Everything went well
+				res.status(201).json({ status: 'CREATED', message: 'Successfully created transaction', id: transaction.id });
+			})
+			.catch((err) => {
+				if (err instanceof AbortError) {
+					res.status(err.http_status).json({
+						status: err.status,
+						errorcode: err.errorcode,
+						message: err.message,
+						details: err.details
+					});
+				} else {
+					handlePrismaError(err, res, 'POST transaction');
+				}
+			});
+	}
+}
+
+// MARK: UPDATE transaction
+async function patch(req: Request, res: Response) {
+	const { error, value } = schema_patch.validate(req.body);
+	if (error) {
+		log.api?.debug('PATCH transaction Error:', req.body, value, error.details[0].message);
+		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
+	} else {
+		log.api?.debug('PATCH transaction Success:', req.body, value);
+		await db.transactions
+			.update({
+				where: {
+					id: value.id
+				},
+				data: {
+					userId: value.user_id,
+					paid: value.paid,
+					paidAt: value.paid ? new Date() : undefined
+				},
+				select: {
+					id: true
+				}
+			})
+			.then((result) => {
+				res.status(200).json({ status: 'UPDATED', message: 'Successfully updated transaction', id: result.id });
+			})
+			.catch((err) => {
+				handlePrismaError(err, res, 'PATCH transaction');
+			});
+	}
+}
+
+// MARK: DELETE transaction
+async function del(req: Request, res: Response) {
+	const { error, value } = schema_del.validate(req.body);
+	if (error) {
+		log.api?.debug('DEL transaction Error:', req.body, value, error.details[0].message);
+		res.status(400).json({ status: 'ERROR', errorcode: 'VALIDATION_ERROR', message: error.details[0].message });
+	} else {
+		log.api?.debug('DEL transaction Success:', req.body, value);
+		await db.transactions
+			.delete({
+				where: {
+					id: value.id
+				}
+			})
+			.then((result) => {
+				res.status(200).json({ status: 'DELETED', message: 'Successfully deleted transaction', id: result.id });
+			})
+			.catch((err) => {
+				handlePrismaError(err, res, 'DEL transaction');
+			});
+	}
+}
+
+export default { get, post, patch, del };

src/routes/api/v1/transaction/transaction_schema.ts

@@ -0,0 +1,59 @@
+import { Request, Response } from 'express';
+//import validator from 'joi'; // DOCS: https://joi.dev/api
+import validator from '../../../../handlers/validation.js';
+import { Prisma } from '@prisma/client';
+
+// MARK: GET transaction
+const schema_get = validator
+	.object({
+		sort: validator
+			.string()
+			.valid(...Object.keys(Prisma.TransactionsScalarFieldEnum))
+			.default('id'),
+
+		order: validator.string().valid('asc', 'desc').default('asc'),
+		take: validator.number().min(1).max(512),
+		skip: validator.number().min(0),
+
+		id: validator.number().positive().precision(0),
+		user_id: validator.number().positive().precision(0),
+		paid: validator.boolean().note('true-> Only paid / false-> Only unpaid / undefined-> both')
+	})
+	.nand('id', 'user_id'); // Allow id or user_id. not both.
+
+// MARK: CREATE transaction
+const schema_post = validator.object({
+	products: validator.array().items(validator.number().positive().precision(0)).required(),
+	user_id: validator.number().positive().precision(0).required(),
+	paid: validator.boolean().default(false)
+});
+
+// MARK: UPDATE transaction
+const schema_patch = validator.object({
+	id: validator.number().positive().precision(0).required(),
+	user_id: validator.number().positive().precision(0).required(),
+	paid: validator.boolean().default(false)
+});
+
+// MARK: DELETE transaction
+const schema_del = validator.object({
+	id: validator.number().positive().precision(0).required()
+});
+
+// Describe all schemas
+const schema_get_desc = schema_get.describe();
+const schema_post_desc = schema_post.describe();
+const schema_patch_desc = schema_patch.describe();
+const schema_del_desc = schema_del.describe();
+
+// GET route
+export default async function get(req: Request, res: Response) {
+	res.status(200).json({
+		GET: schema_get_desc,
+		POST: schema_post_desc,
+		PATCH: schema_patch_desc,
+		DELETE: schema_del_desc
+	});
+}
+
+export { schema_get, schema_post, schema_patch, schema_del };

src/routes/api/v1/user/user.ts

@@ -43,7 +43,7 @@ async function get(req: Request, res: Response) {
 						});
 						res.status(200).json({ count, result });
 					} else {
-						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified object' });
+						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified user' });
 					}
 				})
 				.catch((err) => {
@@ -75,7 +75,7 @@ async function get(req: Request, res: Response) {
 						});
 						res.status(200).json({ count, result });
 					} else {
-						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find specified object' });
+						res.status(404).json({ status: 'ERROR', errorcode: 'NOT_FOUND', message: 'Could not find any users' });
 					}
 				})
 				.catch((err) => {
@@ -97,6 +97,7 @@ async function post(req: Request, res: Response) {
 			.create({
 				data: {
 					name: value.name,
+					email: value.email,
 					code: value.code === '0000' ? null : value.code
 				},
 				select: {
@@ -127,6 +128,7 @@ async function patch(req: Request, res: Response) {
 				},
 				data: {
 					name: value.name,
+					email: value.email,
 					code: value.code === '0000' ? null : value.code
 				},
 				select: {

src/routes/api/v1/user/user_schema.ts

@@ -22,6 +22,7 @@ const schema_get = validator
 // MARK: CREATE user
 const schema_post = validator.object({
 	name: validator.string().min(1).max(32).required(),
+	email: validator.string().email().trim().required(),
 	code: validator.string().min(4).max(4).trim().regex(new RegExp(/^[0-9]+$/))
 });
 
@@ -30,9 +31,10 @@ const schema_patch = validator
 	.object({
 		id: validator.number().positive().precision(0).required(),
 		name: validator.string().min(1).max(32),
+		email: validator.string().email().trim(),
 		code: validator.string().min(4).max(4).trim().regex(new RegExp(/^[0-9]+$/))
 	})
-	.or('name', 'code');
+	.or('name', 'email', 'code');
 
 // MARK: DELETE user
 const schema_del = validator.object({

src/routes/frontend/admin/dashboard.ts

@@ -0,0 +1,7 @@
+import express, { Request, Response } from 'express';
+
+function get(req: Request, res: Response) {
+	res.render("admin/dashboard")
+}
+
+export default { get };

src/routes/frontend/admin/index.ts

@@ -0,0 +1,17 @@
+import express from 'express';
+
+// Route imports
+import dashboard_route from './dashboard.js';
+import users_route from './users.js';
+import products_route from './products.js';
+import report_route from './report.js';
+
+// Router base is '/admin'
+const Router = express.Router({ strict: false });
+
+Router.route('/').get(dashboard_route.get);
+Router.route('/users').get(users_route.get);
+Router.route('/products').get(products_route.get);
+Router.route('/report').get(report_route.get);
+
+export default Router;

src/routes/frontend/admin/products.ts

@@ -0,0 +1,7 @@
+import express, { Request, Response } from 'express';
+
+function get(req: Request, res: Response) {
+	res.render("admin/products")
+}
+
+export default { get };

src/routes/frontend/admin/report.ts

@@ -0,0 +1,7 @@
+import express, { Request, Response } from 'express';
+
+function get(req: Request, res: Response) {
+	res.render("admin/reports")
+}
+
+export default { get };

src/routes/frontend/admin/users.ts

@@ -0,0 +1,7 @@
+import express, { Request, Response } from 'express';
+
+function get(req: Request, res: Response) {
+	res.render("admin/users")
+}
+
+export default { get };

src/routes/frontend/index.ts

@@ -2,17 +2,23 @@ import express from 'express';
 import config from '../../handlers/config.js';
 
 // Route imports
-import screensaver_Route from './screensaver.js';
-import user_select_Route from './user_select.js';
-import product_select_Route from './product_select.js';
+import screensaver_route from './screensaver.js';
+import user_select_route from './user_select.js';
+import product_select_route from './product_select.js';
+import pay_up_route from './pay_up.js';
 import test_Route from './test.js';
 
+import adminRouter from './admin/index.js';
+
 // Router base is '/'
 const Router = express.Router({ strict: false });
 
-Router.route('/').get(screensaver_Route.get);
-Router.route('/user_select').get(user_select_Route.get);
-Router.route('/product_select').get(product_select_Route.get);
+Router.route('/').get(screensaver_route.get);
+Router.route('/user_select').get(user_select_route.get);
+Router.route('/product_select').get(product_select_route.get);
+Router.route('/pay_up').get(pay_up_route.get);
+
+Router.use('/admin', adminRouter);
 
 config.global.devmode && Router.route('/test').get(test_Route.get);
 

src/routes/frontend/pay_up.ts

@@ -0,0 +1,7 @@
+import express, { Request, Response } from 'express';
+
+function get(req: Request, res: Response) {
+	res.render("payup")
+}
+
+export default { get };

src/routes/frontend/screensaver.ts

@@ -1,7 +1,8 @@
 import express, { Request, Response } from 'express';
+import config from '../../handlers/config.js';
 
 function get(req: Request, res: Response) {
-	res.render("screensaver")
+	res.render("screensaver", { apikey: config.global.galleryApiKey })
 }
 
 export default { get };

src/routes/index.ts

@@ -4,8 +4,8 @@ import __path from '../handlers/path.js';
 import log from '../handlers/log.js';
 
 // Route imports
-import frontend_routes from './frontend/index.js';
-import api_routes from './api/index.js';
+import frontend_router from './frontend/index.js';
+import api_router from './api/index.js';
 
 const Router = express.Router({ strict: false });
 
@@ -16,8 +16,8 @@ Router.use('/libs/jquery', express.static(path.join(__path, 'node_modules', 'jqu
 Router.use('/libs/bootstrap-icons', express.static(path.join(__path, 'node_modules', 'bootstrap-icons')));
 
 // Other routers
-Router.use('/api', api_routes);
-Router.use('/', frontend_routes);
+Router.use('/api', api_router);
+Router.use('/', frontend_router);
 
 // Default route.
 Router.all('*', function (req, res) {

static/apiWrapper.js

@@ -19,6 +19,12 @@ let _api = {
 			headers: new Headers({ 'content-type': 'application/json' })
 		};
 		const response = await fetch(_apiConfig.basePath + path, options);
+		if(response.status == 404) {
+			return {
+				count: 0,
+				result: []
+			}
+		}
 		// Handle the response
 		if (!response.ok) {
 			console.error('Failed to fetch:', response.statusText);
@@ -94,13 +100,13 @@ let _api = {
 		// Handle the response
 		if (!response.ok) {
 			_testPageFail(response.statusText);
-			return;
+			return -1;
 		}
 		const result = await response.json();
 		// Handle the result, was json valid?
 		if (!result) {
 			_testPageFail('Invalid JSON response');
-			return;
+			return -1;
 		}
 
 		return result;
@@ -166,7 +172,7 @@ function getApiDescriptionByTable(tableName) {
 	}
 }
 
-function returnTableDataByTableName(tableName, search="", orderBy="asc", sort="", take=-1, skip=0) {
+function returnTableDataByTableName(tableName, search="", orderBy="asc", sort="", take=-1, skip=0, filters=[]) {
 	var orderBy = orderBy.toLowerCase();
 	if(orderBy == "") {
 		orderBy = "asc";
@@ -181,6 +187,10 @@ function returnTableDataByTableName(tableName, search="", orderBy="asc", sort=""
 	if(skip > 0) {
 		baseString += "&skip=" + skip;
 	}
+	filterKeys = Object.keys(filters);
+	for(var i = 0; i < filterKeys.length; i++) {
+		baseString += "&" + filterKeys[i] + "=" + filters[filterKeys[i]];
+	}
 
 	if (search && search.length > 0) {
 		return _api.get(baseString + '&search=' + search);
@@ -190,13 +200,14 @@ function returnTableDataByTableName(tableName, search="", orderBy="asc", sort=""
 }
 
 async function getCountByTable(tableName, search="") {
-	let baseString = tableName + '?count=true';
+	let baseString = tableName + '';
 	if (search && search.length > 0) {
-		baseString += '&search=' + search;
+		baseString += '?search=' + search;
 	}
 	// Stored in `data:count:${tableName}`
 	let result = await _api.get(baseString);
 	console.debug('Count result:', result);
+	result = result.count;
 	if (typeof result !== 'number') {
 		_testPageWarn('Count was not a number, was: ' + result);
 		console.warn('Count was not a number, was: ' + result);
@@ -207,6 +218,7 @@ async function getCountByTable(tableName, search="") {
 
 
 function _testPageFail(reason) {
+	return;
 	document.getElementById('heroStatus').classList.remove('is-success');
 	document.getElementById('heroStatus').classList.add('is-danger');
 
@@ -214,6 +226,8 @@ function _testPageFail(reason) {
 }
 
 function _testPageWarn(reason) {
+	console.warn('API Wrapper Test Warning, reason: ' + reason);
+	return;
 	document.getElementById('heroStatus').classList.remove('is-success');
 	document.getElementById('heroStatus').classList.add('is-warning');
 

static/css/lockscreen.css

@@ -1,26 +1,26 @@
 #clock {
-	    font-size: 120px;
-    font-weight: 100;
-    color: #fff;
-    text-align: center;
-    bottom: 10%;
-    right: 5%;
-    z-index: 900010;
-    position: absolute;
-    display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-flex-wrap: wrap;
-
-    width: 30%;
+	font-size: 120px;
+	font-weight: 100;
+	color: #fff;
+	text-align: center;
+	bottom: 10%;
+	right: 5%; /* Verschiebt die Flexbox weiter nach links */
+	z-index: 900010;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 40%;
+	margin: 0 auto; /* Stellt sicher, dass die Box zentriert bleibt */
 }
 
 #time {
 	margin-bottom: 0px;
 	padding-bottom: 0px;
 	text-align: center;
-	width: 95%;
+	width: 140%;
 	vertical-align: middle;
 	font-family: monospace;
 }
@@ -29,3 +29,31 @@ flex-wrap: wrap;
 	font-size: 50px;
 	margin-top: -40px;
 }
+
+/* HTML: <div class="loader"></div> */
+.loader {
+	height: 200px;
+	aspect-ratio: 2/3;
+	--c:no-repeat linear-gradient(#fff 0 0);
+	background: var(--c), var(--c), var(--c), var(--c);
+	background-size: 50% 33.4%;
+	animation: l8 1.5s infinite linear;
+}
+@keyframes l8 {
+	0%,
+	5%   {background-position:0 25%,100% 25%,0 75%,100% 75%}
+	33%  {background-position:0 50%,100% 0,0 100%,100% 50%}
+	66%  {background-position:0 50%,0 0,100% 100%,100% 50%}
+	95%,
+	100% {background-position:0 75%,0 25%,100% 75%,100% 25%}
+}
+
+
+#credits {
+	position: absolute;
+	bottom: 1px;
+	left: 1px;
+	mix-blend-mode: difference;
+	color: white;
+	font-weight: bold;
+}

static/js/kiosk_mode.js

@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', () => {
+	setTimeout(() => {
+		// TODO: How to start kiosk mode?
+		if (true) {
+			console.info('Kiosk mode -> Disabled all external links');
+			document.querySelectorAll('a').forEach((link) => {
+				if (link.classList.contains('external-link')) {
+					link.style.pointerEvents = 'none';
+				}
+			});
+		}
+	}, 1000);
+});

static/js/lockscreenBgHandler.js

@@ -1,22 +1,40 @@
 // Image Handler
-const baseUrl = "https://api.unsplash.com/photos/random?client_id=[KEY]&orientation=landscape&topics=nature";
-const apiKey = "tYOt7Jo94U7dunVcP5gt-kDKDMjWFOGQNsHuhLDLV8k"; // Take from config
-const fullUrl = baseUrl.replace("[KEY]", apiKey);
+const showModeImage = '/static/media/showModeLockscreen.jpg';
 
-const showModeImage = "/static/media/showModeLockscreen.jpg"
-
-let credits = document.getElementById("credits");
+let credits = document.getElementById('credits');
 
 let currentImageHandle;
 
+document.body.addEventListener('click', () => {
+	window.location.href = '/user_select';
+});
+
 // Lock screen or show mode
-let screenState = "lock";
+let screenState = 'lock';
+
+let cookieScreen = getCookie('screen');
+if (cookieScreen) {
+	screenState = cookieScreen;
+}
 
 function handleImage() {
-	if(screenState === "lock") {
-		fetch("https://staging.thegreydiamond.de/projects/photoPortfolio/api/getRand.php?uuid=01919dec-b2cd-7adc-8ca2-a071d1169cbc&unsplash=true")
-			.then(response => response.json())
-			.then(data => {
+	if (screenState === 'lock') {
+		const apiParams = {
+			// default galery; spring awakens
+			uuid: '01919dec-b2cd-7adc-8ca2-a071d1169cbc;01953de0-3aa7-71f1-bfff-cbf9488efa64',
+			unsplash: true,
+			orientation: 'landscape',
+			height: window.screen.availHeight,
+			width: window.screen.availWidth,
+			cropCenteringMode: 'sm',
+			apikey: apiKey
+		};
+
+		const apiUrl = `https://photo.thegreydiamond.de/api/images/random.php?${new URLSearchParams(apiParams).toString()}`;
+
+		fetch(apiUrl)
+			.then((response) => response.json())
+			.then((data) => {
 				// data = {
 				// 	urls: {
 				// 		regular: "https://imageproxy.thegreydiamond.de/ra5iqxlyve6HpjNvC1tzG50a14oIOgiWP95CxIvbBC8/sm:1/kcr:1/aHR0cHM6Ly9zdGFn/aW5nLnRoZWdyZXlk/aWFtb25kLmRlL3By/b2plY3RzL3Bob3Rv/UG9ydGZvbGlvL2Rl/bW9IaVJlcy9QMTE5/MDgzMC1zY2hpbGQu/anBn.webp"
@@ -28,29 +46,29 @@ function handleImage() {
 				// 		}
 				// 	}
 				// }
-				if(!currentImageHandle) {
+				if (!currentImageHandle) {
 					// Create a page filling div which contains the image
-					currentImageHandle = document.createElement("div");
-					currentImageHandle.style.position = "absolute";
-					currentImageHandle.style.top = "0";
-					currentImageHandle.style.left = "0";
-					currentImageHandle.style.width = "100%";
-					currentImageHandle.style.height = "100%";
+					currentImageHandle = document.createElement('div');
+					currentImageHandle.style.position = 'absolute';
+					currentImageHandle.style.top = '0';
+					currentImageHandle.style.left = '0';
+					currentImageHandle.style.width = '100%';
+					currentImageHandle.style.height = '100%';
 					currentImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
-					currentImageHandle.style.backgroundSize = "cover";
+					currentImageHandle.style.backgroundSize = 'cover';
 					currentImageHandle.style.opacity = 1;
 				} else {
 					// Create a new div behind the current one and delete the old one when the new one is loaded
-					let newImageHandle = document.createElement("div");
-					newImageHandle.style.position = "absolute";
-					newImageHandle.style.top = "0";
-					newImageHandle.style.left = "0";
-					newImageHandle.style.width = "100%";
-					newImageHandle.style.height = "100%";
+					let newImageHandle = document.createElement('div');
+					newImageHandle.style.position = 'absolute';
+					newImageHandle.style.top = '0';
+					newImageHandle.style.left = '0';
+					newImageHandle.style.width = '100%';
+					newImageHandle.style.height = '100%';
 					newImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
-					newImageHandle.style.backgroundSize = "cover";
+					newImageHandle.style.backgroundSize = 'cover';
 					newImageHandle.style.opacity = 1;
-					newImageHandle.style.transition = "1s";
+					newImageHandle.style.transition = '1s';
 					newImageHandle.style.zIndex = 19999;
 					document.body.appendChild(newImageHandle);
 
@@ -61,33 +79,31 @@ function handleImage() {
 						currentImageHandle = newImageHandle;
 					}, 1000);
 
-
-
 					// Set the credits
-					credits.innerHTML = `Photo by <a href="${data.user.links.html}" target="_blank">${data.user.name}</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>`;
+					credits.innerHTML = `"${data.title}" by <a href="${data.user.links.html}" class="external-link" target="_blank">${data.user.name}</a>`;
 					credits.style.zIndex = 300000;
 				}
 			})
-			.catch(error => {
-				console.error("Error fetching image: ", error);
+			.catch((error) => {
+				console.error('Error fetching image: ', error);
 			});
 	} else {
-		if(currentImageHandle) {
+		if (currentImageHandle) {
 			// Check if the image is already loaded
-			if(currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
+			if (currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
 				return;
 			}
 			// Create a new div behind the current one and delete the old one when the new one is loaded
-			let newImageHandle = document.createElement("div");
-			newImageHandle.style.position = "absolute";
-			newImageHandle.style.top = "0";
-			newImageHandle.style.left = "0";
-			newImageHandle.style.width = "100%";
-			newImageHandle.style.height = "100%";
+			let newImageHandle = document.createElement('div');
+			newImageHandle.style.position = 'absolute';
+			newImageHandle.style.top = '0';
+			newImageHandle.style.left = '0';
+			newImageHandle.style.width = '100%';
+			newImageHandle.style.height = '100%';
 			newImageHandle.style.backgroundImage = `url(${showModeImage})`;
-			newImageHandle.style.backgroundSize = "cover";
+			newImageHandle.style.backgroundSize = 'cover';
 			newImageHandle.style.opacity = 1;
-			newImageHandle.style.transition = "1s";
+			newImageHandle.style.transition = '1s';
 			document.body.appendChild(newImageHandle);
 
 			setTimeout(() => {
@@ -107,37 +123,22 @@ function handleTimeAndDate() {
 	month += 1;
 	let year = time.getFullYear();
 
-	let timeHandle = document.getElementById("time");
-	let dateHandle = document.getElementById("date");
+	let timeHandle = document.getElementById('time');
+	let dateHandle = document.getElementById('date');
 
-	timeHandle.innerHTML = `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}:${time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()}`;
+	timeHandle.innerHTML = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()}`;
 	// Datum in format Montag, 22.12.2024
-	dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
+	dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? '0' + day : day}.${month < 10 ? '0' + month : month}.${year}`;
 }
 
 function getDay(day) {
-	switch(day) {
-		case 0:
-			return "Sonntag";
-		case 1:
-			return "Montag";
-		case 2:
-			return "Dienstag";
-		case 3:
-			return "Mittwoch";
-		case 4:
-			return "Donnerstag";
-		case 5:
-			return "Freitag";
-		case 6:
-			return "Samstag";
-	}
+	return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][day];
 }
 
 // Set the image handler to run every 10 minutes
 setInterval(handleImage, 60 * 1000 * 10);
 handleImage();
-handleImage()
+handleImage();
 
 // Set the time and date handler to run every minute
 setInterval(handleTimeAndDate, 500);

static/main.css

@@ -1,3 +1,10 @@
+html, body {
+	height: 100%;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+}
+
 body {
 	min-height: 100vh;
 }
@@ -5,3 +12,16 @@ body {
 hidden {
 	display: none;
 }
+
+.notification-container {
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 1000;
+	margin: 20px;
+}
+
+footer {
+	margin-top: auto;
+	padding: 1rem !important;
+}

static/pageDriver.js

@@ -26,6 +26,13 @@ var searchFields = document.querySelectorAll('input[data-searchTargetId]');
 // Find all modalForms
 var modalForms = document.querySelectorAll('form[data-targetTable]');
 
+
+// Create a floating container for notifications
+const notificationContainer = document.createElement('div');
+notificationContainer.classList.add('notification-container');
+document.body.appendChild(notificationContainer);
+let notifications = [];
+
 console.info('Processing single values');
 console.info(singleValues);
 
@@ -67,12 +74,13 @@ tables.forEach(async (table) => {
 			refreshTable(table);
 		});
 	});
+	if(table.getAttribute("data-loadmode") == "manual") {
+		return;
+	}
 	refreshTable(table);
 
 });
 
-
-
 async function writeSingelton(element) {
 	const table = element.getAttribute('data-dataSource');
 	console.log('Table: ', table, ' Action: ', element.getAttribute('data-dataAction'), ' Element: ', element);
@@ -181,6 +189,10 @@ modalForms.forEach((modalForm) => {
 							console.log('Type: ', rule['args']['type']);
 							break;
 						}
+						case 'email': {
+							field.setAttribute('type', 'email');
+							break;
+						}
 					}
 				});
 				if (flags) {
@@ -231,6 +243,7 @@ modalForms.forEach((modalForm) => {
 		console.log('Response: ', resp);
 		if (resp['status'] == 'CREATED' || resp['status'] == 'UPDATED') {
 			console.log('Entry created successfully');
+			createTemporaryNotification('Eintrag erfolgreich aktualisiert', 'is-success');
 			modalForm.closest('.modal').classList.remove('is-active');
 			modalForm.reset();
 			// Hide loadPhase
@@ -251,12 +264,18 @@ modalForms.forEach((modalForm) => {
 				entryPhase.classList.remove('is-hidden');
 			}
 			// TODO: Show error message
+			createTemporaryNotification('Error while creating entry', 'is-danger');
 		}
 
 		// Find all tables with data-searchTargetId set to table
 		setTimeout(() => {
-			refreshTableByName(table);
-			updateSingeltonsByTableName(table);
+			if(modalForm.getAttribute('data-extTable') != null) {
+				refreshTableByName(table);
+				updateSingeltonsByTableName(table);
+			} else {
+				refreshTableByName(document.getElementById(modalForm.getAttribute('data-extTable')));
+			}
+			
 		}, 500);
 	});
 });
@@ -273,6 +292,7 @@ async function refreshTable(table) {
 	});
 	let order = '';
 	let column = '';
+	let filters = JSON.parse(table.getAttribute('data-filters')) || {};
 	ths.forEach((th) => {
 		if (th.hasAttribute('data-order')) {
 			order = th.getAttribute('data-order');
@@ -301,7 +321,7 @@ async function refreshTable(table) {
 	if (searchField) {
 		const value = searchField.value;
 		const dbTable = table.getAttribute('data-dataSource');
-		const result = await returnTableDataByTableName(dbTable, value, order, column, take= maxLinesPerPage, skip= start);
+		const result = await returnTableDataByTableName(dbTable, value, order, column, take=maxLinesPerPage, skip=start, filters);
 		const totalResultCount = await getCountByTable(dbTable, value);
 		paginationPassOnPre['dataLength'] = totalResultCount;
 		var magMiddl = managePaginationMiddleware(result, paginationPassOnPre);
@@ -310,7 +330,7 @@ async function refreshTable(table) {
 		clearTable(table);
 		writeDataToTable(table, data, paginationPassOn);
 	} else {
-		const result = await returnTableDataByTableName(table.getAttribute('data-dataSource'), undefined, order, column, take= maxLinesPerPage, skip= start);
+		const result = await returnTableDataByTableName(table.getAttribute('data-dataSource'), undefined, order, column, take= maxLinesPerPage, skip= start, filters);
 		const resultCount = await getCountByTable(table.getAttribute('data-dataSource'));
 		paginationPassOnPre['dataLength'] = resultCount;
 		var magMiddl = managePaginationMiddleware(result, paginationPassOnPre);
@@ -355,6 +375,7 @@ function writeDataToTable(table, data, paginationPassOn) {
 	if(data == undefined || data == null || data.length == 0) {
 		return;
 	}
+	data = data.result
 	console.log('Writing data to table: ', table, data);
 	// Get THEAD and TBODY elements
 	const thead = table.querySelector('thead');
@@ -377,6 +398,9 @@ function writeDataToTable(table, data, paginationPassOn) {
 			actionFields.push(column);
 			return;
 		}
+		if(column.getAttribute('data-type') == 'hidden') {
+			return;
+		}
 		requiredCols.push(column.getAttribute('data-dataCol'));
 	});
 
@@ -472,9 +496,37 @@ function writeDataToTable(table, data, paginationPassOn) {
 		const row = data[resultIndex];
 		const tr = document.createElement('tr');
 		requiredCols.forEach((column) => {
+			// console.log('Column: ', column, ' Index: ', columnIndices[column]);
 			const td = document.createElement('td');
-			td.innerText = row[column];
+			// Grab attribute from header
+			const header = columns[columnIndices[column]];
+			if(header.getAttribute('data-dataCol') == "FUNC:INLINE") {
+				try {
+					// Call data-ColHandler as a function
+					const handler = window[header.getAttribute('data-ColHandler')];
+					const result = handler(row);
+					row[column] = result;
+
+				} catch (e) {
+					console.error('Error in ColHandler: ', e);
+				}
+			}
+
+			if(header.getAttribute('data-type') == "bool") {
+				td.innerHTML = row[column] ? '<i class="bi bi-check"></i>' : '<i class="bi bi-x"></i>';
+			
+			} else if(header.getAttribute('data-type') == "datetime"){
+				if(row[column] == null) {
+					td.innerHTML = "";
+				} else {
+					td.innerHTML = formatTimestamp(row[column]);
+				}
+			}
+			else {
+				td.innerHTML = row[column];
+			}
 			tr.appendChild(td);
+			
 		});
 
 		// Add action fields
@@ -539,6 +591,9 @@ function writeDataToTable(table, data, paginationPassOn) {
 								if(field.getAttribute('type') == 'submit') {
 									return;
 								}
+								if(field.getAttribute('data-edit-transfer') == 'disable') {
+									return;	
+								}
 								field.value = data[field.getAttribute('name')];
 							});
 							form.closest('.modal').classList.add('is-active');
@@ -556,9 +611,11 @@ function writeDataToTable(table, data, paginationPassOn) {
 							if(resp['status'] == 'DELETED') {
 								refreshTable(table);
 								updateSingeltonsByTableName(table.getAttribute('data-dataSource'));
+								createTemporaryNotification('Entry deleted successfully', 'is-success');
 							} else {
 								// Show error message
 								// TODO: Show error message
+								createTemporaryNotification('Error while deleting entry', 'is-danger');
 							}
 							}
 							break;
@@ -605,6 +662,9 @@ document.addEventListener('DOMContentLoaded', () => {
 	// Add a click event on various child elements to close the parent modal
 	(document.querySelectorAll('.modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
 		const $target = $close.closest('.modal');
+		if($target.data && $target.data.dissmiss == "false") {
+			return;
+		}
 
 		$close.addEventListener('click', () => {
 			closeModal($target);
@@ -620,12 +680,59 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
+function createTemporaryNotification(message, type = 'is-success', timeout = 5000) {
+	const notification = document.createElement('div');
+	notification.classList.add('notification');
+	notification.classList.add(type);
+	notification.innerHTML = message;
+	notificationContainer.appendChild(notification);
+	setTimeout(() => {
+		$(notification).fadeOut(500);
+	}, timeout);
+}
+
 document.addEventListener('DOMContentLoaded', () => {
 	(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
 	  const $notification = $delete.parentNode;
-      
 	  $delete.addEventListener('click', () => {
 	    $notification.parentNode.removeChild($notification);
 	  });
 	});
       });
+
+function setCookie(name, value, days) {
+	let expires = "";
+	if(days) {
+		let date = new Date();
+		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+		expires = "; expires=" + date.toUTCString();
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function getCookie(name) {
+	let value = "; " + document.cookie;
+	let parts = value.split("; " + name + "=");
+	if(parts.length == 2) {
+		return parts.pop().split(";").shift();
+	}
+}
+
+function eraseCookie(name) {
+	document.cookie = name + '=; Max-Age=-99999999;';
+}
+
+function errorIfAnyUndefined(inp) {
+	console.log(inp)
+	for(var i = 0; i < inp.length; i++) {
+		if(inp[i] == undefined) {
+			console.error("Missing element!")
+			createTemporaryNotification("Beim Laden der Seite ist ein Fehler aufgetreten", "is-danger", 90000)
+		}
+	}
+}
+
+function formatTimestamp(timestamp) {
+	const date = new Date(timestamp);
+	return date.toLocaleString();
+}

static/pages/admin_products.js

@@ -0,0 +1,195 @@
+let uploadFileInput = document.getElementById('imgUpload');
+let fileName = document.getElementById('fileName');
+let imgUploadForm = document.getElementById('imgUploadForm');
+let scannerField = document.getElementById('scannerField');
+let btn_restock = document.getElementById('btn_restock');
+
+let btn_save_2 = document.getElementById('btn_save_2');
+
+let form_gtin = document.getElementById('form_gtin');
+
+let modal_stage_1 = document.getElementById('modal-stage-1');
+let modal_stage_2 = document.getElementById('modal-stage-2');
+let modal_stage_3 = document.getElementById('modal-stage-3');
+
+let modal_stage_2_result = document.getElementById("stage-2-result");
+
+let modal_stage_2_amount = document.getElementById("stage-2-amount");
+
+let globalData;
+
+waitingForScan = false;
+let currentRestockProduct = null;
+
+
+function handleImagePresence(row) {
+	// Check if /api/v1/image?id=row&check returns true
+	// Needs to be sync
+
+	let isThere = false;
+	const xhr = new XMLHttpRequest();
+	xhr.open('GET', `/api/v1/image?id=${row.id}&check=true`, false);
+	xhr.send();
+	if (xhr.status === 200) {
+		try {
+			isThere = JSON.parse(xhr.responseText);
+		} catch (error) {
+			console.error(error);
+			isThere = false;
+		}
+		
+	}
+	
+	let pretty = isThere ? '<i class="bi bi-check"></i>' : '<i class="bi bi-x"></i></a>';
+	const template = `<a href="/api/v1/image?id=${row.id}" target="_blank">${pretty}</a> <i class="bi bi-dot"></i> <button class="btn btn-primary" onclick="uploadImage(${row.id})"><i class="bi bi-upload"></i></button>`;
+	return template;
+}
+
+function uploadImage(id) {
+	// Open a file picker
+	uploadFileInput.click();
+	// // Open a modal to upload an image
+	// // Use a form
+	// const modal = document.getElementById('imageModal');
+	// modal.style.display = 'block';
+	imgUploadForm.action = `/api/v1/image?id=${id}`;
+}
+
+function silentFormSubmit() {
+	// Submit the form silently (without reloading the page or redirecting)
+	// Grab the form and do a POST request (dont forget to prevent default)
+	const xhr = new XMLHttpRequest();
+	xhr.open('POST', imgUploadForm.action, true);
+	xhr.send(new FormData(imgUploadForm));
+	xhr.onreadystatechange = function() {
+		if (xhr.readyState === 4 && xhr.status === 200) {
+			console.log(xhr.responseText);
+			//location.reload();
+			createTemporaryNotification('Bild hochgeladen', 'is-success');
+			// Close the modal
+			document.getElementById('imageModal').style.display = "none";
+
+			// Empty the input
+			uploadFileInput.value = '';
+		}
+	};
+}
+
+function enableScanner() {
+	waitingForScan = true;
+	scannerField.focus();
+}
+
+uploadFileInput.addEventListener('change', function() {
+	fileName.innerHTML = this.files[0].name;
+	silentFormSubmit();
+	setTimeout(() => {
+		refreshTableByName('products');
+	}, 1000);
+});
+
+scannerField.style.fontSize = '1px';
+scannerField.style.height = '1px';
+scannerField.style.width = '1px';
+scannerField.style.opacity = '0';
+scannerField.style.position = 'relative';
+
+// Make sure text fields is always centerd vertically
+window.addEventListener('scroll', function(event) {
+	if(!waitingForScan) {
+		return;
+	}
+	scannerField.y = document.documentElement.scrollTop + 20;
+	scannerField.style.top = document.documentElement.scrollTop + 20 + "px";
+});
+
+setInterval(() => {
+	if(!waitingForScan) {
+		return;
+	}
+	scannerField.focus();
+}, 1000);
+
+btn_restock.addEventListener('click', function() {
+	modal_stage_1.classList.remove('is-hidden');
+	modal_stage_2.classList.add('is-hidden');
+	modal_stage_3.classList.add('is-hidden');
+	waitingForScan = true;
+});
+// Handle barcode scanner input
+scannerField.addEventListener('keydown', async function(event) {
+	if(event.key != 'Enter') {
+		return;
+	}
+	let barcode = scannerField.value;
+	console.log('Barcode scanned:', barcode);
+	scannerField.value = "";
+	// createTemporaryNotification(`Barcode ${barcode} gescannt`, 'is-info');
+	waitingForScan = false;
+
+	// Check if barcode is in the database
+	let product = globalData.find(p => p.gtin == barcode);
+	if(product) {
+		console.log('Product found:', product);
+		currentRestockProduct = product;
+		modal_stage_2_amount.innerHTML = "Aktuelle Menge: " + product.stock;
+		modal_stage_1.classList.add('is-hidden');
+		modal_stage_2.classList.remove('is-hidden');
+		modal_stage_3.classList.add('is-hidden');
+		createTemporaryNotification(`<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} gefunden`, 'is-success');
+	} else {
+		modal_stage_1.classList.add('is-hidden');
+		modal_stage_2.classList.add('is-hidden');
+		modal_stage_3.classList.remove('is-hidden');
+		form_gtin.value = barcode;
+	}
+	// modal_stage_2_result.innerHTML = product ? `<i class="bi bi-check"></i> Produkt gefunden: ${product.name}` : `<i class="bi bi-x"></i> Produkt nicht gefunden`;
+	
+
+
+	// let product = globalData.find(p => p.gtin == barcode);
+	// if(product) {
+	// 	let event = new Event('click');
+	// 	createTemporaryNotification(`<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} gefunden`, 'is-success');
+	// 	document.getElementById(`product_${product.id}`).dispatchEvent(event);
+	// } else {
+	// 	createTemporaryNotification( `<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} nicht gefunden`, 'is-danger');
+	// }
+});
+
+function restock(amount) {
+	currentRestockProduct.stock += amount;
+	modal_stage_2_amount.innerHTML = "Aktuelle Menge: " + currentRestockProduct.stock;
+}
+
+function applyStock() {
+	let result = _api.patch('products', {
+		"id": currentRestockProduct.id,
+		"stock": currentRestockProduct.stock
+	})
+	if(result) {
+		createTemporaryNotification('Bestand erfolgreich aktualisiert', 'is-success');
+		modal_stage_2.classList.add('is-hidden');
+		modal_stage_1.classList.remove('is-hidden');
+		modal_stage_3.classList.add('is-hidden');
+		enableScanner();
+	} else {
+		createTemporaryNotification('Fehler beim Aktualisieren des Bestands', 'is-danger');
+	}
+
+
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+	let data = await returnTableDataByTableName('products');
+	console.info(`Found ${data.count} products`);
+	const result = data.result;
+	globalData = result;
+});
+
+// btn_save_2.addEventListener('click', async function() {
+// 	// Assume submission is valid
+// 	// Get the form data
+// 	// reload table
+// 	// close modal
+// });

static/pages/admin_users.js

@@ -0,0 +1,2 @@
+let elm_table_users = document.getElementById('table_users');
+

static/pages/payup.js

@@ -0,0 +1,82 @@
+const tableContent = document.querySelector('.table-content');
+// HTML Elements
+const isEmptyAlert = document.getElementById("noBalance");
+const tableDiv = document.getElementById("balanceSheet");
+const payTable = document.getElementById("payTable");
+const tableCnt = document.getElementById("table-content");
+const tableSum = document.getElementById("table-sum");
+const modal_sum = document.getElementById("ModalSum");
+const confirmModal = document.getElementById("confirmModal");
+const btn_paynow = document.getElementById("paynow");
+const btn_confirm = document.getElementById("confirmCheckout");
+const btn_logout = document.getElementById("logout");
+
+const table_old = document.getElementById("alltransactions");
+
+errorIfAnyUndefined([isEmptyAlert, tableDiv, payTable, tableCnt, tableSum, modal_sum])
+
+// Current user
+let cookieUser = getCookie('user');
+
+if(cookieUser == undefined) {
+	createTemporaryNotification('Fehler: Nutzer nicht angemeldet.', 'is-danger');
+	window.location.href = '/user_select';
+}
+table_old.setAttribute('data-filters', `{"user_id": ${cookieUser}}`);
+refreshTable(table_old);
+console.log("Table refreshed");
+
+let transactionIds = [];
+
+// Request outstanding transactions by user
+async function pullData() {
+	let data = await _api.get("transaction?user_id=" + parseInt(cookieUser) + "&paid=false");
+	console.log(data)
+	if(data.count == 0) {
+		isEmptyAlert.classList.remove("is-hidden");
+		tableDiv.classList.add("is-hidden");
+		return;
+	}
+	// Write data to table
+	const result = data.result;
+	let priceSum = 0;
+	for(var i = 0; i < data.count; i++) {
+		const row = result[i];
+		const newRow = tableCnt.insertRow();
+		newRow.id = `row_${row.id}`;
+		newRow.innerHTML = `
+			<td>${formatTimestamp(row.createdAt)}</td>
+			<td>${parseFloat(row.total).toFixed(2)} €</td>
+		`;
+		priceSum += parseFloat(row.total);
+		transactionIds.push(row.id);
+	}
+	tableSum.innerText = priceSum.toFixed(2) + " €";
+	modal_sum.innerText = priceSum.toFixed(2) + " €";
+}
+
+btn_paynow.onclick = () => {
+	confirmModal.classList.add("is-active");
+}
+
+btn_confirm.onclick = () => {
+	for(let i = 0; i < transactionIds.length; i++) {
+		let res = _api.patch(`transaction`, {paid: true, id: transactionIds[i], user_id: parseInt(cookieUser)});
+		console.log(res);
+		if(res == -1 || res == undefined) {
+			createTemporaryNotification('Fehler: Zahlung fehlgeschlagen.', 'is-danger');
+			return;
+		}
+	}
+	createTemporaryNotification('Zahlung erfolgreich.', 'is-success');
+	setTimeout(() => {
+		window.location.href = '/user_select';
+	}, 1000);
+}
+
+btn_logout.onclick = () => {
+	eraseCookie('user');
+	window.location.href = '/user_select';
+}
+
+pullData()

static/pages/product_select.js

@@ -2,11 +2,35 @@ console.log('product_select.js loaded');
 
 // Get containers
 let mainSelectionDiv = document.getElementById('mainSelect');
+let checkoutTable = document.getElementById('selectedProducts');
+
+let sumField = document.getElementById('TableSum');
+
+let toCheckoutButton = document.getElementById('checkout');
+let confirmCartButton = document.getElementById('confirmCheckout');
+
+let loadingModal = document.getElementById('loadingModal');
+
+let scannerField = document.getElementById('scannerField');
 
 const baseStruct = document.getElementById("baseStruct");
 
 let globalData;
 
+let shoppingCart = [];
+
+toCheckoutButton.addEventListener('click', finalizeTransaction);
+confirmCartButton.addEventListener('click', confirmedCart);
+
+// Get user from url (and cookie)
+let userFCookie = getCookie('user');
+let userFUrl = new URLSearchParams(window.location.search).get('user');
+
+if(userFCookie != userFUrl) {
+	createTemporaryNotification('Fehler: User nicht korrekt gesetzt!', 'is-danger');
+	window.location.href = '/user_select';
+}
+
 // On load
 document.addEventListener('DOMContentLoaded', async function() {
 	let data = await returnTableDataByTableName('products');
@@ -17,7 +41,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
 	for(let i = 0; i < result.length; i++) {
 		let product = result[i];
-		if(product.visible) {
+		if(product.visible && product.stock > 0) {
 			let newDiv = baseStruct.cloneNode(true);
 			newDiv.id = `product_${product.id}`;
 			newDiv.style.display = 'block';
@@ -27,9 +51,180 @@ document.addEventListener('DOMContentLoaded', async function() {
 			
 			newDiv.querySelector('.product_price').innerText = price + " €";
 			newDiv.querySelector('.product_ean').innerText = product.gtin;
-			newDiv.querySelector('.product_image').src = product.image || "https://bulma.io/assets/images/placeholders/1280x960.png";
+			newDiv.querySelector('.product_image').src = "/api/v1/image?id=" + product.id;
+			newDiv.querySelector('.product_image').alt = product.name;
+
+			newDiv.addEventListener('click', selectProductEvent);
 			mainSelectionDiv.appendChild(newDiv);
 		}
 	}
 
 });
+
+function canIAddProduct(product, shoppingCart) {
+	let stock = product.stock;
+	let count = shoppingCart.filter(p => p.id == product.id).length;
+	return count < stock;
+}
+
+function selectProductEvent(e) {
+	console.log('selectProductEvent', e);
+	let id = e.currentTarget.id.split('_')[1];
+	let product = globalData.find(p => p.id == id);
+	if(!canIAddProduct(product, shoppingCart)) {
+		createTemporaryNotification('Nicht genug Lagerbestand mehr vorhanden!', 'is-danger');
+		return;
+	}
+	let price = parseFloat(product.price).toFixed(2);
+	let row = checkoutTable.insertRow();
+	row.id = `product_${product.id}`;
+	let cell1 = row.insertCell(0); // Name
+	let cell2 = row.insertCell(1); // Price
+	let cell3 = row.insertCell(2); // Actions 
+
+	shoppingCart.push(product);
+
+	cell1.innerText = product.name;
+	cell2.innerText = price + " €";
+	let deleteButton = document.createElement('button');
+	deleteButton.innerHTML = '<i class="bi bi-trash"></i>';
+	deleteButton.onclick = deleteProductEvent;
+	deleteButton.className = 'button is-danger';
+	deleteButton.style.color = 'white';
+	cell3.appendChild(deleteButton);
+
+
+	sumField.innerText = calculateSum(shoppingCart);
+}
+
+function calculateSum(cart) {
+	let sum = 0;
+	for(let i = 0; i < cart.length; i++) {
+		sum += parseFloat(cart[i].price);
+	}
+	return sum.toFixed(2) + " €";
+}
+
+function deleteProductEvent(e) {
+	let row = e.target.parentElement.parentElement;
+	// Check if icon was clicked instead of button
+	if(row.tagName != 'TR') {
+		row = e.target.parentElement.parentElement.parentElement;
+	}
+	let id = row.id.split('_')[1];
+	let product = shoppingCart.find(p => p.id == id);
+	let index = shoppingCart.indexOf(product);
+	shoppingCart.splice(index, 1);
+	row.remove();
+	sumField.innerText = calculateSum(shoppingCart);
+}
+
+function finalizeTransaction() {
+	if(shoppingCart.length == 0)  {
+		return;
+	}
+
+	// Show confirmation dialog (id-> checkoutModal)
+	let modal = document.getElementById('checkoutModal');
+	modal.classList.add('is-active');
+	let modalContent = document.getElementById('modalContent');
+
+	// Grab table in modal
+	let modalTable = document.getElementById('selectedProductsModal');
+	modalTable.innerHTML = "";
+	for(let i = 0; i < shoppingCart.length; i++) {
+		let product = shoppingCart[i];
+		let row = modalTable.insertRow();
+		let cell1 = row.insertCell(0); // Name
+		let cell2 = row.insertCell(1); // Price
+		cell1.innerText = product.name;
+		cell2.innerText = parseFloat(product.price).toFixed(2) + " €";
+	}
+
+	let modalSum = document.getElementById('ModalSum');
+	modalSum.innerText = calculateSum(shoppingCart);
+}
+
+function confirmedCart() {
+	// Close modal
+	let modal = document.getElementById('checkoutModal');
+	modal.classList.remove('is-active');
+
+	// Show loading modal
+	loadingModal.classList.add('is-active');
+
+	// Send data to server
+	// alert('NYI: Send data to server. This demo ends here.');
+
+	let listOfIds = shoppingCart.map(p => p.id);
+	let data = {
+		products: listOfIds,
+		user_id: getCookie('user')
+	};
+
+	// Send data to server
+	fetch('/api/v1/transaction', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify(data)
+	}).then(async (response) => {
+		let json = await response.json();
+		if(response.ok) {
+			createTemporaryNotification('<i class="bi bi-check-lg"></i> Erfolgreich abgeschlossen', 'is-success');
+			setTimeout(() => {
+				window.location.href = '/user_select';
+			}, 1000);
+		} else {
+			createTemporaryNotification('Fehler: ' + json.error, 'is-danger');
+		}
+		loadingModal.classList.remove('is-active');
+	}).catch((error) => {
+		createTemporaryNotification('Fehler: ' + error, 'is-danger');
+		loadingModal.classList.remove('is-active');
+	});
+}
+
+
+
+// Handle barcode scanner
+// Force the cursor to the scanner field
+scannerField.focus();
+// Do so in an interval
+setInterval(() => {
+	scannerField.focus();
+}, 1000);
+
+// Make it tiny
+scannerField.style.fontSize = '1px';
+scannerField.style.height = '1px';
+scannerField.style.width = '1px';
+scannerField.style.opacity = '0';
+scannerField.style.position = 'relative';
+
+// Handle barcode scanner input
+scannerField.addEventListener('keydown', async function(event) {
+	if(event.key != 'Enter') {
+		return;
+	}
+	let barcode = scannerField.value;
+	console.log('Barcode scanned:', barcode);
+	scannerField.value = "";
+	// createTemporaryNotification(`Barcode ${barcode} gescannt`, 'is-link');
+
+	let product = globalData.find(p => p.gtin == barcode);
+	if(product) {
+		let event = new Event('click');
+		createTemporaryNotification(`<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} gefunden`, 'is-success', 2000);
+		document.getElementById(`product_${product.id}`).dispatchEvent(event);
+	} else {
+		createTemporaryNotification( `<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} nicht gefunden`, 'is-danger');
+	}
+});
+
+// Make sure text fields is always centerd vertically
+window.addEventListener('scroll', function(event) {
+	scannerField.y = document.documentElement.scrollTop + 20;
+	scannerField.style.top = document.documentElement.scrollTop + 20 + "px";
+});

static/pages/user_select.js

@@ -12,8 +12,22 @@ let pinInput4 = document.getElementById('pinInput4');
 
 let pinError = document.getElementById('pinError');
 
+let lastActivity = new Date().getTime();
+let lastActivityTimeout = 1000 * 60 * 5; // 5 minutes
+
 let currentUser = null;
 
+document.addEventListener('click', function() {
+	lastActivity = new Date().getTime();
+});
+
+setInterval(function() {
+	let now = new Date().getTime();
+	if(now - lastActivity > lastActivityTimeout) {
+		window.location.href = '/';
+	}
+}, 1000);
+
 // Attach event listeners to all numpad buttons
 let numpadButtons = numpad.getElementsByTagName('button');
 for(let i = 0; i < numpadButtons.length; i++) {
@@ -100,12 +114,15 @@ function validatePin() {
 		if(response) {
 			console.log("Pin is correct");
 			pinPadModal.classList.remove('is-active');
+			// Write a cookie
+			document.cookie = `user=${userId}`;
+			document.cookie = `name=${currentUser.name}`;
 			window.location.href = `/product_select?user=${userId}`;
 		} else {
 			console.log("Pin is incorrect");
 			pinValue = "";
 			updatePinFields();
-			pinError.classList.remove('is-hidden');
+			createTemporaryNotification('Fehlerhafte PIN Eingabe!', 'is-danger');
 		}
 	});
 }

views/admin/dashboard.eta

@@ -0,0 +1,24 @@
+<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
+<%~ include("partials/nav.eta") %>
+
+<section class="section container" id="mainSelect">
+<h1 class="title">Administration</h1>
+<!-- Big buttons linking to the different admin pages (Produkte, Benutzer, Bericht) -->
+
+<div class="columns is-centered">
+    <div class="column is-4">
+	<a href="/admin/products" class="button is-large is-fullwidth is-primary">Produkte</a>
+    </div>
+    <div class="column is-4">
+	<a href="/admin/users" class="button is-large is-fullwidth is-primary">Benutzer</a>
+    </div>
+    <div class="column is-4">
+	<a href="/admin/report" class="button is-large is-fullwidth is-primary">Berichte</a>
+    </div>
+</div>
+
+</section>
+
+<%~ include("partials/footer.eta") %>
+<!-- <script src="/static/pages/admin_.js"></script>-->
+<%~ include("partials/base_foot.eta") %>

views/admin/products.eta

@@ -0,0 +1,236 @@
+<%~ include("partials/base_head.eta", {"title": "Admin - Benutzer"}) %>
+<%~ include("partials/nav.eta") %>
+<input id="scannerField" type="text"/>
+<section class="section container" id="mainSelect">
+	<h1 class="title">Produktverwaltung</h1>
+	<p class="heading buttons">
+	<button class="js-modal-trigger button" data-target="modal-js-example">
+				Neues Produkt anlegen
+	</button><button class="js-modal-trigger button" data-target="modal-restock" id="btn_restock">
+				Lager nachfüllen / Anpassen
+	</button><br></p>
+
+		<input class="input" type="text"  data-searchTargetId="productTable" placeholder="Nach Produkt suchen.." />
+	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="products" id="productTable" data-pageSize="10">
+		<thead>
+			<tr>
+				<th data-dataCol = "id">ID</th>
+				<th data-dataCol = "name">Name</th>
+				<th data-dataCol = "gtin">GTIN</th>
+				<th data-dataCol = "price">Preis</th>
+				<th data-dataCol = "stock">Lagermenge</th>
+				<th data-dataCol = "visible" data-type="bool">Sichtbarkeit</th>
+				<th data-dataCol = "FUNC:INLINE" data-ColHandler=handleImagePresence>Bild</th>
+				<th data-fnc="actions" data-actions="edit,delete">Aktionen</th>
+			</tr>
+		</thead>
+		<tbody>
+		</tbody>
+		
+	</table>
+	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="productTable">
+		<ul class="pagination-list">
+			
+		</ul>
+		</nav>
+</section>
+
+<!-- Image upload modal -->
+<div id="imageModal" class="modal">
+	<div class="modal-background"></div>
+
+	<div class="modal-content">
+		<div class="box">
+			<form id="imgUploadForm" enctype="multipart/form-data" method="post" action="/api/v1/image">
+				<h2 class="title">Bild hochladen</h1>
+				<div class="file has-name">
+					<label class="file-label">
+						<input id="imgUpload" class="file-input" type="file" name="image" />
+						<span class="file-cta">
+							<span class="file-icon">
+								<i class="fas fa-upload"></i>
+							</span>
+						<span class="file-label"> Datei wählen… </span>
+					</span>
+					<span class="file-name" id="fileName"></span>
+					</label>
+				</div>
+				<br>
+				
+			</form>
+			<div class="control">
+				<input type="button" class="button is-link" value="Hochladen" onclick="silentFormSubmit()">
+			</div>
+		</div>
+	</div>
+</div>
+
+
+
+
+<!-- TODO: Mark required fields as required; add handling for validation -->
+<div id="modal-js-example" class="modal">
+	<div class="modal-background"></div>
+
+	<div class="modal-content">
+		<div class="box entryPhase is-hidden">
+			<h2 class="title">Neuer Kontakt</h1>
+
+				<i class="bi bi-arrow-clockwise title"></i>
+		</div>
+		<div class="box entryPhase">
+		
+			<form data-targetTable="products">
+			<h2 class="title">Neuer Benutzer</h1>
+			<div class="field">
+				<label class="label">Bezeichner</label>
+				<div class="control has-icons-left">
+					<input class="input" type="text" placeholder="John Doe" value="" name="name">
+					<span class="icon is-small is-left">
+					<i class="bi bi-file-earmark-person-fill"></i>
+					</span>
+				</div>
+			</div>
+
+			<div class="field">
+			<label class="label">GTIN</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" name="gtin">
+				<span class="icon is-small is-left">
+				<i class="bi bi-upc"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Lagermenge</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" name="stock">
+				<span class="icon is-small is-left">
+				<i class="bi bi-archive-fill"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Preis</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" step=0.01 name="price">
+				<span class="icon is-small is-left">
+				<i class="bi bi-currency-euro"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<div class="control">
+			<label class="checkbox">
+			<input type="checkbox" value="" name="visible">
+			In der Liste anzeigen</a>
+			</label>
+				
+			</div>
+			</div>
+
+		
+
+			<div class="field is-grouped">
+			<div class="control">
+				<input type="submit" class="button is-link" value="Save" data-actionBtn="save">
+			</div>
+			<!--<div class="control">
+				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
+			</div>-->
+			</div>
+		</form>
+			
+			
+		</div>
+	</div>
+
+	<button class="modal-close is-large" aria-label="close"></button>
+	</div>
+
+<div id="modal-restock" class="modal">
+	<div class="modal-background"></div>
+
+	<div class="modal-content">
+		<div class="box" id="modal-stage-1">
+			<h2 class="title">Nachfüllen</h1>
+			<center><h1 class="title"><i class="bi bi-upc-scan"></i></h1></center>
+			Warten auf Scan....
+		</div>
+		<div class="box" id="modal-stage-2">
+			<h2 class="title">Scan erfolgreich - Produktmenge eingeben</h1>
+			<h3 class="subtitle" id="stage-2-amount">Aktuelle Menge: 0</h3>
+			<div class="buttons">
+				<button class="button is-info" onclick="restock(-1)">-1</button>
+				<button class="button is-info" onclick="restock(1)">+1</button>
+				<button class="button is-info" onclick="restock(6)">+6</button>
+				<button class="button is-info" onclick="restock(10)">+10</button>
+				<button class="button is-info" onclick="restock(12)">+12</button>
+			</div>
+			<button class="button is-success" onclick="applyStock()">Änderungen speichern</button>
+			<div id="stage-2-result"></div>
+		</div>
+		<div class="box" id="modal-stage-3">
+			<h2 class="title">Scan erfolgreich - Produkt erstellen</h1>
+			<form data-targetTable="products">
+			<div class="field">
+				<label class="label">Bezeichner</label>
+				<div class="control has-icons-left">
+					<input class="input" type="text" placeholder="Schokolade" value="" name="name">
+					<span class="icon is-small is-left">
+					<i class="bi bi-file-earmark-person-fill"></i>
+					</span>
+				</div>
+			</div>
+
+			<div class="field">
+			<label class="label">GTIN</label>
+			<div class="control has-icons-left">
+				<input id="form_gtin" class="input" type="number" placeholder="" value="" name="gtin" readonly>
+				<span class="icon is-small is-left">
+				<i class="bi bi-upc"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Lagermenge</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" name="stock">
+				<span class="icon is-small is-left">
+				<i class="bi bi-archive-fill"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Preis</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" step=0.01 name="price">
+				<span class="icon is-small is-left">
+				<i class="bi bi-currency-euro"></i>
+				</span>
+			</div>
+			</div>
+			<div class="field is-grouped">
+			<div class="control">
+				<input type="submit" class="button is-link" value="Save" data-actionBtn="save" data-extTable="productTable" id="btn_save_2">
+			</div>
+			<!--<div class="control">
+				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
+			</div>-->
+			</div>
+		</form>
+			
+		</div>
+	</div>
+
+	<button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+<script src="/static/pages/admin_products.js"></script>
+<%~ include("partials/footer.eta") %>
+<%~ include("partials/base_foot.eta") %>

views/admin/reports.eta

@@ -0,0 +1,36 @@
+<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
+<%~ include("partials/nav.eta") %>
+
+<section class="section container" id="mainSelect">
+<h1 class="title">Berichte</h1>
+<!-- Big buttons linking to the different admin pages (Produkte, Benutzer, Bericht) -->
+<nav class="level">
+		<div class="level-item has-text-centered">
+			<div>
+				<p class="heading">Benutzer</p>
+				<p class="title"><span data-dataSource="user" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
+			</div>
+		</div>
+		<div class="level-item has-text-centered">
+			<div>
+				<p class="heading">Transaktionen</p>
+				<p class="title"><span data-dataSource="transaction" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
+			</div>
+		</div>
+
+		<div class="level-item has-text-centered">
+			<div>
+				<p class="heading">Produkte</p>
+				<p class="title"><span data-dataSource="products" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
+			</div>
+		</div>
+	</nav>
+<div class="columns is-centered">
+   
+</div>
+
+</section>
+
+<%~ include("partials/footer.eta") %>
+<!-- <script src="/static/pages/admin_.js"></script>-->
+<%~ include("partials/base_foot.eta") %>

views/admin/users.eta

@@ -0,0 +1,96 @@
+<%~ include("partials/base_head.eta", {"title": "Admin - Benutzer"}) %>
+<%~ include("partials/nav.eta") %>
+
+<section class="section container" id="mainSelect">
+	<h1 class="title">Benutzerverwaltung</h1>
+	<p class="heading"><button class="js-modal-trigger button" data-target="modal-js-example">
+		Benutzer anlegen
+	</button></p>
+	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="user" id="userTable" data-pageSize="10">
+		<thead>
+			<tr>
+				<th data-dataCol = "id">Id</th>
+				<th data-dataCol = "name">Name</th>
+				<th data-dataCol = "email">E-Mail</th>
+				<th data-dataCol = "code" data-type="bool" data-edit-transfer="disable">Code</th>
+				<th data-fnc="actions" data-actions="edit,delete">Aktionen</th>
+			</tr>
+		</thead>
+		<tbody>
+		</tbody>
+		
+	</table>
+	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="userTable">
+		<ul class="pagination-list">
+			
+		</ul>
+		</nav>
+</section>
+
+
+<!-- TODO: Mark required fields as required; add handling for validation -->
+<div id="modal-js-example" class="modal">
+	<div class="modal-background"></div>
+
+	<div class="modal-content">
+		<div class="box entryPhase is-hidden">
+			<h2 class="title">Neuer Kontakt</h1>
+
+				<i class="bi bi-arrow-clockwise title"></i>
+		</div>
+		<div class="box entryPhase">
+		
+			<form data-targetTable="user">
+			<h2 class="title">Neuer Benutzer</h1>
+			<div class="field">
+				<label class="label">Name</label>
+				<div class="control has-icons-left">
+					<input class="input" type="text" placeholder="John Doe" value="" name="name">
+					<span class="icon is-small is-left">
+					<i class="bi bi-file-earmark-person-fill"></i>
+					</span>
+				</div>
+			</div>
+
+			<div class="field">
+			<label class="label">E-Mail</label>
+			<div class="control has-icons-left">
+				<input class="input" type="email" placeholder="test@example.org" value="" name="email">
+				<span class="icon is-small is-left">
+				<i class="bi bi-envelope"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Pin</label>
+			<div class="control has-icons-left">
+				<input class="input" type="text" placeholder="" value="" name="code">
+				<span class="icon is-small is-left">
+				<i class="bi bi-chat-fill"></i>
+				</span>
+			</div>
+			</div>
+			<br>
+
+			<div class="field is-grouped">
+			<div class="control">
+				<input type="submit" class="button is-link" value="Save" data-actionBtn="save">
+			</div>
+			<!--<div class="control">
+				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
+			</div>-->
+			</div>
+		</form>
+			
+			
+		</div>
+	</div>
+
+	<button class="modal-close is-large" aria-label="close"></button>
+	</div>
+
+
+<%~ include("partials/footer.eta") %>
+<script src="/static/pages/admin_users.js"></script>
+<%~ include("partials/base_foot.eta") %>

views/partials/footer.eta

@@ -2,10 +2,11 @@
 	<div class="content has-text-centered">
 		<p>
 		<i class="bi bi-cup-straw"></i>
-			<strong>HydrationHUB</strong> by <a target="_blank" rel="noopener noreferrer" href="https://pnh.fyi">[Project-name-here]</a>.<br>
+			<strong>HydrationHUB</strong> by <a target="_blank" rel="noopener noreferrer" href="https://pnh.fyi" class="external-link">[Project-name-here]</a>.<br>
 			Running Version <span data-dataSource="version" data-dataAction="SPECIAL" class="is-skeleton">Load.</span>
 		</p>
 	</div>
 </footer>
 <script src="/static/apiWrapper.js"></script>
 <script src="/static/pageDriver.js"></script>
+<script src="/static/js/kiosk_mode.js"></script>

views/partials/nav.eta

@@ -2,8 +2,9 @@
 	<div class="navbar-brand">
 		<a class="navbar-item primary" href="/">
 			<i class="bi bi-cup-straw"></i>
-
-
+		</a>
+		<a class="navbar-item primary is-hidden" id="nav_username" href="/">
+			<strong>Hey, <span id="nav_usernameContent"></span></strong>
 		</a>
 
 		<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -15,33 +16,83 @@
 	</div>
 
 	<div id="navbarBasicExample" class="navbar-menu">
-		<div class="navbar-start">
-			<a class="navbar-item" href="/">Screensaver</a>
-			<a class="navbar-item" href="/user_select">user_select</a>
-			<a class="navbar-item" href="/product_select">product_select</a>
-			<a class="navbar-item" href="/test">Test <span class="tag is-info">Dev</span></a>
-
-			<!--<div class="navbar-item has-dropdown is-hoverable">
-				<a class="navbar-link">More</a>
-				<div class="navbar-dropdown">
-					<a class="navbar-item">About</a>
-					<a class="navbar-item is-selected">Jobs</a>
-					<a class="navbar-item">Contact</a>
-					<hr class="navbar-divider">
-					<a class="navbar-item">Report an issue</a>
-				</div>
-			</div>-->
-		</div>
-
-		<% /* <div class="navbar-end">
-			<div class="navbar-item">
-				<div class="buttons">
-					<a class="button is-primary">
-						<strong>Sign up</strong>
-					</a>
-					<a class="button is-light">Log in</a>
-				</div>
+		<div class="navbar-end">
+			<div class="navbar-item" id="dynamic-navbar-buttons">
+				<!-- Buttons will be dynamically injected here -->
 			</div>
-		</div> */ %>
+		</div>
 	</div>
+	<script>
+		document.addEventListener('DOMContentLoaded', () => {
+			const navbarButtons = document.getElementById('dynamic-navbar-buttons');
+			const currentPath = window.location.pathname;
+			const queryParams = new URLSearchParams(window.location.search);
+
+			const buttonsConfig = {
+				'/user_select': [
+					{ text: '', icon: 'bi bi-gear', link: '/admin' },
+					{ text: '', icon: 'bi bi-house', link: '/user_select' }
+				],
+				'/product_select': [
+					{ text: 'Zur Abrechnung', link: '/pay_up' },
+					{ text: '', icon: 'bi bi-gear', link: '/admin' },
+					{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
+				],
+				'/pay_up': [
+					{ text: '', icon: 'bi bi-gear', link: '/admin' },
+					{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
+				],
+				'/admin': [
+					{ text: '', icon: 'bi bi-house', link: '/user_select' }
+				],
+				'/admin/products': [
+					{ text: '', icon: 'bi bi-arrow-return-left', link: '/admin' },
+					{ text: '', icon: 'bi bi-house', link: '/user_select' }
+				],
+				'/admin/users': [
+					{ text: '', icon: 'bi bi-arrow-return-left', link: '/admin' },
+					{ text: '', icon: 'bi bi-house', link: '/user_select' }
+				],
+				'/admin/report': [
+					{ text: '', icon: 'bi bi-arrow-return-left', link: '/admin' },
+					{ text: '', icon: 'bi bi-house', link: '/user_select' }
+				]
+			};
+
+			if (currentPath === '/product_select' && queryParams.has('user')) {
+				const username = document.cookie.split('; ').find(row => row.startsWith('name'))?.split('=')[1];
+				if (username) {
+					document.getElementById('nav_usernameContent').innerText = username; // Set greeting
+					document.getElementById('nav_username').classList.remove('is-hidden'); // Show greeting
+				}
+			}
+
+			const buttons = buttonsConfig[currentPath] || [];
+			buttons.forEach(button => {
+				const btn = document.createElement('button');
+				btn.className = 'button';
+				btn.onclick = () => window.location = button.link;
+				if (button.icon) {
+					const icon = document.createElement('i');
+					icon.className = button.icon;
+					btn.appendChild(icon);
+				}
+				if (button.text) {
+					btn.appendChild(document.createTextNode(button.text));
+				}
+				navbarButtons.appendChild(btn);
+			});
+
+			// Burger menu toggle
+			const burger = document.querySelector('.navbar-burger');
+			const menu = document.querySelector('.navbar-menu');
+
+			if (burger && menu) {
+				burger.addEventListener('click', () => {
+					burger.classList.toggle('is-active');
+					menu.classList.toggle('is-active');
+				});
+			}
+		});
+	</script>
 </nav>

views/payup.eta

@@ -0,0 +1,86 @@
+<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
+<%~ include("partials/nav.eta") %>
+
+<section class="section container" id="mainSelect">
+<h1 class="title">Abrechnung</h1>
+<h2 class="subtitle">Ausstehend</h2>
+
+<div class="notification is-info is-light is-hidden" id="noBalance">
+  Für diesen Benutzer stehen keine Transaktionen aus. <strong>Es gibt nichts zu bezahlen.</strong>
+  <br>
+  <button class="button is-info is-large" id="logout">Abmelden</button>
+</div>
+
+<div id="balanceSheet">
+<table class="table is-striped is-hoverable" id="payTable">
+
+         <thead>
+     <tr>
+      <th>Austellungsdatum</th>
+      <th>Preis</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th></th>
+      <th id="table-sum"></th>
+    </tr>
+  </tfoot>
+  <tbody id="table-content">
+       </tbody>
+       </table>
+
+       <button class="button is-success is-large" id="paynow">Jetzt bezahlen <i class="bi bi-wallet2"></i></button>
+       </div>
+<details>
+  <summary>Alle Transaktionen</summary>
+  <table class="table is-striped is-fullwidth is-hoverable" data-dataSource="transaction" data-pageSize="10" data-filters='{"user_id":-1}' data-loadmode="manual" id="alltransactions">
+		<thead>
+			<tr>
+				<th data-dataCol = "id">Id</th>
+				<th data-dataCol = "total">Name</th>
+				<th data-dataCol = "paid" data-type="bool">Bezahlt</th>
+				<th data-dataCol = "createdAt" data-type="datetime">Ausgestellt am</th>
+				<th data-dataCol = "paidAt" data-type="datetime" data-order="DESC">Bezahlt am</th>
+			</tr>
+		</thead>
+		<tbody>
+		</tbody>
+		
+	</table>
+	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="alltransactions">
+		<ul class="pagination-list">
+			
+		</ul>
+		</nav>
+</details>
+</section>
+
+<!-- Confirmation modal -->
+<div class="modal" id="confirmModal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Bezahlung bestätigen</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <p>
+          Wurde der Betrag in die Kasse eingezahlt?
+        </p>
+        <h2 class="title is-2" id="ModalSum"></h2>
+      </div>
+    </section>
+    <footer class="modal-card-foot buttons">
+      <button class="button is-success" id="confirmCheckout">Bestätigen</button>
+      <button class="button" id="cancelCheckout">Abbrechen</button>
+    </footer>
+  </div>
+</div>
+
+
+
+<%~ include("partials/footer.eta") %>
+<script src="/static/pages/payup.js"></script>
+<%~ include("partials/base_foot.eta") %>

views/product_select.eta

@@ -1,6 +1,7 @@
 <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
 <%~ include("partials/nav.eta") %>
 
+<input id="scannerField" type="text"/>
 <section class="section main-content">
   <div class="container">
     <div class="columns">
@@ -10,7 +11,28 @@
       </div>
       <!-- Empty sidebar on the right -->
       <div class="column is-one-quarter">
-       <h2 class="title is-4" >Ausgewählte Produkte</h2>
+       <h2 class="title is-4">Ausgewählte Produkte</h2>
+       <table class="table">
+         <thead>
+     <tr>
+      <th><abbr title="Bezeichner">Bez.</abbr></th>
+      <th>Preis</th>
+      <th></th>
+       
+
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th></th>
+      <th id="TableSum"></th>
+      <th></th>
+    </tr>
+  </tfoot>
+  <tbody id="selectedProducts">
+       </tbody>
+       </table>
+       <button class="button is-primary" id="checkout">Zur Kasse</button>
       </div>
     </div>
   </div>
@@ -43,6 +65,57 @@
   </div>
 </hidden>
 
+<!-- Confirmation modal -->
+<div class="modal" id="checkoutModal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Bestellung abschließen</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <p>
+          Sind Sie sicher, dass Sie die ausgewählten so Produkte bestellen möchten?
+        </p>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Bezeichner</th>
+              <th>Preis</th>
+            </tr>
+          </thead>
+          <tfoot>
+            <tr>
+              <th></th>
+              <th id="ModalSum"></th>
+            </tr>
+          </tfoot>
+          <tbody id="selectedProductsModal">
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <button class="button is-success" id="confirmCheckout">Bestellen</button>
+      <button class="button" id="cancelCheckout">Abbrechen</button>
+    </footer>
+  </div>
+</div>
+
+<!-- Loading modal -->
+<div class="modal" id="loadingModal" data-dissmiss="false">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <div class="box">
+      <p>Bitte warten...</p>
+      <div class="loader"></div>
+    </div>
+  </div>
+</div>
+
+
+
 <%~ include("partials/footer.eta") %>
 <script src="/static/pages/product_select.js"></script>
 <%~ include("partials/base_foot.eta") %>

views/screensaver.eta

@@ -1,5 +1,4 @@
 <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
-<%~ include("partials/nav.eta") %>
 
 <link rel="stylesheet" href="/static/css/lockscreen.css">
 
@@ -11,8 +10,12 @@
     <div id="date"></div>
 
 </div>
-
+<script>
+const apiKey = "<%= it.apikey %>";
+</script>
+<script src="/static/apiWrapper.js"></script>
+<script src="/static/pageDriver.js"></script>
 <script src="/static/js/lockscreenBgHandler.js"></script>
+<script src="/static/js/kiosk_mode.js"></script>
 
-<%~ include("partials/footer.eta") %>
 <%~ include("partials/base_foot.eta") %>	

views/user_select.eta

@@ -1,12 +1,12 @@
 <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
 <%~ include("partials/nav.eta") %>
 
-<section class="section buttons container" id="mainSelect">
+<section class="section buttons container is-fluid is-centered" id="mainSelect">
 
 </section>
 <hidden>
 	<!-- Base Button -->
-	<button class="button is-link is-large m-2" id="baseStruct">Username</button>
+	<button class="button is-dark is-medium m-2" id="baseStruct">Username</button>
 </hidden>
 <div class="modal" id="pinPadModal">
   <div class="modal-background"></div>