Populate the recipes within transaction filter.

Fix a few small style issues.

views/dashboardPage/bundle.js

@@ -3635,6 +3635,43 @@ module.exports = transactionDetails;
 },{}],23:[function(require,module,exports){
 let transactionFilter = {
     display: function(){
+        //Set default dates
+        let today = new Date();
+        let monthAgo = new Date(today);
+        monthAgo.setMonth(today.getMonth() - 1);
+
+        document.getElementById("transFilterDateStart").valueAsDate = monthAgo;
+        document.getElementById("transFilterDateEnd").valueAsDate = today;
+
+        //populate recipes
+        let recipeList = document.getElementById("transFilterRecipeList");
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipe = document.createElement("div");
+            recipe.innerText = merchant.recipes[i].name;
+            recipe.recipe = merchant.recipes[i];
+            recipe.classList.add("choosable");
+            recipe.onclick = ()=>{this.toggleActive(recipe)};
+            recipeList.appendChild(recipe);
+        }
+
+        //Submit button
+        document.getElementById("transFilterSubmit").onclick = ()=>{this.submit()};
+    },
+
+    toggleActive: function(element){
+        if(element.classList.contains("active")){
+            element.classList.remove("active");
+        }else{
+            element.classList.add("active");
+        }
+    },
+
+    submit: function(){
         
     }
 }

views/dashboardPage/js/transactionFilter.js

@@ -1,5 +1,42 @@
 let transactionFilter = {
     display: function(){
+        //Set default dates
+        let today = new Date();
+        let monthAgo = new Date(today);
+        monthAgo.setMonth(today.getMonth() - 1);
+
+        document.getElementById("transFilterDateStart").valueAsDate = monthAgo;
+        document.getElementById("transFilterDateEnd").valueAsDate = today;
+
+        //populate recipes
+        let recipeList = document.getElementById("transFilterRecipeList");
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipe = document.createElement("div");
+            recipe.innerText = merchant.recipes[i].name;
+            recipe.recipe = merchant.recipes[i];
+            recipe.classList.add("choosable");
+            recipe.onclick = ()=>{this.toggleActive(recipe)};
+            recipeList.appendChild(recipe);
+        }
+
+        //Submit button
+        document.getElementById("transFilterSubmit").onclick = ()=>{this.submit()};
+    },
+
+    toggleActive: function(element){
+        if(element.classList.contains("active")){
+            element.classList.remove("active");
+        }else{
+            element.classList.add("active");
+        }
+    },
+
+    submit: function(){
         
     }
 }

views/dashboardPage/sidebars/sidebars.css

@@ -580,6 +580,12 @@ ORDER FILTER
         width: 100%;
     }
 
+    #orderFilterIngredients{
+        width: 100%;
+        max-height: 50%;
+        overflow-y: auto;
+    }
+
 /*
 TRANSACTION DETAILS
 */
@@ -609,6 +615,12 @@ TRANSACTION FILTER
     width: 100%;
 }
 
+    #transFilterRecipeList{
+        width: 100%;
+        max-height: 50%;
+        overflow-y: auto;
+    }
+
 /*
 NEW TRANSACTION
 */