Add in dropdowns for the filter properties

views/dashboardPage/dashboard.css

@@ -474,14 +474,7 @@ Transactions Strand
             width: 100%;
         }
 
-            .filterLabel{
-                display: flex;
-                flex-direction: column;
-                text-align: center;
-                margin: 0;
-            }
-
-            .filterLabel2{
+            .dropdown{
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -489,7 +482,7 @@ Transactions Strand
                 margin: 0;
             }
 
-                .filterLabel2 button{
+                .dropdown button{
                     display: flex;
                     align-items: center;
                     justify-content: center;
@@ -501,16 +494,16 @@ Transactions Strand
                     cursor: pointer;
                 }
 
-                    .filterLabelHead{
+                    .dropdownHead{
                         display: flex;
                     }
 
-                    .filterLabel2 button:hover{
+                    .dropdown button:hover{
                         background: rgb(0, 27, 45);
                         color: white;
                     }
 
-                #transFilCheckboxes{
+                .dropdownContents{
                     text-align: left;
                     position: absolute;
                     top: 25px;
@@ -523,7 +516,7 @@ Transactions Strand
                     white-space: nowrap;
                 }
 
-                    #transFilCheckboxes label{
+                    .dropDownContents label{
                         margin: 0;
                     }
         

views/dashboardPage/dashboard.ejs

@@ -275,21 +275,32 @@
                 <form onsubmit="transactionsStrandObj.submitFilter()" id="transactionFilter">
                     <h2>Search</h2>
                     <div>
-                        <label class="filterLabel">DATES:
-                            <input id="transFilDate1"type="date">
-                            <input id="transFilDate2" type="date">
-                        </label>
-                        <div class="filterLabel2">
-                            <div class="filterLabelHead">
+                        <div class="dropdown">
+                            <div class="dropdownHead">
+                                <p>DATES</p>
+                                <button id="dateFilterBtn">
+                                    <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="dateDropdown">
+                                <input id="transFilDate1"type="date">
+                                <input id="transFilDate2" type="date">
+                            </div>
+                            
+                        </div>
+                        <div class="dropdown">
+                            <div class="dropdownHead">
                                 <p>RECIPES</p>
-                                <button onclick="transactionsStrandObj.toggleRecipes()">
+                                <button id="recipeFilterBtn">
                                     <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 id="transFilCheckboxes"></div>
+                            <div class="dropdownContents" id="recipeDropDown"></div>
                         </div>
                     </div>
 

views/dashboardPage/transactions.js

@@ -4,7 +4,8 @@ window.transactionsStrandObj = {
     display: function(){
         if(!this.isPopulated){
             let transactionsList = document.getElementById("transactionsList");
-            let checkboxes = document.getElementById("transFilCheckboxes");
+            let dateDropdown = document.getElementById("dateDropdown");
+            let recipeDropdown = document.getElementById("recipeDropDown");
             let template = document.getElementById("transaction").content.children[0];
 
             let now = new Date();
@@ -12,24 +13,30 @@ window.transactionsStrandObj = {
             document.getElementById("transFilDate1").valueAsDate = monthAgo;
             document.getElementById("transFilDate2").valueAsDate = now;
 
-            checkboxes.style.display = "none";
-            while(checkboxes.children.length > 0){
-                checkboxes.removeChild(checkboxes.firstChild);
+
+            dateDropdown.style.display = "none";
+            recipeDropdown.style.display = "none";
+
+            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
+            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
+
+            while(recipeDropdown.children.length > 0){
+                recipeDropdown.removeChild(recipeDropdown.firstChild);
             }
 
             for(let i = 0; i < merchant.recipes.length; i++){
                 let checkbox = document.createElement("input");
                 checkbox.type = "checkbox";
                 checkbox.recipe = merchant.recipes[i];
-                checkboxes.appendChild(checkbox);
+                recipeDropdown.appendChild(checkbox);
 
                 let label = document.createElement("label");
                 label.innerText = merchant.recipes[i].name;
                 label.for = checkbox;
-                checkboxes.appendChild(label);
+                recipeDropdown.appendChild(label);
 
                 let brk = document.createElement("br");
-                checkboxes.appendChild(brk);
+                recipeDropdown.appendChild(brk);
             }
 
             while(transactionsList.children.length > 0){
@@ -138,14 +145,17 @@ window.transactionsStrandObj = {
             });
     },
 
-    toggleRecipes: function(){
+    toggleDropdown: function(dropdown){
         event.preventDefault();
+        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+        console.log(polyline);
 
-        let checkboxes = document.getElementById("transFilCheckboxes");
-        if(checkboxes.style.display === "none"){
-            checkboxes.style.display = "block";
+        if(dropdown.style.display === "none"){
+            dropdown.style.display = "block";
+            polyline.setAttribute("points", "18 15 12 9 6 15");
         }else{
-            checkboxes.style.display = "none";
+            dropdown.style.display = "none";
+            polyline.setAttribute("points", "6 9 12 15 18 9");
         }
     }
 }