Search page functionality

index.js

@@ -176,7 +176,6 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
     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) => {
         if(err) throw err;
@@ -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,  
     }
 
-    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="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]; %>
+            <% for(var i=0; i < products.length; i++) {
-
+                var prod = products[i];
-            <div class="productDIV">
+                if (!prod.img) { prod.img = "/images/examples.jpg"; } 
-                <h4><%=prod.name %></h4>
+                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.src %>">
+                        <img src="<%=prod.img %>">
                     </div>
-                <div class="productInfo"><%=prod.desc %></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;