Merge branch 'develop' into db_testdata

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "sniper",
+  "name": "webshop",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "sniper",
+      "name": "webshop",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
@@ -15,7 +15,9 @@
         "express-session": "^1.18.1",
         "mysql": "^2.18.1",
         "mysql2": "^3.12.0",
-        "path": "^0.12.7"
+        "node": "^22.15.0",
+        "path": "^0.12.7",
+        "server.js": "^1.0.0"
       }
     },
     "node_modules/accepts": {
@@ -674,6 +676,28 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node": {
+      "version": "22.15.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-22.15.0.tgz",
+      "integrity": "sha512-qrOEL83lNt+Jbh9pekl5xQrZK+QRJz51m2IGGCu2NENgbG6Go0D1QUBvjbejP8jB2eokQpX1AorDLbKQ/FxuYA==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==",
+      "license": "ISC"
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -894,6 +918,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/server.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/server.js/-/server.js-1.0.0.tgz",
+      "integrity": "sha512-fO4IvzkZ09bBB++XU/gWGuzxJs0OpghSd/34mlW8coMoakLzj/+W5d1pHX+I+7H52GkBKu96UQU0K5vptNjaqg==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "sniper",
+  "name": "webshop",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "npm install && node server.js"
   },
   "keywords": [],
   "author": "",
@@ -12,13 +12,13 @@
   "description": "Webshop Autohändler",
   "dependencies": {
     "app-root-path": "^3.1.0",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-session": "^1.18.1",
     "mysql": "^2.18.1",
     "mysql2": "^3.12.0",
-    "path": "^0.12.7"
+    "node": "^22.15.0",
+    "path": "^0.12.7",
+    "server.js": "^1.0.0"
   }
 }

public/bestellformular/bestellformular.html

@@ -15,7 +15,7 @@
 
     <main>
         <div class="form-container">
-      <form action="/submit-bestellung" method="post">
+            <form method="post" id="bestellform">
                 <h2>Bestellformular</h2>
 
                 <label for="vorname">Vorname:</label>
@@ -36,17 +36,222 @@
                 <label for="ort">Ort:</label>
                 <input type="text" id="ort" name="ort" required placeholder="Ort">
 
-        <label for="telefon Nr">Telefon Nr (optional):</label>
-        <input type="tel" id="telefon Nr" name="telefon" placeholder="Telefon Nr">
-
                 <label for="ArtikelNr">Artikel Nr.:</label>
-        <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
+                <div class="Artikel">
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                </div>
 
-        <input type="submit" value="Bestellung absenden">
+                <style>
+                    .Artikel{
+                        display: flex;
+                        align-content: center;
+                    }
+
+                    .ArtikelNrText{
+                        max-width: 50%;
+                    }
+
+                    .StueckzahlText{
+                        max-width: 15%;
+                        margin-left: 2.5%;
+                    }
+
+                    .loeschen-button{
+                        background-color: #ff6600;
+                        color: white;
+                        border: none;
+                        border-radius: 5px;
+                        width: 5%;
+                        height: 30px;
+                        cursor: pointer;
+                        margin-right: 5px;
+                    }
+
+                    .verfuegbarkeit{
+                        display: flex;
+                        align-content: center;
+                        max-width: 20%;
+                        padding-left: 2.5%;
+                    }
+                </style>
+                <a class="button-submit" id="sendOrder">Bestellung absenden</a>
             </form>
         </div>
     </main>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const formular = document.getElementById('bestellform');
