public/bestellformular/bestellformular.html

@@ -15,7 +15,7 @@
 
   <main>
     <div class="form-container">
-      <form action="/submit-bestellung" method="post">
+      <form action="/submit-bestellung" method="post" id="bestellform">
         <h2>Bestellformular</h2>
 
         <label for="vorname">Vorname:</label>
@@ -42,11 +42,46 @@
         <label for="ArtikelNr">Artikel Nr.:</label>
         <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
 
-        <a href="/bestellung" class="button-submit">Bestellung absenden</a>
+        <a href="/bestellung" class="button-submit" id="bestellformular">Bestellung absenden</a>
       </form>
     </div>
   </main>
 
+  <script>
+    document.getElementById('bestellform').addEventListener('bestellformular', async (event) => {
+      event.preventDefault(); // Verhindert das Standardformularverhalten
+
+      const userId = document.getElementById('KundenNr').value;
+      const productId = document.getElementById('ArtikelNr').value;
+
+      try {
+        const response = await fetch('/api/bestellung', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            userId,
+            productId,
+
+          })
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+          alert('Bestellung erfolgreich!');
+          window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht
+        } else {
+          alert('Fehler bei der Bestellung: ' + result.message);
+        }
+      } catch (error) {
+        console.error('Fehler:', error);
+        alert('Fehler beim Bestellen.');
+      }
+    });
+  </script>
+
   <!-- Footer wird dynamisch geladen -->
   <div id="footer"></div>
 </div>

public/bestellung/bestellung.html

@@ -25,6 +25,30 @@
     </div>
   </main>
 
+<script>
+  async function ladeBestellung() {
+    try {
+      const response = await fetch('/api/bestellung/daten');
+
+
+      if (response.ok) {
+        const data = await response.json();
+
+        document.getElementById('kundenNr').textContent = data.kundenNr;
+        document.getElementById('produktId').textContent = data.artikelNr;
+        document.getElementById('produktName').textContent = data.produktName;
+        document.getElementById('preis').textContent = data.preis + ' €';
+      } else {
+        console.error('Fehler beim Laden der Bestelldaten.');
+      }
+    } catch (error) {
+      console.error('Fehler: ', error);
+    }
+  }
+
+  window.addEventListener('DOMContentLoaded', ladeBestellung);
+</script>
+
 <!-- Footer wird dynamisch geladen -->
 <div id="footer"></div>
 </body>

server.js

@@ -168,6 +168,41 @@ app.post('/api/user/login', (req, res) => {
     })
 })
 
+app.post('/api/bestellung', (req, res) => {
+    const { userId, productId} = req.body;
+
+    // 1. Produktpreis holen
+    const productSql = 'SELECT price FROM product WHERE productId = ?';
+    const producNameSql = 'SELECT name FROM product WHERE productId = ?';
+
+    db.query(productSql, [productId], (err, productResults) => {
+        if (err || productResults.length === 0) {
+            console.error('Fehler beim Abrufen des Produkts: ', err);
+            return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' });
+        }
+
+        const productPrice = productResults[0].price;
+
+    });
+});
+
+app.get('/api/bestellung/daten', (req, res) => {
+
+
+    db.query(sql, [userId], (err, results) => {
+        if (err) {
+            console.error('Fehler beim Abrufen der Bestellung: ', err);
+            return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' });
+        }
+
+        if (results.length === 0) {
+            return res.status(404).json({ message: 'Keine Bestellung gefunden' });
+        }
+
+        res.json(results);
+    });
+});
+
 const getIndexRoute = require('./scripts/routes/other/route-index');
 app.use('/', getIndexRoute);