diff --git a/package-lock.json b/package-lock.json index d926216..b3c988d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "sniper", + "name": "webshop", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "sniper", + "name": "webshop", "version": "1.0.0", "license": "ISC", "dependencies": { @@ -15,7 +15,9 @@ "express-session": "^1.18.1", "mysql": "^2.18.1", "mysql2": "^3.12.0", - "path": "^0.12.7" + "node": "^22.15.0", + "path": "^0.12.7", + "server.js": "^1.0.0" } }, "node_modules/accepts": { @@ -674,6 +676,28 @@ "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": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", @@ -894,6 +918,12 @@ "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": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", diff --git a/package.json b/package.json index a95f1e3..f34f8f5 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "sniper", + "name": "webshop", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "node server.js" + "start": "npm install && node server.js" }, "keywords": [], "author": "", @@ -12,13 +12,13 @@ "description": "Webshop Autohändler", "dependencies": { "app-root-path": "^3.1.0", - "dotenv": "^16.4.5", - "express": "^4.21.1", "dotenv": "^16.4.7", "express": "^4.21.2", "express-session": "^1.18.1", "mysql": "^2.18.1", "mysql2": "^3.12.0", - "path": "^0.12.7" + "node": "^22.15.0", + "path": "^0.12.7", + "server.js": "^1.0.0" } } diff --git a/public/404.html b/public/404.html index 4b776da..0d4597b 100644 --- a/public/404.html +++ b/public/404.html @@ -1,27 +1,27 @@ - - - Seite nicht gefunden - - - + + + Seite nicht gefunden + + + -
+
-

🚧 Seite nicht gefunden 🚧

-

Diese Seite existiert nicht oder befindet sich noch in Arbeit.

- Zur Startseite +

🚧 Seite nicht gefunden 🚧

+

Diese Seite existiert nicht oder befindet sich noch in Arbeit.

+ Zur Startseite
-
+
\ No newline at end of file diff --git a/public/bestellformular/bestellformular.html b/public/bestellformular/bestellformular.html index 3f353e3..793c685 100644 --- a/public/bestellformular/bestellformular.html +++ b/public/bestellformular/bestellformular.html @@ -1,54 +1,259 @@ - - - Bestellformular - - - + + + Bestellformular + + +
- -
+ +
-
-
-
-

Bestellformular

+
+
+ +

Bestellformular

- - + + - - + + - - + + - - + + - - + + - - + + - - + +
+ + + +
+
- - + + Bestellung absenden + +
+
+ + + +
diff --git a/public/bestellung/bestellung.html b/public/bestellung/bestellung.html new file mode 100644 index 0000000..0827942 --- /dev/null +++ b/public/bestellung/bestellung.html @@ -0,0 +1,104 @@ + + + + + + Ihre Bestellung + + + + + + +
+ +
+

Ihre Bestellung:

+
+ +
+

Kundennummer:

+

Produkt-ID:

+

Produktname:

+

Preis:

