From 8edc8548777210f3713c961c6c38209b32af00af Mon Sep 17 00:00:00 2001
From: Ben PC <Benn20002@gmail.com>
Date: Wed, 30 Mar 2022 14:28:07 +0200
Subject: [PATCH] Filters & Merge

---
 index.js         | 36 +++++++++++++++++++++++++---
 mysql_handler.js |  4 ++--
 views/search.ejs | 62 +++++++++++++++++++++++++++++++++---------------
 3 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/index.js b/index.js
index 21938af..42bf073 100644
--- a/index.js
+++ b/index.js
@@ -210,15 +210,45 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
 });
 
 // Search Page
-app.get("/search/:query",authNoRedirectHandler,(req, res) => {
+app.get("/search/:query/",authNoRedirectHandler,(req, res) => {
     let query = req.params.query;
     let dict = {
         title: "Suche",
         search: query,
-        user: req.user,  
+        user: req.user, 
+        sort: req.query.sort ? req.query.sort : 0,
+        Cat: req.query.cat ? req.query.cat : 0
     }
 
-    mysql_handler.con.query("SELECT *, (SELECT url FROM product_images i WHERE i.product_id = p.id LIMIT 1) as img, (SELECT AVG(rating) FROM reviews r WHERE r.productId = p.id) as rating FROM products p WHERE name LIKE ?;",["%"+query+"%"],function(err, result){
+    mysql_handler.con.query("SELECT * FROM categories;",function(err, result) {
+        if(err) throw err;
+
+        dict.categories = JSON.parse(JSON.stringify(result));
+    });
+
+    var catQuery = "";
+    var cat = req.query.cat;
+    if (typeof cat !== 'undefined' && cat != 0) {
+        catQuery = " AND categoryId = "+cat;
+    }
+
+    var sortQuery = "";
+    var sort = req.query.sort;
+    if (typeof sort !== 'undefined') {
+        if (sort == 1) {
+            sortQuery = " ORDER BY price ASC";
+        } else if (sort == 2) {
+            sortQuery = " ORDER BY price DESC";
+        } else if (sort == 3) {
+            sortQuery = " ORDER BY (SELECT SUM(quantity) FROM order_products o WHERE o.productId = p.id) DESC";
+        } else if (sort == 4) {
+            sortQuery = " ORDER BY name ASC";
+        } else if (sort == 5) {
+            sortQuery = " ORDER BY name DESC";
+        }
+    }
+    
+    mysql_handler.con.query("SELECT *, (SELECT url FROM product_images i WHERE i.product_id = p.id LIMIT 1) as img, (SELECT AVG(rating) FROM reviews r WHERE r.productId = p.id) as rating FROM products p WHERE name LIKE ? "+catQuery+" "+sortQuery+";",["%"+query+"%"],function(err, result){
         if(err) throw err;
 
         dict.products = JSON.parse(JSON.stringify(result));
diff --git a/mysql_handler.js b/mysql_handler.js
index 1063cd6..c7cdcb9 100644
--- a/mysql_handler.js
+++ b/mysql_handler.js
@@ -12,8 +12,8 @@ con.query("SELECT * FROM users", function(err, result){
 
 let con = mysql.createConnection({ // TODO: change to config file
     host: "localhost",
-    user: "onlineshop",
-    password: "TestUser321", // TODO: DO NOT STORE PASSWORDS IN THE CODE
+    user: "root",
+    password: "", // TODO: DO NOT STORE PASSWORDS IN THE CODE
     database: "onlineshop"
 });
 
diff --git a/views/search.ejs b/views/search.ejs
index 344a7c8..0ebe8c7 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -7,9 +7,23 @@
     <header>
        <%- include('partials/header'); %>
     </header>
-    <div class="filtersDIV" style="display:none">
-        <br/>
-        <h3 style="text-align: center; "> FILTER COMMING SOON </h3>
+
+    <div class="filtersDIV">
+        <select id="cat-select" class="left" onchange="updateFilters();">
+            <option value="0">Kategorie: Alle</option>
+            <% for(var i=0; i < categories.length; i++) { var cat = categories[i]; %>
+                <option <%=Cat == cat.id ? "selected" : ""%> value="<%=cat.id%>">Kategorie: <%=cat.name %></option>
+            <% } console.log(sort) %>
+        </select>
+
+        <select id="sort-select" class="right" onchange="updateFilters();">
+            <option <%=sort == 0 ? "selected" : ""%> value="0">Sortierung: Standart</option>
+            <option <%=sort == 1 ? "selected" : ""%> value="1">Sortierung: Preis aufsteigend</option>
+            <option <%=sort == 2 ? "selected" : ""%> value="2">Sortierung: Preis absteigend</option>
+            <option <%=sort == 3 ? "selected" : ""%> value="3">Sortierung: Meistverkauft</option>
+            <option <%=sort == 4 ? "selected" : ""%> value="4">Sortierung: A-Z</option>
+            <option <%=sort == 5 ? "selected" : ""%> value="5">Sortierung: Z-A</option>
+        </select>
     </div>
         
     <% if (products.length == 0) { %>
@@ -69,22 +83,23 @@
 </html>
 
 <script type="text/javascript">
+    var cat = document.getElementById("cat-select");
+    var sort = document.getElementById("sort-select");
+    function updateFilters() {
+        window.open('/search/<%=search %>/?cat='+cat.value+'&sort='+sort.value,'_self')
+    }
+
     function openProduct(id, newWindow) {
         window.open('/product/'+id, newWindow ? '_blank' : '_self')
     }
 </script>
 
 <style type="text/css">
-    html,body{
-    height: 100% !important;
-    display: block !important;
-    min-height: 100vh;
-    flex-direction:unset !important;
-    }
-
-    a, a:hover, a:focus, a:active > .allProductsDIV {
-        text-decoration: none;
-        color: inherit;
+    html, body{
+        height: 100% !important;
+        display: block !important;
+        min-height: 100vh;
+        flex-direction:unset !important;
     }
 
     /* SEARCH INFO */
@@ -129,7 +144,7 @@
         right: 0;
         bottom: 0;
     }
-    .productDIV > .productImage {
+    .productImage {
         width: calc(50% - 15px);
         height: calc(100% - 120px);
         position: absolute;
@@ -142,7 +157,7 @@
     }
 
     /* DESCRIPTION */
-    .productDIV > .productInfo {
+    .productInfo {
         width: calc(50% - 15px);
         height: calc(100% - 60px);
         position: absolute;
@@ -153,7 +168,7 @@
     }
 
     /* PRICE ETC */
-    .productDIV > .productData {
+    .productData {
         width: calc(100% - 20px);
         height: 90px;
         position: absolute;
@@ -164,16 +179,25 @@
         margin: 0px;
         color: LightSlateGray;
     }
-
+    a, a:hover, a:focus, a:active > .allProductsDIV {
+        text-decoration: none;
+        color: inherit;
+    }
 
     /* FILTERS */
     .filtersDIV {
+        margin-top: 20px;
         position: relative;
         left: calc(10% + 10px);
         width: calc(80% - 20px);
-        height: 100px;
-        background-color: grey;
+        height: 30px;
     } 
+    .filtersDIV > .right {
+        float: right;
+    }
+    .filtersDIV > .left{
+        float: left;
+    }
 
     /* PRODUCTS GRID */
     .allProductsDIV {