107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
<!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">
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
|
<script src="/header_footer"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Header wird hier dynamisch geladen -->
|
|
<div id="header"></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}
|
|
</br>
|
|
<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>
|