Merge branch 'main' of https://github.com/DerTyp187/onlineshop

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));

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",
+    user: "root",
-    password: "TestUser321", // TODO: DO NOT STORE PASSWORDS IN THE CODE
+    password: "", // TODO: DO NOT STORE PASSWORDS IN THE CODE
     database: "onlineshop"
 });
 

views/index.ejs

@@ -79,7 +79,7 @@
 				</div>
 				<div class="grid-item">
 					<% let randomNr2=Math.floor(Math.random() * products.length); %>
-					<p><%= products[randomNr].name %></p>
+					<p><%= products[randomNr2].name %></p>
 					<img src="/productImage/<%= products[randomNr2].id %>"
 					style='height: 100%; width: 100%; object-fit: contain'
 					onclick="window.open('/product/<%- products[randomNr2].id%>','_self')">
@@ -87,7 +87,7 @@
 				</div>
 				<div class="grid-item">
 					<% let randomNr3=Math.floor(Math.random() * products.length); %>
-					<p><%= products[randomNr].name %></p>
+					<p><%= products[randomNr3].name %></p>
 					<img src="/productImage/<%= products[randomNr3].id %>"
 					style='height: 100%; width: 100%; object-fit: contain'
 					onclick="window.open('/product/<%- products[randomNr3].id%>','_self')">
@@ -95,7 +95,7 @@
 				</div>
 				<div class="grid-item">
 					<% let randomNr4=Math.floor(Math.random() * products.length); %>
-					<p><%= products[randomNr].name %></p>
+					<p><%= products[randomNr4].name %></p>
 					<img src="/productImage/<%= products[randomNr4].id %>"
 					style='height: 100%; width: 100%; object-fit: contain'
 					onclick="window.open('/product/<%- products[randomNr4].id%>','_self')">
@@ -103,7 +103,7 @@
 				</div>
 				<div class="grid-item">
 					<% let randomNr5=Math.floor(Math.random() * products.length); %>
-					<p><%= products[randomNr].name %></p>
+					<p><%= products[randomNr5].name %></p>
 					<img src="/productImage/<%= products[randomNr5].id %>"
 					style='height: 100%; width: 100%; object-fit: contain'
 					onclick="window.open('/product/<%- products[randomNr5].id%>','_self')">

views/search.ejs

@@ -7,9 +7,23 @@
     <header>
        <%- include('partials/header'); %>
     </header>
-    <div class="filtersDIV" style="display:none">
+
-        <br/>
+    <div class="filtersDIV">
-        <h3 style="text-align: center; "> FILTER COMMING SOON </h3>
+        <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{
+    html, body{
-    height: 100% !important;
+        height: 100% !important;
-    display: block !important;
+        display: block !important;
-    min-height: 100vh;
+        min-height: 100vh;
-    flex-direction:unset !important;
+        flex-direction:unset !important;
-    }
-
-    a, a:hover, a:focus, a:active > .allProductsDIV {
-        text-decoration: none;
-        color: inherit;
     }
 
     /* 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;
+        height: 30px;
-        background-color: grey;
     } 
+    .filtersDIV > .right {
+        float: right;
+    }
+    .filtersDIV > .left{
+        float: left;
+    }
 
     /* PRODUCTS GRID */
     .allProductsDIV {