reworked bestellformular
This commit is contained in:
parent
7a4f3dd62e
commit
b66c54ff57
@ -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.getElementById('KundenNr').value = sessionStorage.getItem('user_id')
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const formular = document.getElementById('bestellform');
|
||||
const sendButton = document.getElementById('sendOrder');
|
||||
let artikelVerfuegbarkeiten = [];
|
||||
|
||||
document.getElementById('sendOrder').addEventListener('click', async (event) => {
|
||||
event.preventDefault(); // Verhindert das Standardformularverhalten
|
||||
// Bestellung absenden
|
||||
sendButton.addEventListener('click', async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
user_id: document.getElementById('KundenNr').value,
|
||||
product_id: document.getElementById('ArtikelNr').value,
|
||||
}
|
||||
console.log(formData)
|
||||
try {
|
||||
const response = await fetch('/api/bestellung', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert('Bestellung erfolgreich!');
|
||||
window.location.href = '/bestellung'; // Weiterleitung zur Bestellübersicht
|
||||
} else {
|
||||
alert('Fehler bei der Bestellung: ' + result.message);
|
||||
if (produkte.length === 0) {
|
||||
alert('Bitte mindestens ein Produkt angeben!');
|
||||
return;
|
||||
}
|
||||
} 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>
|
||||
|
||||
77
server.js
77
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)'
|
||||
const sql2 = 'INSERT INTO webshop.order_items (user_id, product_id, quantity, order_id) VALUES (?, ?, 1, ?)';
|
||||
// Preise der Produkte abrufen
|
||||
const productIds = produkte.map(p => p.product_id);
|
||||
|
||||
db.query(sql1, [user_id, 1, 100.00], (err1, result1) => {
|
||||
if (err1) {
|
||||
return res.status(500).json({message: 'Fehler beim Erstellen der Bestellung'});
|
||||
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.' });
|
||||
}
|
||||
|
||||
db.query(sql2, [user_id, product_id, result1.insertId], (err2, result2) => {
|
||||
if (err2) {
|
||||
return res.status(500).json({message: 'Fehler beim Hinzufügen des Produkts zur Bestellung'});
|
||||
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.' });
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user