From 3b1b4f30927a289bdab985857546b42669cb53b9 Mon Sep 17 00:00:00 2001
From: Spacelord <git@spacelord.de>
Date: Fri, 12 May 2023 23:57:21 +0200
Subject: [PATCH] Updated styles and Added storageManager. - Dark/White-mode
 support - Collapsible navs - Renamed items template. - StorageBuilding's are
 now StorageUnit's - Formatting, general cleanup, some bug fixing.

---
 README.md                                     | 15 +++-
 allowedStaticPaths.json                       |  3 +-
 prisma/schema.prisma                          | 22 ++---
 .../{allItems.eta.html => items.eta.html}     |  6 +-
 src/frontend/manage/storageManager.eta.html   | 75 +++++++++++++++++
 src/frontend/partials/controls.eta.html       | 83 ++++++++++++-------
 src/frontend/partials/foot.eta.html           |  2 -
 src/frontend/partials/head.eta.html           | 35 ++++++--
 src/routes/frontend/dashboard.ts              |  1 +
 src/routes/frontend/items.ts                  |  2 +-
 src/routes/frontend/manage/index.ts           |  2 +
 src/routes/frontend/manage/storageManager.ts  | 15 ++++
 static/css/dashboard.css                      | 17 ++--
 static/js/editStorages.js                     | 23 +++++
 14 files changed, 236 insertions(+), 65 deletions(-)
 rename src/frontend/{allItems.eta.html => items.eta.html} (92%)
 create mode 100644 src/frontend/manage/storageManager.eta.html
 create mode 100644 src/routes/frontend/manage/storageManager.ts
 create mode 100644 static/js/editStorages.js

diff --git a/README.md b/README.md
index e753842..9c4b11d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,15 @@
 # Assetflow
 
-## Theme?
-https://bootswatch.com/darkly/
+Assetflow is an inventory management solution targeted at the event industry.
+
+## Formats and conventions (WiP)
+
+SKU
+Stock Keeping Unit
+
+LocID
+LocID_Regal16_Fach7
+
+StorageLocation_LocID_Regal16_Fach7
+
+
diff --git a/allowedStaticPaths.json b/allowedStaticPaths.json
index 90f1a70..006c273 100644
--- a/allowedStaticPaths.json
+++ b/allowedStaticPaths.json
@@ -9,7 +9,8 @@
 		"/bootstrap/dist/css/bootstrap.min.css.map",
 		"/@popperjs/core/dist/umd/popper.min.js",
 		"/@popperjs/core/dist/umd/popper.min.js.map",
