From bd9f629690940399651d80090231ef0fd61c76c7 Mon Sep 17 00:00:00 2001
From: Spacelord <git@spacelord.de>
Date: Tue, 16 May 2023 22:58:08 +0200
Subject: [PATCH] The BIG frontend update

---
 src/frontend/auth/login.eta.html             |  12 +
 src/frontend/items.eta.html                  |  22 +-
 src/frontend/manage/categoryManager.eta.html |   2 +-
 src/frontend/manage/storageManager.eta.html  |  46 +++-
 src/frontend/partials/controls.eta.html      |   5 +-
 src/frontend/partials/head.eta.html          |   2 +-
 src/frontend/style.css                       |   0
 src/routes/api/v1/categories.ts              |   2 +-
 src/routes/api/v1/index.ts                   |   5 +
 src/routes/frontend/items.ts                 |  28 +-
 src/routes/frontend/manage/demo.ts           |   8 +
 src/routes/frontend/manage/index.ts          |   2 +
 src/routes/frontend/manage/startpage.ts      |   1 +
 src/routes/frontend/manage/storageManager.ts |  16 +-
 src/routes/index.ts                          |   4 +-
 static/css/dashboard.css                     |  15 +-
 static/css/login.css                         |  23 ++
 static/js/editCategory.js                    |  10 +-
 static/js/editStorages.js                    | 276 ++++++++++++++++++-
 static/js/formHandler.js                     |  24 +-
 static/js/handleSidebarTriangles.js          |   5 +-
 static/js/normalizeToast.js                  |   7 +
 22 files changed, 459 insertions(+), 56 deletions(-)
 create mode 100644 src/frontend/auth/login.eta.html
 delete mode 100644 src/frontend/style.css
 create mode 100644 src/routes/frontend/manage/demo.ts
 create mode 100644 static/css/login.css
 create mode 100644 static/js/normalizeToast.js

diff --git a/src/frontend/auth/login.eta.html b/src/frontend/auth/login.eta.html
new file mode 100644
index 0000000..e112807
--- /dev/null
+++ b/src/frontend/auth/login.eta.html
@@ -0,0 +1,12 @@
+<%~ E.includeFile("../partials/head.eta.html", {"title": "Login"}) %>
+<link href="/css/login.css" rel="stylesheet" />
+
+<div class="background text-center">
+	<div class="row align-items-start">
+		<div class="col-9"></div>
+		<div class="col-3 sidePanel ps-4 text-black">
+			<h1>Log into AssetFlow</h1>
+		</div>
+	</div>
+	<%~ E.includeFile("../partials/foot.eta.html") %>
+</div>
diff --git a/src/frontend/items.eta.html b/src/frontend/items.eta.html
index be9b031..3e76a42 100644
--- a/src/frontend/items.eta.html
+++ b/src/frontend/items.eta.html
@@ -3,7 +3,7 @@
 <!-- TODO: Center table content -->
 <h1>Items</h1>
 <div class="container">
-	<table class="table">
+	<table class="table align-middle">
 		<thead>
 			<tr>
 				<th scope="col">SKU</th>
@@ -12,6 +12,13 @@
 				<th scope="col">Actions</th>
 			</tr>
 		</thead>
+		<% if(it.items.length == 0) { %>
+		<tbody>
+			<tr>
+				<td colspan="4" class="text-center">No items found</td>
+			</tr>
+		</tbody>
+		<% } %>
 		<tbody>
 			<% it.items.forEach(function(user){ %>
 			<tr>
@@ -23,6 +30,19 @@
 			<% }) %>
 		</tbody>
 	</table>
+	<br>
+	<% if(it.maxPages > 1) { %>
+	<nav aria-label="Page selector">
+		<ul class="pagination justify-content-center">
+		  <li class="page-item <%= it.currentPage-1 < 1 ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage - 1 %>">Previous</a></li>
+		  <% for (var i = 1; i <= it.maxPages; i++) { %>
+		  	<li class="page-item <%= it.currentPage == i ? 'active' : ''%> "><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
+		  <% } %>
+		  				
+		  <li class="page-item <%= it.currentPage+1 > it.maxPages ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage + 1 %>">Next</a></li>
+		</ul>
+	      </nav>
+	<% } %>
 </div>
 
 <%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>