+            const sendButton = document.getElementById('sendOrder');
+            let artikelVerfuegbarkeiten = [];
+
+            // Bestellung absenden
+            sendButton.addEventListener('click', async function (event) {
+                event.preventDefault();
+
+                const form = document.getElementById('bestellform');
+
+                // Kundendaten einsammeln
+                const userData = {
+                    vorname: form.Vorname.value.trim(),
+                    nachname: form.Nachname.value.trim(),
+                    kundenNr: form.KundenNr.value.trim(),
+                    strasse: form.strasse.value.trim(),
+                    hausnummer: form.hausnummer.value.trim(),
+                    ort: form.ort.value.trim()
+                };
+
+                // Artikel einsammeln
+                const artikelInputs = document.querySelectorAll('.Artikel');
+                const produkte = [];
+
+                artikelInputs.forEach(artikel => {
+                    const artikelNrInput = artikel.querySelector('.ArtikelNrText');
+                    const stueckzahlInput = artikel.querySelector('.StueckzahlText');
+
+                    if (artikelNrInput && artikelNrInput.value.trim() !== '') {
+                        produkte.push({
+                            product_id: parseInt(artikelNrInput.value.trim(), 10),
+                            quantity: parseInt(stueckzahlInput.value.trim(), 10) || 1
+                        });
+                    }
+                });
+
+                if (produkte.length === 0) {
+                    alert('Bitte mindestens ein Produkt angeben!');
+                    return;
+                }
+
+                const payload = {
+                    user_id: parseInt(userData.kundenNr, 10),
+                    produkte: produkte
+                };
+
+                try {
+                    const response = await fetch('/api/bestellung', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    const result = await response.json();
+
+                    if (response.ok) {
+                        // Bestellung erfolgreich -> Weiterleitung
+                        window.location.href = "/bestellung";
+                    } else {
+                        alert('Fehler: ' + result.message);
+                    }
+
+                } catch (error) {
+                    console.error('Fehler beim Abschicken der Bestellung:', error);
+                    alert('Serverfehler beim Abschicken der Bestellung.');
+                }
+            });
+
+            // Artikelnummer prüfen bei Eingabe
+            formular.addEventListener('input', async function (event) {
+                if (event.target.classList.contains('ArtikelNrText')) {
+                    if (event.target.value.trim() !== '') {
+                        await pruefeVerfuegbarkeit(event.target);
+                        fuegeNeuesArtikelFeldHinzu();
+                    }
+                }
+            });
+        });
+
+        // Funktion: Verfügbarkeit prüfen
+        async function pruefeVerfuegbarkeit(inputFeld) {
+            const artikelnummer = inputFeld.value.trim();
+            const verfuegbarkeitDiv = inputFeld.parentElement.querySelector('.verfuegbarkeit');
+            const sendButton = document.getElementById('sendOrder');
+
+            if (artikelnummer.length === 0) {
+                verfuegbarkeitDiv.textContent = "";
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/pruefe-artikel?nummer=${encodeURIComponent(artikelnummer)}`);
+                const data = await response.json();
+
+                const artikelDivs = document.querySelectorAll('.Artikel');
+                artikelVerfuegbarkeiten = [];
+
+                artikelDivs.forEach(div => {
+                    const artikelNrInput = div.querySelector('.ArtikelNrText');
+                    const verfDiv = div.querySelector('.verfuegbarkeit');
+
+                    if (artikelNrInput.value.trim() !== '') {
+                        if (artikelNrInput === inputFeld) {
+                            if (data.verfuegbar) {
+                                verfDiv.textContent = "Artikel verfügbar.";
+                                verfDiv.style.color = "green";
+                                artikelVerfuegbarkeiten.push(true);
+                            } else {
+                                verfDiv.textContent = "Artikel nicht verfügbar!";
+                                verfDiv.style.color = "red";
+                                artikelVerfuegbarkeiten.push(false);
+                            }
+                        } else {
+                            // Für andere Felder bisherige Anzeige berücksichtigen
+                            if (verfDiv.textContent.includes("nicht verfügbar")) {
+                                artikelVerfuegbarkeiten.push(false);
+                            } else {
+                                artikelVerfuegbarkeiten.push(true);
+                            }
+                        }
+                    }
+                });
+
+                // Button sperren/freigeben
+                if (artikelVerfuegbarkeiten.every(status => status === true)) {
+                    sendButton.disabled = false;
+                } else {
+                    sendButton.disabled = true;
+                }
+
+            } catch (error) {
+                console.error('Fehler bei der Artikelsuche:', error);
+                verfuegbarkeitDiv.textContent = "Fehler bei der Prüfung.";
+                verfuegbarkeitDiv.style.color = "orange";
+                sendButton.disabled = true;
+            }
+        }
+
+        // Funktion: Neues Artikelfeld hinzufügen
+        function fuegeNeuesArtikelFeldHinzu() {
+            const formular = document.getElementById('bestellform');
+            const artikelnummerFelder = formular.querySelectorAll('.ArtikelNrText');
+            const letztesFeld = artikelnummerFelder[artikelnummerFelder.length - 1];
+
+            if (letztesFeld && letztesFeld.value.trim() !== '') {
+                const neueArtikelDiv = document.createElement('div');
+                neueArtikelDiv.className = 'Artikel';
+                neueArtikelDiv.innerHTML = `
+                    <button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
+                    <input type="text" class="ArtikelNrText" name="ArtikelNr" required placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
+                    <div class="verfuegbarkeit"></div>
+                `;
+
+                const sendButton = document.getElementById('sendOrder');
+                formular.insertBefore(neueArtikelDiv, sendButton);
+            }
+        }
+
+        // Funktion: Artikel löschen
+        function loescheArtikel(button) {
+            const artikelDiv = button.parentElement;
+            artikelDiv.remove();
+        }
+
+    </script>
     <!-- Footer wird dynamisch geladen -->
     <div id="footer"></div>
 </div>

public/bestellung/bestellung.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ihre Bestellung</title>
+    <link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
+    <link rel="stylesheet" href="/Styles/styles-main.css">
+    <script src="/header_footer"></script>
+</head>
+<body>
+<!-- Header wird hier dynamisch geladen -->
+<div id="header-placeholder"></div>
+
+<main>
+    <h2>Ihre Bestellung:</h2>
+    <div id="bestellung">
+        <!-- Platzhalter für die Bestellinformationen -->
+        <div class="bestell-info-card">
+            <p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
+            <p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
+            <p><strong>Produktname:</strong> <span id="produktName"></span></p>
+            <p><strong>Preis:</strong> <span id="preis"></span></p>
+        </div>
+    </div>
+</main>
+
+<script>
+    async function ladeBestellung() {
+        const user_id = sessionStorage.getItem('user_id');
+        if (!user_id) {
+            alert('Sie sind nicht eingeloggt! Bitte loggen Sie sich ein.');
+            window.location.href = '/login';
+            return;
+        }
+    
+        try {
+            const response = await fetch('/api/bestellung/daten', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ user_id: user_id })
+            });
+    
+            if (response.ok) {
+                const daten = await response.json();
+                const bestellungContainer = document.getElementById('bestellung');
+                bestellungContainer.innerHTML = '';
+
+                const bestellungen = {};
+    
+                daten.forEach(item => {
+                    if (!bestellungen[item.order_id]) {
+                        bestellungen[item.order_id] = {
+                            total: item.order_total,
+                            produkte: []
+                        };
+                    }
+                    bestellungen[item.order_id].produkte.push({
+                        name: item.product_name,
+                        preis: item.product_price,
+                        quantity: item.quantity
+                    });
+                });
+
+                for (const orderId in bestellungen) {
+                    const bestellung = bestellungen[orderId];
+                    const bestellCard = document.createElement('div');
+                    bestellCard.className = 'bestell-info-card';
+    
+                    let produkteHTML = '';
+                    bestellung.produkte.forEach(produkt => {
+                        produkteHTML += `
+                            <p>• ${produkt.name} — ${produkt.quantity} Stück — Preis: ${produkt.preis.toFixed(2)} €</p>
+                        `;
+                    });
+    
+                    bestellCard.innerHTML = `
+                        <h3>Bestellnummer: ${orderId}</h3>
+                        ${produkteHTML}
+                        <p><strong>Gesamtsumme:</strong> ${bestellung.total.toFixed(2)} €</p>
+                    `;
+    
+                    bestellungContainer.appendChild(bestellCard);
+                }
+    
+            } else if (response.status === 404) {
+                document.getElementById('bestellung').innerHTML = '<p>Keine Bestellungen gefunden.</p>';
+            } else {
+                console.error('Fehler beim Laden der Bestellungen.');
+            }
+        } catch (error) {
+            console.error('Fehler: ', error);
+        }
+    }
+    
+    window.addEventListener('DOMContentLoaded', ladeBestellung);
+    </script>
+    
+<!-- Footer wird dynamisch geladen -->
+<div id="footer"></div>
+</body>
+</html>

public/header_footer/header.html

@@ -7,7 +7,7 @@
   <div class="header-right">
     <a href="/login" class="login-btn">Login</a>
     <div class="header-right">
-      <a href="/login" class="login-btn">Login</a>
+
       <a href="/warenkorb" class="cart">
         <i class='bx bx-cart'></i>
         <span class="cart-count">0</span>
@@ -30,6 +30,5 @@
     </li>
     <li class="menu-item"><a href="/ueberuns">Über uns</a></li>
     <li class="menu-item"><a href="/kontakt">Kontakt</a></li>
-    <li class="menu-item"><a href="/bestellformular">Bestellformular</a></li>
   </ul>
 </nav>

public/login/login.html

@@ -18,14 +18,14 @@
         <h2 class="login-title">Login</h2>
         <form class="login-form">
             <div class="input-group">
-                    <input type="text" placeholder="Username" required />
+                <input id="email" type="text" placeholder="E-Mail" required/>
                 <i class="icon fas fa-user"></i>
             </div>
             <div class="input-group">
-                    <input type="password" placeholder="Passwort" required />
+                <input id="password" type="password" placeholder="Passwort" required/>
                 <i class="icon fas fa-lock"></i>
             </div>
-                <button type="submit" class="login-btn">Login</button>
+            <button id="submit" type="submit" class="login-btn">Login</button>
             <p class="register-text">
                 Noch keinen Account? <a href="/registrieren">Registrieren</a>
             </p>
@@ -33,7 +33,37 @@
     </div>
 </main>
 
-    <!-- Fußzeiele -->
+<script>
+    document.getElementById('submit').addEventListener('click', async (event) => {
+        event.preventDefault()
+
+        const email = document.getElementById('email').value
+        const password = document.getElementById('password').value
+
+        try {
+            const response = await fetch('/api/user/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({email, password})
+            })
+            if (response.ok) {
+                const data = await response.json();
+                sessionStorage.setItem("user_id", data.id)
+                alert('Login erfolgreich!');
+                window.location.href = '/';  // Redirect to home page after login
+            } else {
+                const errorData = await response.json()
+                alert('Login fehlgeschlagen: ' + (errorData.message || 'Unbekannter Fehler'))
+            }
+        } catch (error) {
+            console.error('Fehler beim Login: ', error)
+            alert('Fehler beim Senden des Logins.')
+        }
+    })
+</script>
+<!-- Fußzeile -->
 <div id="footer"></div>
 
 </body>

public/registrieren/registrieren.html

@@ -17,20 +17,20 @@
 
     <!-- Registrierungsformular -->
     <main class="content-wrapper">
-      <div class="wrapper">
+        <div class="register-wrapper">
             <form action="register.php" method="POST">
-          <h1>Registrieren</h1>
+                <h2 class="title">Registrieren</h2>
 
                 <div class="input-box">
-            <input type="text" name="vorname" placeholder="Vorname" required>
+                    <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
                     <i class='bx bxs-user'></i>
                 </div>
                 <div class="input-box">
-            <input type="text" name="nachname" placeholder="Nachname" required>
+                    <input type="text" name="nachname" placeholder="Nachname" required id="nachname">
                     <i class='bx bxs-user'></i>
                 </div>
                 <div class="input-box">
-            <input type="email" name="email" placeholder="E-Mail" required>
+                    <input type="email" name="email" placeholder="E-Mail" required id="email">
                     <i class='bx bxs-envelope'></i>
                 </div>
                 <div class="input-box">
@@ -39,11 +39,12 @@
                 </div>
 
                 <div class="input-box">
-            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required>
+                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
+                           required>
                     <i class='bx bxs-lock-alt'></i>
                 </div>
 
-          <button type="submit" class="btn">Registrieren</button>
+                <button type="submit" class="btn" id="register">Registrieren</button>
 
                 <div class="register-link">
                     <br>
@@ -53,6 +54,40 @@
         </div>
     </main>
 
+    <script>
+        document.getElementById('register').addEventListener('click', async (event) => {
+            event.preventDefault();
+
+            const formData = {
+                name: document.getElementById('vorname').value,
+                lower_name: document.getElementById('nachname').value,
+                email: document.getElementById('email').value,
+                passwd: document.getElementById('regPassword').value,
+            }
+
+            try {
+                const response = await fetch('/api/user/registration', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                })
+                if (response.ok) {
+                    const data = await response.json();
+                    sessionStorage.setItem("user_id", data.id)
+                    alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
+                    window.location.href= '/'
+                } else {
+                    alert('Fehler bei der Registrierung.')
+                }
+            } catch (error) {
+                console.error('Fehler: ', error)
+                alert('Fehler beim Senden des Formulars.')
+            }
+        })
+
+    </script>
     <!-- Fußzeiele -->
     <div id="footer"></div>
 

public/shop/shop.html

@@ -23,6 +23,9 @@
     </section>
 </main>
 
+<!-- Fußzeiele -->
+<div id="footer"></div>
+
 <script>
     fetch('/api/products')
         .then(res => res.json())
@@ -38,13 +41,14 @@
                       <h3>${product.name}</h3>
                       <p>Preis: ${product.price}€</p>
                       <p>${product.description}</p>
+                      <p>Artikel Nr: ${product.id}</p>
                       <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
                   `;
                 container.appendChild(card);
             });
         })
         .catch(err => {
-              console.error('Fehler beim Laden der Produkte:', err);
+            console.error('Fehler beim Laden der Shop_Produkte:', err);
 
             const container = document.getElementById('products');
             container.innerHTML =
@@ -54,9 +58,5 @@
                         </div>`;
         });
 </script>
-
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
-
 </body>
 </html>

public/shop/shop_lkw.html

@@ -9,16 +9,24 @@
     <script src="/header_footer"></script>
 </head>
 <body>
+<div class="wrapper">
     <!-- Header -->
     <div id="header-placeholder"></div>
 
     <!-- Hauptinhalt -->
+    <main>
         <section style="padding: 0px 30px; text-align: left;">
             <h1>Unsere LKW Produkte</h1>
         </section>
+
         <section class="card-grid" id="products_lkw">
             <!-- Dynamische Produkte (filtern nach Motorrad) -->
         </section>
+    </main>
+
+    <!-- Fußzeiele -->
+    <div id="footer"></div>
+</div>
 
 <script>
     fetch('/api/products/lkw')
@@ -35,19 +43,21 @@
                     <h3>${product.name}</h3>
                     <p>Preis: ${product.price}€</p>
                     <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
                     <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
                 `;
               container.appendChild(card);
             });
         })
         .catch(err => {
-            console.error('Fehler beim Laden der Produkte:', err);
+            console.error('Fehler beim Laden der LKW_Produkte:', err);
 
-            const container = document.getElementById('products_oldtimer');
+            const container = document.getElementById('products_lkw');
             container.innerHTML =
                 `<div class="error-message">
                 <h3>Fehler beim Laden der Produkte</h3>
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                   Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
               </div> `;
         });
 </script>

