QuadcoreDevelopment · CoderTobi · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/backend/eslint.config.mjs b/backend/eslint.config.mjs
@@ -24,6 +24,9 @@ export default defineConfig([
 				"variables": true,
 				"allowNamedExports": false
 			}]
+		},
+		languageOptions: { 
+			globals: { ...globals.node }
 		}
 	}
 

diff --git a/frontend/client.js b/frontend/client.js
@@ -21,12 +21,14 @@ try
 	const HTTP_PORT = 8000;
 	const express = require('express');
 	//const morgan = require('morgan');
+	const replaceMiddleware = require('./middleware/replaceMiddleware');
 
 	console.log('Creating and configuring Web Server...');
 	const app = express();
 
 	console.log('Binding middleware...');
-	app.use(express.static('./public'))
+	app.use(replaceMiddleware);
+	app.use(express.static('./public'));
 	app.use(function(request, response, next) {
 		response.setHeader('Access-Control-Allow-Origin', '*'); 
 		response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -26,7 +26,7 @@ export default defineConfig([
 			}]
 		},
 		languageOptions: { 
-			globals: { ...globals.browser, ...globals.jquery }
+			globals: { ...globals.browser, ...globals.jquery, ...globals.node }
 		}
 	}
 

diff --git a/frontend/middleware/replaceMiddleware.js b/frontend/middleware/replaceMiddleware.js
@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+
+// Mapping: Marker => Datei
+const replacements = {
+    '<!-- nav -->': path.join(__dirname, '../templates/nav.html'),
+    '<!-- commonHead -->': path.join(__dirname, '../templates/commonHead.html'),
+    '<!-- bottomScripts -->': path.join(__dirname, '../templates/bottomScripts.html'),
+    // weitere Marker und Dateien hier ergänzen
+};
+
+function replaceMiddleware(req, res, next) {
+    let requestedFile = req.path;
+
+    // Wenn Root angefragt wird, auf index.html umleiten
+    if (requestedFile === '/' || requestedFile === '') {
+        requestedFile = '/index.html';
+    }
+
+    // Wenn es kein HTML ist skip
+    if (!requestedFile.endsWith('.html')) {
+        return next();
+    }
+
+    console.log(`replaceMiddleware running for ${requestedFile}`);
+
+    const filePath = path.join(__dirname, '../public', requestedFile);
+    fs.readFile(filePath, 'utf8', (err, data) => {
+        if (err) {
+            console.log("Error in replaceMiddleware: could not find " + filePath);
+            return next();
+        }
+
+        // Alle Marker ersetzen
+        const markers = Object.keys(replacements);
+        let pending = markers.length;
+        let replacedData = data;
+
+        if (pending === 0) {
+            res.setHeader('Content-Type', 'text/html');
+            return res.send(replacedData);
+        }
+
+        markers.forEach(marker => {
+
+            if(!replacedData.includes(marker))
+            {
+                pending--;
+                return; //hier wie continue
+            }
+
+            fs.readFile(replacements[marker], 'utf8', (fileErr, fileContent) => {
+                if (fileErr) {
+                    console.log(`Error in replaceMiddleware: could not find file for marker ${marker}`);
+                }
+                else {
+                    replacedData = replacedData.replace(marker, fileContent);
+                }
+                pending--;
+                if (pending <= 0) {
+                    res.setHeader('Content-Type', 'text/html');
+                    res.send(replacedData);
+                }
+            });
+        });
+    });
+}
+
+module.exports = replaceMiddleware;
diff --git a/frontend/public/detailseite_pflanze.html b/frontend/public/detailseite_pflanze.html
@@ -2,54 +2,17 @@
 <html lang="de">
 
 	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta name="theme-color" content="#3B7D23" />
+		<!-- commonHead -->
 
 		<title>Plant Manager</title>
 
-		<!-- JQuerry für AJAX usw. -->
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-
-		<!-- Bootstrap CSS and icons -->
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
-		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
-		<!-- Custom CSS, Must be after Bootstrap CSS -->
-		<link rel="stylesheet" href="./css/style.css">
-
 		<!-- JS Code -->
 		<script src="./js/detailseite_pflanze.mjs" type="module"></script>
 
 	</head>
 
 	<body>
-		<nav class="navbar sticky-top bg-primary navbar-expand-sm" data-bs-theme="dark"> 
-			<div class="container-fluid">
-
-				<a class="navbar-brand" href="index.html">
-					<img src="./images/logo_light.svg" alt="Logo" width="40" height="40" class="d-inline-block align-text-top">
-				</a>
-
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-						<span class="navbar-toggler-icon"></span>
-				</button>
-				<div class="collapse navbar-collapse" id="navbarNav">
-					<ul class="navbar-nav">
-						<li class="nav-item">
-							<a class="nav-link" aria-current="page" href="index.html">Dashboard</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="meine_pflanzen.html">Meine Pflanzen</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="kompostierte_pflanzen.html">Kompost</a>
-						</li>
-					</ul>
-				</div>
-
-			</div>
-		</nav>
+		<!-- nav -->
 
 		<main class="container-lg">
 