diff --git a/src/frontend/manage/categoryManager.eta.html b/src/frontend/manage/categoryManager.eta.html
index 7c8ce9a..f456156 100644
--- a/src/frontend/manage/categoryManager.eta.html
+++ b/src/frontend/manage/categoryManager.eta.html
@@ -43,7 +43,7 @@
 	</div>
 
 	<!-- Table with all categories -->
-	<table class="table">
+	<table class="table align-middle">
 		<thead>
 			<tr>
 				<!-- <th scope="col">#</th> -->
diff --git a/src/frontend/manage/storageManager.eta.html b/src/frontend/manage/storageManager.eta.html
index e316755..8ed7be8 100644
--- a/src/frontend/manage/storageManager.eta.html
+++ b/src/frontend/manage/storageManager.eta.html
@@ -9,7 +9,7 @@
 				<h1 class="modal-title fs-5" id="storageLocationModalTitle">Edit or create a storage location</h1>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
-			<form class="frontendForm" method="post" data-target="/api/v1/storagelocation">
+			<form id="storageLocationModalForm" class="frontendForm" method="post" data-target="/api/v1/storageLocations">
 				<div class="modal-body">
 					<div class="mb-3">
 						<label for="storageLocationModalName" class="form-label">Name</label>
@@ -18,7 +18,8 @@
 					</div>
 					<div class="mb-3">
 						<label for="storageLocationModalUnit" class="form-label">Select a storage unit</label>
-						<select class="form-select" id="storageLocationModalUnit" name="description" required>
+						<select class="form-select" id="storageLocationModalUnit" name="storageUnitId" required>
+							<option value="undefined"><i>Do not assign a storage unit</i></option>
 							<% it.storUnits.forEach(function(storageunits){ %>
 							<option value="<%= storageunits.id %>"><%= storageunits.name %></option>
 							<% }) %>
@@ -26,6 +27,7 @@
 
 						<!--<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />-->
 						<div id="storageLocationModalUnitText" class="form-text">You have to create a storage unit beforehand.</div>
+						<input type="hidden" id="storageLocationModalIdHidden" name="id" />
 					</div>
 				</div>
 				<div class="modal-footer">
@@ -62,8 +64,8 @@
 
 					<div class="mb-3">
 						<label for="storageUnitModalLocationSelect" class="form-label">Storage Location</label>
-						<select class="form-select" id="storageUnitModalLocationSelect" name="location" onchange="handleSelector()" required>
-							<option value="META_CREATENEW">➕ Create new location</option>
+						<select class="form-select" id="storageUnitModalLocationSelect" name="locationId" onchange="handleSelector()" required>
+							<option value="META_CREATENEW" id="createNewLocationSelection">➕ Create new location</option>
 							<% it.address.forEach(function(address){ %>
 							<option value="<%= address.id %>"><%= address.street %> <%= address.houseNumber %>, <%= address.city %> <%= address.country %></option>
 							<% }) %>
@@ -71,6 +73,7 @@
 
 						<!--<input type="text" class="form-control" id="storageUnitModalLocationSelect" name="select" required />-->
 						<div id="storageUnitModalLocationSelectText" class="form-text">Select or create a new address.</div>
+						<input type="hidden" id="storageUnitModalLocationSelectHidden" name="id" />
 					</div>
 
 					<div id="storageUnitModalContactInfoCreator" class="d-none">
@@ -82,13 +85,13 @@
 						</div>
 						<div class="mb-3">
 							<label for="storageUnitModalHouseNumber" class="form-label">Housenumber</label>
-							<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="housenumber" />
+							<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="houseNumber" />
 							<div id="storageUnitModalHouseNumberText" class="form-text">6a</div>
 						</div>
 
 						<div class="mb-3">
 							<label for="storageUnitModalzipcode" class="form-label">Zipcode</label>
-							<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipcode" />
+							<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipCode" />
 							<div id="storageUnitModalzipcodeText" class="form-text">123456</div>
 						</div>
 
@@ -147,10 +150,9 @@
 				>
 			</div>
 		</div>
-		<table class="table">
+		<table class="table align-middle">
 			<thead>
 				<tr>
-					<th scope="col">LocId</th>
 					<th scope="col">Name</th>
 					<th scope="col">Storage Unit</th>
 					<th scope="col">Actions</th>
