Add filter to orders strand and touch up the style

views/dashboardPage/dashboard.css

@@ -449,6 +449,25 @@ Orders Strand
         overflow-y: auto;
     }
 
+    .filterForm{
+        padding: 5px;
+        margin: 0;
+        align-items: center;
+        max-height: 150px;
+    }
+
+        .filterForm > div{
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+        .filterForm input[type=submit]{
+            max-height: 30px;
+            padding: 0;
+            font-size: 15px;
+        }
+
 /*
 Transactions Strand
 */
@@ -521,12 +540,6 @@ Transactions Strand
                     .dropDownContents label{
                         margin: 0;
                     }
-        
-            #transactionFilter input[type=submit]{
-                max-height: 30px;
-                padding: 0;
-                font-size: 15px;
-            }
 
 @media screen and (max-width: 1000px){
     body{

views/dashboardPage/dashboard.ejs

@@ -253,6 +253,46 @@
                     <button class="button mobileHide" onclick="newOrderComp.display()">NEW</button>
                 </div>
 
+                <form onsubmit="ordersStrandObj.submitFilter()" class="filterForm">
+                    <h2>Search</h2>
+                    <div>
+                        <div class="dropdown">
+                            <div class="dropdownHead">
+                                <p>DATES</p>
+                                <button id="dateFilterBtnOrder">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="6 9 12 15 18 9"></polyline>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="dropdownContents" id="dateDropdownOrder">
+                                <label>From:
+                                    <input id="orderFilDate1"type="date">
+                                </label>
+                                
+                                <label>To:
+                                    <input id="orderFilDate2" type="date">
+                                </label>
+                            </div>
+                            
+                        </div>
+                        <div class="dropdown">
+                            <div class="dropdownHead">
+                                <p>RECIPES</p>
+                                <button id="ingredientFilterBtn">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="6 9 12 15 18 9"></polyline>
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <div class="dropdownContents" id="ingredientDropdown"></div>
+                        </div>
+                    </div>
+
+                    <input class="button" type="submit" value="SUBMIT">
+                </form>
+
                 <div id="orderList"></div>
 
                 <template id="order">
@@ -272,7 +312,7 @@
                     <button class="button mobileHide" onclick="newTransactionComp.display()">NEW</button>
                 </div>
 
-                <form onsubmit="transactionsStrandObj.submitFilter()" id="transactionFilter">
+                <form onsubmit="transactionsStrandObj.submitFilter()" class="filterForm">
                     <h2>Search</h2>
                     <div>
                         <div class="dropdown">

views/dashboardPage/orders.js

@@ -3,8 +3,6 @@ window.ordersStrandObj = {
 
     display: async function(){
         if(!this.isFetched){
-            window.orders = [];
-
             let loader = document.getElementById("loaderContainer");
             loader.style.display = "flex";
 
@@ -44,8 +42,31 @@ window.ordersStrandObj = {
     },
 
     populate: function(){
-        let listDiv = document.querySelector("#orderList");
-        let template = document.querySelector("#order").content.children[0];
+        let listDiv = document.getElementById("orderList");
+        let template = document.getElementById("order").content.children[0];
+        let dateDropdown = document.getElementById("dateDropdownOrder");
+        let ingredientDropdown = document.getElementById("ingredientDropdown");
+
+        dateDropdown.style.display = "none";
+        ingredientDropdown.style.display = "none";
+
+        document.getElementById("dateFilterBtnOrder").onclick = ()=>{this.toggleDropdown(dateDropdown)};
+        document.getElementById("ingredientFilterBtn").onclick = ()=>{this.toggleDropdown(ingredientDropdown)};
+
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.ingredient = merchant.ingredients[i];
+            ingredientDropdown.appendChild(checkbox);
+
+            let label = document.createElement("label");
+            label.innerText = merchant.ingredients[i].name;
+            label.for = checkbox;
+            ingredientDropdown.appendChild(label);
+
+            let brk = document.createElement("br");
+            ingredientDropdown.appendChild(brk);
+        }
 
         while(listDiv.children.length > 0){
             listDiv.removeChild(listDiv.firstChild);
@@ -56,7 +77,6 @@ window.ordersStrandObj = {
             let totalCost = 0;
             
             for(let j = 0; j < merchant.orders[i].ingredients.length; j++){
-                
                 totalCost += merchant.orders[i].ingredients[j].quantity * merchant.orders[i].ingredients[j].price;
             }
 
@@ -67,8 +87,26 @@ window.ordersStrandObj = {
             row.order = merchant.orders[i];
             row.onclick = ()=>{orderDetailsComp.display(merchant.orders[i])};
 
-            window.orders.push(row);
             listDiv.appendChild(row);
         }
+    },
+
+    submitFilter: function(){
+        event.preventDefault();
+
+        console.log("something");
+    },
+
+    toggleDropdown: function(dropdown){
+        event.preventDefault();
+        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+
+        if(dropdown.style.display === "none"){
+            dropdown.style.display = "block";
+            polyline.setAttribute("points", "18 15 12 9 6 15");
+        }else{
+            dropdown.style.display = "none";
+            polyline.setAttribute("points", "6 9 12 15 18 9");
+        }
     }
 }