@@ -122,8 +85,6 @@ <h3 class="card-title" id="plant-name">
 			<!-- Bis hier Inhalt -->
 		</main>
 
-		<!-- Bootstrap compiled and minified JavaScript -->
-		<!-- Must be the last line inside the body!!! -->
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+		<!-- bottomScripts -->
 	</body>
 </html>
diff --git a/frontend/public/dev/index.html b/frontend/public/dev/index.html
@@ -2,54 +2,17 @@
 <html lang="de">
 
 	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta name="theme-color" content="#3B7D23" />
+		<!-- commonHead -->
 
 		<title>Plant Manager</title>
 
-		<!-- JQuerry für AJAX usw. -->
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-
-		<!-- Bootstrap CSS and icons -->
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
-		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
-		<!-- Custom CSS, Must be after Bootstrap CSS -->
-		<link rel="stylesheet" href="../css/style.css">
-
 		<!-- JS Code -->
 		<script src="./index.mjs" type="module"></script>
 
 	</head>
 
 	<body>
-		<nav class="navbar sticky-top bg-primary navbar-expand-sm" data-bs-theme="dark"> 
-			<div class="container-fluid">
-
-				<a class="navbar-brand" href="index.html">
-					<img src="../images/logo_light.svg" alt="Logo" width="40" height="40" class="d-inline-block align-text-top">
-				</a>
-
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-						<span class="navbar-toggler-icon"></span>
-				</button>
-				<div class="collapse navbar-collapse" id="navbarNav">
-					<ul class="navbar-nav">
-						<li class="nav-item">
-							<a class="nav-link" aria-current="page" href="../index.html">Dashboard</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="../meine_pflanzen.html">Meine Pflanzen</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="../kompostierte_pflanzen.html">Kompost</a>
-						</li>
-					</ul>
-				</div>
-
-			</div>
-		</nav>
+		<!-- nav -->
 
 		<main class="container-lg">
 
@@ -62,8 +25,5 @@ <h1>Dev Page</h1>
 			<!-- Bis hier Inhalt -->
 		</main>
 
-		<!-- Bootstrap compiled and minified JavaScript -->
-		<!-- Must be the last line inside the body!!! -->
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-	</body>
+		<!-- bottomScripts -->
 </html>
diff --git a/frontend/public/dev/template.html b/frontend/public/dev/template.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+
+	<head>
+		<!-- commonHead -->
+
+		<title>EDIT - Plant Manager</title>
+
+		<!-- JS Code -->
+		<script src="./js/EDIT.mjs" type="module"></script>
+
+	</head>
+
+	<body>
+		<!-- nav -->
+
+		<main class="container-lg">
+			<!-- Ab hier Inhalt -->
+
+
+			<!-- Bis hier Inhalt -->
+		</main>
+
+		<!-- bottomScripts -->
+	</body>
+</html>
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,57 +2,19 @@
 <html lang="de">
 
 	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta name="theme-color" content="#3B7D23" />
+		<!-- commonHead -->
 
 		<title>Dashboard - Plant Manager</title>
 
-		<!-- JQuerry -->
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-
-		<!-- Bootstrap CSS and icons -->
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
-		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
-		<!-- Custom CSS, Must be after Bootstrap CSS -->
-		<link rel="stylesheet" href="./css/style.css">
-
 		<!-- JS Code -->
 		<script src="./js/index.mjs" type="module"></script>
 
 	</head>
 
 	<body>
-		<nav class="navbar sticky-top bg-primary navbar-expand-sm" data-bs-theme="dark"> 
-			<div class="container-fluid">
-
-				<a class="navbar-brand" href="index.html">
-					<img src="./images/logo_light.svg" alt="Logo" width="40" height="40" class="d-inline-block align-text-top">
-				</a>
-
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-						<span class="navbar-toggler-icon"></span>
-				</button>
-				<div class="collapse navbar-collapse" id="navbarNav">
-					<ul class="navbar-nav">
-						<li class="nav-item">
-							<a class="nav-link active" aria-current="page" href="index.html">Dashboard</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="meine_pflanzen.html">Meine Pflanzen</a>
-						</li>
-						<li class="nav-item">
-							<a class="nav-link" href="kompostierte_pflanzen.html">Kompost</a>
-						</li>
-					</ul>
-				</div>
-
-			</div>
-		</nav>
+		<!-- nav -->
 
 		<main class="container-lg">
-
 			<!-- Ab hier Inhalt -->
 
 			<div id="plants" class="row row-cols-1 row-cols-lg-2 g-3">
@@ -66,8 +28,6 @@
 
 		</main>
 
-		<!-- Bootstrap compiled and minified JavaScript -->
-		<!-- Must be the last line inside the body!!! -->
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+		<!-- bottomScripts -->
 	</body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ export default defineConfig([ @@
     			}]
     		},
     		languageOptions: {
-    			globals: { ...globals.browser, ...globals.jquery }
+    			globals: { ...globals.browser, ...globals.jquery, ...globals.node }
     		}
     	}
@@ Expand Down @@