Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Compare commits

base: Berufsschule:c04a6b0335e2eefba4350a7f0eb09d72bdbb5c43
Branches Tags
Berufsschule:develop
Berufsschule:main
Berufsschule:feature/scripts_auslagern
Berufsschule:feature/css
Berufsschule:feature/Warenkorb
Berufsschule:Kommentieren
Berufsschule:Registrieren
Berufsschule:Kontakt
Berufsschule:Warenkorb
Berufsschule:v2.1
Berufsschule:v2.0
Berufsschule:v1.0
..
compare: Berufsschule:5bea7b14dd30c771624cc1b64ddaf3c298db945c
Branches Tags
Berufsschule:main
Berufsschule:develop
Berufsschule:feature/scripts_auslagern
Berufsschule:feature/css
Berufsschule:feature/Warenkorb
Berufsschule:Kommentieren
Berufsschule:Registrieren
Berufsschule:Kontakt
Berufsschule:Warenkorb
Berufsschule:v2.1
Berufsschule:v2.0
Berufsschule:v1.0

No commits in common. "c04a6b0335e2eefba4350a7f0eb09d72bdbb5c43" and "5bea7b14dd30c771624cc1b64ddaf3c298db945c" have entirely different histories.
c04a6b0335 ... 5bea7b14dd

24 changed files with 434 additions and 1326 deletions
Show Stats Expand all files Collapse all files

10
database/db_scripts/webshop_test-data.sql
View File

@ -2,15 +2,15 @@ USE webshop;
-- Product Categories -- Product Categories
INSERT INTO product_category (id, name) INSERT INTO product_category (id, name)
VALUES (1, 'Motorräder'); VALUES (1, 'Electronics');
INSERT INTO product_category (id, name) INSERT INTO product_category (id, name)
VALUES (2, 'Oldtimer'); VALUES (2, 'Home Appliances');
INSERT INTO product_category (id, name) INSERT INTO product_category (id, name)
VALUES (3, 'Sportwägen'); VALUES (3, 'Clothing');
INSERT INTO product_category (id, name) INSERT INTO product_category (id, name)
VALUES (4, 'LKWs'); VALUES (4, 'Sports');
INSERT INTO product_category (id, name) INSERT INTO product_category (id, name)
VALUES (5, 'Kleinwägen'); VALUES (5, 'Books');
-- Discounts -- Discounts
INSERT INTO discount (id, name, description, discount_percent, active) INSERT INTO discount (id, name, description, discount_percent, active)