public/shop/shop_motorrad.html

@@ -9,16 +9,20 @@
   <script src="/header_footer"></script>
 </head>
 <body>
+<div class="wrapper">
     <!-- Header -->
     <div id="header-placeholder"></div>
 
     <!-- Hauptinhalt -->
+    <main class="main-content">
         <section style="padding: 0px 30px; text-align: left;">
             <h1>Unsere Motorrad Produkte</h1>
         </section>
+
         <section class="card-grid" id="products_motorrad">
-  <!-- Dynamische Produkte (filtern nach Motorrad) -->
+            <!-- Dynamische Produkte oder Fehlermeldung -->
         </section>
+    </main>
 
 
 <script>
@@ -36,17 +40,17 @@
                     <h3>${product.name}</h3>
                     <p>Preis: ${product.price}€</p>
                     <p>${product.description}</p>
+                    <p>Artikel Nr: ${product.id}</p>
                     <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
                 `;
               container.appendChild(card);
             });
         })
         .catch(err => {
-            console.error('Fehler beim Laden der Produkte:', err);
+            console.error('Fehler beim Laden der Motorrad_Produkte:', err);
-
             const container = document.getElementById('products_motorrad');
-            container.innerHTML =
+            container.innerHTML = `
-                    `<div class="error-message">
+          <div class="error-message">
             <h3>Fehler beim Laden der Produkte</h3>
             <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
           </div>`;

