Search page functionality

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;