36
package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "webshop", "name": "sniper",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "webshop", "name": "sniper",
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
@ -15,9 +15,7 @@
"express-session": "^1.18.1", "express-session": "^1.18.1",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"mysql2": "^3.12.0", "mysql2": "^3.12.0",
"node": "^22.15.0", "path": "^0.12.7"
"path": "^0.12.7",
"server.js": "^1.0.0"
} }
}, },
"node_modules/accepts": { "node_modules/accepts": {
@ -676,28 +674,6 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/node": {
"version": "22.15.0",
"resolved": "https://registry.npmjs.org/node/-/node-22.15.0.tgz",
"integrity": "sha512-qrOEL83lNt+Jbh9pekl5xQrZK+QRJz51m2IGGCu2NENgbG6Go0D1QUBvjbejP8jB2eokQpX1AorDLbKQ/FxuYA==",
"hasInstallScript": true,
"license": "ISC",
"dependencies": {
"node-bin-setup": "^1.0.0"
},
"bin": {
"node": "bin/node"
},
"engines": {
"npm": ">=5.0.0"
}
},
"node_modules/node-bin-setup": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
"integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==",
"license": "ISC"
},
"node_modules/object-inspect": { "node_modules/object-inspect": {
"version": "1.13.2", "version": "1.13.2",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@ -918,12 +894,6 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/server.js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/server.js/-/server.js-1.0.0.tgz",
"integrity": "sha512-fO4IvzkZ09bBB++XU/gWGuzxJs0OpghSd/34mlW8coMoakLzj/+W5d1pHX+I+7H52GkBKu96UQU0K5vptNjaqg==",
"license": "ISC"
},
"node_modules/set-function-length": { "node_modules/set-function-length": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

10
package.json
View File

@ -1,10 +1,10 @@
{ {
"name": "webshop", "name": "sniper",
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start": "npm install && node server.js" "start": "node server.js"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
@ -12,13 +12,13 @@
"description": "Webshop Autohändler", "description": "Webshop Autohändler",
"dependencies": { "dependencies": {
"app-root-path": "^3.1.0", "app-root-path": "^3.1.0",
"dotenv": "^16.4.5",
"express": "^4.21.1",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"express": "^4.21.2", "express": "^4.21.2",
"express-session": "^1.18.1", "express-session": "^1.18.1",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"mysql2": "^3.12.0", "mysql2": "^3.12.0",
"node": "^22.15.0", "path": "^0.12.7"
"path": "^0.12.7",
"server.js": "^1.0.0"
} }
} }

35
public/404.html
View File

@ -1,38 +1,27 @@
<!--
Eine Seite für die Seiten die nicht vorhanden sind.
Fehler 404 - Seite nicht gefunden
Zeigt eine Meldung und hat einen Link der zurück zur Startseite führt
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seite nicht gefunden</title> <title>Seite nicht gefunden</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<!-- Hauptinhalt: Fehlermeldung -->
<main class="content" style="text-align: center; padding: 80px;"> <main class="content" style="text-align: center; padding: 80px;">
<h1>🚧 Seite nicht gefunden 🚧</h1> <h1>🚧 Seite nicht gefunden 🚧</h1>
<p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p> <p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p>
<!-- Button zurück zur Startseite --> <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
<a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeiele -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
</body> </body>
</html> </html>

156
public/Warenkorb/warenkorb.html
View File

@ -11,144 +11,28 @@
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<div class="warenkorb"> <div class="warenkorb">
<main> <h2>🛒 Dein Warenkorb</h2>
<h2>Dein Warenkorb</h2>
<div id="warenkorb"></div> <div class="item">
<div id="gesamtpreis-container"></div> <div class="info">
<button id="zurKasseGehen">Zur Kasse gehen</button> <span class="name">Produkt 1</span>
</main>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="item">
<div class="info">
<span class="name">Produkt 2</span>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="summary">
</div>
<button class="zurKasse">Zur Kasse gehen</button>
</div> </div>
<style>
.warenkorb-tabelle {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.warenkorb-tabelle th, .warenkorb-tabelle td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.warenkorb-tabelle th {
background-color: #f8f8f8;
}
.loeschen-button, .menge-button {
background-color: #ff4d4d;
border: none;
color: white;
padding: 5px 8px;
margin: 0 2px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.loeschen-button:hover, .menge-button:hover {
background-color: #e60000;
}
.produkt-anzahl {
display: inline-block;
width: 30px;
text-align: center;
}
</style>
<!-- Footer wird dynamisch geladen --> <!-- Footer wird dynamisch geladen -->
<div id="footer"></div> <div id="footer"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
ladeWarenkorb();
document.getElementById('zurKasseGehen').addEventListener('click', function() {
window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
});
});
function ladeWarenkorb() {
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const container = document.getElementById('warenkorb');
const gesamtContainer = document.getElementById('gesamtpreis-container');
container.innerHTML = '';
gesamtContainer.innerHTML = '';
if (warenkorb.length === 0) {
container.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
document.getElementById('zurKasseGehen').style.display = 'none';
return;
}
let gesamtpreis = 0;
const table = document.createElement('table');
table.className = 'warenkorb-tabelle';
table.innerHTML = `
<thead>
<tr>
<th>Produkt</th>
<th>Preis (Stück)</th>
<th>Anzahl</th>
<th>Zwischensumme</th>
<th>Aktion</th>
</tr>
</thead>
<tbody></tbody>
`;
const tbody = table.querySelector('tbody');
warenkorb.forEach((produkt, index) => {
const zwischensumme = produkt.price * produkt.quantity;
gesamtpreis += zwischensumme;
const row = document.createElement('tr');
row.innerHTML = `
<td>${produkt.product_name}</td>
<td>${produkt.price.toFixed(2)} €</td>
<td>
<button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
<span class="produkt-anzahl">${produkt.quantity}</span>
<button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
</td>
<td>${zwischensumme.toFixed(2)} €</td>
<td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
`;
tbody.appendChild(row);
});
container.appendChild(table);
gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
if (window.zeigeWarenkorbAnzahl) {
window.zeigeWarenkorbAnzahl();
}
}
function entferneAusWarenkorb(index) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
warenkorb.splice(index, 1);
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
ladeWarenkorb();
}
function aendereMenge(index, aenderung) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
warenkorb[index].quantity += aenderung;
if (warenkorb[index].quantity <= 0) {
warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
ladeWarenkorb();
}
</script>
</body> </body>
</html> </html>

286
public/bestellformular/bestellformular.html
View File

@ -6,27 +6,26 @@
<title>Bestellformular</title> <title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css"> <link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header"></div> <div id="header-placeholder"></div>
<main> <main>
<div class="form-container"> <div class="form-container">
<form method="post" id="bestellform"> <form action="/submit-bestellung" method="post" id="bestellform">
<h2>Bestellformular</h2> <h2>Bestellformular</h2>
<label for="vorname">Vorname:</label> <label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly> <input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<label for="nachname">Nachname:</label> <label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly> <input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<label for="kundenNr">Kunden Nr.:</label> <label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly> <input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<label for="strasse">Straße:</label> <label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse"> <input type="text" id="strasse" name="strasse" required placeholder="Strasse">
@ -38,273 +37,48 @@
<input type="text" id="ort" name="ort" required placeholder="Ort"> <input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="ArtikelNr">Artikel Nr.:</label> <label for="ArtikelNr">Artikel Nr.:</label>
<div class="Artikel"> <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
<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> <a href="/bestellung" class="button-submit" id="sendOrder">Bestellung absenden</a>
.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%;
}
#KundenNr, #Vorname, #Nachname{
background-color: #F5F5F5;
border: none;
}
</style>
<a class="button-submit" id="sendOrder">Bestellung absenden</a>
</form> </form>
</div> </div>
</main> </main>
<script> <script>
const user_id = sessionStorage.getItem('user_id'); document.getElementById('bestellform').addEventListener('sendOrder', async (event) => {
const email = sessionStorage.getItem('email'); event.preventDefault(); // Verhindert das Standardformularverhalten
const vorname = sessionStorage.getItem('vorname');
const nachname = sessionStorage.getItem('nachname');
const userId = document.getElementById('KundenNr').value;
document.addEventListener('DOMContentLoaded', function () { const productId = document.getElementById('ArtikelNr').value;
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');
let artikelVerfuegbarkeiten = [];
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
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 { try {
const response = await fetch(`/api/pruefe-artikel?nummer=${encodeURIComponent(artikelnummer)}`); const response = await fetch('/api/bestellung', {
const data = await response.json(); method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userId,
productId,
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 const result = await response.json();
if (artikelVerfuegbarkeiten.every(status => status === true)) {
sendButton.disabled = false; if (response.ok) {
alert('Bestellung erfolgreich!');
window.location.href = '/bestellung.html'; // Weiterleitung zur Bestellübersicht
} else { } else {
sendButton.disabled = true; alert('Fehler bei der Bestellung: ' + result.message);
} }
} catch (error) { } catch (error) {
console.error('Fehler bei der Artikelsuche:', error); console.error('Fehler:', error);
verfuegbarkeitDiv.textContent = "Fehler bei der Prüfung."; alert('Fehler beim Bestellen.');
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();
}
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 = `
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
`;
formular.insertBefore(artikelDiv, sendButton);
});
}
</script> </script>
<!-- Footer wird dynamisch geladen --> <!-- Footer wird dynamisch geladen -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>

130
public/bestellung/bestellung.html
View File

@ -1,103 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ihre Bestellung</title> <title>Ihre Bestellung</title>
<link rel="stylesheet" href="/Styles/bestellung/bestellung.css"> <link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<script src="/header_footer"></script> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div> <div id="header-placeholder"></div>
<main> <main>
<h2>Ihre Bestellung:</h2> <h2>Ihre Bestellung:</h2>
<div id="bestellung"> <div id="bestellung">
<!-- Platzhalter für die Bestellinformationen --> <!-- Platzhalter für die Bestellinformationen -->
<div class="bestell-info-card"> <div class="bestell-info-card">
<p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p> <p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
<p><strong>Produkt-ID:</strong> <span id="produktId"></span></p> <p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
<p><strong>Produktname:</strong> <span id="produktName"></span></p> <p><strong>Produktname:</strong> <span id="produktName"></span></p>
<p><strong>Preis:</strong> <span id="preis"></span></p> <p><strong>Preis:</strong> <span id="preis"></span></p>
</div> </div>
</div> </div>
</main> </main>
<script> <script>
async function ladeBestellung() { async function ladeBestellung() {
const user_id = sessionStorage.getItem('user_id'); const user_id = sessionStorage.getItem('user_id')
if (!user_id) { console.log('User ID: ', user_id)
alert('Sie sind nicht eingeloggt! Bitte loggen Sie sich ein.'); if (!user_id){
window.location.href = '/login'; console.log("is null")
return; alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.')
} } else if (user_id <= 1) {
try {
try { const response = await fetch('/api/bestellung/daten', {
const response = await fetch('/api/bestellung/daten', { method: 'POST',
method: 'POST', headers: {
headers: { 'Content-Type': 'application/json'
'Content-Type': 'application/json' },
}, body: JSON.stringify(user_id)
body: JSON.stringify({ user_id: user_id }) })
});
if (response.ok) {
const daten = await response.json();
const bestellungContainer = document.getElementById('bestellung');
bestellungContainer.innerHTML = '';
const bestellungen = {}; if (response.ok) {
const data = await response.json();
daten.forEach(item => { document.getElementById('kundenNr').textContent = user_id
if (!bestellungen[item.order_id]) { document.getElementById('produktId').textContent = data.product_id
bestellungen[item.order_id] = { //document.getElementById('produktName').textContent = data.
total: item.order_total, document.getElementById('preis').textContent = data.total + ' €'
produkte: [] } else {
}; console.error('Fehler beim Laden der Bestelldaten.');
}
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}
<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);
} }
} catch (error) {
console.error('Fehler: ', error);
}
} }
}
window.addEventListener('DOMContentLoaded', ladeBestellung);
</script> window.addEventListener('DOMContentLoaded', ladeBestellung);
</script>
<!-- Footer wird dynamisch geladen --> <!-- Footer wird dynamisch geladen -->
<div id="footer"></div> <div id="footer"></div>
</body> </body>

18
public/header_footer/footer.html
View File

@ -1,14 +1,8 @@
<!-- <!-- Fußzeiele -->
Fußzeile des Webshops
Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
-->
<footer class="footer"> <footer class="footer">
<!-- Copyright-Hinweis --> <p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p> <p>
<!-- Links zu Impressum und Datenschutz (keine Funktion) --> <a href="/impressum">Impressum</a> |
<p> <a href="/datenschutz">Datenschutz</a>
<a href="/impressum">Impressum</a> | </p>
<a href="/datenschutz">Datenschutz</a>
</p>
</footer> </footer>

77
public/header_footer/header.html
View File

@ -1,60 +1,35 @@
<!-- <!-- header.html -->
Header-Bereich Einbindung
Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
-->
<header> <header>
<!-- Logo und Shop-Titel --> <div class="logo-container">
<a href="/" class="logo-link"> <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<div class="logo-container"> <h1>Modellauto - Shop</h1>
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img"> </div>
<h1>Modellauto - Shop</h1> <div class="header-right">
</div> <a href="/login" class="login-btn">Login</a>
</a>
<!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
<div class="header-right"> <div class="header-right">
<!-- Login-Button -->
<a href="/login" class="login-btn">
<i class='bx bx-user'></i> Login
</a>
<!-- Warenkorb-Button mit Icon und Anzeige der Artikelanzahl (keine Funktion) --> <a href="/warenkorb" class="cart">
<a href="/warenkorb" class="cart"> <i class='bx bx-cart'></i>
<i class='bx bx-cart'></i> <span class="cart-count">0</span>
<span class="cart-count" id="cart-count">0</span> </a>
</a>
</div> </div>
</div> </div>
</header> </header>
<!-- Navigationsmenü -->
<nav class="menu"> <nav class="menu">
<ul class="menu-list"> <ul class="menu-list">
<!-- Startseite Link --> <li class="menu-item"><a href="/">Startseite</a></li>
<li class="menu-item"> <li class="menu-item">
<a href="/"><i class='bx bx-home'></i> Startseite</a> <a href="/shop">Shop</a>
</li> <ul class="submenu">
<!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien --> <li><a href="/shop/motorrad">Motorräder</a></li>
<li class="menu-item"> <li><a href="/shop/oldtimer">Oldtimer</a></li>
<a href="/shop"><i class='bx bx-store'></i> Shop</a> <li><a href="/shop/sportwagen">Sportwagen</a></li>
<ul class="submenu"> <li><a href="/shop/lkw">LKWs</a></li>
<li><a href="/shop/motorrad"></i> Motorräder</a></li> </ul>
<li><a href="/shop/oldtimer"></i> Oldtimer</a></li> </li>
<li><a href="/shop/sportwagen"></i> Sportwagen</a></li> <li class="menu-item"><a href="/ueberuns">Über uns</a></li>
<li><a href="/shop/lkw"></i> LKWs</a></li> <li class="menu-item"><a href="/kontaktformular">Kontakt</a></li>
</ul> <li class="menu-item"><a href="/bestellformular">Bestellformular</a></li>
</li> </ul>
<!-- Link zu Über uns-->
<li class="menu-item">
<a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
</li>
<!-- Link zur Kontakt Seite-->
<li class="menu-item">
<a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a>
</li>
<!-- Link zum Bestellformular-->
<li class="menu-item">
<a href="/bestellformular"><i class='bx bx-notepad'></i> Bestellformular</a>
</li>
</ul>
</nav> </nav>

29
public/login/login.html
View File

@ -1,51 +1,31 @@
<!--
Login-Seite für den Webshop.
Die Benutzer können sich mit ihrem Benutzernamen und Passwort anmelden oder sich registreren.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<!-- Login-CSS-Datei -->
<link rel="stylesheet" href="./Styles/login/login.css"> <link rel="stylesheet" href="./Styles/login/login.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script> <script src="/header_footer"></script>
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<main class="main-content"> <main class="main-content">
<div class="login-container"> <div class="login-container">
<h2 class="title">Login</h2> <h2 class="login-title">Login</h2>
<!-- Login-Formular -->
<form class="login-form"> <form class="login-form">
<!-- Eingabefeld für Benutzername -->
<div class="input-group"> <div class="input-group">
<input id="email" type="text" placeholder="E-Mail" required/> <input id="email" type="text" placeholder="E-Mail" required/>
<i class="icon fas fa-user"></i> <i class="icon fas fa-user"></i>
</div> </div>
<!-- Eingabefeld für Passwort -->
<div class="input-group"> <div class="input-group">
<input id="password" type="password" placeholder="Passwort" required/> <input id="password" type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i> <i class="icon fas fa-lock"></i>
</div> </div>
<button id="submit" type="submit" class="login-btn">Login</button>
<!-- Login-Button -->
<button type="submit" class="login-btn">Login</button>
<!-- Link zur Registrierungsseite -->
<p class="register-text"> <p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a> Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p> </p>
@ -71,8 +51,6 @@
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
sessionStorage.setItem("user_id", data.id) sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Login erfolgreich!'); alert('Login erfolgreich!');
window.location.href = '/'; // Redirect to home page after login window.location.href = '/'; // Redirect to home page after login
} else { } else {
@ -85,7 +63,6 @@
} }
}) })
</script> </script>
<!-- Fußzeile --> <!-- Fußzeile -->
<div id="footer"></div> <div id="footer"></div>