public/shop/shop_oldtimer.html

@@ -9,16 +9,24 @@
     <script src="/header_footer"></script>
 </head>
 <body>
+<div class="wrapper">
     <!-- Header -->
     <div id="header-placeholder"></div>
 
     <!-- Hauptinhalt -->
+    <main class="main-content">
         <section style="padding: 0px 30px; text-align: left;">
             <h1>Unsere Oldtimer Produkte</h1>
         </section>
+
         <section class="card-grid" id="products_oldtimer">
-    <!-- Dynamische Produkte (filtern nach Motorrad) -->
+            <!-- Dynamische Produkte oder Fehlermeldung -->
         </section>
+    </main>
+
+    <!-- Fußzeile -->
+    <div id="footer"></div>
+</div>
 
   <script>
     fetch('/api/products/oldtimer')
@@ -35,25 +43,21 @@
                       <h3>${product.name}</h3>
                       <p>Preis: ${product.price}€</p>
                       <p>${product.description}</p>
+                      <p>Artikel Nr: ${product.id}</p>
                       <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
                   `;
                 container.appendChild(card);
             });
         })
         .catch(err => {
-              console.error('Fehler beim Laden der Produkte:', err);
+            console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
-
             const container = document.getElementById('products_oldtimer');
-              container.innerHTML =
+            container.innerHTML = `
-                      `<div class="error-message">
+          <div class="error-message">
             <h3>Fehler beim Laden der Produkte</h3>
             <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
           </div>`;
         });
 </script>