-		"/bootstrap/dist/js/bootstrap.bundle.min.js.map"
+		"/bootstrap/dist/js/bootstrap.bundle.min.js.map",
+		"/bootstrap-icons/font/fonts/bootstrap-icons.woff"
 	],
 	"debugMode": false
 }
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 825d9f6..519607a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -13,14 +13,14 @@ datasource db {
 // https://github.com/pantharshit00/prisma-docs-generator
 generator docs {
   provider = "node node_modules/prisma-docs-generator"
-  output = "../docs"
+  output   = "../docs"
 }
 
 // https://github.com/notiz-dev/prisma-dbml-generator
 // Viewer: https://dbdiagram.io/d
 generator dbml {
-  provider = "prisma-dbml-generator"
-  output = "../docs"
+  provider    = "prisma-dbml-generator"
+  output      = "../docs"
   outputName  = "schema.dbml"
   projectName = "AssetFlow"
 }
@@ -34,7 +34,7 @@ enum Status {
 
 model Item {
   id                Int              @id @default(autoincrement())
-  SKU               String?           @unique
+  SKU               String?          @unique
   Amount            Int
   Comment           String?
   name              String
@@ -50,14 +50,14 @@ model Item {
 }
 
 model StorageLocation {
-  id                Int              @id @default(autoincrement())
-  name              String
-  storageBuilding   StorageBuilding? @relation(fields: [storageBuildingId], references: [id])
-  storageBuildingId Int?
-  Item              Item[]
+  id            Int          @id @default(autoincrement())
+  name          String       @unique
+  storageUnit   StorageUnit? @relation(fields: [storageUnitId], references: [id])
+  storageUnitId Int?
+  Item          Item[]
 }
 
-model StorageBuilding {
+model StorageUnit {
   id              Int               @id @default(autoincrement())
   name            String
   street          String
@@ -70,7 +70,7 @@ model StorageBuilding {
 
 model Category {
   id          Int     @id @default(autoincrement())
-  name        String @unique
+  name        String  @unique
   description String?
   Item        Item[]
 }
diff --git a/src/frontend/allItems.eta.html b/src/frontend/items.eta.html
similarity index 92%
rename from src/frontend/allItems.eta.html
rename to src/frontend/items.eta.html
index 7caac5f..0343f4b 100644
--- a/src/frontend/allItems.eta.html
+++ b/src/frontend/items.eta.html
@@ -5,20 +5,18 @@
 	<table class="table">
 		<thead>
 			<tr>
-				<th scope="col">#</th>
+				<th scope="col">SKU</th>
 				<th scope="col">Name</th>
 				<th scope="col">Status</th>
-				<th scope="col">SKU</th>
 				<th scope="col">Actions</th>
 			</tr>
 		</thead>
 		<tbody>
 			<% it.items.forEach(function(user){ %>
 			<tr>
-				<th scope="row"><%= user.id %></th>
+				<td><%= user.SKU %></td>
 				<td><%= user.name %></td>
 				<td><span class="badge text-bg-success"><%= user.status %></span></td>
-				<td><%= user.SKU %></td>
 				<td><a href="#" class="btn btn-primary">Edit</a></td>
 			</tr>
 			<% }) %>
diff --git a/src/frontend/manage/storageManager.eta.html b/src/frontend/manage/storageManager.eta.html
new file mode 100644
index 0000000..6e53d4e
--- /dev/null
+++ b/src/frontend/manage/storageManager.eta.html
@@ -0,0 +1,75 @@
+<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Storage Manager"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_STORE"}) %>
+
+<h1>Storages</h1>
+<ul class="nav nav-underline" id="storageTabList" role="tablist">
+	<li class="nav-item" role="presentation">
+		<button
+			class="nav-link active"
+			id="storage-loc-tab"
+			data-bs-toggle="tab"
+			data-bs-target="#storage-loc-tab-pane"
+			type="button"
+			role="tab"
+			aria-controls="storage-loc-tab-pane"
+			aria-selected="true">
+			<i class="bi bi-bookshelf"></i> Storage Location
+		</button>
+	</li>
+	<li class="nav-item" role="presentation">
+		<button
+			class="nav-link"
+			id="storage-unit-tab"
+			data-bs-toggle="tab"
+			data-bs-target="#storage-unit-tab-pane"
+			type="button"
+			role="tab"
+			aria-controls="storage-unit-tab-pane"
+			aria-selected="false">
+			<i class="bi bi-buildings"></i> Storage Unit
+		</button>
+	</li>
+</ul>
+<div class="tab-content" id="storageTabListContent">
+	<div class="tab-pane fade show active" id="storage-loc-tab-pane" role="tabpanel" aria-labelledby="storage-loc-tab-pane" tabindex="0">
+		<br>
+		<div class="row">
+			<div class="col-12">
+				<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageLocationModal"><i class="bi bi-plus-lg"></i> Create new Location</a>
+			</div>
+		</div>
+		<table class="table">
+		<thead>
+			<tr>
+				<th scope="col">LocId</th>
+				<th scope="col">Name</th>
+				<th scope="col">Storage Unit</th>
+				<th scope="col">Actions</th>
+			</tr>
+		</thead>
+		<tbody>
+
+		</tbody>
+	</table>
+	</div>
+	<div class="tab-pane fade" id="storage-unit-tab-pane" role="tabpanel" aria-labelledby="storage-unit-tab-pane" tabindex="0">
+		<br>
+		<div class="row">
+			<div class="col-12">
+				<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageUnitModal"><i class="bi bi-building-add"></i> Create new unit</a>
+			</div>
+		</div>
+		<table class="table">
+			<thead>
+				<tr>
+					<th scope="col">#</th>
+					<th scope="col">Name</th>
+					<th scope="col">Address</th>
+					<th scope="col">Actions</th>
+				</tr>
+			</thead>
+			<tbody>
+	</div>
+</div>
+<script src="/js/editStorages.js"></script>
+
+<%~ E.includeFile("../partials/controlsFoot.eta.html") %> <%~ E.includeFile("../partials/foot.eta.html") %>
diff --git a/src/frontend/partials/controls.eta.html b/src/frontend/partials/controls.eta.html
index b10d089..3f9fc35 100644
--- a/src/frontend/partials/controls.eta.html
+++ b/src/frontend/partials/controls.eta.html
@@ -10,12 +10,9 @@
 		aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button>
-	
-	<input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search" id="SearchBox" />
-	<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%">
-		
-	</div>
 
+	<input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search" id="SearchBox" />
+	<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%"></div>
 
 	<div class="navbar-nav">
 		<div class="nav-item text-nowrap">
@@ -24,60 +21,59 @@
 	</div>
 </header>
 
-
-<div class="toast-container position-fixed bottom-0 end-0 p-3 ">
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
 	<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
 		<div class="toast-header">
 			<strong class="me-auto">Notification</strong>
 			<small>Just now</small>
 			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 		</div>
-		<div class="toast-body" id="toastText">
-			The button you just pressed is very useless.
-		</div>
+		<div class="toast-body" id="toastText">The button you just pressed is very useless.</div>
 	</div>
 </div>
 <script>
 	let texti = 0;
-	alltexts = ["Nope, still useless", "Stop pressing me!", "There are NO USERS!", "Please stop.", "PLEASE!"];
-	const toastLiveExample = document.getElementById('liveToast')
-	const logoutButton = document.getElementById('logoutButton')
+	alltexts = ['Nope, still useless', 'Stop pressing me!', 'There are NO USERS!', 'Please stop.', 'PLEASE!'];
+	const toastLiveExample = document.getElementById('liveToast');
+	const logoutButton = document.getElementById('logoutButton');
 	logoutButton.addEventListener('click', () => {
 		toastFunction();
 		texti++;
-		if(texti >= alltexts.length) texti = 0;
-	})
+		if (texti >= alltexts.length) texti = 0;
+	});
 
 	function toastFunction() {
-		const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
-		toastBootstrap.show()
-		setTimeout(function(){ toastBootstrap.hide(); document.getElementById("toastText").innerHTML = alltexts[texti] }, 3000);
+		const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
+		toastBootstrap.show();
+		setTimeout(function () {
+			toastBootstrap.hide();
+			document.getElementById('toastText').innerHTML = alltexts[texti];
+		}, 3000);
 	}
 </script>
 
 <div class="container-fluid">
-	
 	<div class="row">
-		<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+		<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
 			<div class="position-sticky pt-3">
 				<ul class="nav flex-column">
 					<li class="nav-item">
 						<a class="nav-link <%= it.active == 'Dashboard' ? 'active' : ''%>" aria-current="page" href="/"> <i class="bi bi-house"></i> Dashboard </a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link <%= it.active == 'AllItems' ? 'active' : ''%>"" href="/items"> <i class="bi bi-list-ul"></i> All Items </a>
+						<a class="nav-link <%= it.active == 'AllItems' ? 'active' : ''%>" href="/items"> <i class="bi bi-list-ul"></i> All Items </a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Products </a>
+						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Products </a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Customers </a>
+						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Customers </a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Reports </a>
+						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Reports </a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>"" href="#"> Integrations </a>
+						<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Integrations </a>
 					</li>
 				</ul>
 
@@ -96,12 +92,39 @@
 				<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
 					<span>Settings</span>
 				</h6>
+
+				<!--
+	<ul class="nav flex-column mb-4"></ul>
+-->
+
 				<ul class="nav flex-column mb-2">
-				<li class="nav-item">
-					<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a>
-				</li>
-			</ul>
+					<a class="nav-link <%= it.active == 'SETT_STORE' ? 'active' : ''%>" href="/manage/storages"
+						><i class="bi bi-box-seam"></i> Manage storages
+						<span
+							class="<%= it.active == 'SETT_STORE' ? 'active' : ''%>"
+							type="button"
+							onclick="return false"
+							data-bs-toggle="collapse"
+							data-bs-target="#collapseSettingsStorages"
+							aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
+							aria-controls="collapseSettingsStorages">
+							<i class="bi bi-caret-down-fill"></i>
+							<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
+						</span>
+					</a>
+					
+
+					<div class="collapse <%= it.active == 'SETT_STORE' ? 'show' : ''%>" id="collapseSettingsStorages">
+						<a class="nav-link ms-4" href="/manage/storages#storage-loc-tab"><i class="bi bi-bookshelf"></i> Manage locations </a>
+						<a class="nav-link ms-4" href="/manage/storages#storage-unit-tab"><i class="bi bi-buildings"></i> Manage units </a>
+					</div>
+
+					<li class="nav-item">
+						<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a>
+					</li>
+				</ul>
 			</div>
 		</nav>
 
-		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%;">
\ No newline at end of file
+		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">
+			<!-- The main tag needs to be left open! -->
diff --git a/src/frontend/partials/foot.eta.html b/src/frontend/partials/foot.eta.html
index ae99a35..a6e113a 100644
--- a/src/frontend/partials/foot.eta.html
+++ b/src/frontend/partials/foot.eta.html
@@ -1,5 +1,3 @@
-<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/src/frontend/partials/head.eta.html b/src/frontend/partials/head.eta.html
index d95ed1b..b7946ad 100644
--- a/src/frontend/partials/head.eta.html
+++ b/src/frontend/partials/head.eta.html
@@ -12,9 +12,34 @@
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 
 		<script src="/static/jquery/dist/jquery.min.js"></script>
-		<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-		<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-		<link href="/css/dashboard.css" rel="stylesheet">
-		
+		<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+		<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
+		<link href="/css/dashboard.css" rel="stylesheet" />
+		<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+		<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
+		<script>
+			// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
+
+			(function () {
+				const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
+				const isDark = currentTheme === 'dark';
+				const isLight = currentTheme === 'light';
+
+				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+				const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+				if (currentTheme === 'auto') {
+					if (prefersDark) {
+						document.documentElement.setAttribute('data-bs-theme', 'dark');
+					} else if (prefersLight) {
+						document.documentElement.setAttribute('data-bs-theme', 'light');
+					}
+				} else if (isDark) {
+					document.documentElement.setAttribute('data-bs-theme', 'dark');
+				} else if (isLight) {
+					document.documentElement.setAttribute('data-bs-theme', 'light');
+				}
+			})();
+		</script>
 	</head>
-	<body>
\ No newline at end of file
+	<body>
diff --git a/src/routes/frontend/dashboard.ts b/src/routes/frontend/dashboard.ts
index 4666853..dc85499 100644
--- a/src/routes/frontend/dashboard.ts
+++ b/src/routes/frontend/dashboard.ts
@@ -4,6 +4,7 @@ import { prisma, __path } from '../../index.js';
 export default (req: Request, res: Response) => {
 	// TODO: Fix it? Express behaves like fucking shit with routers and /. Do not ask about it or touch it. EVER! (But if you can fix it a PR is welcome!)
 	if (req.originalUrl !== '/') {
+		// TODO: Respond based on content-type (with req.is('application/json'))
 		res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
 	} else {
 		prisma.item
diff --git a/src/routes/frontend/items.ts b/src/routes/frontend/items.ts
index 18964d3..714ea07 100644
--- a/src/routes/frontend/items.ts
+++ b/src/routes/frontend/items.ts
@@ -6,7 +6,7 @@ export default (req: Request, res: Response) => {
 		.findMany({})
 		.then((items) => {
 			// Count amount of total items
-			res.render(__path + '/src/frontend/allItems.eta.html', { items: items });
+			res.render(__path + '/src/frontend/items.eta.html', { items: items });
 		})
 		.catch((err) => {
 			console.error(err);
diff --git a/src/routes/frontend/manage/index.ts b/src/routes/frontend/manage/index.ts
index 72f9ec6..4a05be3 100644
--- a/src/routes/frontend/manage/index.ts
+++ b/src/routes/frontend/manage/index.ts
@@ -4,12 +4,14 @@ import express from 'express';
 import testRoute from './test.js';
 import csvImportRoute from './import/csvImport.js';
 import categoryManager from './categoryManager.js';
+import storageManager from './storageManager.js';
 
 // Router base is '/manage'
 const Router = express.Router({ strict: false });
 
 Router.use('/test', testRoute);
 Router.use('/categories', categoryManager)
+Router.use('/storages', storageManager)
 Router.use('/import/csv', csvImportRoute);
 
 export default Router;
diff --git a/src/routes/frontend/manage/storageManager.ts b/src/routes/frontend/manage/storageManager.ts
new file mode 100644
index 0000000..7e55fca
--- /dev/null
+++ b/src/routes/frontend/manage/storageManager.ts
@@ -0,0 +1,15 @@
+import express, { Request, Response } from 'express';
+import { prisma, __path } from '../../../index.js';
+
+export default (req: Request, res: Response) => {
+	//	prisma.item
+	//		.findMany({})
+	//		.then((items) => {
+	// Count amount of total items
+	res.render(__path + '/src/frontend/manage/storageManager.eta.html'); //, { items: items });
+	//		})
+	//		.catch((err) => {
+	//			console.error(err);
+	//			res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
+	//		});
+};
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 6f02918..ad2a92c 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -9,11 +9,8 @@ body {
 .sidebar {
 	position: fixed;
 	top: 0;
-	/* rtl:raw:
-  right: 0;
-  */
+
 	bottom: 0;
-	/* rtl:remove */
 	left: 0;
 	z-index: 100; /* Behind the navbar */
 	padding: 48px 0 0; /* Height of navbar */
@@ -37,12 +34,13 @@ body {
 
 .sidebar .nav-link {
 	font-weight: 500;
-	color: #333;
+	/* 	color: #333; */
+	color: var(--bs-body-color);
 }
 
 .sidebar .nav-link .feather {
 	margin-right: 4px;
-	color: #727272;
+	color: var(--bs-body-color);
 }
 
 .sidebar .nav-link.active {
@@ -59,6 +57,10 @@ body {
 	text-transform: uppercase;
 }
 
+#sidebarMenu {
+	background-color: var(--bs-secondary-bg);
+}
+
 /*
  * Navbar
  */
@@ -67,7 +69,6 @@ body {
 	padding-top: 0.75rem;
 	padding-bottom: 0.75rem;
 	font-size: 1rem;
-	background-color: rgba(0, 0, 0, 0.25);
 	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -83,8 +84,6 @@ body {
 }
 
 .form-control-dark {
-	color: #fff;
-	background-color: rgba(255, 255, 255, 0.1);
 	border-color: rgba(255, 255, 255, 0.1);
 }
 
diff --git a/static/js/editStorages.js b/static/js/editStorages.js
new file mode 100644
index 0000000..9f7ce20
--- /dev/null
+++ b/static/js/editStorages.js
@@ -0,0 +1,23 @@
+// Javascript to enable link to tab
+// This magic js codes enables anchor links to work with bootstrap tabs
+// Taken from https://stackoverflow.com/a/9393768/11317151 (and edited, like a lot)
+
+// Also update on location change
+window.addEventListener("hashchange", function() {
+
+
+var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
+if (hash) {
+	bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
+} 
+
+}, false);
+var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
+if (hash) {
+	bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
+} 
+
+// Change hash for page-reload
+$('.nav-link').on('click', function (e) {
+	window.location.hash = e.target.id;
+})
\ No newline at end of file