185 lines
7.2 KiB
HTML
185 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bestellformular</title>
|
|
<link rel="stylesheet" href="./Styles/styles-main.css">
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
|
<script src="/header_footer"></script>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<!-- Header wird hier dynamisch geladen -->
|
|
<div id="header"></div>
|
|
|
|
<main>
|
|
<div class="form-container">
|
|
<form method="post" id="bestellform">
|
|
<h2>Bestellformular</h2>
|
|
|
|
<label for="vorname">Vorname:</label>
|
|
<input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly>
|
|
|
|
<label for="nachname">Nachname:</label>
|
|
<input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly>
|
|
|
|
<label for="kundenNr">Kunden Nr.:</label>
|
|
<input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly>
|
|
|
|
<label for="strasse">Straße:</label>
|
|
<input type="text" id="strasse" name="strasse" required placeholder="Strasse">
|
|
|
|
<label for="hausnummer">Hausnummer:</label>
|
|
<input type="text" id="hausnummer" name="hausnummer" required placeholder="Hausnummer">
|
|
|
|
<label for="ort">Ort:</label>
|
|
<input type="text" id="ort" name="ort" required placeholder="Ort">
|
|
|
|
<label>Artikel Nr. / Stückzahl:</label>
|
|
|
|
<a class="button-submit" id="sendOrder">Bestellung absenden</a>
|
|
|
|
<div class="link-text-formular">
|
|
<br>
|
|
<p>Zurück zum <a href="/Warenkorb">Warenkorb</a></p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const user_id = sessionStorage.getItem('user_id');
|
|
const email = sessionStorage.getItem('email');
|
|
const vorname = sessionStorage.getItem('vorname');
|
|
const nachname = sessionStorage.getItem('nachname');
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const formular = document.getElementById('bestellform');
|
|
const kundenNrInput = document.getElementById('KundenNr');
|
|
const VornameInput = document.getElementById('Vorname');
|
|
const NachnameInput = document.getElementById('Nachname');
|
|
if (kundenNrInput, VornameInput, NachnameInput) {
|
|
kundenNrInput.value = user_id;
|
|
VornameInput.value = vorname;
|
|
NachnameInput.value = nachname;
|
|
}
|
|
|
|
console.log("User ID from sessionStorage:", user_id);
|
|
console.log("E-Mail from sessionStorage:", email);
|
|
console.log("Vorname from sessionStorage:", vorname);
|
|
console.log("Nachname from sessionStorage:", nachname);
|
|
|
|
|
|
const sendButton = document.getElementById('sendOrder');
|
|
ladeWarenkorb();
|
|
|
|
// 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
|
|
warenkorbLeeren();
|
|
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.');
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
|
|
function ladeWarenkorb() {
|
|
// RICHTIG lesen: aus localStorage (nicht sessionStorage!)
|
|
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
|
|
|
const formular = document.getElementById('bestellform');
|
|
const sendButton = document.getElementById('sendOrder');
|
|
|
|
if (warenkorb.length === 0) {
|
|
console.log('Kein Warenkorb gefunden oder Warenkorb ist leer.');
|
|
return;
|
|
}
|
|
|
|
warenkorb.forEach(produkt => {
|
|
const artikelDiv = document.createElement('div');
|
|
artikelDiv.className = 'Artikel';
|
|
artikelDiv.innerHTML = `
|
|
<input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required readonly ="Artikel Nr.">
|
|
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required readonly ="Anzahl">
|
|
<div class="verfuegbarkeit"></div>
|
|
`;
|
|
|
|
formular.insertBefore(artikelDiv, sendButton);
|
|
});
|
|
}
|
|
|
|
window.warenkorbLeeren = function () {
|
|
localStorage.removeItem('warenkorb'); // Oder: localStorage.setItem('warenkorb', '[]');
|
|
ladeWarenkorb(); // Aktualisiert die Ansicht
|
|
if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Warenkorb-Zähler im Header aktualisieren
|
|
}
|
|
|
|
</script>
|
|
<!-- Footer wird dynamisch geladen -->
|
|
<div id="footer"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|