@@ -160,18 +162,34 @@
 				<% it.storLocs.forEach(function(locations){ %>
 				<tr id="listEntry-<%= locations.id %>">
 					<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= locations.id %>"><%= locations.name %></td>
-					<td><%= locations.contactInfo %></td>
 					<td>
-						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEdit('<%= locations.name %>')">
+						<% if (locations.storageUnit == null) { %>
+							<i>No storage unit connected</i>
+						      <% } else { %>
+							<%= locations.storageUnit.name %>
+						      <% } %>
+						      </td>
+					<td>
+						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('<%= locations.id %>')">
 							<i class="bi bi-pencil"></i>
 						</button>
-						<button class="btn btn-danger" onclick="preFillDeleteModal('<%= locations.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
+						<button class="btn btn-danger" onclick="preFillDeleteModalLoc('<%= locations.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 					</td>
 				</tr>
 				<% }) %>
 			</tbody>
 		</table>
 	</div>
+
+
+
+
+
+
+
+
+
+	<!-- Storage Unit	-->
 	<div class="tab-pane fade" id="storage-unit-tab-pane" role="tabpanel" aria-labelledby="storage-unit-tab-pane" tabindex="0">
 		<br />
 		A storage unit is a physical place, like a warehouse. This contains an address and a name.
@@ -181,7 +199,7 @@
 				<a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeCreateNew()"><i class="bi bi-building-add"></i> Create new unit</a>
 			</div>
 		</div>
-		<table class="table">
+		<table class="table align-middle">
 			<thead>
 				<tr>
 					<th scope="col">Name</th>
@@ -195,10 +213,10 @@
 					<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= units.id %>"><%= units.name %></td>
 					<td><%= units.contactInfo.street %> <%= units.contactInfo.houseNumber %>, <%= units.contactInfo.city %> <%= units.contactInfo.country %></td>
 					<td>
-						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.name %>')">
+						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.id %>')">
 							<i class="bi bi-pencil"></i>
 						</button>
-						<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
+						<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 					</td>
 				</tr>
 				<% }) %>
diff --git a/src/frontend/partials/controls.eta.html b/src/frontend/partials/controls.eta.html
index ed57b33..c6e1cdb 100644
--- a/src/frontend/partials/controls.eta.html
+++ b/src/frontend/partials/controls.eta.html
@@ -120,8 +120,7 @@
 							data-bs-target="#collapseSettingsStorages"
 							aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
 							aria-controls="collapseSettingsStorages">
-							<i class="bi bi-caret-left-fill magicalTriangle"></i>
-							<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
+							<i class="bi bi-caret-left-fill dropdownIndicator"></i>
 						</span>
 					</a>
 
@@ -144,7 +143,7 @@
 							aria-expanded="<%= it.active.includes('SETT_IMPORT') ? 'true' : 'false'%>"
 							aria-controls="collapseSettingsImport">
 							<i class="bi bi-box-seam"></i> Import
-							<i class="bi bi-caret-left-fill dropdownIndicator magicalTriangle" data-ref-target="#collapseSettingsImport"></i>
+							<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsImport"></i>
 							<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
 						</span>
 					</a>
diff --git a/src/frontend/partials/head.eta.html b/src/frontend/partials/head.eta.html
index bcff16e..4c6df7d 100644
--- a/src/frontend/partials/head.eta.html
+++ b/src/frontend/partials/head.eta.html
@@ -11,6 +11,7 @@
 		<link rel="icon" href="/favicon.ico" />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 
+		<script src="/js/normalizeToast.js"></script>
 		<script src="/static/jquery/dist/jquery.min.js"></script>
 		<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
 		<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
@@ -20,7 +21,6 @@
 		<script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script>
 		<script>
 			// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