26
public/registrieren/registrieren.html
View File

@ -1,36 +1,25 @@
<!--
Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
Header und Footer werden dynamisch geladen.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrieren</title>
<!-- Registrieren-CSS-Datei -->
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css"> <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script> <script src="/header_footer"></script>
<title>Registrieren</title>
</head> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<!-- Registrierungsformular --> <!-- Registrierungsformular -->
<main class="content-wrapper"> <main class="content-wrapper">
<!-- Formular für Registrierung --> <div class="wrapper">
<div class="register-wrapper"> <form id="registration Form" method="POST">
<form action="register.php" method="POST"> <h1>Registrieren</h1>
<h2 class="title">Registrieren</h2>
<div class="input-box"> <div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required id="vorname"> <input type="text" name="vorname" placeholder="Vorname" required id="vorname">
@ -49,7 +38,6 @@
<i class='bx bxs-lock-alt'></i> <i class='bx bxs-lock-alt'></i>
</div> </div>
<!-- Eingabe: Passwort bestätigen -->
<div class="input-box"> <div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required> required>
@ -58,7 +46,6 @@
<button type="submit" class="btn" id="register">Registrieren</button> <button type="submit" class="btn" id="register">Registrieren</button>
<!-- Link zum Login für bestehende Nutzer -->
<div class="register-link"> <div class="register-link">
<br> <br>
<p>Bereits ein Konto? <a href="/login">Login</a></p> <p>Bereits ein Konto? <a href="/login">Login</a></p>
@ -89,10 +76,7 @@
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
sessionStorage.setItem("user_id", data.id) sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id) alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
window.location.href= '/'
} else { } else {
alert('Fehler bei der Registrierung.') alert('Fehler bei der Registrierung.')
} }

