From 0e9c692b7d74373269cc477a5869268f16e9a68d Mon Sep 17 00:00:00 2001
From: Ben PC <Benn20002@gmail.com>
Date: Wed, 30 Mar 2022 09:18:03 +0200
Subject: [PATCH] Search page functionality

---
 index.js         | 40 ++++----------------
 views/search.ejs | 96 +++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 86 insertions(+), 50 deletions(-)

diff --git a/index.js b/index.js
index b89f1f3..af10899 100644
--- a/index.js
+++ b/index.js
@@ -175,7 +175,6 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
     let rating = req.body.rating;
     let title = req.body.title;
     let content = req.body.content;
-    
 
     mysql_handler.con.query(`INSERT INTO reviews(title, content, rating, userId, productId)
      VALUES('${title}', '${content}', '${rating}', (SELECT id FROM users WHERE id = ${req.user}), (SELECT id FROM products WHERE id = ${productId}))`, (err, result) => {
@@ -186,48 +185,23 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
 });
 
 // Search Page
-app.get("/search", authNoRedirectHandler,(req, res) => {
-    var products = [
-        {
-            title: "Panasonic LUMIX DC-GH5M2ME",
-            price: 1699.99,
-            img: "https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg",
-            desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
-        },
-        {
-            title: "Sony α 7 IV",
-            price: 2999.00,
-            img: "https://m.media-amazon.com/images/I/819+EOCsREL._AC_SL1500_.jpg",
-            desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
-        },
-        {
-            title: "Canon PowerShot G3 X",
-            price: 876.34,
-            img: "https://m.media-amazon.com/images/I/91bODLikNBL._AC_SL1500_.jpg",
-            desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
-        },
-        {
-            title: "Canon PowerShot SX710",
-            price: 495.00,
-            img: "https://m.media-amazon.com/images/I/91w6iw3JtiL._AC_SL1500_.jpg",
-            desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
-        },
-    ]
-
+app.get("/search/:query",authNoRedirectHandler,(req, res) => {
+    let query = req.params.query;
     let dict = {
         title: "Suche",
-        products: products,
-        user: req.user,
+        search: query,
+        user: req.user,  
     }
 
-    mysql_handler.con.query("SELECT * FROM products", function(err, result){
+    mysql_handler.con.query("SELECT *, (SELECT url FROM product_images i WHERE i.product_id = p.id LIMIT 1) as img FROM products p WHERE name LIKE ?;",["%"+query+"%"],function(err, result){
         if(err) throw err;
 
         dict.products = JSON.parse(JSON.stringify(result));
         
         res.render('search', dict)
     });
-});
+})
+
 
 // Order Page
 app.get("/order/:productId/:quantity/", authenticatedHandler, (req, res) => {
diff --git a/views/search.ejs b/views/search.ejs
index 6dc5798..4ccaaca 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -8,45 +8,100 @@
        <%- include('partials/header'); %>
     </header>
 
-    <div class="allProductsDIV">
-        <% for(var i=0; i < products.length; i++) { var prod = products[i]; %>
-
-            <div class="productDIV">
-                <h4><%=prod.name %></h4>
-                <div class="productImage">
-                    <img src="<%= prod.src %>">
-                </div>
-                <div class="productInfo"><%=prod.desc %></div>
-            </div>
-
-        <% } %>
+    <div class="filtersDIV">
+        <br/>
+        <h3 style="text-align: center;"> FILTER COMMING SOON </h3>
     </div>
+        
+    <% if (products.length == 0) { %>
+        <h2 class="noProductsH">Keine Produkte gefunden</h2>
+    <% } else { %>
+        <div class="productsResInfDIV">
+            <h2 class="productsResInfH">Suchergebnisse</h2>
+        </div>
+
+        <div class="allProductsDIV">
+            <% for(var i=0; i < products.length; i++) {
+                var prod = products[i];
+                if (!prod.img) { prod.img = "/images/examples.jpg"; } 
+                prod.rating = Math.round(Math.random()*10); %>
+                <div class="productDIV" onClick="openProduct(<%=prod.id %>)">
+                    <div class="productData">
+                        <h4 style="color: Navy;"><%=prod.name %></h4>
+                        <h4><%=prod.price %>€</h4>
+                        <h4><%
+                            for (var i2=0; i2 < prod.rating; i2 = i2 + 2) { 
+                                %>★<% 
+                            }
+                            if (prod.rating%2 == 1) {
+                                %>☆<%
+                            }
+                        %></h4>
+                        <h4><%=prod.quantity %> auf Lager</h4>
+                    </div>
+                    <div class="productImage">
+                        <img src="<%=prod.img %>">
+                    </div>
+                    <div class="productInfo"><%=prod.description %></div>
+                </div>
+            <% } %>
+    </div>
+    <% } %>
 </body>
 </html>
 
+<script type="text/javascript">
+    function openProduct(id, newWindow) {
+        window.open('/product/'+id, newWindow ? '_blank' : '_self')
+    }
+
+</script>
+
 <style type="text/css">
-    .productDIV > img {
+    .productsResInfDIV {
+        position: relative;
+        left: calc(10% + 10px);
+        width: calc(80% - 20px);
+        margin-top: 10px;
+    }
+
+    .noProductsH {
+        text-align: center;
+    }
+
+    .productImage > img {
         position: absolute;
+        max-width: 100%;
+        max-height: 100%;
         margin: auto;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
     }
+    .productDIV > .productData {
+        width: calc(100% - 20px);
+        height: 90px;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+    }
+    .productData > h4 {
+        margin: 0px;
+        color: LightSlateGray;
+    }
     .productDIV > .productImage {
         width: calc(50% - 15px);
         height: calc(100% - 120px);
         position: absolute;
-        background-color: red;
         left: 10px;
         bottom: 10px;
     }
     .productDIV > .productInfo {
         width: calc(50% - 15px);
-        height: calc(100% - 120px);
+        height: calc(100% - 60px);
         position: absolute;
         overflow-y: hidden;
-        background-color: blue;
         right: 10px;
         bottom: 10px;
     }
@@ -67,9 +122,16 @@
         position: relative;
 
         height: 250px;
+        cursor: pointer;
     } 
 
-
+    .filtersDIV {
+        position: relative;
+        left: calc(10% + 10px);
+        width: calc(80% - 20px);
+        height: 100px;
+        background-color: grey;
+    } 
 
     .allProductsDIV {
         font-size: 0;