+
+
+
+ + + + + + + diff --git a/public/header_footer/footer.html b/public/header_footer/footer.html index 8178fca..4ab756a 100644 --- a/public/header_footer/footer.html +++ b/public/header_footer/footer.html @@ -1,8 +1,8 @@ diff --git a/public/header_footer/header.html b/public/header_footer/header.html index a9ac989..20ec0f6 100644 --- a/public/header_footer/header.html +++ b/public/header_footer/header.html @@ -7,7 +7,7 @@
- + 0 @@ -30,6 +30,5 @@
  • Ăśber uns
  • Kontakt
    • -
  • Bestellformular
    • diff --git a/public/login/login.html b/public/login/login.html index 441ef8f..52d9e7a 100644 --- a/public/login/login.html +++ b/public/login/login.html @@ -10,31 +10,61 @@ Login - -
    + +
    -
    - -
    +
    + +
    - - + + + diff --git a/public/registrieren/passwordValidation.js b/public/registrieren/passwordValidation.js deleted file mode 100644 index e69de29..0000000 diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html index e5dbf8e..e2a34b5 100644 --- a/public/registrieren/registrieren.html +++ b/public/registrieren/registrieren.html @@ -17,45 +17,80 @@
    -
    -
    -

    Registrieren

    +
    + +

    Registrieren

    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    -
    - - -
    +
    + + +
    - + -
    -
    -

    Bereits ein Konto? Login

    -
    - -
    +
    +
    +

    Bereits ein Konto? Login

    +
    + +
    + -
    +
    diff --git a/public/shop/shop.html b/public/shop/shop.html index 9e97320..37ae415 100644 --- a/public/shop/shop.html +++ b/public/shop/shop.html @@ -1,36 +1,39 @@ - - - Shop - - - + + + Shop + + + - -
    + +
    - -
    + +

    Willkommen im Webshop

    -
    +
    -
    +
    - +
    -
    +
    - - - - - + }); + \ No newline at end of file diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html index 2c1af94..a8b105e 100644 --- a/public/shop/shop_lkw.html +++ b/public/shop/shop_lkw.html @@ -1,29 +1,37 @@ - - - Shop - LKW's - - - + + + Shop - LKW's + + + - -
    +
    + +
    - -
    -

    Unsere LKW Produkte

    -
    -
    - -
    + +
    +
    +

    Unsere LKW Produkte

    +
    + +
    + +
    +
    + + + +
    diff --git a/public/shop/shop_motorrad.html b/public/shop/shop_motorrad.html index eacf581..1570ecf 100644 --- a/public/shop/shop_motorrad.html +++ b/public/shop/shop_motorrad.html @@ -9,16 +9,20 @@ - -
    +
    + +
    - -
    -

    Unsere Motorrad Produkte

    -
    -
    - -
    + +
    +
    +

    Unsere Motorrad Produkte

    +
    + +
    + +
    +
    diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html index df7bb22..15f6f1f 100644 --- a/public/shop/shop_oldtimer.html +++ b/public/shop/shop_oldtimer.html @@ -1,24 +1,32 @@ - - - Shop - Oldtimer - - - + + + Shop - Oldtimer + + + - -
    +
    + +
    - -
    -

    Unsere Oldtimer Produkte

    -
    -
    - -
    + +
    +
    +

    Unsere Oldtimer Produkte

    +
    + +
    + +
    +
    + + + +
    - - - - + }) + .catch(err => { + console.error('Fehler beim Laden der Oldtimer_Produkte:', err); + const container = document.getElementById('products_oldtimer'); + container.innerHTML = ` +
    +

    Fehler beim Laden der Produkte

    +

    Es gab ein Problem beim Abrufen der Produktdaten.
    Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    +
    `; + }); + \ No newline at end of file diff --git a/public/shop/shop_sportwagen.html b/public/shop/shop_sportwagen.html index e2ee0ae..97d720c 100644 --- a/public/shop/shop_sportwagen.html +++ b/public/shop/shop_sportwagen.html @@ -13,14 +13,16 @@
    - -
    -

    Unsere Sportwagen Produkte

    -
    + +
    +
    +

    Unsere Sportwagen Produkte

    +
    -
    - -
    +
    + +
    +
    @@ -41,23 +43,23 @@

    ${product.name}

    Preis: ${product.price}€

    ${product.description}

    +

    Artikel Nr: ${product.id}

    `; container.appendChild(card); }); - }) - .catch(err => { - console.error('Fehler beim Laden der Produkte:', err); + }) + .catch(err => { + console.error('Fehler beim Laden der Sportwagen_Produkte:', err); const container = document.getElementById('products_sportwagen'); - container.innerHTML = ` -
    -

    Fehler beim Laden der Produkte

    -

    Es gab ein Problem beim Abrufen der Produktdaten.
    - Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    -
    - `; - }); + container.innerHTML = + `
    +

    Fehler beim Laden der Produkte

    +

    Es gab ein Problem beim Abrufen der Produktdaten.
    + Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.

    +
    `; + }); diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html index d525c15..93f859d 100644 --- a/public/startseite/startseite.html +++ b/public/startseite/startseite.html @@ -95,8 +95,6 @@ -
    - - +
    diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js index d8577e4..3edcb01 100644 --- a/scripts/routes/other/route-index.js +++ b/scripts/routes/other/route-index.js @@ -70,4 +70,8 @@ router.get('/Warenkorb', (req, res) => { router.get('/bestellformular', (req, res) => { res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html')); }) + +router.get('/bestellung', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html')); +}) module.exports = router; \ No newline at end of file diff --git a/server.js b/server.js index 0619c03..59b3e21 100644 --- a/server.js +++ b/server.js @@ -3,7 +3,7 @@ const session = require('express-session'); const router = require('express').Router(); const path = require('path'); -require('dotenv').config({path:'process.env'}); +require('dotenv').config({path: 'process.env'}); const app = express(); const mysql = require('mysql'); @@ -32,7 +32,7 @@ app.use(session({ })); app.use(express.json()); -app.use(express.urlencoded({ extended: true })); +app.use(express.urlencoded({extended: true})); app.use(express.static(path.join(__dirname, '/scripts'))); app.use(express.static(path.join(__dirname, '/static'))); @@ -127,6 +127,161 @@ app.get('/api/products/sportwagen', async (req, res) => { }); }); +app.post('/api/user/registration', (req, res) => { + // SQL-Query fĂĽr Nutzerregistration + const {name, lower_name, email, passwd} = req.body; + const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')" + + // Query abschicken + db.query(sql, [name, lower_name, email, passwd], (err, results) => { + if (err) { + console.error('Fehler beim Schreiben in die Datenbank: ', err); + res.status(500).send('Fehler beim Schreiben in die Datenbank'); + return; + } + res.status(201).json({message: 'Nutzer erfolgreich hinzugefĂĽgt', id: results.insertId}) + }) +}) + +app.post('/api/user/login', (req, res) => { + const {email, password} = req.body + const sql = 'SELECT * FROM user WHERE email = ?' + + db.query(sql, [email], (err, results) => { + if (err) { + console.error('Fehler beim Abrufen des Nutzers: ', err) + return res.status(500).json({message: 'Serverfehler'}) + } + if (results.length === 0) { + return res.status(401).json({message: 'E-Mail nicht gefunden'}) + } + const user = results[0] + + if (user.passwd !== password) { + return res.status(401).json({message: 'Falsches Passwort'}) + } + + req.session.userId = user.id; + req.session.email = user.email; + + res.json({message: 'Login erfolgreich', id: user.id}) + }) +}) + +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) { + return res.status(400).json({ message: 'UngĂĽltige Anfrage: user_id oder Produkte fehlen.' }); + } + + // 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(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.' }); + } + + 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) => { + const { user_id } = req.body; + + const sql = ` + 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 + `; + + db.query(sql, [user_id], (err, results) => { + if (err) { + console.error('Fehler beim Abrufen der Bestellungen: ', err); + return res.status(500).json({ message: 'Fehler beim Abrufen der Bestellungen' }); + } + + if (results.length === 0) { + return res.status(404).json({ message: 'Keine Bestellungen gefunden.' }); + } + + 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'); app.use('/', getIndexRoute); diff --git a/static/Styles/bestellformular/bestellformular.css b/static/Styles/bestellformular/bestellformular.css index a252b41..e19c126 100644 --- a/static/Styles/bestellformular/bestellformular.css +++ b/static/Styles/bestellformular/bestellformular.css @@ -9,7 +9,7 @@ body { } .wrapper { - flex: 1; /* Der Hauptinhalt (Formular) nimmt den verfĂĽgbaren Platz ein */ + flex: 1; /* Der Hauptinhalt nimmt den verfĂĽgbaren Platz ein */ } .form-container { @@ -43,20 +43,22 @@ textarea { box-sizing: border-box; } -input[type="submit"] { +/* NEU: Styling fĂĽr den Absende-Link */ +.button-submit { + display: inline-block; margin-top: 20px; background-color: #ff6600; color: white; - border: none; + text-decoration: none; padding: 12px; border-radius: 5px; font-size: 16px; cursor: pointer; width: 100%; + text-align: center; + box-sizing: border-box; /* Damit Breite + Padding sauber passen */ } -input[type="submit"]:hover { - background-color: #ff5500; /* Ein leicht dunklerer Farbton beim Hover */ +.button-submit:hover { + background-color: #ff6600; } - - diff --git a/static/Styles/bestellung/bestellung.css b/static/Styles/bestellung/bestellung.css new file mode 100644 index 0000000..849719f --- /dev/null +++ b/static/Styles/bestellung/bestellung.css @@ -0,0 +1,49 @@ +/* Allgemeine Layout-Stile */ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + padding: 20px; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Container fĂĽr die Bestellinformationen */ +#bestellung { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin-top: 20px; +} + +/* Titel */ +h2 { + text-align: center; + margin-bottom: 30px; + margin-top: 20px; +} + +/* Karte fĂĽr Bestellinformationen */ +.bestell-info-card { + background-color: #fafafa; + padding: 15px; + border-radius: 8px; + margin-bottom: 15px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* Bestellinformationen formatieren */ +.bestell-info-card p { + font-size: 16px; + margin: 10px 0; +} + +/* Stile fĂĽr die Label und Platzhalter */ +.bestell-info-card span { + font-weight: bold; + color: #333; +} + + diff --git a/static/Styles/login/login.css b/static/Styles/login/login.css index d5072e2..8eae58a 100644 --- a/static/Styles/login/login.css +++ b/static/Styles/login/login.css @@ -9,13 +9,6 @@ margin: 50px auto; /* Zentriert das Formular */ } -.login-title { - font-size: 26px; - font-weight: 600; - margin-bottom: 25px; - color: #333; -} - .login-form .input-group { position: relative; margin-bottom: 20px; diff --git a/static/Styles/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css index ab7b9c0..de4ccbb 100644 --- a/static/Styles/registrieren/registrieren.css +++ b/static/Styles/registrieren/registrieren.css @@ -4,7 +4,7 @@ min-height: 100vh; } -.wrapper { +.register-wrapper { max-width: 400px; width: 100%; padding: 30px; @@ -21,6 +21,7 @@ align-items: center; padding: 40px 20px; } + .registration-container { max-width: 400px; margin: 60px auto; @@ -49,22 +50,6 @@ 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 { text-align: center; font-size: 14px; @@ -81,3 +66,16 @@ 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; +} + diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css index a62ee29..6af9077 100644 --- a/static/Styles/styles-main.css +++ b/static/Styles/styles-main.css @@ -41,7 +41,13 @@ header { .logo-container { display: flex; align-items: center; - gap: 15px; + text-decoration: none; + color: inherit; +} + +.logo-container h1 { + margin-left: 10px; + font-size: 1.8rem; } .logo-img { @@ -283,6 +289,14 @@ main { margin-bottom: 20px; } +.title { + font-size: 26px; + font-weight: 600; + margin-bottom: 25px; + color: #333; + text-align: center; +} + .input-box input { width: 100%; padding: 12px 40px 12px 15px; @@ -377,7 +391,7 @@ h1 { color: #b00020; border: 1px solid #ffcccc; 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; font-family: inherit; animation: fadeIn 0.6s ease-in-out; @@ -395,8 +409,14 @@ h1 { /* Optional: weiche Animation beim Einblenden */ @keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } }