Merge branch 'smallRefactors' into development

controllers/merchantData.js

@@ -63,9 +63,10 @@ module.exports = {
     Redirects to /dashboard
     */
     createMerchantClover: async function(req, res){
+        let merchant = {}
         axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${req.session.merchantId}?access_token=${req.session.accessToken}`)
             .then((response)=>{
-                let merchant = new Merchant({
+                merchant = new Merchant({
                     name: response.data.name,
                     pos: "clover",
                     posId: req.session.merchantId,
@@ -76,50 +77,35 @@ module.exports = {
                     recipes: []
                 });
 
-                axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${req.session.merchantId}/items?access_token=${req.session.accessToken}`)
-                    .then((response)=>{
-                        let recipes = [];
-                        for(let i = 0; i < response.data.elements.length; i++){
-                            let recipe = new Recipe({
-                                posId: response.data.elements[i].id,
-                                merchant: merchant,
-                                name: response.data.elements[i].name,
-                                price: response.data.elements[i].price,
-                                ingredients: []
-                            });
-
-                            recipes.push(recipe);
-                            merchant.recipes.push(recipe);                                
-                        }
-
-                        Recipe.create(recipes)
-                            .catch((err)=>{
-                                req.session.error = "ERROR: UNABLE TO CREATE YOUR RECIPES FROM CLOVER."
-                            })
-
-                        merchant.save()
-                            .then((newMerchant)=>{
-                                req.session.accessToken = undefined;
-                                req.session.user = newMerchant._id;
+                return axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${req.session.merchantId}/items?access_token=${req.session.accessToken}`);
+            })
+            .then((response)=>{
+                let recipes = [];
+                for(let i = 0; i < response.data.elements.length; i++){
+                    let recipe = new Recipe({
+                        posId: response.data.elements[i].id,
+                        merchant: merchant,
+                        name: response.data.elements[i].name,
+                        price: response.data.elements[i].price,
+                        ingredients: []
+                    });
+
+                    recipes.push(recipe);
+                    merchant.recipes.push(recipe);                                
+                }
 
-                                return res.redirect("/dashboard");
-                            })
-                            .catch((err)=>{
-                                req.session.error = "ERROR: UNABLE TO SAVE DATA FROM CLOVER";
+                Recipe.create(recipes).catch((err)=>{});
 
-                                return res.redirect("/");
-                            });
-                    })
-                    .catch((err)=>{
-                        req.session.error = "ERROR: UNABLE TO RETRIEVE DATA FROM CLOVER";
-                        return res.redirect("/");
-                    })
+                return merchant.save();
+            })
+            .then((newMerchant)=>{
+                req.session.accessToken = undefined;
+                req.session.user = newMerchant._id;
 
-                
+                return res.redirect("/dashboard");
             })
             .catch((err)=>{
                 req.session.error = "ERROR: UNABLE TO RETRIEVE DATA FROM CLOVER";
-
                 return res.redirect("/");
             });
     },

controllers/otherData.js

@@ -71,32 +71,31 @@ module.exports = {
             }
         }
 
+        let response = {}
         axios.get(`${process.env.CLOVER_ADDRESS}/oauth/token?client_id=${process.env.SUBLINE_CLOVER_APPID}&client_secret=${process.env.SUBLINE_CLOVER_APPSECRET}&code=${authorizationCode}`)
-            .then((response)=>{
-                Merchant.findOne({posId: merchantId})
-                    .then((merchant)=>{
-                        if(merchant){
-                            merchant.posAccessToken = response.data.access_token;
-
-                            merchant.save()
-                                .then((updatedMerchant)=>{
-                                    req.session.user = updatedMerchant._id;
-                                    return res.redirect("/dashboard");
-                                })
-                                .catch((err)=>{
-                                    req.session.error("Error: unable to save critical data.  Try again.");
-                                    return res.redirect("/")
-                                });
-                        }else{
-                            req.session.merchantId = merchantId;
-                            req.session.accessToken = response.data.access_token;
-                            return res.redirect("/merchant/create/clover");
-                        }
-                    })
-                    .catch((err)=>{
-                        req.session.error = "ERROR: WE MADE AN OOPSIES";
-                    });
+            .then((data)=>{
+                response = data;
                 
+                return Merchant.findOne({posId: merchantId});
+            })
+            .then((merchant)=>{
+                if(merchant){
+                    merchant.posAccessToken = response.data.access_token;
+
+                    merchant.save()
+                        .then((updatedMerchant)=>{
+                            req.session.user = updatedMerchant._id;
+                            return res.redirect("/dashboard");
+                        })
+                        .catch((err)=>{
+                            req.session.error("ERROR: UNABLE TO CREATE MERCHANT");
+                            return res.redirect("/")
+                        });
+                }else{
+                    req.session.merchantId = merchantId;
+                    req.session.accessToken = response.data.access_token;
+                    return res.redirect("/merchant/create/clover");
+                }
             })
             .catch((err)=>{
                 req.session.error = "ERROR: UNABLE TO RETRIEVE DATA FROM CLOVER";

controllers/recipeData.js

@@ -153,69 +153,56 @@ module.exports = {
             return res.redirect("/");
         }
 
+        let merchant = {};
+        let newRecipes = [];
+        let deletedRecipes = []
         Merchant.findOne({_id: req.session.user})
             .populate("recipes")
-            .then((merchant)=>{
-                axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchant.posId}/items?access_token=${merchant.posAccessToken}`)
-                    .then((result)=>{
-                        let deletedRecipes = merchant.recipes.slice();
-                        for(let i = 0; i < result.data.elements.length; i++){
-                            for(let j = 0; j < deletedRecipes.length; j++){
-                                if(result.data.elements[i].id === deletedRecipes[j].posId){
-                                    result.data.elements.splice(i, 1);
-                                    deletedRecipes.splice(j, 1);
-                                    i--;
-                                    break;
-                                }
-                            }
+            .then((response)=>{
+                merchant = response;
+                return axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchant.posId}/items?access_token=${merchant.posAccessToken}`);
+            })
+            .then((result)=>{
+                deletedRecipes = merchant.recipes.slice();
+                for(let i = 0; i < result.data.elements.length; i++){
+                    for(let j = 0; j < deletedRecipes.length; j++){
+                        if(result.data.elements[i].id === deletedRecipes[j].posId){
+                            result.data.elements.splice(i, 1);
+                            deletedRecipes.splice(j, 1);
+                            i--;
+                            break;
                         }
+                    }
+                }
 
-                        for(let i = 0; i < deletedRecipes.length; i++){
-                            for(let j = 0; j < merchant.recipes.length; j++){
-                                if(deletedRecipes[i]._id === merchant.recipes[j]._id){
-                                    merchant.recipes.splice(j, 1);
-                                    break;
-                                }
-                            }
+                for(let i = 0; i < deletedRecipes.length; i++){
+                    for(let j = 0; j < merchant.recipes.length; j++){
+                        if(deletedRecipes[i]._id === merchant.recipes[j]._id){
+                            merchant.recipes.splice(j, 1);
+                            break;
                         }
+                    }
+                }
 
-                        let newRecipes = []
-                        for(let i = 0; i < result.data.elements.length; i++){
-                            let newRecipe = new Recipe({
-                                posId: result.data.elements[i].id,
-                                merchant: merchant._id,
-                                name: result.data.elements[i].name,
-                                ingredients: [],
-                                price: result.data.elements[i].price
-                            });
+                for(let i = 0; i < result.data.elements.length; i++){
+                    let newRecipe = new Recipe({
+                        posId: result.data.elements[i].id,
+                        merchant: merchant._id,
+                        name: result.data.elements[i].name,
+                        ingredients: [],
+                        price: result.data.elements[i].price
+                    });
 
-                            merchant.recipes.push(newRecipe);
-                            newRecipes.push(newRecipe);
-                        }
+                    merchant.recipes.push(newRecipe);
+                    newRecipes.push(newRecipe);
+                }
 
-                        Recipe.create(newRecipes)
-                            .catch((err)=>{
-                                return res.json("ERROR: UNABLE TO SAVE RECIPES");
-                            });
+                Recipe.create(newRecipes).catch((err)=>{});
 
-                        merchant.save()
-                            .then((newMerchant)=>{
-                                newMerchant.populate("recipes.ingredients.ingredient").execPopulate()
-                                    .then((newestMerchant)=>{
-                                        merchant.password = undefined;
-                                        return res.json({new: newRecipes, removed: deletedRecipes});
-                                    })
-                                    .catch((err)=>{
-                                        return res.json("ERROR: UNABLE TO RETRIEVE DATA");
-                                    });
-                            })
-                            .catch((err)=>{
-                                return res.json("ERROR: UNABLE TO SAVE CHANGES FROM CLOVER");
-                            });
-                    })
-                    .catch((err)=>{
-                        return res.json("ERROR: UNABLE TO RETRIEVE DATA FROM CLOVER");
-                    });
+                return merchant.save();
+            })
+            .then((newMerchant)=>{
+                return res.json({new: newRecipes, removed: deletedRecipes});
             })
             .catch((err)=>{
                 return res.json("ERROR: UNABLE TO RETRIEVE MERCHANT DATA");

views/dashboardPage/bundle.js

@@ -1007,9 +1007,9 @@ class RecipeIngredient{
     }
 
     get quantity(){
-        // if(this._ingredient.specialUnit === "bottle"){
-        //     return this._quantity / this._ingredient.unitSize;
-        // }
+        if(this._ingredient.specialUnit === "bottle"){
+            return this._quantity / this._ingredient.unitSize;
+        }
 
         switch(this._ingredient.unit){
             case "g":return this._quantity;
@@ -1112,9 +1112,6 @@ class Recipe{
 
             this._ingredients.push(recipeIngredient);
         }
-
-        this._parent.modules.recipeBook.isPopulated = false;
-        this._parent.modules.analytics.isPopulated = false;
     }
 
     get id(){
@@ -1592,6 +1589,7 @@ const newRecipe = require("./newRecipe.js");
 const editRecipe = require("./editRecipe.js");
 const newTransaction = require("./newTransaction.js");
 const orderDetails = require("./orderDetails.js");
+const orderFilter = require("./orderFilter.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
 
@@ -1614,7 +1612,7 @@ merchant = new Merchant(data.merchant, data.transactions, {
 });
 
 controller = {
-    openStrand: function(strand){
+    openStrand: function(strand, data = undefined){
         this.closeSidebar();
 
         let strands = document.querySelectorAll(".strand");
@@ -1653,7 +1651,7 @@ controller = {
             case "orders":
                 activeButton = document.getElementById("ordersBtn");
                 document.getElementById("ordersStrand").style.display = "flex";
-                orders.display(Order);
+                orders.display(Order, data);
                 break;
             case "transactions":
                 activeButton = document.getElementById("transactionsBtn");
@@ -1703,6 +1701,9 @@ controller = {
             case "orderDetails":
                 orderDetails.display(data);
                 break;
+            case "orderFilter":
+                orderFilter.display(Order);
+                break;
             case "newOrder":
                 newOrder.display(Order);
                 break;
@@ -1821,7 +1822,7 @@ if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
 }
 
 controller.openStrand("home");
-},{"./Ingredient.js":1,"./Merchant.js":2,"./Order.js":3,"./Recipe.js":4,"./Transaction.js":5,"./analytics.js":6,"./editIngredient.js":8,"./editRecipe.js":9,"./home.js":10,"./ingredientDetails.js":11,"./ingredients.js":12,"./newIngredient.js":13,"./newOrder.js":14,"./newRecipe.js":15,"./newTransaction.js":16,"./orderDetails.js":17,"./orders.js":18,"./recipeBook.js":19,"./recipeDetails.js":20,"./transactionDetails.js":21,"./transactions.js":22}],8:[function(require,module,exports){
+},{"./Ingredient.js":1,"./Merchant.js":2,"./Order.js":3,"./Recipe.js":4,"./Transaction.js":5,"./analytics.js":6,"./editIngredient.js":8,"./editRecipe.js":9,"./home.js":10,"./ingredientDetails.js":11,"./ingredients.js":12,"./newIngredient.js":13,"./newOrder.js":14,"./newRecipe.js":15,"./newTransaction.js":16,"./orderDetails.js":17,"./orderFilter.js":18,"./orders.js":19,"./recipeBook.js":20,"./recipeDetails.js":21,"./transactionDetails.js":22,"./transactions.js":23}],8:[function(require,module,exports){
 const Ingredient = require("./Ingredient");
 
 let editIngredient = {
@@ -2591,7 +2592,7 @@ let ingredients = {
 }
 
 module.exports = ingredients;
-},{"./orders":18}],13:[function(require,module,exports){
+},{"./orders":19}],13:[function(require,module,exports){
 const ingredients = require("./ingredients");
 
 let newIngredient = {
@@ -3161,134 +3162,58 @@ let orderDetails = {
 
 module.exports = orderDetails;
 },{}],18:[function(require,module,exports){
-let orders = {
-    isPopulated: false,
-    isFetched: false,
-
-    display: async function(Order){
-        if(!this.isFetched){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/order", {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json;charset=utf-8"
-                },
-            })
-                .then((response) => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        for(let i = 0; i < response.length; i++){
-                            let ingredients = [];
-                            for(let j = 0; j < response[i].ingredients.length; j++){
-                                const orderIngredient = response[i].ingredients[j];
-                                for(let k = 0; k < merchant.ingredients.length; k++){
-                                    if(merchant.ingredients[k].ingredient.id === orderIngredient.ingredient){
-                                        ingredients.push({
-                                            ingredient: merchant.ingredients[k].ingredient,
-                                            quantity: orderIngredient.quantity,
-                                            pricePerUnit: orderIngredient.pricePerUnit
-                                        });
-                                    }
-                                }
-                            }
-
-                            merchant.addOrder(new Order(
-                                response[i]._id,
-                                response[i].name,
-                                response[i].date,
-                                response[i].taxes,
-                                response[i].fees,
-                                ingredients,
-                                merchant
-                            ));
-                        }
+let orderFilter = {
+    display: function(Order){
+        let now = new Date();
+        let past = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
+        let ingredientList = document.getElementById("orderFilterIngredients");
 
-                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
-                        this.isFetched = true;
-                        
-                        this.populate();
-                        this.isPopulated = true;
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
+        document.getElementById("orderFilterDateFrom").valueAsDate = past;
+        document.getElementById("orderFilterDateTo").valueAsDate = now;
 
-        if(!this.isPopulated){
-            this.populate();
-            this.isPopulated = true;
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
         }
-    },
-
-    populate: function(){
-        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].ingredient;
-            ingredientDropdown.appendChild(checkbox);
-
-            let label = document.createElement("label");
-            label.innerText = merchant.ingredients[i].ingredient.name;
-            label.for = checkbox;
-            ingredientDropdown.appendChild(label);
+            let element = document.createElement("div");
+            element.classList.add("choosable");
+            element.ingredient = merchant.ingredients[i].ingredient.id;
+            element.onclick = ()=>{this.toggleActive(element)};
+            ingredientList.appendChild(element);
 
-            let brk = document.createElement("br");
-            ingredientDropdown.appendChild(brk);
+            let text = document.createElement("p");
+            text.innerText = merchant.ingredients[i].ingredient.name;
+            element.appendChild(text);
         }
 
-        while(listDiv.children.length > 0){
-            listDiv.removeChild(listDiv.firstChild);
-        }
-
-        for(let i = 0; i < merchant.orders.length; i++){
-            let row = template.cloneNode(true);
+        document.getElementById("orderFilterSubmit").onclick = ()=>{this.submit(Order)};
+    },
 
-            row.children[0].innerText = merchant.orders[i].name;
-            row.children[1].innerText = `${merchant.orders[i].ingredients.length} ingredients`;
-            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
-            row.children[3].innerText = `$${merchant.orders[i].getTotalCost().toFixed(2)}`;
-            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
-            listDiv.appendChild(row);
+    toggleActive: function(element){
+        if(element.classList.contains("active")){
+            element.classList.remove("active");
+        }else{
+            element.classList.add("active");
         }
     },
 
-    submitFilter: function(){
-        event.preventDefault();
-
+    submit: function(Order){
         let data = {
-            startDate: document.getElementById("orderFilDate1").valueAsDate,
-            endDate: document.getElementById("orderFilDate2").valueAsDate,
+            startDate: document.getElementById("orderFilterDateFrom").valueAsDate,
+            endDate: document.getElementById("orderFilterDateTo").valueAsDate,
             ingredients: []
         }
 
         if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            banner.createError("START DATE CACNNOT BE AFTER END DATE");
             return;
         }
 
-        let ingredientChoices = document.getElementById("ingredientDropdown");
-        for(let i = 0; i < ingredientChoices.children.length; i += 3){
-            if(ingredientChoices.children[i].checked){
-                data.ingredients.push(ingredientChoices.children[i].ingredient.id);
+        let ingredients = document.getElementById("orderFilterIngredients").children;
+        for(let i = 0; i < ingredients.length; i++){
+            if(ingredients[i].classList.contains("active")){
+                data.ingredients.push(ingredients[i].ingredient);
             }
         }
 
@@ -3302,74 +3227,149 @@ let orders = {
         loader.style.display = "flex";
 
         fetch("/order", {
-            method: "POST",
+            method: "post",
             headers: {
                 "Content-Type": "application/json;charset=utf-8"
             },
             body: JSON.stringify(data)
         })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let orderList = document.getElementById("orderList");
-                    let template = document.getElementById("order").content.children[0];
-
-                    while(orderList.children.length > 0){
-                        orderList.removeChild(orderList.firstChild);
+        .then(response => response.json())
+        .then((response)=>{
+            let orders = [];
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else if(response.length === 0){
+                banner.createError("NO ORDERS MATCH YOUR SEARCH");
+            }else{
+                let ingredients = [];
+                for(let i = 0; i < response.length; i++){
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
+                        }
                     }
 
-                    for(let i = 0; i < response.length; i++){
-                        let orderDiv = template.cloneNode(true);
-                        let order = new Order(
-                            response[i]._id,
-                            response[i].name,
-                            response[i].date,
-                            response[i].taxes,
-                            response[i].fees,
-                            response[i].ingredients,
-                            merchant
-                        );
+                    orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }    
+            }
 
-                        let cost = 0;
-                        for(let j = 0; j < order.ingredients.length; j++){
-                            cost += order.ingredients[j].price * order.ingredients[j].quantity;
-                        }
+            controller.openStrand("orders", orders);
+        })
+        .catch((err)=>{
+            banner.createError("UNABLE TO DISPLAY THE ORDERS");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
+    }
+}
 
-                        orderDiv.children[0].innerText = order.name;
-                        orderDiv.children[1].innerText = `${order.ingredients.length} items`;
-                        orderDiv.children[2].innerText = order.date.toLocaleDateString();
-                        orderDiv.children[3].innerText = `$${cost.toFixed(2)}`;
-                        orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", order)};
-                        orderList.appendChild(orderDiv);
-                    }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE ORDERS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
+module.exports = orderFilter;
+},{}],19:[function(require,module,exports){
+let orders = {
+    orders: [],
 
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+    display: async function(Order, newOrders){
+        if(newOrders){
+            this.orders = newOrders;
+        }
+        if(this.orders.length === 0){
+            this.orders = await this.getOrders(Order);
+        }
 
-        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");
+        document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
+        document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
+
+        let orderList = document.getElementById("orderList");
+        let template = document.getElementById("order").content.children[0];
+
+        while(orderList.children.length > 0){
+            orderList.removeChild(orderList.firstChild);
         }
+
+        for(let i = 0; i < this.orders.length; i++){
+            let orderDiv = template.cloneNode(true);
+            orderDiv.order = this.orders[i];
+            orderDiv.children[0].innerText = this.orders[i].name;
+            orderDiv.children[1].innerText = `${this.orders[i].ingredients.length} ingredients`;
+            orderDiv.children[2].innerText = this.orders[i].date.toLocaleDateString("en-US");
+            orderDiv.children[3].innerText = `$${this.orders[i].getTotalCost().toFixed(2)}`;
+            orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", this.orders[i])};
+            orderList.appendChild(orderDiv);
+        }
+    },
+
+    getOrders: function(Order){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        return fetch("/order", {
+            method: "get",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            }
+        })
+        .then(response => response.json())
+        .then((response)=>{
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else{
+                let orders = [];
+                for(let i = 0; i < response.length; i++){
+                    let ingredients = [];
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
+                        }
+                    }
+
+                    orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }
+
+                return orders;
+            }
+        })
+        .catch((err)=>{
+            banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
     }
 }
 
 module.exports = orders;
-},{}],19:[function(require,module,exports){
+},{}],20:[function(require,module,exports){
 let recipeBook = {
     isPopulated: false,
     recipeDivList: [],
@@ -3456,28 +3456,31 @@ let recipeBook = {
         })
             .then(response => response.json())
             .then((response)=>{
-                for(let i = 0; i < response.new.length; i++){
-                    const recipe = new Recipe(
-                        response.new[i]._id,
-                        response.new[i].name,
-                        response.new[i].price,
-                        merchant,
-                        []
-                    );
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    for(let i = 0; i < response.new.length; i++){
+                        const recipe = new Recipe(
+                            response.new[i]._id,
+                            response.new[i].name,
+                            response.new[i].price,
+                            merchant,
+                            []
+                        );
 
-                    merchant.addRecipe(recipe);
-                }
+                        merchant.addRecipe(recipe);
+                    }
 
-                for(let i = 0; i < response.removed.length; i++){
-                    const recipe = new Recipe(
-                        response.removed[i]._id,
-                        response.removed[i].name,
-                        response.removed[i].price,
-                        merchant,
-                        []
-                    );
+                    for(let i = 0; i < response.removed.length; i++){
+                        for(let j = 0; j < merchant.recipes.length; j++){
+                            if(merchant.recipes[j].id === response.removed[i]._id){
+                                merchant.removeRecipe(merchant.recipes[j]);
+                                break;
+                            }
+                        }
+                    }
 
-                    merchant.removeRecipe(recipe);
+                    this.display();
                 }
             })
             .catch((err)=>{
@@ -3490,12 +3493,14 @@ let recipeBook = {
 }
 
 module.exports = recipeBook;
-},{}],20:[function(require,module,exports){
+},{}],21:[function(require,module,exports){
 let recipeDetails = {
     display: function(recipe){
         document.getElementById("editRecipeBtn").onclick = ()=>{controller.openSidebar("editRecipe", recipe)};
-        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove(recipe)};
         document.getElementById("recipeName").innerText = recipe.name;
+        if(merchant.pos === "none"){
+            document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove(recipe)};
+        }
 
         //ingredient list
         let ingredientsDiv = document.getElementById("recipeIngredientList");
@@ -3564,7 +3569,7 @@ let recipeDetails = {
 }
 
 module.exports = recipeDetails;
-},{}],21:[function(require,module,exports){
+},{}],22:[function(require,module,exports){
 let transactionDetails = {
     transaction: {},
 
@@ -3638,7 +3643,7 @@ let transactionDetails = {
 }
 
 module.exports = transactionDetails;
-},{}],22:[function(require,module,exports){
+},{}],23:[function(require,module,exports){
 let transactions = {
     isPopulated: false,
 

views/dashboardPage/dashboard.css

@@ -172,6 +172,16 @@ Multi-strand use classes
     left: 15px;
 }
 
+.buttonBox{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 50px;
+}
+
+    .buttonBox > *{
+        margin-right: 10px;
+    }
+
 /* 
 Home Strand 
 */

views/dashboardPage/dashboard.ejs

@@ -370,53 +370,18 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">ORDERS</h1>
 
-                    <button class="button mobileHide" onclick="controller.openSidebar('newOrder')">NEW</button>
-                </div>
+                    <div class="buttonBox">
+                        <button id="orderFilterBtn" class="button mobileHide">FILTER</button>
 
-                <form id="orderSubmitForm" 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>INGREDIENTS</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>
+                        <button id="newOrderBtn" class="button mobileHide">NEW</button>
                     </div>
-
-                    <input class="button" type="submit" value="SUBMIT">
-                </form>
+                    
+                </div>
 
                 <div id="orderList"></div>
 
                 <template id="order">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                         <p></p>
@@ -495,6 +460,7 @@
             <% include ./sidebars/transactionDetails %>
             <% include ./sidebars/newTransaction %>
             <% include ./sidebars/editRecipe %>
+            <% include ./sidebars/orderFilter %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/js/Recipe.js

@@ -13,9 +13,9 @@ class RecipeIngredient{
     }
 
     get quantity(){
-        // if(this._ingredient.specialUnit === "bottle"){
-        //     return this._quantity / this._ingredient.unitSize;
-        // }
+        if(this._ingredient.specialUnit === "bottle"){
+            return this._quantity / this._ingredient.unitSize;
+        }
 
         switch(this._ingredient.unit){
             case "g":return this._quantity;
@@ -118,9 +118,6 @@ class Recipe{
 
             this._ingredients.push(recipeIngredient);
         }
-
-        this._parent.modules.recipeBook.isPopulated = false;
-        this._parent.modules.analytics.isPopulated = false;
     }
 
     get id(){

views/dashboardPage/js/dashboard.js

@@ -13,6 +13,7 @@ const newRecipe = require("./newRecipe.js");
 const editRecipe = require("./editRecipe.js");
 const newTransaction = require("./newTransaction.js");
 const orderDetails = require("./orderDetails.js");
+const orderFilter = require("./orderFilter.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
 
@@ -35,7 +36,7 @@ merchant = new Merchant(data.merchant, data.transactions, {
 });
 
 controller = {
-    openStrand: function(strand){
+    openStrand: function(strand, data = undefined){
         this.closeSidebar();
 
         let strands = document.querySelectorAll(".strand");
@@ -74,7 +75,7 @@ controller = {
             case "orders":
                 activeButton = document.getElementById("ordersBtn");
                 document.getElementById("ordersStrand").style.display = "flex";
-                orders.display(Order);
+                orders.display(Order, data);
                 break;
             case "transactions":
                 activeButton = document.getElementById("transactionsBtn");
@@ -124,6 +125,9 @@ controller = {
             case "orderDetails":
                 orderDetails.display(data);
                 break;
+            case "orderFilter":
+                orderFilter.display(Order);
+                break;
             case "newOrder":
                 newOrder.display(Order);
                 break;

views/dashboardPage/js/orderFilter.js

@@ -0,0 +1,118 @@
+let orderFilter = {
+    display: function(Order){
+        let now = new Date();
+        let past = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
+        let ingredientList = document.getElementById("orderFilterIngredients");
+
+        document.getElementById("orderFilterDateFrom").valueAsDate = past;
+        document.getElementById("orderFilterDateTo").valueAsDate = now;
+
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let element = document.createElement("div");
+            element.classList.add("choosable");
+            element.ingredient = merchant.ingredients[i].ingredient.id;
+            element.onclick = ()=>{this.toggleActive(element)};
+            ingredientList.appendChild(element);
+
+            let text = document.createElement("p");
+            text.innerText = merchant.ingredients[i].ingredient.name;
+            element.appendChild(text);
+        }
+
+        document.getElementById("orderFilterSubmit").onclick = ()=>{this.submit(Order)};
+    },
+
+    toggleActive: function(element){
+        if(element.classList.contains("active")){
+            element.classList.remove("active");
+        }else{
+            element.classList.add("active");
+        }
+    },
+
+    submit: function(Order){
+        let data = {
+            startDate: document.getElementById("orderFilterDateFrom").valueAsDate,
+            endDate: document.getElementById("orderFilterDateTo").valueAsDate,
+            ingredients: []
+        }
+
+        if(data.startDate >= data.endDate){
+            banner.createError("START DATE CACNNOT BE AFTER END DATE");
+            return;
+        }
+
+        let ingredients = document.getElementById("orderFilterIngredients").children;
+        for(let i = 0; i < ingredients.length; i++){
+            if(ingredients[i].classList.contains("active")){
+                data.ingredients.push(ingredients[i].ingredient);
+            }
+        }
+
+        if(data.ingredients.length === 0){
+            for(let i = 0; i < merchant.ingredients.length; i++){
+                data.ingredients.push(merchant.ingredients[i].ingredient.id);
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/order", {
+            method: "post",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(data)
+        })
+        .then(response => response.json())
+        .then((response)=>{
+            let orders = [];
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else if(response.length === 0){
+                banner.createError("NO ORDERS MATCH YOUR SEARCH");
+            }else{
+                let ingredients = [];
+                for(let i = 0; i < response.length; i++){
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
+                        }
+                    }
+
+                    orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }    
+            }
+
+            controller.openStrand("orders", orders);
+        })
+        .catch((err)=>{
+            banner.createError("UNABLE TO DISPLAY THE ORDERS");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
+    }
+}
+
+module.exports = orderFilter;

views/dashboardPage/js/orders.js

@@ -1,207 +1,87 @@
 let orders = {
-    isPopulated: false,
-    isFetched: false,
+    orders: [],
 
-    display: async function(Order){
-        if(!this.isFetched){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/order", {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json;charset=utf-8"
-                },
-            })
-                .then((response) => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        for(let i = 0; i < response.length; i++){
-                            let ingredients = [];
-                            for(let j = 0; j < response[i].ingredients.length; j++){
-                                const orderIngredient = response[i].ingredients[j];
-                                for(let k = 0; k < merchant.ingredients.length; k++){
-                                    if(merchant.ingredients[k].ingredient.id === orderIngredient.ingredient){
-                                        ingredients.push({
-                                            ingredient: merchant.ingredients[k].ingredient,
-                                            quantity: orderIngredient.quantity,
-                                            pricePerUnit: orderIngredient.pricePerUnit
-                                        });
-                                    }
-                                }
-                            }
-
-                            merchant.addOrder(new Order(
-                                response[i]._id,
-                                response[i].name,
-                                response[i].date,
-                                response[i].taxes,
-                                response[i].fees,
-                                ingredients,
-                                merchant
-                            ));
-                        }
-
-                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
-                        this.isFetched = true;
-                        
-                        this.populate();
-                        this.isPopulated = true;
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
+    display: async function(Order, newOrders){
+        if(newOrders){
+            this.orders = newOrders;
         }
-
-        if(!this.isPopulated){
-            this.populate();
-            this.isPopulated = true;
+        if(this.orders.length === 0){
+            this.orders = await this.getOrders(Order);
         }
-    },
-
-    populate: function(){
-        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)};
+        document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
+        document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
 
-        for(let i = 0; i < merchant.ingredients.length; i++){
-            let checkbox = document.createElement("input");
-            checkbox.type = "checkbox";
-            checkbox.ingredient = merchant.ingredients[i].ingredient;
-            ingredientDropdown.appendChild(checkbox);
-
-            let label = document.createElement("label");
-            label.innerText = merchant.ingredients[i].ingredient.name;
-            label.for = checkbox;
-            ingredientDropdown.appendChild(label);
-
-            let brk = document.createElement("br");
-            ingredientDropdown.appendChild(brk);
-        }
+        let orderList = document.getElementById("orderList");
+        let template = document.getElementById("order").content.children[0];
 
-        while(listDiv.children.length > 0){
-            listDiv.removeChild(listDiv.firstChild);
+        while(orderList.children.length > 0){
+            orderList.removeChild(orderList.firstChild);
         }
 
-        for(let i = 0; i < merchant.orders.length; i++){
-            let row = template.cloneNode(true);
-
-            row.children[0].innerText = merchant.orders[i].name;
-            row.children[1].innerText = `${merchant.orders[i].ingredients.length} ingredients`;
-            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
-            row.children[3].innerText = `$${merchant.orders[i].getTotalCost().toFixed(2)}`;
-            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
-            listDiv.appendChild(row);
+        for(let i = 0; i < this.orders.length; i++){
+            let orderDiv = template.cloneNode(true);
+            orderDiv.order = this.orders[i];
+            orderDiv.children[0].innerText = this.orders[i].name;
+            orderDiv.children[1].innerText = `${this.orders[i].ingredients.length} ingredients`;
+            orderDiv.children[2].innerText = this.orders[i].date.toLocaleDateString("en-US");
+            orderDiv.children[3].innerText = `$${this.orders[i].getTotalCost().toFixed(2)}`;
+            orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", this.orders[i])};
+            orderList.appendChild(orderDiv);
         }
     },
 
-    submitFilter: function(){
-        event.preventDefault();
-
-        let data = {
-            startDate: document.getElementById("orderFilDate1").valueAsDate,
-            endDate: document.getElementById("orderFilDate2").valueAsDate,
-            ingredients: []
-        }
-
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
-
-        let ingredientChoices = document.getElementById("ingredientDropdown");
-        for(let i = 0; i < ingredientChoices.children.length; i += 3){
-            if(ingredientChoices.children[i].checked){
-                data.ingredients.push(ingredientChoices.children[i].ingredient.id);
-            }
-        }
-
-        if(data.ingredients.length === 0){
-            for(let i = 0; i < merchant.ingredients.length; i++){
-                data.ingredients.push(merchant.ingredients[i].ingredient.id);
-            }
-        }
-
+    getOrders: function(Order){
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 
-        fetch("/order", {
-            method: "POST",
+        return fetch("/order", {
+            method: "get",
             headers: {
                 "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
+            }
         })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let orderList = document.getElementById("orderList");
-                    let template = document.getElementById("order").content.children[0];
-
-                    while(orderList.children.length > 0){
-                        orderList.removeChild(orderList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let orderDiv = template.cloneNode(true);
-                        let order = new Order(
-                            response[i]._id,
-                            response[i].name,
-                            response[i].date,
-                            response[i].taxes,
-                            response[i].fees,
-                            response[i].ingredients,
-                            merchant
-                        );
-
-                        let cost = 0;
-                        for(let j = 0; j < order.ingredients.length; j++){
-                            cost += order.ingredients[j].price * order.ingredients[j].quantity;
+        .then(response => response.json())
+        .then((response)=>{
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else{
+                let orders = [];
+                for(let i = 0; i < response.length; i++){
+                    let ingredients = [];
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
                         }
-
-                        orderDiv.children[0].innerText = order.name;
-                        orderDiv.children[1].innerText = `${order.ingredients.length} items`;
-                        orderDiv.children[2].innerText = order.date.toLocaleDateString();
-                        orderDiv.children[3].innerText = `$${cost.toFixed(2)}`;
-                        orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", order)};
-                        orderList.appendChild(orderDiv);
                     }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE ORDERS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
 
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+                    orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }
 
-        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");
-        }
+                return orders;
+            }
+        })
+        .catch((err)=>{
+            banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
     }
 }
 

views/dashboardPage/js/recipeBook.js

@@ -84,28 +84,31 @@ let recipeBook = {
         })
             .then(response => response.json())
             .then((response)=>{
-                for(let i = 0; i < response.new.length; i++){
-                    const recipe = new Recipe(
-                        response.new[i]._id,
-                        response.new[i].name,
-                        response.new[i].price,
-                        merchant,
-                        []
-                    );
-
-                    merchant.addRecipe(recipe);
-                }
-
-                for(let i = 0; i < response.removed.length; i++){
-                    const recipe = new Recipe(
-                        response.removed[i]._id,
-                        response.removed[i].name,
-                        response.removed[i].price,
-                        merchant,
-                        []
-                    );
-
-                    merchant.removeRecipe(recipe);
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    for(let i = 0; i < response.new.length; i++){
+                        const recipe = new Recipe(
+                            response.new[i]._id,
+                            response.new[i].name,
+                            response.new[i].price,
+                            merchant,
+                            []
+                        );
+
+                        merchant.addRecipe(recipe);
+                    }
+
+                    for(let i = 0; i < response.removed.length; i++){
+                        for(let j = 0; j < merchant.recipes.length; j++){
+                            if(merchant.recipes[j].id === response.removed[i]._id){
+                                merchant.removeRecipe(merchant.recipes[j]);
+                                break;
+                            }
+                        }
+                    }
+
+                    this.display();
                 }
             })
             .catch((err)=>{

views/dashboardPage/js/recipeDetails.js

@@ -1,8 +1,10 @@
 let recipeDetails = {
     display: function(recipe){
         document.getElementById("editRecipeBtn").onclick = ()=>{controller.openSidebar("editRecipe", recipe)};
-        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove(recipe)};
         document.getElementById("recipeName").innerText = recipe.name;
+        if(merchant.pos === "none"){
+            document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove(recipe)};
+        }
 
         //ingredient list
         let ingredientsDiv = document.getElementById("recipeIngredientList");

views/dashboardPage/sidebars/orderFilter.ejs

@@ -0,0 +1,32 @@
+<div id="orderFilter">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="controller.closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    <h1>FILTER ORDERS</h1>
+
+    <div class="orderFilterDates">
+        <label>FROM:
+            <input id="orderFilterDateFrom" type="date">
+        </label>
+        
+        <label>TO:
+            <input id="orderFilterDateTo" type="date">
+        </label>
+    </div>
+
+    <div class="lineBorder"></div>
+
+    <h3>Ingredients</h3>
+
+    <div id="orderFilterIngredients"></div>
+
+    <div class="lineBorder"></div>
+
+    <button id="orderFilterSubmit" class="button">SUBMIT</button>
+</div>

views/dashboardPage/sidebars/sidebars.css

@@ -295,13 +295,6 @@ Ingredient Details
             color: white;
         }
 
-    .buttonBox{
-        display: flex;
-        justify-content: space-around;
-        width: 100%;
-        margin-top: 50px;
-    }
-
 /*
 EDIT INGREDIENT
 */
@@ -671,7 +664,23 @@ EDIT RECIPE
     }
 
 /*
-Transaction Details
+ORDER FILTER
+*/
+#orderFilter{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .orderFilterDates{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+/*
+TRANSACTION DETAILS
 */
 .transactionDetails{
     display: flex;

views/landingPage/landing.ejs

@@ -121,7 +121,6 @@
             let error = <%- JSON.stringify(error) %>;
             let isLoggedIn = <%- JSON.stringify(isLoggedIn) %>;
         </script>
-        <script src="../shared/validation.js"></script>
         <script src="/landingPage/public.js"></script>
         <script src="/landingPage/login.js"></script>
         <script src="/landingPage/register.js"></script>

views/landingPage/register.js

@@ -37,12 +37,10 @@ let registerObj = {
         }
 
         if(checkbox.checked){
-            if(validator.isSanitary(document.getElementById("regName").value)){
-                document.getElementById("loaderContainer").style.display = "flex";
-                form.action = "merchant/create/none";
-                form.method = "post";
-                form.submit();
-            }
+            document.getElementById("loaderContainer").style.display = "flex";
+            form.action = "merchant/create/none";
+            form.method = "post";
+            form.submit();
         }else{
             banner.createError("Please agree to the Privacy Policy and Terms and Conditions to continue");
         }

views/shared/banner.ejs

@@ -1,6 +1,4 @@
-<div class="banner">
-    <ul></ul>
-</div>
+<div id="banner" class="banner"></div>
 
 <script>
     let banner = {
@@ -8,49 +6,29 @@
         notificationList: [],
 
         createNotification: function(value){
-            this.notificationList.push(value);
+            let banner = document.getElementById("banner");
+            banner.style.display = "flex";
+            banner.innerText = value;
+            banner.classList.add("notification");
 
-            this.updateNotifications();
 
             setTimeout(()=>{
-                this.notificationList.splice(0, 1);
-                this.updateNotifications();
+                banner.style.display = "none";
+                banner.classList.remove("notification");
             }, 10000);
         },
 
         createError: function(value){
-            this.errorList.push(value);
+            let banner = document.getElementById("banner");
+            banner.style.display = "flex";
+            banner.innerText = value;
+            banner.classList.add("error");
 
-            this.updateNotifications();
 
             setTimeout(()=>{
-                this.errorList.splice(0, 1);
-                this.updateNotifications();
+                banner.style.display = "none";
+                banner.classList.remove("notification");
             }, 10000);
-        },
-
-        updateNotifications: function(){
-            let banner = document.querySelector(".banner");
-            let ul = document.querySelector(".banner ul");
-
-            while(ul.hasChildNodes()){
-                ul.removeChild(ul.firstChild);
-            }
-
-            for(let i = 0; i < this.notificationList.length; i++){
-                let li = document.createElement("li");                                                                       
-                                                                                                            
-                li.classList = "notification";
-                li.innerText = this.notificationList[i];
-                ul.appendChild(li);
-            }
-
-            for(let i = 0; i < this.errorList.length; i++){
-                let li = document.createElement("li");
-                li.classList = "error";
-                li.innerText = this.errorList[i];
-                ul.appendChild(li);
-            }
         }
     }
 </script>

views/shared/shared.css

@@ -223,6 +223,33 @@ form{
     transition: width 1s linear;
 }
 
+.choosable{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: rgb(0, 27, 45);
+    color: white;
+    border-radius: 5px;
+    margin: 2px;
+    padding: 5px;
+    text-align: center;
+    cursor: pointer;
+}
+
+    .choosable.tall{
+        padding: 15px;
+    }
+
+    .choosable:hover{
+        background: rgb(201, 201, 201);
+        color: black;
+    }
+
+    .choosable.active{
+        background: rgb(179, 191, 209);
+        color: white;
+    }
+
 /* Header partial */
 .header{
     display: flex;
@@ -272,26 +299,20 @@ form{
 
 /* Banner partial */
 .banner{
+    justify-content: center;
     width: 100%;
-    text-align: center;
-    list-style-type: none;
     font-size: 20px;
     color: white;
-    z-index: -10;
     position: absolute;
-    border-radius: 5px;
+    padding: 5px 0;
 }
 
-    .banner .notification{
+    .notification{
         background: rgba(1, 140, 15, 0.75);
-        list-style-type: none;
-        padding: 5px;
     }
 
-    .banner .error{
+    .error{
         background: rgba(255, 0, 0, 0.75);
-        list-style-type: none;
-        padding: 5px;
     }
 
 /* Footer Partial */

views/shared/validation.js

@@ -1,213 +0,0 @@
-let validator = {
-    /*
-    ingredient = {
-        ingredient: {
-            name: name of ingredient,
-            category: category of ingredient,
-            unit: unit measure for ingredient
-        },
-        quantity: quantity of ingredient for current merchant
-    }
-    */
-    ingredient: function(ingredient, createBanner = true){
-        let errors = [];
-        if(!this.isSanitary(ingredient.ingredient.name) ||
-        !this.isSanitary(ingredient.ingredient.category) ||
-        !this.isSanitary(ingredient.ingredient.unit)){
-            errors.push("Contains illegal characters");
-        }
-
-        if(isNaN(ingredient.quantity) || ingredient.quantity === ""){
-            errors.push("Must enter a valid number");
-        }
-
-        if(ingredient.quantity < 0){
-            banner.createError("Quantity cannot be a negative number");
-        }
-
-        if(errors.length > 0){
-            if(createBanner){
-                for(let i = 0; i < errors.length; i++){
-                    banner.createError(errors[i]);
-                }
-            }
-
-            return false;
-        }
-
-        return true;
-    },
-
-    ingredientQuantity: function(quantity, createBanner = true){
-        let errors = [];
-
-        if(isNaN(quantity) || quantity === ""){
-            errors.push("Must enter a valid number");
-        }
-
-        if(quantity < 0){
-            banner.createError("Quantity cannot be a negative number");
-        }
-
-        if(errors.length > 0){
-            if(createBanner){
-                for(let i = 0; i < errors.length; i++){
-                    banner.createError(errors[i]);
-                }
-            }
-
-            return false;
-        }
-
-        return true;
-    },
-
-    merchant: {
-        password: function(pass, confirmPass, createBanner = true){
-            if(pass !== confirmPass){
-                if(createBanner){
-                    banner.createError("Your passwords do not match");
-                }
-                return false;
-            }
-
-            if(pass.length < 15){
-                if(createBanner){
-                    banner.createError("Your password must contain at least 15 characters");
-                }
-                return false;
-            }
-
-            return true;
-        }
-    },
-
-    transaction: {
-        date: function(from, to = new Date(), createBanner = true){
-            let errors = [];
-            let today = new Date();
-
-            if(from > to){
-                errors.push("Starting date must be before ending date");
-            }
-
-            if(from > today || to > today.setDate(today.getDate() + 1)){
-                errors.push("Cannot choose a date in the future");
-            }
-
-            if(errors.length > 0){
-                if(createBanner){
-                    for(let i = 0; i < errors.length; i++){
-                        banner.createError(errors[i]);
-                    }
-
-                    return false;
-                }
-            }
-
-            return true;
-        }
-    },
-
-    recipe: function(newRecipe, createBanner = true){
-        let errors = [];
-
-        if(!validator.isSanitary(newRecipe.name)){
-            errors.push("Name contains invalid characters");
-        }
-
-        if(newRecipe.price < 0){
-            errors.push("Price must contain a non-negative number");
-        }
-
-        if(newRecipe.ingredients.length === 0){
-            errors.push("Must include at least one ingredient");
-        }
-
-        let checkSet = new Set();
-        for(let i = 0; i < newRecipe.ingredients.length; i++){
-            if(newRecipe.ingredients[i].quantity < 0){
-                errors.push("Quantity must contain a non-negative number");
-                break;
-            }
-
-            checkSet.add(newRecipe.ingredients[i].ingredient);
-        }
-
-        if(checkSet.size !== newRecipe.ingredients.length){
-            errors.push("Recipe contains duplicate ingredients");
-        }
-
-        if(isNaN(newRecipe.price) || newRecipe.price === "" || newRecipe.price< 0){
-            errors.push("Must enter a valid price");
-        }
-
-        if(errors.length > 0){
-            if(createBanner){
-                for(let i = 0; i < errors.length; i++){
-                    banner.createError(errors[i]);
-                }
-
-                return false;
-            }
-        }
-
-        return true;
-    },
-
-    order: function(order, createBanner = true){
-        let errors = [];
-
-        if(!validator.isSanitary(order.name, false)){
-            errors.push("Your string contains illegal characters");
-        }
-
-        let now = new Date()
-        if(order.date > now){
-            errors.push("Cannot have a date/time in the future");
-        }
-
-        for(let i = 0; i < order.ingredients.length; i++){
-            if(order.ingredients[i].quantity < 0){
-                errors.push("Quantity cannot be negative");
-                break;
-            }
-
-            if(order.ingredients[i].price < 0){
-                errors.push("Price cannot be negative");
-                break;
-            }
-
-            if(order.ingredients[i].price === "" || order.ingredients[i].quantity === ""){
-                errors.push("Incomplete information");
-            }
-        }
-
-        if(errors.length > 0){
-            if(createBanner){
-                for(let i = 0; i < errors.length; i++){
-                    banner.createError(errors[i]);
-                }
-            }
-
-            return false;
-        }
-
-        return true;
-    },
-
-    isSanitary: function(str, createBanner = true){
-        let disallowed = ["\\", "<", ">", "$", "{", "}", "(", ")"];
-
-        for(let i = 0; i < disallowed.length; i++){
-            if(str.includes(disallowed[i])){
-                if(createBanner){
-                    banner.createError("Your string contains illegal characters");
-                }
-                return false;
-            }
-        }
-
-        return true;
-    }
-}