Search page functionality

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) => {
+app.get("/search/:query",authNoRedirectHandler,(req, res) => {
-    var products = [
+    let query = req.params.query;
-        {
-            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.",
-        },
-    ]
-
     let dict = {
         title: "Suche",
-        products: products,
+        search: query,
-        user: req.user,
+        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) => {

views/search.ejs

@@ -8,45 +8,100 @@
        <%- include('partials/header'); %>
     </header>
 
-    <div class="allProductsDIV">
+    <div class="filtersDIV">
-        <% for(var i=0; i < products.length; i++) { var prod = products[i]; %>
+        <br/>
-
+        <h3 style="text-align: center;"> FILTER COMMING SOON </h3>
-            <div class="productDIV">
-                <h4><%=prod.name %></h4>
-                <div class="productImage">
-                    <img src="<%= prod.src %>">
-                </div>
-                <div class="productInfo"><%=prod.desc %></div>
-            </div>
-
-        <% } %>
     </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;