-
 			(function () {
 				const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
 				const isDark = currentTheme === 'dark';
diff --git a/src/frontend/style.css b/src/frontend/style.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/api/v1/categories.ts b/src/routes/api/v1/categories.ts
index c16131a..ace112a 100644
--- a/src/routes/api/v1/categories.ts
+++ b/src/routes/api/v1/categories.ts
@@ -80,7 +80,7 @@ async function patch(req: Request, res: Response) {
 		});
 
 		if (result === null) {
-			res.status(410).json({ error: 'category does not exist.' });
+			res.status(410).json({ error: 'Category does not exist.' });
 			return;
 		}
 	} catch (err) {
diff --git a/src/routes/api/v1/index.ts b/src/routes/api/v1/index.ts
index b98b39a..2d78550 100644
--- a/src/routes/api/v1/index.ts
+++ b/src/routes/api/v1/index.ts
@@ -4,12 +4,17 @@ import express from 'express';
 import testRoute from './test.js';
 import categoryRoute from './categories.js';
 import storageUnitRoute from './storageUnits.js';
+import storageLocationRoute from './storageLocations.js';
+
 
 // Router base is '/api/v1'
 const Router = express.Router({ strict: false });
 
 Router.route('/categories').get(categoryRoute.get).post(categoryRoute.post).patch(categoryRoute.patch).delete(categoryRoute.del);
+// TODO: Migrate routes to lowercase.
 Router.route('/storageUnits').get(storageUnitRoute.get).post(storageUnitRoute.post).patch(storageUnitRoute.patch).delete(storageUnitRoute.del);
+Router.route('/storageLocations').get(storageLocationRoute.get).post(storageLocationRoute.post).patch(storageLocationRoute.patch).delete(storageLocationRoute.del);
+
 Router.route('/test').get(testRoute.get);
 
 export default Router;
diff --git a/src/routes/frontend/items.ts b/src/routes/frontend/items.ts
index ef56fda..2f62c30 100644
--- a/src/routes/frontend/items.ts
+++ b/src/routes/frontend/items.ts
@@ -1,12 +1,32 @@
 import { Request, Response } from 'express';
 import { prisma, __path } from '../../index.js';
 
-function get(req: Request, res: Response) {
+async function get(req: Request, res: Response) {
+	// If no page is provided redirect to first
+	if (req.query.page === undefined) {
+		res.redirect('?page=1');
+		return;
+	}
+
+	let page = parseInt(req.query.page.toString());
+	const itemCount = await prisma.item.count({}); // Count all items in the DB
+
+	const takeSize = 25; // Amount of times per page
+	const pageSize = Math.ceil(itemCount / takeSize); // Amount of pages, always round up
+
+	// If page is less then 1 or more then the max page size redirect to first or last page
+	if (page < 1) {
+		res.redirect('?page=1');
+		return;
+	} else if (page > pageSize) {
+		res.redirect('?page=' + pageSize);
+		return;
+	}
+
 	prisma.item
-		.findMany({})
+		.findMany({ skip: (page - 1) * takeSize, take: takeSize }) // Skip the amount of items per page times the page number minus 1; skip has to be (page-1)*takeSize because skip is 0 indexed
 		.then((items) => {
-			// Count amount of total items
-			res.render(__path + '/src/frontend/items.eta.html', { items: items });
+			res.render(__path + '/src/frontend/items.eta.html', { items: items, currentPage: page, maxPages: pageSize });
 		})
 		.catch((err) => {
 			console.error(err);
diff --git a/src/routes/frontend/manage/demo.ts b/src/routes/frontend/manage/demo.ts
new file mode 100644
index 0000000..010c59f
--- /dev/null
+++ b/src/routes/frontend/manage/demo.ts
@@ -0,0 +1,8 @@
+import express, { Request, Response } from 'express';
+import { prisma, __path } from '../../../index.js';
+
+function get(req: Request, res: Response) {
+	res.render(__path + '/src/frontend/auth/login.eta.html'); //, { items: items });
+}
+
+export default { get };
diff --git a/src/routes/frontend/manage/index.ts b/src/routes/frontend/manage/index.ts
index ff41564..99ffe43 100644
--- a/src/routes/frontend/manage/index.ts
+++ b/src/routes/frontend/manage/index.ts
@@ -7,6 +7,7 @@ import jsonImportRoute from './import/jsonImport.js';
 import categoryManager from './categoryManager.js';
 import storageManager from './storageManager.js';
 import startpageRoute from './startpage.js';
+import demoLoginRoute from './demo.js'
 
 // Router base is '/manage'
 const Router = express.Router({ strict: false });
@@ -16,6 +17,7 @@ Router.route('/categories').get(categoryManager.get);
 Router.route('/storages').get(storageManager.get);
 Router.route('/import/csv').get(csvImportRoute.get).post(csvImportRoute.post);
 Router.route('/import/json').get(jsonImportRoute.get).post(jsonImportRoute.post);
+Router.route('/demo/login').get(demoLoginRoute.get);
 Router.route('/').get(startpageRoute.get);
 
 export default Router;
diff --git a/src/routes/frontend/manage/startpage.ts b/src/routes/frontend/manage/startpage.ts
index f13ed36..2c02767 100644
--- a/src/routes/frontend/manage/startpage.ts
+++ b/src/routes/frontend/manage/startpage.ts
@@ -5,4 +5,5 @@ function get(req: Request, res: Response) {
 	res.render(__path + '/src/frontend/manage/startpage.eta.html'); //, { items: items });
 }
 
+
 export default { get };
diff --git a/src/routes/frontend/manage/storageManager.ts b/src/routes/frontend/manage/storageManager.ts
index 936d74f..90367b6 100644
--- a/src/routes/frontend/manage/storageManager.ts
+++ b/src/routes/frontend/manage/storageManager.ts
@@ -2,12 +2,18 @@ import express, { Request, Response } from 'express';
 import { prisma, __path } from '../../../index.js';
 
 function get(req: Request, res: Response) {
-	prisma.storageUnit.findMany({include: {contactInfo: true}}).then((storUnits) => {
-		prisma.storageLocation.findMany().then((storLocs) => {
-			prisma.contactInfo.findMany().then((contactInfos) => {
-			res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
+	prisma.storageUnit.findMany({ include: { contactInfo: true } }).then((storUnits) => {
+		prisma.storageLocation
+			.findMany({
+				include: {
+					storageUnit: true
+				}
+			})
+			.then((storLocs) => {
+				prisma.contactInfo.findMany().then((contactInfos) => {
+					res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
+				});
 			});
-		});
 	});
 }
 
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 3bec316..8a20a90 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -16,9 +16,9 @@ Router.use('/', frontend_routes);
 Router.all('*', function (req, res) {
 	// TODO: Respond based on content-type (with req.is('application/json'))
 	if (req.is('application/json')) {
-		res.status(404).json({ errorcode: '404' });
+		res.status(418)//.json({ errorcode: '404' });
 	} else {
-		res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
+		res.status(418)//.render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
 	}
 });
 
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 0e66f06..8683fbd 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -101,9 +101,16 @@ body {
 }
 
 .rotate {
-	transform: rotate(90deg);
-	color: red;
-	transition: 1s;
+	transform: rotate(-90deg) !important;
+	transition: 0.5s;
+}
+.rotate::before {
+	transform: rotate(-90deg) !important;
+	transition: 0.5s;
+}
+
+.dropdownIndicator {
+	transition: 0.5s;
 }
 
 
@@ -132,4 +139,4 @@ body {
 
 .loaderActive {
 	display: block !important;
-}
\ No newline at end of file
+}
diff --git a/static/css/login.css b/static/css/login.css
new file mode 100644
index 0000000..05812b6
--- /dev/null
+++ b/static/css/login.css
@@ -0,0 +1,23 @@
+.background {
+	background-image: url("https://images.unsplash.com/photo-1683085809775-d9ac53fcbe21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE1fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&q=60");
+	/* fill the page height and width */
+	height: 100vh;
+	width: 100vw;
+	/* make the background image cover the whole page */
+	background-size: cover;
+	/* position the image in the center of the page */
+	background-position: center;
+	/* make the image fixed so it doesn't scroll with the page */
+	background-attachment: fixed;
+	/* make the image not repeat */
+	background-repeat: no-repeat;
+	overflow: hidden;
+}
+
+.sidePanel {
+	/* make somewhat transparent and blurry */
+	background-color: rgba(255, 255, 255, 0.5);
+	backdrop-filter: blur(5px);
+	height: 100vh;
+
+}
\ No newline at end of file
diff --git a/static/js/editCategory.js b/static/js/editCategory.js
index a8eab1f..23abf22 100644
--- a/static/js/editCategory.js
+++ b/static/js/editCategory.js
@@ -20,7 +20,7 @@ function getDataForEdit(name) {
 			$('.loader-overlay').removeClass('active');
 			// Close the modal
 			$('.modal').modal('hide');
-			$('#generalToast').removeClass('text-bg-primary');
+			normalizeToast()
 			$('#generalToast').addClass('text-bg-danger');
 			$('#generalToast').toast('show');
 			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
@@ -35,6 +35,7 @@ function primeCreateNew() {
 	const form = document.getElementById('CategoryModalForm');
 	form.setAttribute('method', 'POST');
 	document.getElementById('editCategoryModalLabel').innerText = 'Create a new category';
+	$('.form-control').val('');
 	return true;
 }
 
@@ -81,14 +82,13 @@ function deleteEntry(id) {
 		error: function (data) {
 			// hide the staticBackdrop modal
 			$('#staticBackdrop').modal('hide');
-			$('#generalToast').removeClass('text-bg-primary');
+			normalizeToast()
+
 			$('#generalToast').addClass('text-bg-danger');
 			$('#generalToast').toast('show');
 			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
 			setTimeout(() => {
 				$('#generalToast').toast('hide');
-				$('#generalToast').removeClass('text-bg-danger');
-				$('#generalToast').addClass('text-bg-primary');
 			}, 3000);
 		}
 	});
@@ -118,7 +118,7 @@ function preFillDeleteModal(name) {
 			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
 
 			$('#staticBackdrop').modal('hide');
-			$('#generalToast').removeClass('text-bg-primary');
+			normalizeToast()
 			$('#generalToast').addClass('text-bg-danger');
 			$('#generalToast').toast('show');
 			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
diff --git a/static/js/editStorages.js b/static/js/editStorages.js
index 701a583..984f9e8 100644
--- a/static/js/editStorages.js
+++ b/static/js/editStorages.js
@@ -24,8 +24,14 @@ $('.nav-link').on('click', function (e) {
 });
 
 function primeCreateNew() {
+	// Clear the form
+	$('.form-control').val('');
 	const form = document.getElementById('storageUnitModalForm');
-	const form2 = document.getElementById('storageLocationModal');
+	const form2 = document.getElementById('storageLocationModalForm');
+	document.getElementById('createNewLocationSelection').disabled = false;
+	document.getElementById('storageUnitModalLocationSelectText').innerText= "Select or create a new location.";
+	document.getElementById('storageUnitModalLabel').innerText = "Create new storage unit";
+	document.getElementById('storageLocationModalTitle').innerText = "Create new storage location";
 	form.setAttribute('method', 'POST');
 	form2.setAttribute('method', 'POST');
 	return true;
@@ -33,7 +39,14 @@ function primeCreateNew() {
 
 function primeEdit() {
 	const form = document.getElementById('storageUnitModalForm');
-	const form2 = document.getElementById('storageLocationModal');
+	const form2 = document.getElementById('storageLocationModalForm');
+	// Disable create new location
+	document.getElementById('createNewLocationSelection').disabled = true;
+	document.getElementById('storageUnitModalLocationSelectText').innerText= "While editing you can only select already existing locations. Use the settings to create new ones.";
+	document.getElementById('storageUnitModalLabel').innerText = "Edit a storage unit";
+	document.getElementById('storageLocationModalTitle').innerText = "Edit a storage location"
+	document.getElementById('storageUnitModalLocationSelect').value = 1
+	handleSelector()
 	form.setAttribute('method', 'PATCH');
 	form2.setAttribute('method', 'PATCH');
 	return true;
@@ -49,7 +62,264 @@ function handleSelector(){
 		$('#storageUnitModalContactInfoCreator').addClass('d-none')
 		$('.requireOnCreate').attr('required', false)
 	}
-	console.log(value);
+}
+
+function preFillDeleteModal(id) {
+	$.ajax({
+		type: 'get',
+		url: `/api/v1/storageUnits?id=${id}`,
+		success: function (data) {
+			const result = JSON.parse(data);
+
+			// Get elements inside the editCategoryModal
+			const modal_categoryName = document.getElementById('deleteNamePlaceholder');
+			const modal_deleteButton = document.getElementById('deleteActionBtn');
+			//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
+			//const modal_categoryid = document.getElementById('editCategoryModalId');
+
+			modal_categoryName.innerText = result.name;
+			modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`);
+
+			//modal_categoryDescription.value = result.description;
+			//modal_categoryid.value = result.id;
+		},
+		error: function (data) {
+			console.log('!!!! ERROR !!!!', data);
+			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
+
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.');
+			setTimeout(() => {
+				window.location.reload();
+			}, 3000);
+		}
+	});
+}
+
+
+function preFillDeleteModalLoc(id) {
+	$.ajax({
+		type: 'get',
+		url: `/api/v1/storageLocations?id=${id}`,
+		success: function (data) {
+			const result = JSON.parse(data);
+
+			// Get elements inside the editCategoryModal
+			const modal_categoryName = document.getElementById('deleteNamePlaceholder');
+			const modal_deleteButton = document.getElementById('deleteActionBtn');
+			//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
+			//const modal_categoryid = document.getElementById('editCategoryModalId');
+
+			modal_categoryName.innerText = result.name;
+			modal_deleteButton.setAttribute('onclick', `deleteEntryLoc(${result.id})`);
+
+			//modal_categoryDescription.value = result.description;
+			//modal_categoryid.value = result.id;
+		},
+		error: function (data) {
+			console.log('!!!! ERROR !!!!', data);
+			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
+
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.');
+			setTimeout(() => {
+				window.location.reload();
+			}, 3000);
+		}
+	});
+}
+
+
+function deleteEntry(id) {
+	$.ajax({
+		type: 'delete',
+		url: `/api/v1/storageUnits`,
+		data: { id: id },
+		success: function (data) {
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+
+			$('#generalToast').addClass('text-bg-success');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
+			confetti({
+				spread: 360,
+				ticks: 100,
+				gravity: 0.1,
+				decay: 0.94,
+				startVelocity: 30,
+				particleCount: 20,
+				scalar: 2,
+				shapes: ['text'],
+				shapeOptions: {
+					text: {
+						value: ['❌', '🗑️', '🚫']
+					}
+				}
+			});
+			setTimeout(() => {
+				$('#generalToast').toast('hide');
+				window.location.reload();
+			}, 2000);
+		},
+		error: function (data) {
+			// hide the staticBackdrop modal
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
+			setTimeout(() => {
+				$('#generalToast').toast('hide');
+			}, 3000);
+		}
+	});
+}
+
+
+
+function deleteEntryLoc(id) {
+	$.ajax({
+		type: 'delete',
+		url: `/api/v1/storageLocations`,
+		data: { id: id },
+		success: function (data) {
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+
+			$('#generalToast').addClass('text-bg-success');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
+			confetti({
+				spread: 360,
+				ticks: 100,
+				gravity: 0.1,
+				decay: 0.94,
+				startVelocity: 30,
+				particleCount: 20,
+				scalar: 2,
+				shapes: ['text'],
+				shapeOptions: {
+					text: {
+						value: ['❌', '🗑️', '🚫']
+					}
+				}
+			});
+			setTimeout(() => {
+				$('#generalToast').toast('hide');
+				window.location.reload();
+			}, 2000);
+		},
+		error: function (data) {
+			// hide the staticBackdrop modal
+			$('#staticBackdrop').modal('hide');
+			normalizeToast()
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
+			setTimeout(() => {
+				$('#generalToast').toast('hide');
+			}, 3000);
+		}
+	});
+}
+
+
+function getDataForEdit(id) {
+	$.ajax({
+		type: 'get',
+		url: `/api/v1/storageUnits?id=${id}`,
+		success: function (data) {
+			const result = JSON.parse(data);
+
+			// Get elements inside the editCategoryModal
+			const modal_unitName = document.getElementById('storageUnitModalName');
+			const modal_unitLocation = document.getElementById('storageUnitModalLocationSelect');
+			const modal_unitId = document.getElementById('storageUnitModalLocationSelectHidden');
+			// const modal_categoryid = document.getElementById('editCategoryModalId');
+
+			modal_unitName.value = result.name;
+			modal_unitId.value = result.id;
+
+			// Select the correct location from the select based on the value of the option
+			for(var i, j = 0; i = modal_unitLocation.options[j]; j++) {
+				if(i.value == result.contactInfoId) {
+					console.log("Found it");
+					modal_unitLocation.selectedIndex = j;
+					break;
+				}
+			}
+
+			
+		},
+		error: function (data) {
+			console.log('!!!! ERROR !!!!', data);
+			// Hide overlay with spinner
+			$('.loader-overlay').removeClass('active');
+			// Close the modal
+			$('.modal').modal('hide');
+			normalizeToast()
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
+			setTimeout(() => {
+				window.location.reload();
+			}, 3000);
+		}
+	});
+}
+
+
+function getDataForEditLoc(id) {
+	$.ajax({
+		type: 'get',
+		url: `/api/v1/storageLocations?id=${id}`,
+		success: function (data) {
+			const result = JSON.parse(data);
+
+			// Get elements inside the editCategoryModal
+			const modal_locationName = document.getElementById('storageLocationModalName');
+			const modal_locationUnitSel = document.getElementById('storageLocationModalUnit');
+			const modal_locationId = document.getElementById('storageLocationModalIdHidden');
+			// const modal_categoryid = document.getElementById('editCategoryModalId');
+
+			modal_locationName.value = result.name;
+			modal_locationId.value = result.id;
+
+			// Select the correct location from the select based on the value of the option
+			for(var i, j = 0; i = modal_locationUnitSel.options[j]; j++) {
+				if(i.value == result.storageUnit) {
+					console.log("Found it");
+					modal_locationUnitSel.selectedIndex = j;
+					break;
+				}
+			}
+
+			
+		},
+		error: function (data) {
+			console.log('!!!! ERROR !!!!', data);
+			// Hide overlay with spinner
+			$('.loader-overlay').removeClass('active');
+			// Close the modal
+			$('.modal').modal('hide');
+			normalizeToast()
+			$('#generalToast').addClass('text-bg-danger');
+			$('#generalToast').toast('show');
+			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
+			setTimeout(() => {
+				window.location.reload();
+			}, 3000);
+		}
+	});
 }
 
 handleSelector()
\ No newline at end of file
diff --git a/static/js/formHandler.js b/static/js/formHandler.js
index e836785..1a91c03 100644
--- a/static/js/formHandler.js
+++ b/static/js/formHandler.js
@@ -1,5 +1,5 @@
+var amountOfForms = $('.frontendForm').length;
 $('.frontendForm').each(function() {
-	console.log('frontendForm found');
 	$(this).on('submit', function(e) {
 		e.preventDefault();
 
@@ -10,7 +10,6 @@ $('.frontendForm').each(function() {
 		
 
 		formData = form.serializeArray();
-		console.log(formData, $(this).attr('method'), $(this).attr('data-target'));
 		console.log('submitting form');
 		$.ajax({
 			type: $(this).attr('method'),
@@ -26,14 +25,12 @@ $('.frontendForm').each(function() {
 				// Clear all fields
 				form.find('input, textarea').val('');
 				
-				$('#generalToast').removeClass('text-bg-primary');
+				normalizeToast()
 				$('#generalToast').addClass('text-bg-success');
 				$('#generalToast').toast('show');
 				$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Changes saved successfully.');
 				setTimeout(() => {
 					$('#generalToast').toast('hide');;
-					$('#generalToast').removeClass('text-bg-success');
-					$('#generalToast').addClass('text-bg-primary');
 					window.location.reload();
 				}, 1500);
 			},
@@ -41,17 +38,24 @@ $('.frontendForm').each(function() {
 				console.log('error');
 				// Hide overlay with spinner
 				$('.loader-overlay').removeClass('loaderActive');
-				
-				$('#generalToast').removeClass('text-bg-primary');
+
+				// Check for response code 409
+				normalizeToast()
 				$('#generalToast').addClass('text-bg-danger');
 				$('#generalToast').toast('show');
-				$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
+
+
+				if (data.status == 409) {
+					$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.');
+				}else {
+					$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
+				}
 				setTimeout(() => {
 					$('#generalToast').toast('hide');
-					$('#generalToast').removeClass('text-bg-danger');
-					$('#generalToast').addClass('text-bg-primary');
 				}, 3000);
 			}
 		});
 	})
 });
+
+console.info("Found " + amountOfForms + " forms on this page.")
\ No newline at end of file
diff --git a/static/js/handleSidebarTriangles.js b/static/js/handleSidebarTriangles.js
index b23517c..02e7fe0 100644
--- a/static/js/handleSidebarTriangles.js
+++ b/static/js/handleSidebarTriangles.js
@@ -5,12 +5,13 @@ trinagles.each(function () {
 	var target = $(this.dataset.refTarget);
 	target.on('show.bs.collapse', function () {
 		//$(this).parent.addClass('rotate');
-		// $(this).parent().find('.dropdownIndicator').addClass('rotate');
+		 $(this).parent().find('.dropdownIndicator').addClass('rotate');
+		 console.log($(this).parent().find('.dropdownIndicator'));
 		console.log('show');
 	});
 	target.on('hide.bs.collapse', function () {
 		//$(this).parent.removeClass('rotate');
-		// $(this).parent().find('.dropdownIndicator').removeClass('rotate');
+		 $(this).parent().find('.dropdownIndicator').removeClass('rotate');
 		console.log('hide');
 	});
 	// bootstrap.Collapse.getOrCreateInstance(document.querySelector(this.dataset.refTarget))
diff --git a/static/js/normalizeToast.js b/static/js/normalizeToast.js
new file mode 100644
index 0000000..351d2b8
--- /dev/null
+++ b/static/js/normalizeToast.js
@@ -0,0 +1,7 @@
+function normalizeToast(){
+	$('#generalToast').removeClass('text-bg-primary');
+	$('#generalToast').removeClass('text-bg-success');
+	$('#generalToast').removeClass('text-bg-danger');
+	$('#generalToast').removeClass('text-bg-warning');
+	$('#generalToast').removeClass('text-bg-info');
+}