orders

index.js

@@ -43,6 +43,7 @@ function authNoRedirectHandler(req, res, next){
                     req.username = user.username;
                     req.firstname = user.firstname;
                     req.lastname = user.lastname;
+                    req.email = user.email;
                 }
                
                 next(); // Continue to next handler
@@ -70,6 +71,7 @@ function authenticatedHandler(req, res, next){
                 req.username = user.username;
                 req.firstname = user.firstname;
                 req.lastname = user.lastname;
+                req.email = user.email;
                 next(); // Continue to next handler
             });
         }
@@ -106,21 +108,27 @@ app.get("/", authNoRedirectHandler, (req, res) => {
 
 // Account
 app.get("/account", authenticatedHandler, (req, res) => { 
-    let dict = {
+    mysql_handler.con.query(`SELECT orders.id, products.name, order_products.quantity, order_products.price
-        title: "Account",
+    FROM orders LEFT JOIN order_products ON orders.id=order_products.orderId
-        user: req.user,
+    LEFT JOIN products ON order_products.productId=products.id WHERE orders.userId = '${req.user}' ORDER BY orders.id DESC`, (err, result) => {
-        isAdmin: req.isAdmin,
+        if(err) console.log(err);
-        username: req.username,
+        let dict = {
-        firstname: req.firstname,
+            title: "Account",
-        lastname: req.lastname
+            user: req.user,
-    }
+            isAdmin: req.isAdmin,
-    res.render('account', dict)
+            username: req.username,
-
+            firstname: req.firstname,
+            lastname: req.lastname,
+            email: req.email,
+            orders: JSON.parse(JSON.stringify(result))
+        }
+        res.render('account', dict)
+    })
 });
 
 
 // Product Page
-app.get("/product/:productId", (req, res) => {
+app.get("/product/:productId", authNoRedirectHandler, (req, res) => {
     let productId = req.params.productId;
     
     mysql_handler.con.query(`SELECT s.name AS sellerName, p.name AS productName, p.description AS productDescription, p.id AS id, price,quantity, delivery_time, p.categoryId
@@ -145,7 +153,8 @@ app.get("/product/:productId", (req, res) => {
                     productDescription: "ez",
                     loggedIn: true,
                     reviews: reviews,
-                    category: category,                    
+                    category: category, 
+                    user: req.user,                   
                 }
                 res.render('product', dict)
             });
@@ -171,7 +180,7 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
 });
 
 // Search Page
-app.get("/search", (req, res) => {
+app.get("/search", authNoRedirectHandler,(req, res) => {
     var products = [
         {
             title: "Panasonic LUMIX DC-GH5M2ME",
@@ -201,7 +210,8 @@ app.get("/search", (req, res) => {
 
     let dict = {
         title: "Suche",
-        products: products
+        products: products,
+        user: req.user,
     }
 
     mysql_handler.con.query("SELECT * FROM products", function(err, result){
@@ -230,7 +240,8 @@ app.get("/order/:productId/:quantity/", authenticatedHandler, (req, res) => {
             title: "Bestellung",
             error: error,
             product: result,
-            quantity: req.params.quantity
+            quantity: req.params.quantity,
+            user: req.user,     
         }
 
         res.render('order', dict);

static/css/account.css

@@ -2,7 +2,7 @@
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 500px;
+    width: 600px;
     margin-top: 60px;
     margin-bottom: 60px;
     border-bottom: 2px solid rgb(104, 117, 151);;
@@ -22,8 +22,22 @@ h4{
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 500px;
+    width: 600px;
     margin-top: 60px;
     margin-bottom: 60px;
     border-bottom: 2px solid rgb(104, 117, 151);;
 }
+
+#order-info table{
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid rgb(104, 117, 151);
+    text-align: center;
+    border:0;
+}
+
+#order-info table tr{
+    height: 50px;
+    border-bottom: 1px solid grey;
+}

views/account.ejs

@@ -12,10 +12,34 @@
         <p><b>Vorname:</b> <%= firstname %></p>
         <p><b>Nachname:</b> <%= lastname %></p>
         <p><b>Benutzername: </b><%= username %></p>
+        <p><b>E-Mail: </b><%= email.substring(0,email.length/3) %><% for(var i = 0; i < email.length - email.length/4; i++){ %>*<% } %>
+        </p>
     </div>
 
     <div id="order-info">
         <h3>Ihre Bestellungen</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Bestellnummer</th>
+                    <th>Produktname</th>
+                    <th>Anzahl</th>
+                    <th>Stückpreis</th>
+                    <th>Gesamtpreis</th>
+                </tr>
+            </thead>
+            <tbody>
+                <% for(var i = 0; i < orders.length; i++){ %>
+                    <tr>
+                        <td><%= orders[i].id %></td>
+                        <td><%= orders[i].name %></td>
+                        <td><%= orders[i].quantity %></td>
+                        <td><%= orders[i].price %></td>
+                        <td><%= orders[i].price *  orders[i].quantity%> €</td>
+                    </tr>
+                <% } %>
+            </tbody>
+        </table>
     </div>
 </body>
 

views/partials/header.ejs

@@ -1,6 +1,6 @@
 <div class="headerDIV">
-    <div class="headerDIVLogo" style="cursor:pointer"onclick="window.open('/', '_self')">
+    <div class="headerDIVLogo">
-        <img src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
+        <img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
     </div><div class="headerDIVSearch">
         <input placeholder="Suche" class="vertical-center"></input
         ><button class="vertical-center"><i class="material-icons">search</i></button>