-
-  <!-- Fußzeiele -->
-  <div id="footer"></div>
-
 </body>
 </html>

public/shop/shop_sportwagen.html

@@ -14,6 +14,7 @@
   <div id="header-placeholder"></div>
 
     <!-- Hauptinhalt -->
+    <main>
         <section style="padding: 0px 30px; text-align: left;">
             <h1>Unsere Sportwagen Produkte</h1>
         </section>
@@ -21,6 +22,7 @@
         <section class="card-grid" id="products_sportwagen">
             <!-- Dynamische Produkte oder Fehlermeldung -->
         </section>
+    </main>
 
   <!-- Footer -->
   <div id="footer"></div>
@@ -41,22 +43,22 @@
             <h3>${product.name}</h3>
             <p>Preis: ${product.price}€</p>
             <p>${product.description}</p>
+            <p>Artikel Nr: ${product.id}</p>
             <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
           `;
               container.appendChild(card);
             });
         })
         .catch(err => {
-            console.error('Fehler beim Laden der Produkte:', err);
+            console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
 
             const container = document.getElementById('products_sportwagen');
-            container.innerHTML = `
+            container.innerHTML =
-          <div class="error-message">
+                `<div class="error-message">
               <h3>Fehler beim Laden der Produkte</h3>
               <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
                  Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-          </div>
+            </div> `;
-        `;
         });
 </script>
 

public/startseite/startseite.html

@@ -96,7 +96,5 @@
         <div id="footer"></div>
 
 </div>
-<!-- Scripts -->
-<script src="startseite.js"></script>
 </body>
 </html>

scripts/routes/other/route-index.js

@@ -70,4 +70,8 @@ router.get('/Warenkorb', (req, res) => {
 router.get('/bestellformular', (req, res) => {
     res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
 })
+
+router.get('/bestellung', (req, res) => {
+    res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html'));
+})
 module.exports = router;

server.js

@@ -127,6 +127,161 @@ app.get('/api/products/sportwagen', async (req, res) => {
     });
 });
 
+app.post('/api/user/registration', (req, res) => {
+    // SQL-Query für Nutzerregistration
+    const {name, lower_name, email, passwd} = req.body;
+    const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
+
+    // Query abschicken
+    db.query(sql, [name, lower_name, email, passwd], (err, results) => {
+        if (err) {
+            console.error('Fehler beim Schreiben in die Datenbank: ', err);
+            res.status(500).send('Fehler beim Schreiben in die Datenbank');
+            return;
+        }
+        res.status(201).json({message: 'Nutzer erfolgreich hinzugefügt', id: results.insertId})
+    })
+})
+
+app.post('/api/user/login', (req, res) => {
+    const {email, password} = req.body
+    const sql = 'SELECT * FROM user WHERE email = ?'
+
+    db.query(sql, [email], (err, results) => {
+        if (err) {
+            console.error('Fehler beim Abrufen des Nutzers: ', err)
+            return res.status(500).json({message: 'Serverfehler'})
+        }
+        if (results.length === 0) {
+            return res.status(401).json({message: 'E-Mail nicht gefunden'})
+        }
+        const user = results[0]
+
+        if (user.passwd !== password) {
+            return res.status(401).json({message: 'Falsches Passwort'})
+        }
+
+        req.session.userId = user.id;
+        req.session.email = user.email;
+
+        res.json({message: 'Login erfolgreich', id: user.id})
+    })
+})
+
+app.post('/api/bestellung', (req, res) => {
+    const { user_id, produkte } = req.body;
+    // produkte erwartet als Array: [{product_id: 1, quantity: 2}, {product_id: 5, quantity: 1}, ...]
+
+    if (!user_id || !Array.isArray(produkte) || produkte.length === 0) {
+        return res.status(400).json({ message: 'Ungültige Anfrage: user_id oder Produkte fehlen.' });
+    }
+
+    // Preise der Produkte abrufen
+    const productIds = produkte.map(p => p.product_id);
+
+    const priceQuery = 'SELECT id, price FROM webshop.product WHERE id IN (?)';
+    db.query(priceQuery, [productIds], (err, priceResults) => {
+        if (err) {
+            console.error('Fehler beim Abrufen der Produktpreise:', err);
+            return res.status(500).json({ message: 'Serverfehler beim Abrufen der Produktpreise.' });
+        }
+
+        if (priceResults.length !== productIds.length) {
+            return res.status(400).json({ message: 'Eines oder mehrere Produkte existieren nicht.' });
+        }
+
+        // Total berechnen
+        let total = 0;
+        produkte.forEach(p => {
+            const dbProduct = priceResults.find(pr => pr.id === p.product_id);
+            if (dbProduct) {
+                total += dbProduct.price * p.quantity;
+            }
+        });
+
+        const payment_id = 1; // Zahlungssystem-ID (z.B. 1 = Rechnung, 2 = PayPal, ...)
+
+        const sqlOrder = 'INSERT INTO webshop.order_details (user_id, payment_id, total) VALUES (?, ?, ?)';
+        db.query(sqlOrder, [user_id, payment_id, total], (err1, result1) => {
+            if (err1) {
+                console.error('Fehler beim Erstellen der Bestellung:', err1);
+                return res.status(500).json({ message: 'Fehler beim Erstellen der Bestellung.' });
+            }
+
+            const orderId = result1.insertId;
+
+            const values = produkte.map(p => [user_id, p.product_id, p.quantity, orderId]);
+            const sqlItems = 'INSERT INTO webshop.order_items (user_id, product_id, quantity, order_id) VALUES ?';
+
+            db.query(sqlItems, [values], (err2, result2) => {
+                if (err2) {
+                    console.error('Fehler beim Einfügen der Order-Items:', err2);
+                    return res.status(500).json({ message: 'Fehler beim Hinzufügen der Produkte zur Bestellung.' });
+                }
+
+                res.status(201).json({ message: 'Bestellung erfolgreich!', order_id: orderId, total: total.toFixed(2) });
+            });
+        });
+    });
+});
+
+app.post('/api/bestellung/daten', (req, res) => {
+    const { user_id } = req.body;
+
+    const sql = `
+        SELECT 
+            od.id AS order_id,
+            od.total AS order_total,
+            oi.product_id,
+            oi.quantity,
+            p.name AS product_name,
+            p.price AS product_price
+        FROM 
+            webshop.order_details od
+        INNER JOIN 
+            webshop.order_items oi ON od.id = oi.order_id
+        INNER JOIN 
+            webshop.product p ON oi.product_id = p.id
+        WHERE 
+            od.user_id = ?
+        ORDER BY 
+            od.id DESC
+    `;
+
+    db.query(sql, [user_id], (err, results) => {
+        if (err) {
+            console.error('Fehler beim Abrufen der Bestellungen: ', err);
+            return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellungen' });
+        }
+
+        if (results.length === 0) {
+            return res.status(404).json({ message: 'Keine Bestellungen gefunden.' });
+        }
+
+        res.json(results);
+    });
+});
+
+app.get('/api/pruefe-artikel', (req, res) => {
+    const artikelnummer = req.query.nummer;
+
+    if (!artikelnummer) {
+        return res.status(400).json({ error: 'Keine Artikelnummer angegeben.' });
+    }
+
+    const query = 'SELECT id FROM product WHERE id = ?';
+
+    db.query(query, [artikelnummer], (err, results) => {
+        if (err) {
+            console.error('Fehler bei der Artikelsuche:', err);
+            return res.status(500).json({ error: 'Serverfehler bei der Artikelsuche.' });
+        }
+
+        const verfuegbar = results.length > 0;
+        res.json({ verfuegbar });
+    });
+});
+
 const getIndexRoute = require('./scripts/routes/other/route-index');
 app.use('/', getIndexRoute);
 

static/Styles/bestellformular/bestellformular.css

@@ -9,7 +9,7 @@ body {
 }
 
 .wrapper {
-    flex: 1; /* Der Hauptinhalt (Formular) nimmt den verfügbaren Platz ein */
+    flex: 1; /* Der Hauptinhalt nimmt den verfügbaren Platz ein */
 }
 
 .form-container {
@@ -43,20 +43,22 @@ textarea {
     box-sizing: border-box;
 }
 
-input[type="submit"] {
+/* NEU: Styling für den Absende-Link */
+.button-submit {
+    display: inline-block;
     margin-top: 20px;
     background-color: #ff6600;
     color: white;
-    border: none;
+    text-decoration: none;
     padding: 12px;
     border-radius: 5px;
     font-size: 16px;
     cursor: pointer;
     width: 100%;
+    text-align: center;
+    box-sizing: border-box; /* Damit Breite + Padding sauber passen */
 }
 
-input[type="submit"]:hover {
+.button-submit:hover {
-    background-color: #ff5500; /* Ein leicht dunklerer Farbton beim Hover */
+    background-color: #ff6600;
 }
-
-

static/Styles/bestellung/bestellung.css

@@ -0,0 +1,49 @@
+/* Allgemeine Layout-Stile */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+    padding: 20px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Container für die Bestellinformationen */
+#bestellung {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+}
+
+/* Titel */
+h2 {
+    text-align: center;
+    margin-bottom: 30px;
+    margin-top: 20px;
+}
+
+/* Karte für Bestellinformationen */
+.bestell-info-card {
+    background-color: #fafafa;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Bestellinformationen formatieren */
+.bestell-info-card p {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+/* Stile für die Label und Platzhalter */
+.bestell-info-card span {
+    font-weight: bold;
+    color: #333;
+}
+
+

static/Styles/login/login.css

@@ -9,13 +9,6 @@
     margin: 50px auto; /* Zentriert das Formular */
 }
 
-.login-title {
-    font-size: 26px;
-    font-weight: 600;
-    margin-bottom: 25px;
-    color: #333;
-}
-
 .login-form .input-group {
     position: relative;
     margin-bottom: 20px;

static/Styles/registrieren/registrieren.css

@@ -4,7 +4,7 @@
     min-height: 100vh;
 }
 
-.wrapper {
+.register-wrapper {
     max-width: 400px;
     width: 100%;
     padding: 30px;
@@ -21,6 +21,7 @@
     align-items: center;
     padding: 40px 20px;
 }
+
 .registration-container {
     max-width: 400px;
     margin: 60px auto;
@@ -49,22 +50,6 @@
     box-sizing: border-box;
 }
 
-.registration-container button[type="submit"] {
-    width: 100%;
-    padding: 10px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 1em;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.registration-container button[type="submit"]:hover {
-    background-color: #0056b3;
-}
-
 .register-link {
     text-align: center;
     font-size: 14px;
@@ -81,3 +66,16 @@
     text-decoration: underline;
 }
 
+.register-btn {
+    width: 100%;
+    padding: 12px;
+    background: #ff6600;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+

static/Styles/styles-main.css

@@ -41,7 +41,13 @@ header {
 .logo-container {
     display: flex;
     align-items: center;
-    gap: 15px;
+    text-decoration: none;
+    color: inherit;
+}
+
+.logo-container h1 {
+    margin-left: 10px;
+    font-size: 1.8rem;
 }
 
 .logo-img {
@@ -283,6 +289,14 @@ main {
     margin-bottom: 20px;
 }
 
+.title {
+    font-size: 26px;
+    font-weight: 600;
+    margin-bottom: 25px;
+    color: #333;
+    text-align: center;
+}
+
 .input-box input {
     width: 100%;
     padding: 12px 40px 12px 15px;
@@ -395,8 +409,14 @@ h1 {
 
 /* Optional: weiche Animation beim Einblenden */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
+    from {
-    to { opacity: 1; transform: translateY(0); }
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }