reworked bestellformular

public/bestellformular/bestellformular.html

@@ -15,7 +15,7 @@
 
     <main>
         <div class="form-container">
-            <form action="/submit-bestellung" method="post" id="bestellform">
+            <form method="post" id="bestellform">
                 <h2>Bestellformular</h2>
 
                 <label for="vorname">Vorname:</label>
@@ -37,50 +37,221 @@
                 <input type="text" id="ort" name="ort" required placeholder="Ort">
 
                 <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>
 
+                <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>
-        if(sessionStorage.getItem('user_id')){
+        document.addEventListener('DOMContentLoaded', function () {
-            document.getElementById('KundenNr').value = sessionStorage.getItem('user_id')
+            const formular = document.getElementById('bestellform');
-        }
+            const sendButton = document.getElementById('sendOrder');
+            let artikelVerfuegbarkeiten = [];
 
-        document.getElementById('sendOrder').addEventListener('click', async (event) => {
+            // Bestellung absenden
-            event.preventDefault(); // Verhindert das Standardformularverhalten
+            sendButton.addEventListener('click', async function (event) {
+                event.preventDefault();
 
-            const formData = {
+                const form = document.getElementById('bestellform');
-                user_id: document.getElementById('KundenNr').value,
+
-                product_id: document.getElementById('ArtikelNr').value,
+                // Kundendaten einsammeln
-            }
+                const userData = {
-            console.log(formData)
+                    vorname: form.Vorname.value.trim(),
-            try {
+                    nachname: form.Nachname.value.trim(),
-                const response = await fetch('/api/bestellung', {
+                    kundenNr: form.KundenNr.value.trim(),
-                    method: 'POST',
+                    strasse: form.strasse.value.trim(),
-                    headers: {
+                    hausnummer: form.hausnummer.value.trim(),
-                        'Content-Type': 'application/json'
+                    ort: form.ort.value.trim()
-                    },
+                };
-                    body: JSON.stringify(formData)
+
+                // 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
+                        });
+                    }
                 });
 
-                const result = await response.json();
+                if (produkte.length === 0) {
-
+                    alert('Bitte mindestens ein Produkt angeben!');
-                if (response.ok) {
+                    return;
-                    alert('Bestellung erfolgreich!');
-                    window.location.href = '/bestellung'; // Weiterleitung zur Bestellübersicht
-                } else {
-                    alert('Fehler bei der Bestellung: ' + result.message);
                 }
-            } catch (error) {
-                console.error('Fehler:', error);
-                alert('Fehler beim Bestellen.');
-            }
-        });
-    </script>
 
+                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>

server.js

@@ -169,27 +169,64 @@ app.post('/api/user/login', (req, res) => {
 })
 
 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}, ...]
 
-    const {user_id, product_id} = req.body;
+    if (!user_id || !Array.isArray(produkte) || produkte.length === 0) {
+        return res.status(400).json({ message: 'Ungültige Anfrage: user_id oder Produkte fehlen.' });
+    }
 
-    const sql1 = 'INSERT INTO webshop.order_details (user_id, payment_id, total) VALUES (?, 1, 0)'
+    // Preise der Produkte abrufen
-    const sql2 = 'INSERT INTO webshop.order_items (user_id, product_id, quantity, order_id) VALUES (?, ?, 1, ?)';
+    const productIds = produkte.map(p => p.product_id);
 
-    db.query(sql1, [user_id, 1, 100.00], (err1, result1) => {
+    const priceQuery = 'SELECT id, price FROM webshop.product WHERE id IN (?)';
-        if (err1) {
+    db.query(priceQuery, [productIds], (err, priceResults) => {
-            return res.status(500).json({message: 'Fehler beim Erstellen der Bestellung'});
+        if (err) {
+            console.error('Fehler beim Abrufen der Produktpreise:', err);
+            return res.status(500).json({ message: 'Serverfehler beim Abrufen der Produktpreise.' });
         }
 
-        db.query(sql2, [user_id, product_id, result1.insertId], (err2, result2) => {
+        if (priceResults.length !== productIds.length) {
-            if (err2) {
+            return res.status(400).json({ message: 'Eines oder mehrere Produkte existieren nicht.' });
-                return res.status(500).json({message: 'Fehler beim Hinzufügen des Produkts zur Bestellung'});
+        }
+
+        // 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.' });
             }
 
-            res.status(201).json({message: 'Produkt bestellt', id: result2.insertId});
+            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;
@@ -209,6 +246,26 @@ app.post('/api/bestellung/daten', (req, res) => {
     });
 });
 
+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);