133
public/shop/shop.html
View File

@ -1,110 +1,63 @@
<!--
Diese Seite zeigt alle Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title> <title>Shop</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
<h1>Willkommen im Webshop</h1> <h1>Willkommen im Webshop</h1>
</section> </section>
<main> <main>
<!-- "Container" für die dynamisch geladenen Produktkarten -->
<section class="card-grid" id="products"> <section class="card-grid" id="products">
<!-- Produkte werden hier eingefügt --> <!-- Dynamische Produkte -->
</section> </section>
</main> </main>
<!-- Fußzeiele --> <script>
<div id="footer"></div>
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
// Daten von der API abrufen
fetch('/api/products') fetch('/api/products')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products'); const container = document.getElementById('products');
container.innerHTML = ''; container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine eigene Karte erstellen und einfügen products.forEach(product => {
products.forEach(product => {
// Neues div-Element für die Produktkarte
const card = document.createElement('div'); const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card'); card.classList.add('card');
// HTML-Struktur der Produktkarte
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
// Karte in den Container einfügen
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlermeldung .catch(err => {
.catch(err => { console.error('Fehler beim Laden der Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body> </body>
</html> </html>

122
public/shop/shop_lkw.html
View File

@ -1,108 +1,60 @@
<!--
Diese Seite zeigt alle LKW-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - LKW's</title> <title>Shop - LKW's</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <!-- Header -->
<!-- Header --> <div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main> <section style="padding: 0px 30px; text-align: left;">
<section style="padding: 0px 30px; text-align: left;"> <h1>Unsere LKW Produkte</h1>
<h1>Unsere LKW Produkte</h1> </section>
</section> <section class="card-grid" id="products_lkw">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
<section class="card-grid" id="products_lkw"> </section>
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
<script> <script>
// API-Abfrage, um Lkw-Produkte zu laden fetch('/api/products/lkw')
// Funktion zum Hinzufügen zum Warenkorb .then(res => res.json())
function zumWarenkorbHinzufuegen(product) { .then(products => {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_lkw'); const container = document.getElementById('products_lkw');
container.innerHTML = ''; container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
}); });
}) })
// Fehlerbehandlung .catch(err => {
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite const container = document.getElementById('products_oldtimer');
const container = document.getElementById('products_lkw'); container.innerHTML =
container.innerHTML = ` `<div class="error-message">
<div class="error-message"> <h3>Fehler beim Laden der Produkte</h3>
<h3>Fehler beim Laden der Produkte</h3> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br> </div>`;
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p> });
</div>`;
});
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

120
public/shop/shop_motorrad.html
View File

@ -1,105 +1,61 @@
<!--
Diese Seite zeigt alle Motorrad-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Motorräder</title> <title>Shop - Motorräder</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <!-- Header -->
<!-- Header --> <div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main class="main-content"> <section style="padding: 0px 30px; text-align: left;">
<section style="padding: 0px 30px; text-align: left;"> <h1>Unsere Motorrad Produkte</h1>
<h1>Unsere Motorrad Produkte</h1> </section>
</section> <section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<section class="card-grid" id="products_motorrad">
<!-- Produkte -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb fetch('/api/products/motorrad')
function zumWarenkorbHinzufuegen(product) { .then(res => res.json())
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; .then(products => {
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad'); const container = document.getElementById('products_motorrad');
container.innerHTML = ''; container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
}); });
}) })
// Fehlermeldung .catch(err => {
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_motorrad'); const container = document.getElementById('products_motorrad');
container.innerHTML = ` container.innerHTML =
<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p> </div>`;
</div>`; });
});
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

134
public/shop/shop_oldtimer.html
View File

@ -1,110 +1,60 @@
<!--
Diese Seite zeigt alle Oldtimer-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Oldtimer</title> <title>Shop - Oldtimer</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <!-- Header -->
<!-- Header --> <div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main class="main-content"> <section style="padding: 0px 30px; text-align: left;">
<section style="padding: 0px 30px; text-align: left;"> <h1>Unsere Oldtimer Produkte</h1>
<h1>Unsere Oldtimer Produkte</h1> </section>
</section> <section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
<section class="card-grid" id="products_oldtimer"> </section>
<!-- Produkte -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/oldtimer') fetch('/api/products/oldtimer')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_oldtimer'); const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen products.forEach(product => {
products.forEach(product => {
// Neues div für eine Produktkarte
const card = document.createElement('div'); const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card'); card.classList.add('card');
// Die Karte mit Produktdaten füllen
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card); container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_oldtimer');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
}); });
}) </script>
// Fehlerbehandlung
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite <!-- Fußzeiele -->
<div id="footer"></div>
const container = document.getElementById('products_oldtimer');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body> </body>
</html> </html>

124
public/shop/shop_sportwagen.html
View File

@ -1,107 +1,65 @@
<!--
Diese Seite zeigt alle Sportwagen-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Sportwagen</title> <title>Shop - Sportwagen</title>
<!-- Haupt-CSS-Datei --> <link rel="stylesheet" href="/Styles/styles-main.css">
<link rel="stylesheet" href="/Styles/styles-main.css"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Icons --> <script src="/header_footer"></script>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main> <section style="padding: 0px 30px; text-align: left;">
<section style="padding: 0px 30px; text-align: left;"> <h1>Unsere Sportwagen Produkte</h1>
<h1>Unsere Sportwagen Produkte</h1> </section>
</section>
<section class="card-grid" id="products_sportwagen"> <section class="card-grid" id="products_sportwagen">
<!-- Einbindung Dynamische Produkte --> <!-- Dynamische Produkte oder Fehlermeldung -->
</section> </section>
</main>
<!-- Footer --> <!-- Footer -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb fetch('/api/products/sportwagen')
function zumWarenkorbHinzufuegen(product) { .then(res => res.json())
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; .then(products => {
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ''; container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`; `;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
}); });
}) })
// Fehlermeldung .catch(err => {
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ` container.innerHTML = `
<div class="error-message"> <div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p> Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`; </div>
}); `;
});
</script> </script>
</body> </body>
</html> </html>

78
public/startseite/startseite.html
View File

@ -1,25 +1,17 @@
<!--
Startseite des Modellauto-Webshops
Zeigt ein Infobereich, die neuesten Produkte (per API geladen) und die Vorteile bei uns zu bestellen
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modellauto - Startseite</title> <title>Modellauto - Startseite</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header"></div> <div id="header-placeholder"></div>
<main> <main>
<!-- Infobereich --> <!-- Infobereich -->
@ -33,75 +25,49 @@
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1> <h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products"> <section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 neuesten Produkte) --> <!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section> </section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte --> <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb // API-Aufruf
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/new') fetch('/api/products/new')
// Antwort als JSON parsen
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('latest-products'); const container = document.getElementById('latest-products');
container.innerHTML = ''; container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erzeugen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
// HTML-Inhalt der Karte mit Produktdaten füllen
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p> <p>Preis: ${product.price}€</p>
<p>${product.description}</p> <p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p> <button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button> `;
`; // Karte in Container einfügen
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card); container.appendChild(card);
}); });
}) })
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der neuesten Produkte:', err);
const container = document.getElementById('latest-products'); const container = document.getElementById('latest-products');
container.innerHTML = ` container.innerHTML =
<div class="error-message"> `<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3> <h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br> <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p> </div>`;
</div>`;
}); });
</script> </script>
<!-- Infobereich mit den Vorteilen --> <!-- Info-Sektion -->
<section class="info-cards-section"> <section class="info-cards-section">
<div class="info-card"> <div class="info-card">
<i class='bx bx-package'></i> <i class='bx bx-package'></i>
@ -130,5 +96,7 @@
<div id="footer"></div> <div id="footer"></div>
</div> </div>
<!-- Scripts -->
<script src="startseite.js"></script>
</body> </body>
</html> </html>

38
scripts/einfügenHeaderFooter.js
View File

@ -1,31 +1,16 @@
/**
* Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
* (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
* Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
* wird eine Fehlermeldung direkt auf der Webseite angezeigt.
*/
// Warten bis das gesamte DOM geladen ist
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// Header laden // Header laden
const headerTarget = document.getElementById("header"); const headerTarget = document.getElementById("header-placeholder");
if (headerTarget) { if (headerTarget) {
// Header-Inhalt vom Server anfordern
fetch("/header") fetch("/header")
.then(response => { .then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Header nicht gefunden"); if (!response.ok) throw new Error("Header nicht gefunden");
return response.text(); return response.text();
}) })
.then(data => { .then(data => {
// Header-Inhalt in die Seite einfügen
headerTarget.innerHTML = data; headerTarget.innerHTML = data;
// 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
zeigeWarenkorbAnzahl();
}) })
.catch(error => { .catch(error => {
// Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
headerTarget.innerHTML = ` headerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;"> <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden des Headers. Fehler beim Laden des Headers.
@ -37,19 +22,15 @@ document.addEventListener("DOMContentLoaded", () => {
// Footer laden // Footer laden
const footerTarget = document.getElementById("footer"); const footerTarget = document.getElementById("footer");
if (footerTarget) { if (footerTarget) {
// Footer-Inhalt vom Server anfordern
fetch("/footer") fetch("/footer")
.then(response => { .then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Footer nicht gefunden"); if (!response.ok) throw new Error("Footer nicht gefunden");
return response.text(); return response.text();
}) })
.then(data => { .then(data => {
// Footer-Inhalt in die Seite einfügen
footerTarget.innerHTML = data; footerTarget.innerHTML = data;
}) })
.catch(error => { .catch(error => {
// Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
footerTarget.innerHTML = ` footerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;"> <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden der Fußzeile. Fehler beim Laden der Fußzeile.
@ -57,19 +38,4 @@ document.addEventListener("DOMContentLoaded", () => {
console.error(error); console.error(error);
}); });
} }
});
window.zeigeWarenkorbAnzahl = function() {
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
let anzahl = 0;
warenkorb.forEach(produkt => {
anzahl += produkt.quantity;
});
const anzahlElement = document.getElementById('cart-count');
if (anzahlElement) {
anzahlElement.textContent = anzahl;
}
console.log('Warenkorb-Anzahl:', anzahl);
}
});

5
scripts/routes/other/route-index.js
View File

@ -60,12 +60,13 @@ router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html')); res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
}) })
// Route - Warenkorb router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})
router.get('/Warenkorb', (req, res) => { router.get('/Warenkorb', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html')); res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html'));
}) })
// Route - Bestellformualar
router.get('/bestellformular', (req, res) => { router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html')); res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
}) })

120
server.js
View File

@ -52,7 +52,6 @@ app.get('/api/products', (req, res) => {
}); });
}); });
// API-Route für die 5 neuen Produkte
app.get('/api/products/new', async (req, res) => { app.get('/api/products/new', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4'; const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4';
@ -68,7 +67,6 @@ app.get('/api/products/new', async (req, res) => {
}); });
}); });
// API-Route für die Motorrad-Produkte
app.get('/api/products/motorrad', async (req, res) => { app.get('/api/products/motorrad', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 4'; const sql = 'SELECT * FROM webshop.product WHERE category_id = 4';
@ -84,7 +82,6 @@ app.get('/api/products/motorrad', async (req, res) => {
}); });
}); });
// API-Route für die Oldtimer-Produkte
app.get('/api/products/oldtimer', async (req, res) => { app.get('/api/products/oldtimer', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 2'; const sql = 'SELECT * FROM webshop.product WHERE category_id = 2';
@ -100,7 +97,6 @@ app.get('/api/products/oldtimer', async (req, res) => {
}); });
}); });
// API-Route für die Lkw-Produkte
app.get('/api/products/lkw', async (req, res) => { app.get('/api/products/lkw', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 3'; const sql = 'SELECT * FROM webshop.product WHERE category_id = 3';
@ -116,7 +112,6 @@ app.get('/api/products/lkw', async (req, res) => {
}); });
}); });
// API-Route für die Sportwagen-Produkte
app.get('/api/products/sportwagen', async (req, res) => { app.get('/api/products/sportwagen', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 1'; const sql = 'SELECT * FROM webshop.product WHERE category_id = 1';
@ -135,7 +130,7 @@ app.get('/api/products/sportwagen', async (req, res) => {
app.post('/api/user/registration', (req, res) => { app.post('/api/user/registration', (req, res) => {
// SQL-Query für Nutzerregistration // SQL-Query für Nutzerregistration
const {name, lower_name, email, passwd} = req.body; const {name, lower_name, email, passwd} = req.body;
const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')" const sql = "INSERT INTO user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
// Query abschicken // Query abschicken
db.query(sql, [name, lower_name, email, passwd], (err, results) => { db.query(sql, [name, lower_name, email, passwd], (err, results) => {
@ -168,134 +163,49 @@ app.post('/api/user/login', (req, res) => {
req.session.userId = user.id; req.session.userId = user.id;
req.session.email = user.email; req.session.email = user.email;
req.session.vorname = user.name;
req.session.nachname = user.lower_name;
res.json({message: 'Login erfolgreich', id: user.id, name: user.name, lower_name: user.lower_name}) res.json({message: 'Login erfolgreich', id: user.id})
}) })
}) })
app.post('/api/bestellung', (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}, ...]
if (!user_id || !Array.isArray(produkte) || produkte.length === 0) { const { user_id, product_id} = req.body;
return res.status(400).json({ message: 'Ungültige Anfrage: user_id oder Produkte fehlen.' }); const sql = 'INSERT INTO order_items (user_id, product_id, quantity) VALUES (?, ?, 1)'
}
// Preise der Produkte abrufen
const productIds = produkte.map(p => p.product_id);
const priceQuery = 'SELECT id, price FROM webshop.product WHERE id IN (?)'; db.query(sql, [user_id, product_id], (err, results) => {
db.query(priceQuery, [productIds], (err, priceResults) => { if (err || results.length === 0) {
if (err) { console.error('Fehler beim Abrufen des Produkts: ', err);
console.error('Fehler beim Abrufen der Produktpreise:', err); return res.status(500).json({ message: 'Produkt nicht gefunden oder Serverfehler' });
return res.status(500).json({ message: 'Serverfehler beim Abrufen der Produktpreise.' });
} }
res.status(201).json({message: 'Produkt bestellt', id: results.insertId})
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.' });
}
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) => { app.get('/api/bestellung/daten', (req, res) => {
const { user_id } = req.body;
const sql = ` const user_id = req.body;
SELECT
od.id AS order_id,
od.total AS order_total,
oi.product_id,
oi.quantity,
p.name AS product_name,
p.price AS product_price
FROM
webshop.order_details od
INNER JOIN
webshop.order_items oi ON od.id = oi.order_id
INNER JOIN
webshop.product p ON oi.product_id = p.id
WHERE
od.user_id = ?
ORDER BY
od.id DESC
`;
const sql = 'SELECT * FROM order_items WHERE user_id = ? '
db.query(sql, [user_id], (err, results) => { db.query(sql, [user_id], (err, results) => {
if (err) { if (err) {
console.error('Fehler beim Abrufen der Bestellungen: ', err); console.error('Fehler beim Abrufen der Bestellung: ', err);
return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellungen' }); return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellung' });
} }
if (results.length === 0) { if (results.length === 0) {
return res.status(404).json({ message: 'Keine Bestellungen gefunden.' }); return res.status(404).json({ message: 'Keine Bestellung gefunden' });
} }
res.json(results); res.json(results);
}); });
}); });
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'); const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute); app.use('/', getIndexRoute);
// Hier werden alle anderen Seiten abgefangen, die keine definierten Routen haben (404 Fehler)
// und gibt die 404.html aus.
app.use((req, res) => { app.use((req, res) => {
// Setzt den Statuscode auf 404 und sendet die '404.html'-Datei
res.status(404).sendFile(path.join(__dirname, 'public', '404.html')); res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
}); });

1
static/Styles/bestellformular/bestellformular.css
View File

@ -1,6 +1,7 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f2f2f2; background-color: #f2f2f2;
padding: 20px;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

7
static/Styles/login/login.css
View File

@ -9,6 +9,13 @@
margin: 50px auto; /* Zentriert das Formular */ margin: 50px auto; /* Zentriert das Formular */
} }
.login-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
}
.login-form .input-group { .login-form .input-group {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;

32
static/Styles/registrieren/registrieren.css
View File

@ -4,7 +4,7 @@
min-height: 100vh; min-height: 100vh;
} }
.register-wrapper { .wrapper {
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
padding: 30px; padding: 30px;
@ -21,7 +21,6 @@
align-items: center; align-items: center;
padding: 40px 20px; padding: 40px 20px;
} }
.registration-container { .registration-container {
max-width: 400px; max-width: 400px;
margin: 60px auto; margin: 60px auto;
@ -50,6 +49,22 @@
box-sizing: border-box; box-sizing: border-box;
} }
.registration-container button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.registration-container button[type="submit"]:hover {
background-color: #0056b3;
}
.register-link { .register-link {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
@ -66,16 +81,3 @@
text-decoration: underline; text-decoration: underline;
} }
.register-btn {
width: 100%;
padding: 12px;
background: #ff6600;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}

33
static/Styles/styles-main.css
View File

@ -41,13 +41,7 @@ header {
.logo-container { .logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; gap: 15px;
color: inherit;
}
.logo-container h1 {
margin-left: 10px;
font-size: 1.8rem;
} }
.logo-img { .logo-img {
@ -55,11 +49,6 @@ header {
object-fit: contain; object-fit: contain;
} }
.logo-link {
text-decoration: none;
color: inherit;
}
header h1 { header h1 {
font-size: 30px; font-size: 30px;
color: #333; color: #333;
@ -294,14 +283,6 @@ main {
margin-bottom: 20px; margin-bottom: 20px;
} }
.title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
text-align: center;
}
.input-box input { .input-box input {
width: 100%; width: 100%;
padding: 12px 40px 12px 15px; padding: 12px 40px 12px 15px;
@ -396,7 +377,7 @@ h1 {
color: #b00020; color: #b00020;
border: 1px solid #ffcccc; border: 1px solid #ffcccc;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center; text-align: center;
font-family: inherit; font-family: inherit;
animation: fadeIn 0.6s ease-in-out; animation: fadeIn 0.6s ease-in-out;
@ -414,14 +395,8 @@ h1 {
/* Optional: weiche Animation beim Einblenden */ /* Optional: weiche Animation beim Einblenden */
@keyframes fadeIn { @keyframes fadeIn {
from { from { opacity: 0; transform: translateY(20px); }
opacity: 0; to { opacity: 1; transform: translateY(0); }
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }