Add some basic element and submitting to transactions page for filtering

views/dashboardPage/dashboard.ejs

@@ -272,6 +272,14 @@
                     <button class="button mobileHide" onclick="newTransactionComp.display()">NEW</button>
                 </div>
 
+                <form onsubmit="transactionsStrandObj.submitFilter()" id="transactionFilter">
+                    <input id="transFilDate1"type="date">
+                    <input id="transFilDate2" type="date">
+                    <input id="transFilRecipes" type="text" list="transFilRecData"></input>
+                    <datalist id="transFilRecData"></datalist>
+                    <input class="button" type="submit" value="Submit">
+                </form>
+
                 <div id="transactionsList" class="transactionsList"></div>
 
                 <template id="transaction">
@@ -287,21 +295,13 @@
 
         <div id="sidebarDiv" class="sidebarHide">
             <% include ./sidebars/addIngredients %>
-
             <% include ./sidebars/newIngredient %>
-
             <% include ./sidebars/ingredientDetails %>
-
             <% include ./sidebars/recipeDetails %>
-
             <% include ./sidebars/addRecipe %>
-
             <% include ./sidebars/orderDetails %>
-
             <% include ./sidebars/newOrder %>
-
             <% include ./sidebars/transactionDetails %>
-
             <% include ./sidebars/newTransaction %>
         </div>
 

views/dashboardPage/transactions.js

@@ -6,6 +6,18 @@ window.transactionsStrandObj = {
             let transactionsList = document.getElementById("transactionsList");
             let template = document.getElementById("transaction").content.children[0];
 
+            let now = new Date();
+            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
+            document.getElementById("transFilDate1").valueAsDate = monthAgo;
+            document.getElementById("transFilDate2").valueAsDate = now;
+            
+            let dataList = document.getElementById("transFilRecData");
+            for(let i = 0; i < merchant.recipes.length; i++){
+                let option = document.createElement("option");
+                option.innerText = merchant.recipes[i].name;
+                dataList.appendChild(option);
+            }
+
             while(transactionsList.children.length > 0){
                 transactionsList.removeChild(transactionsList.firstChild);
             }
@@ -35,5 +47,17 @@ window.transactionsStrandObj = {
 
             this.isPopulated = true;
         }
+    },
+
+    submitFilter: function(){
+        event.preventDefault();
+
+        let data = {
+            startDate: document.getElementById("transFilDate1").valueAsDate,
+            endDate: document.getElementById("transFilDate2").valueAsDate,
+            recipes: document.getElementById("transFilRecipes").value.split(", ")
+        }
+
+        
     }
 }