Update the ingredient page to working. Update the ingredient details sidebar to display, but not functional.

views/dashboardPage/dashboard.ejs

@@ -29,7 +29,7 @@
                 <button id="menuShifter2" onclick="changeMenu()">&#8801;</button>
             </div>
         
-            <button class="menuButton active" id="homeBtn" class="active" onclick="changeStrand(1)">
+            <button class="menuButton active" id="homeBtn" class="active" onclick="controller.openStrand('home')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                     <polyline points="9 22 9 12 15 12 15 22"></polyline>
@@ -37,7 +37,7 @@
                 <p>HOME</p>
             </button>
         
-            <button class="menuButton" id="ingredientsBtn" onclick="changeStrand(2)">
+            <button class="menuButton" id="ingredientsBtn" onclick="controller.openStrand('ingredients')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="21 8 21 21 3 21 3 8"></polyline>
                     <rect x="1" y="3" width="22" height="5"></rect>
@@ -46,7 +46,7 @@
                 <p>INGREDIENTS</p>
             </button>
         
-            <button class="menuButton" id="recipeBookBtn" onclick="changeStrand(3)">
+            <button class="menuButton" id="recipeBookBtn" onclick="controller.openStrand('recipeBook')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                     <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
@@ -54,7 +54,7 @@
                 <p>RECIPE BOOK</p>
             </button>
         
-            <button class="menuButton" id="ordersBtn" onclick="changeStrand(4)">
+            <button class="menuButton" id="ordersBtn" onclick="controller.openStrand('orders')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="9" cy="21" r="1"></circle>
                     <circle cx="20" cy="21" r="1"></circle>
@@ -63,7 +63,7 @@
                 <p>ORDERS</p>
             </button>
 
-            <button class="menuButton" id="transactionsBtn" onclick="changeStrand(5)">
+            <button class="menuButton" id="transactionsBtn" onclick="controller.openStrand('transactions')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                     <line x1="1" y1="10" x2="23" y2="10"></line>

views/dashboardPage/js/Ingredient.js

@@ -0,0 +1,45 @@
+class Ingredient{
+    constructor(id, name, category, unitType, unit, parent){
+        this.id = id;
+        this.name = name;
+        this.category = category;
+        this.unitType = unitType;
+        this.unit = unit;
+        this.parent = parent;
+    }
+
+    convert(quantity){
+        if(this.unitType === "mass"){
+            switch(this.unit){
+                case "g": break;
+                case "kg": quantity /= 1000; break;
+                case "oz":  quantity /= 28.3495; break;
+                case "lb":  quantity /= 453.5924; break;
+            }
+        }else if(this.unitType === "volume"){
+            switch(this.unit){
+                case "ml": quantity *= 1000; break;
+                case "l": break;
+                case "tsp": quantity *= 202.8842; break;
+                case "tbsp": quantity *= 67.6278; break;
+                case "ozfl": quantity *= 33.8141; break;
+                case "cup": quantity *= 4.1667; break;
+                case "pt": quantity *= 2.1134; break;
+                case "qt": quantity *= 1.0567; break;
+                case "gal": quantity /= 3.7854; break;
+            }
+        }else if(this.unitType === "length"){
+            switch(this.unit){
+                case "mm": quantity *= 1000; break;
+                case "cm": quantity *= 100; break;
+                case "m": break;
+                case "in": quantity *= 39.3701; break;
+                case "ft": quantity *= 3.2808; break;
+            }
+        }
+
+        return quantity;
+    }
+}
+
+module.exports = Ingredient;

views/dashboardPage/js/Merchant.js

@@ -0,0 +1,467 @@
+const Ingredient = require("./Ingredient.js");
+const Recipe = require("./Recipe.js");
+const Transaction = require("./Transaction.js");
+
+class Merchant{
+    constructor(oldMerchant, transactions){
+        this.name = oldMerchant.name;
+        this.pos = oldMerchant.pos;
+        this.ingredients = [];
+        this.recipes = [];
+        this.transactions = [];
+        this.orders = [];
+        this.units = {
+            mass: ["g", "kg", "oz", "lb"],
+            volume: ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"],
+            length: ["mm", "cm", "m", "in", "foot"]
+        }
+        
+        for(let i = 0; i < oldMerchant.inventory.length; i++){
+            this.ingredients.push({
+                ingredient: new Ingredient(
+                    oldMerchant.inventory[i].ingredient._id,
+                    oldMerchant.inventory[i].ingredient.name,
+                    oldMerchant.inventory[i].ingredient.category,
+                    oldMerchant.inventory[i].ingredient.unitType,
+                    oldMerchant.inventory[i].defaultUnit,
+                    this
+                ),
+                quantity: oldMerchant.inventory[i].quantity
+            });
+        }
+
+        for(let i = 0; i < oldMerchant.recipes.length; i++){
+            this.recipes.push(new Recipe(
+                oldMerchant.recipes[i]._id,
+                oldMerchant.recipes[i].name,
+                oldMerchant.recipes[i].price,
+                oldMerchant.recipes[i].ingredients,
+                this
+            ));
+        }
+
+        for(let i = 0; i < transactions.length; i++){
+            this.transactions.push(new Transaction(
+                transactions[i]._id,
+                transactions[i].date,
+                transactions[i].recipes,
+                this
+            ));
+        }
+    }
+
+    /*
+    Updates all specified item in the merchant's inventory and updates the page
+    If ingredient doesn't exist, add it
+    ingredients = {
+        ingredient: Ingredient object,
+        quantity: new quantity,
+        defaultUnit: the default unit to be displayed
+    }
+    remove = set true if removing
+    isOrder = set true if this is coming from an order
+    */
+    editIngredients(ingredients, remove = false, isOrder = false){
+        for(let i = 0; i < ingredients.length; i++){
+            let isNew = true;
+            for(let j = 0; j < merchant.ingredients.length; j++){
+                if(merchant.ingredients[j].ingredient === ingredients[i].ingredient){
+                    if(remove){
+                        merchant.ingredients.splice(j, 1);
+                    }else if(!remove && isOrder){
+                        merchant.ingredients[j].quantity += ingredients[i].quantity;
+                    }else{
+                        merchant.ingredients[j].quantity = ingredients[i].quantity;
+                    }
+    
+                    isNew = false;
+                    break;
+                }
+            }
+    
+            if(isNew){
+                merchant.ingredients.push({
+                    ingredient: ingredients[i].ingredient,
+                    quantity: parseFloat(ingredients[i].quantity),
+                    defaultUnit: ingredients[i].defaultUnit
+                });
+            }
+        }
+    
+        homeStrandObj.drawInventoryCheckCard();
+        ingredientsStrandObj.populateByProperty("category");
+        addIngredientsComp.isPopulated = false;
+        closeSidebar();
+    }
+
+    /*
+    Updates a recipe in the merchants list of recipes
+    Can create, edit or remove
+    recipe = [Recipe object]
+    remove = will remove recipe when true
+    */
+    editRecipes(recipes, remove = false){
+        let isNew = true;
+
+        for(let i = 0; i < recipes.length; i++){
+            for(let j = 0; j < this.recipes.length; j++){
+                if(recipes[i] === this.recipes[j]){
+                    if(remove){
+                        this.recipes.splice(j, 1);
+                    }else{
+                        this.recipes[j] = recipes[i];
+                    }
+
+                    isNew = false;
+                    break;
+                }
+            }
+
+            if(isNew){
+                merchant.recipes.push(recipes[i]);
+            }
+        }
+
+        transactionsStrandObj.isPopulated = false;
+        recipeBookStrandObj.populateRecipes();
+        closeSidebar();
+    }
+
+    /*
+    Updates a list of orders in the merchants list of orders
+    Create/edit/remove
+    orders = [Order object]
+    remove = will remove order when true
+    */
+    editOrders(orders, remove = false){
+        for(let i = 0; i < orders.length; i++){
+            let isNew = true;
+            for(let j = 0; j < this.orders.length; j++){
+                if(orders[i] === this.orders[j]){
+                    if(remove){
+                        this.orders.splice(j, 1);
+                    }else{
+                        this.orders[j] = orders[i];
+                    }
+
+                    isNew = false;
+                    break;
+                }
+            }
+
+            if(isNew){
+                this.orders.push(orders[i]);
+            }
+        }
+
+        ordersStrandObj.populate();
+        closeSidebar();
+    }
+
+    editTransactions(transaction, remove = false){
+        let isNew = true;
+        for(let i = 0; i < this.transactions.length; i++){
+            if(this.transactions[i] === transaction){
+                if(remove){
+                    this.transactions.splice(i, 1);
+                }
+
+                isNew = false;
+                break;
+            }
+        }
+
+        if(isNew){
+            this.transactions.push(transaction);
+            this.transactions.sort((a, b) => a.date > b.date ? 1 : -1);
+        }
+
+        transactionsStrandObj.isPopulated = false;
+        transactionsStrandObj.display();
+        closeSidebar();
+    }
+
+    /*
+    Gets the indices of two dates from transactions
+    Inputs
+    from: starting date
+    to: ending date (default to now)
+    Output
+    Array containing starting index and ending index
+    Note: Will return false if it cannot find both necessary dates
+    */
+    transactionIndices(from, to = new Date()){
+        let indices = [];
+
+        for(let i = 0; i < this.transactions.length; i++){
+            if(this.transactions[i].date > from){
+                indices.push(i);
+                break;
+            }
+        }
+
+        for(let i = this.transactions.length - 1; i >=0; i--){
+            if(this.transactions[i].date < to){
+                indices.push(i);
+                break;
+            }
+        }
+
+        if(indices.length < 2){
+            return false;
+        }
+
+        return indices;
+    }
+
+    revenue(indices){
+        let total = 0;
+
+        for(let i = indices[0]; i <= indices[1]; i++){
+            for(let j = 0; j < this.transactions[i].recipes.length; j++){
+                for(let k = 0; k < this.recipes.length; k++){
+                    if(this.transactions[i].recipes[j].recipe === this.recipes[k]){
+                        total += this.transactions[i].recipes[j].quantity * this.recipes[k].price;
+                    }
+                }
+            }
+        }
+
+        return total / 100;
+    }
+
+    /*
+    Gets the quantity of each ingredient sold between two dates (dateRange)
+    Inputs
+    dateRange: list containing a start date and an end date
+    Return:
+        [{
+            ingredient: Ingredient object,
+            quantity: quantity of ingredient sold
+        }]
+    */
+    ingredientsSold(dateRange){
+        if(!dateRange){
+            return false;
+        }
+        
+        let recipes = this.recipesSold(dateRange);
+        let ingredientList = [];
+
+        for(let i = 0; i < recipes.length; i++){
+            for(let j = 0; j < recipes[i].recipe.ingredients.length; j++){
+                let exists = false;
+
+                for(let k = 0; k < ingredientList.length; k++){
+                    if(ingredientList[k].ingredient === recipes[i].recipe.ingredients[j].ingredient){
+                        exists = true;
+                        ingredientList[k].quantity += recipes[i].quantity * recipes[i].recipe.ingredients[j].quantity;
+                        break;
+                    }
+                }
+
+                if(!exists){
+                    ingredientList.push({
+                        ingredient: recipes[i].recipe.ingredients[j].ingredient,
+                        quantity: recipes[i].quantity * recipes[i].recipe.ingredients[j].quantity
+                    });
+                }
+            }
+        }
+    
+        return ingredientList;
+    }
+
+    singleIngredientSold(dateRange, ingredient){
+        let total = 0;
+
+        for(let i = dateRange[0]; i < dateRange[1]; i++){
+            for(let j = 0; j < this.transactions[i].recipes.length; j++){
+                for(let k = 0; k < this.transactions[i].recipes[j].recipe.ingredients.length; k++){
+                    if(this.transactions[i].recipes[j].recipe.ingredients[k].ingredient === ingredient.ingredient){
+                        total += this.transactions[i].recipes[j].recipe.ingredients[k].quantity;
+                        break;
+                    }
+                }
+            }
+        }
+
+        return total;
+    }
+
+    /*
+    Gets the number of recipes sold between two dates (dateRange)
+    Inputs:
+        dateRange: array containing a start date and an end date
+    Return:
+        [{
+            recipe: a recipe object
+            quantity: quantity of the recipe sold
+        }]
+    */
+    recipesSold(dateRange){
+        let recipeList = [];
+
+        for(let i = dateRange[0]; i <= dateRange[1]; i++){
+            for(let j = 0; j < this.transactions[i].recipes.length; j++){
+                let exists = false;
+                for(let k = 0; k < recipeList.length; k++){
+                    if(recipeList[k].recipe === this.transactions[i].recipes[j].recipe){
+                        exists = true;
+                        recipeList[k].quantity += this.transactions[i].recipes[j].quantity;
+                        break;
+                    }
+                }
+
+                if(!exists){
+                    recipeList.push({
+                        recipe: this.transactions[i].recipes[j].recipe,
+                        quantity: this.transactions[i].recipes[j].quantity
+                    });
+                }
+            }
+        }
+
+        return recipeList;
+    }
+
+    /*
+    Create revenue data for graphing
+    Input:
+        dateRange: [start index, end index] (this.transactionIndices)
+    Return:
+        [total revenue for each day]
+    */
+    graphDailyRevenue(dateRange){
+        if(!dateRange){
+            return false;
+        }
+
+        let dataList = new Array(30).fill(0);
+        let currentDate = this.transactions[dateRange[0]].date;
+        let arrayIndex = 0;
+
+        for(let i = dateRange[0]; i <= dateRange[1]; i++){
+            if(this.transactions[i].date.getDate() !== currentDate.getDate()){
+                currentDate = this.transactions[i].date;
+                arrayIndex++;
+            }
+
+            for(let j = 0; j < this.transactions[i].recipes.length; j++){
+                dataList[arrayIndex] += (this.transactions[i].recipes[j].recipe.price / 100) * this.transactions[i].recipes[j].quantity;
+            }
+        }
+
+        return dataList;
+    }
+    
+    /*
+    Groups all of the merchant's ingredients by their category
+    Return: [{
+        name: category name,
+        ingredients: [Ingredient Object]
+    }]
+    */
+    categorizeIngredients(){
+        let ingredientsByCategory = [];
+
+        for(let i = 0; i < this.ingredients.length; i++){
+            let categoryExists = false;
+            for(let j = 0; j < ingredientsByCategory.length; j++){
+                if(this.ingredients[i].ingredient.category === ingredientsByCategory[j].name){
+                    ingredientsByCategory[j].ingredients.push(this.ingredients[i]);
+
+                    categoryExists = true;
+                    break;
+                }
+            }
+
+            if(!categoryExists){
+                ingredientsByCategory.push({
+                    name: this.ingredients[i].ingredient.category,
+                    ingredients: [this.ingredients[i]]
+                });
+            }
+        }
+
+        return ingredientsByCategory;
+    }
+
+    unitizeIngredients(){
+        let ingredientsByUnit = [];
+
+        for(let i = 0; i < this.ingredients.length; i++){
+            let unitExists = false;
+            for(let j = 0; j < ingredientsByUnit.length; j++){
+                if(this.ingredients[i].ingredient.unit === ingredientsByUnit[j].name){
+                    ingredientsByUnit[j].ingredients.push(this.ingredients[i]);
+
+                    unitExists = true;
+                    break;
+                }
+            }
+
+            if(!unitExists){
+                ingredientsByUnit.push({
+                    name: this.ingredients[i].ingredient.unit,
+                    ingredients: [this.ingredients[i]]
+                });
+            }
+        }
+
+        return ingredientsByUnit;
+    }
+
+    getRecipesForIngredient(ingredient){
+        let recipes = [];
+
+        for(let i = 0; i < this.recipes.length; i++){
+            for(let j = 0; j < this.recipes[i].ingredients.length; j++){
+                if(this.recipes[i].ingredients[j].ingredient === ingredient){
+                    recipes.push(this.recipes[i]);
+                }
+            }
+        }
+
+        return recipes;
+    }
+}
+
+let convertToMain = (unit, quantity)=>{
+    let converted = 0;
+
+    if(merchant.units.mass.includes(unit)){
+        switch(unit){
+            case "g": converted = quantity; break;
+            case "kg": converted = quantity * 1000; break;
+            case "oz": converted = quantity * 28.3495; break;
+            case "lb": converted = quantity * 453.5924; break;
+        }
+    }else if(merchant.units.volume.includes(unit)){
+        switch(unit){
+            case "ml": converted = quantity / 1000; break;
+            case "l": converted = quantity; break;
+            case "tsp": converted = quantity / 202.8842; break;
+            case "tbsp": converted = quantity / 67.6278; break;
+            case "ozfl": converted = quantity / 33.8141; break;
+            case "cup": converted = quantity / 4.1667; break;
+            case "pt": converted = quantity / 2.1134; break;
+            case "qt": converted = quantity / 1.0567; break;
+            case "gal": converted = quantity * 3.7854; break;
+        }
+    }else if(merchant.units.length.includes(unit)){
+        switch(unit){
+            case "mm": converted = quantity / 1000; break;
+            case "cm": converted = quantity / 100; break;
+            case "m": converted = quantity; break;
+            case "in": converted = quantity / 39.3701; break;
+            case "ft": converted = quantity / 3.2808; break;
+        }
+    }else{
+        converted = quantity;
+    }
+
+    return converted;
+}
+
+module.exports = Merchant;

views/dashboardPage/js/Order.js

@@ -0,0 +1,56 @@
+class Order{
+    constructor(id, name, date, ingredients, parent){
+        this.id = id;
+        this.name = name;
+        this.date = new Date(date);
+        this.ingredients = [];
+        this.parent = parent;
+
+        for(let i = 0; i < ingredients.length; i++){
+            for(let j = 0; j < parent.ingredients.length; j++){
+                if(ingredients[i].ingredient === parent.ingredients[j].ingredient.id){
+                    this.ingredients.push({
+                        ingredient: parent.ingredients[j].ingredient,
+                        quantity: ingredients[i].quantity,
+                        price: ingredients[i].price
+                    });
+                }
+            }
+        }
+    }
+
+    convertPrice(unitType, unit, price){
+        if(unitType === "mass"){
+            switch(unit){
+                case "g": break;
+                case "kg": price *= 1000; break;
+                case "oz":  price *= 28.3495; break;
+                case "lb":  price *= 453.5924; break;
+            }
+        }else if(unitType === "volume"){
+            switch(unit){
+                case "ml": price /= 1000; break;
+                case "l": break;
+                case "tsp": price /= 202.8842; break;
+                case "tbsp": price /= 67.6278; break;
+                case "ozfl": price /= 33.8141; break;
+                case "cup": price /= 4.1667; break;
+                case "pt": price /= 2.1134; break;
+                case "qt": price /= 1.0567; break;
+                case "gal": price *= 3.7854; break;
+            }
+        }else if(unitType === "length"){
+            switch(unit){
+                case "mm": price /= 1000; break;
+                case "cm": price /= 100; break;
+                case "m": break;
+                case "in": price /= 39.3701; break;
+                case "ft": price /= 3.2808; break;
+            }
+        }
+
+        return price;
+    }
+}
+
+module.exports = Order;

views/dashboardPage/js/Recipe.js

@@ -0,0 +1,23 @@
+class Recipe{
+    constructor(id, name, price, ingredients, parent){
+        this.id = id;
+        this.name = name;
+        this.price = price;
+        this.parent = parent;
+        this.ingredients = [];
+
+        for(let i = 0; i < ingredients.length; i++){
+            for(let j = 0; j < parent.ingredients.length; j++){
+                if(ingredients[i].ingredient === parent.ingredients[j].ingredient.id){
+                    this.ingredients.push({
+                        ingredient: parent.ingredients[j].ingredient,
+                        quantity: ingredients[i].quantity
+                    });
+                    break;
+                }
+            }
+        }
+    }
+}
+
+module.exports = Recipe;

views/dashboardPage/js/Transaction.js

@@ -0,0 +1,22 @@
+class Transaction{
+    constructor(id, date, recipes, parent){
+        this.id = id;
+        this.parent = parent;
+        this.date = new Date(date);
+        this.recipes = [];
+
+        for(let i = 0; i < recipes.length; i++){
+            for(let j = 0; j < parent.recipes.length; j++){
+                if(recipes[i].recipe === parent.recipes[j].id){
+                    this.recipes.push({
+                        recipe: parent.recipes[j],
+                        quantity: recipes[i].quantity
+                    });
+                    break;
+                }
+            }
+        }
+    }
+}
+
+module.exports = Transaction;

views/dashboardPage/js/dashboard.js

@@ -14,746 +14,144 @@ const orderDetails = require("./orderDetails.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
 
-class Ingredient{
-    constructor(id, name, category, unitType, unit, parent){
-        this.id = id;
-        this.name = name;
-        this.category = category;
-        this.unitType = unitType;
-        this.unit = unit;
-        this.parent = parent;
-    }
-
-    convert(quantity){
-        if(this.unitType === "mass"){
-            switch(this.unit){
-                case "g": break;
-                case "kg": quantity /= 1000; break;
-                case "oz":  quantity /= 28.3495; break;
-                case "lb":  quantity /= 453.5924; break;
-            }
-        }else if(this.unitType === "volume"){
-            switch(this.unit){
-                case "ml": quantity *= 1000; break;
-                case "l": break;
-                case "tsp": quantity *= 202.8842; break;
-                case "tbsp": quantity *= 67.6278; break;
-                case "ozfl": quantity *= 33.8141; break;
-                case "cup": quantity *= 4.1667; break;
-                case "pt": quantity *= 2.1134; break;
-                case "qt": quantity *= 1.0567; break;
-                case "gal": quantity /= 3.7854; break;
-            }
-        }else if(this.unitType === "length"){
-            switch(this.unit){
-                case "mm": quantity *= 1000; break;
-                case "cm": quantity *= 100; break;
-                case "m": break;
-                case "in": quantity *= 39.3701; break;
-                case "ft": quantity *= 3.2808; break;
-            }
-        }
-
-        return quantity;
-    }
-}
-
-class Recipe{
-    constructor(id, name, price, ingredients, parent){
-        this.id = id;
-        this.name = name;
-        this.price = price;
-        this.parent = parent;
-        this.ingredients = [];
-
-        for(let i = 0; i < ingredients.length; i++){
-            for(let j = 0; j < parent.ingredients.length; j++){
-                if(ingredients[i].ingredient === parent.ingredients[j].ingredient.id){
-                    this.ingredients.push({
-                        ingredient: parent.ingredients[j].ingredient,
-                        quantity: ingredients[i].quantity
-                    });
-                    break;
-                }
-            }
-        }
-    }
-}
-
-class Transaction{
-    constructor(id, date, recipes, parent){
-        this.id = id;
-        this.parent = parent;
-        this.date = new Date(date);
-        this.recipes = [];
-
-        for(let i = 0; i < recipes.length; i++){
-            for(let j = 0; j < parent.recipes.length; j++){
-                if(recipes[i].recipe === parent.recipes[j].id){
-                    this.recipes.push({
-                        recipe: parent.recipes[j],
-                        quantity: recipes[i].quantity
-                    });
-                    break;
-                }
-            }
-        }
-    }
-}
-
-class Order{
-    constructor(id, name, date, ingredients, parent){
-        this.id = id;
-        this.name = name;
-        this.date = new Date(date);
-        this.ingredients = [];
-        this.parent = parent;
-
-        for(let i = 0; i < ingredients.length; i++){
-            for(let j = 0; j < parent.ingredients.length; j++){
-                if(ingredients[i].ingredient === parent.ingredients[j].ingredient.id){
-                    this.ingredients.push({
-                        ingredient: parent.ingredients[j].ingredient,
-                        quantity: ingredients[i].quantity,
-                        price: ingredients[i].price
-                    });
-                }
-            }
-        }
-    }
-
-    convertPrice(unitType, unit, price){
-        if(unitType === "mass"){
-            switch(unit){
-                case "g": break;
-                case "kg": price *= 1000; break;
-                case "oz":  price *= 28.3495; break;
-                case "lb":  price *= 453.5924; break;
-            }
-        }else if(unitType === "volume"){
-            switch(unit){
-                case "ml": price /= 1000; break;
-                case "l": break;
-                case "tsp": price /= 202.8842; break;
-                case "tbsp": price /= 67.6278; break;
-                case "ozfl": price /= 33.8141; break;
-                case "cup": price /= 4.1667; break;
-                case "pt": price /= 2.1134; break;
-                case "qt": price /= 1.0567; break;
-                case "gal": price *= 3.7854; break;
-            }
-        }else if(unitType === "length"){
-            switch(unit){
-                case "mm": price /= 1000; break;
-                case "cm": price /= 100; break;
-                case "m": break;
-                case "in": price /= 39.3701; break;
-                case "ft": price /= 3.2808; break;
-            }
-        }
+const Merchant = require("./Merchant.js");
+let merchant = new Merchant(data.merchant, data.transactions);
 
-        return price;
-    }
-}
+controller = {
+    openStrand: function(strand){
+        this.closeSidebar();
 
-class Merchant{
-    constructor(oldMerchant, transactions){
-        this.name = oldMerchant.name;
-        this.pos = oldMerchant.pos;
-        this.ingredients = [];
-        this.recipes = [];
-        this.transactions = [];
-        this.orders = [];
-        this.units = {
-            mass: ["g", "kg", "oz", "lb"],
-            volume: ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"],
-            length: ["mm", "cm", "m", "in", "foot"]
-        }
-        
-        for(let i = 0; i < oldMerchant.inventory.length; i++){
-            this.ingredients.push({
-                ingredient: new Ingredient(
-                    oldMerchant.inventory[i].ingredient._id,
-                    oldMerchant.inventory[i].ingredient.name,
-                    oldMerchant.inventory[i].ingredient.category,
-                    oldMerchant.inventory[i].ingredient.unitType,
-                    oldMerchant.inventory[i].defaultUnit,
-                    this
-                ),
-                quantity: oldMerchant.inventory[i].quantity
-            });
+        for(let strand of document.querySelectorAll(".strand")){
+            strand.style.display = "none";
         }
 
-        for(let i = 0; i < oldMerchant.recipes.length; i++){
-            this.recipes.push(new Recipe(
-                oldMerchant.recipes[i]._id,
-                oldMerchant.recipes[i].name,
-                oldMerchant.recipes[i].price,
-                oldMerchant.recipes[i].ingredients,
-                this
-            ));
+        let buttons = document.querySelectorAll(".menuButton");
+        for(let i = 0; i < buttons.length - 1; i++){
+            buttons[i].classList = "menuButton";
+            buttons[i].disabled = false;
         }
 
-        for(let i = 0; i < transactions.length; i++){
-            this.transactions.push(new Transaction(
-                transactions[i]._id,
-                transactions[i].date,
-                transactions[i].recipes,
-                this
-            ));
-        }
-    }
-
-    /*
-    Updates all specified item in the merchant's inventory and updates the page
-    If ingredient doesn't exist, add it
-    ingredients = {
-        ingredient: Ingredient object,
-        quantity: new quantity,
-        defaultUnit: the default unit to be displayed
-    }
-    remove = set true if removing
-    isOrder = set true if this is coming from an order
-    */
-    editIngredients(ingredients, remove = false, isOrder = false){
-        for(let i = 0; i < ingredients.length; i++){
-            let isNew = true;
-            for(let j = 0; j < merchant.ingredients.length; j++){
-                if(merchant.ingredients[j].ingredient === ingredients[i].ingredient){
-                    if(remove){
-                        merchant.ingredients.splice(j, 1);
-                    }else if(!remove && isOrder){
-                        merchant.ingredients[j].quantity += ingredients[i].quantity;
-                    }else{
-                        merchant.ingredients[j].quantity = ingredients[i].quantity;
-                    }
-    
-                    isNew = false;
-                    break;
-                }
-            }
-    
-            if(isNew){
-                merchant.ingredients.push({
-                    ingredient: ingredients[i].ingredient,
-                    quantity: parseFloat(ingredients[i].quantity),
-                    defaultUnit: ingredients[i].defaultUnit
-                });
-            }
-        }
-    
-        homeStrandObj.drawInventoryCheckCard();
-        ingredientsStrandObj.populateByProperty("category");
-        addIngredientsComp.isPopulated = false;
-        closeSidebar();
-    }
-
-    /*
-    Updates a recipe in the merchants list of recipes
-    Can create, edit or remove
-    recipe = [Recipe object]
-    remove = will remove recipe when true
-    */
-    editRecipes(recipes, remove = false){
-        let isNew = true;
-
-        for(let i = 0; i < recipes.length; i++){
-            for(let j = 0; j < this.recipes.length; j++){
-                if(recipes[i] === this.recipes[j]){
-                    if(remove){
-                        this.recipes.splice(j, 1);
-                    }else{
-                        this.recipes[j] = recipes[i];
-                    }
-
-                    isNew = false;
-                    break;
-                }
-            }
-
-            if(isNew){
-                merchant.recipes.push(recipes[i]);
-            }
-        }
-
-        transactionsStrandObj.isPopulated = false;
-        recipeBookStrandObj.populateRecipes();
-        closeSidebar();
-    }
-
-    /*
-    Updates a list of orders in the merchants list of orders
-    Create/edit/remove
-    orders = [Order object]
-    remove = will remove order when true
-    */
-    editOrders(orders, remove = false){
-        for(let i = 0; i < orders.length; i++){
-            let isNew = true;
-            for(let j = 0; j < this.orders.length; j++){
-                if(orders[i] === this.orders[j]){
-                    if(remove){
-                        this.orders.splice(j, 1);
-                    }else{
-                        this.orders[j] = orders[i];
-                    }
-
-                    isNew = false;
-                    break;
-                }
-            }
-
-            if(isNew){
-                this.orders.push(orders[i]);
-            }
-        }
-
-        ordersStrandObj.populate();
-        closeSidebar();
-    }
-
-    editTransactions(transaction, remove = false){
-        let isNew = true;
-        for(let i = 0; i < this.transactions.length; i++){
-            if(this.transactions[i] === transaction){
-                if(remove){
-                    this.transactions.splice(i, 1);
-                }
-
-                isNew = false;
+        let activeButton = {};
+        switch(strand){
+            case "home": 
+                activeButton = document.getElementById("homeBtn");
+                document.getElementById("homeStrand").style.display = "flex";
+                home.display(merchant);
                 break;
-            }
-        }
-
-        if(isNew){
-            this.transactions.push(transaction);
-            this.transactions.sort((a, b) => a.date > b.date ? 1 : -1);
-        }
-
-        transactionsStrandObj.isPopulated = false;
-        transactionsStrandObj.display();
-        closeSidebar();
-    }
-
-    /*
-    Gets the indices of two dates from transactions
-    Inputs
-    from: starting date
-    to: ending date (default to now)
-    Output
-    Array containing starting index and ending index
-    Note: Will return false if it cannot find both necessary dates
-    */
-    transactionIndices(from, to = new Date()){
-        let indices = [];
-
-        for(let i = 0; i < this.transactions.length; i++){
-            if(this.transactions[i].date > from){
-                indices.push(i);
+            case "ingredients": 
+                activeButton = document.getElementById("ingredientsBtn");
+                document.getElementById("ingredientsStrand").style.display = "flex";
+                ingredients.display(merchant);
                 break;
-            }
-        }
-
-        for(let i = this.transactions.length - 1; i >=0; i--){
-            if(this.transactions[i].date < to){
-                indices.push(i);
+            case "recipeBook":
+                activeButton = document.getElementById("recipeBookBtn");
+                document.getElementById("recipeBookStrand").style.display = "flex";
+                recipeBook.display();
+                break;
+            case "orders":
+                activeButton = document.getElementById("ordersBtn");
+                document.getElementById("ordersStrand").style.display = "flex";
+                orders.display();
+                break;
+            case "transactions":
+                activeButton = document.getElementById("transactionsBtn");
+                document.getElementById("transactionsStrand").style.display = "flex";
+                transactions.display();
                 break;
-            }
-        }
-
-        if(indices.length < 2){
-            return false;
         }
 
-        return indices;
-    }
+        activeButton.classList = "menuButton active";
+        activeButton.disabled = true;
 
-    revenue(indices){
-        let total = 0;
-
-        for(let i = indices[0]; i <= indices[1]; i++){
-            for(let j = 0; j < this.transactions[i].recipes.length; j++){
-                for(let k = 0; k < this.recipes.length; k++){
-                    if(this.transactions[i].recipes[j].recipe === this.recipes[k]){
-                        total += this.transactions[i].recipes[j].quantity * this.recipes[k].price;
-                    }
-                }
-            }
+        if(window.screen.availWidth <= 1000){
+            this.closeMenu();
         }
-
-        return total / 100;
-    }
+    },
 
     /*
-    Gets the quantity of each ingredient sold between two dates (dateRange)
-    Inputs
-    dateRange: list containing a start date and an end date
-    Return:
-        [{
-            ingredient: Ingredient object,
-            quantity: quantity of ingredient sold
-        }]
+    Open a specific sidebar
+    Input:
+    sidebar: the outermost element of the sidebar (must contain class sidebar)
     */
-    ingredientsSold(dateRange){
-        if(!dateRange){
-            return false;
-        }
-        
-        let recipes = this.recipesSold(dateRange);
-        let ingredientList = [];
-
-        for(let i = 0; i < recipes.length; i++){
-            for(let j = 0; j < recipes[i].recipe.ingredients.length; j++){
-                let exists = false;
+    openSidebar: function(sidebar, data = {}){
+        this.closeSidebar();
 
-                for(let k = 0; k < ingredientList.length; k++){
-                    if(ingredientList[k].ingredient === recipes[i].recipe.ingredients[j].ingredient){
-                        exists = true;
-                        ingredientList[k].quantity += recipes[i].quantity * recipes[i].recipe.ingredients[j].quantity;
-                        break;
-                    }
-                }
+        document.getElementById("sidebarDiv").classList = "sidebar";
+        document.getElementById(sidebar).style.display = "flex";
 
-                if(!exists){
-                    ingredientList.push({
-                        ingredient: recipes[i].recipe.ingredients[j].ingredient,
-                        quantity: recipes[i].quantity * recipes[i].recipe.ingredients[j].quantity
-                    });
-                }
-            }
+        switch(sidebar){
+            case "ingredientDetails":
+                ingredientDetails.display(merchant, data);
+                break;
         }
-    
-        return ingredientList;
-    }
 
-    singleIngredientSold(dateRange, ingredient){
-        let total = 0;
-
-        for(let i = dateRange[0]; i < dateRange[1]; i++){
-            for(let j = 0; j < this.transactions[i].recipes.length; j++){
-                for(let k = 0; k < this.transactions[i].recipes[j].recipe.ingredients.length; k++){
-                    if(this.transactions[i].recipes[j].recipe.ingredients[k].ingredient === ingredient.ingredient){
-                        total += this.transactions[i].recipes[j].recipe.ingredients[k].quantity;
-                        break;
-                    }
-                }
-            }
+        if(window.screen.availWidth <= 1000){
+            document.querySelector(".contentBlock").style.display = "none";
+            document.getElementById("mobileMenuSelector").style.display = "none";
+            document.getElementById("sidebarCloser").style.display = "block";
         }
+    },
 
-        return total;
-    }
-
-    /*
-    Gets the number of recipes sold between two dates (dateRange)
-    Inputs:
-        dateRange: array containing a start date and an end date
-    Return:
-        [{
-            recipe: a recipe object
-            quantity: quantity of the recipe sold
-        }]
-    */
-    recipesSold(dateRange){
-        let recipeList = [];
-
-        for(let i = dateRange[0]; i <= dateRange[1]; i++){
-            for(let j = 0; j < this.transactions[i].recipes.length; j++){
-                let exists = false;
-                for(let k = 0; k < recipeList.length; k++){
-                    if(recipeList[k].recipe === this.transactions[i].recipes[j].recipe){
-                        exists = true;
-                        recipeList[k].quantity += this.transactions[i].recipes[j].quantity;
-                        break;
-                    }
-                }
-
-                if(!exists){
-                    recipeList.push({
-                        recipe: this.transactions[i].recipes[j].recipe,
-                        quantity: this.transactions[i].recipes[j].quantity
-                    });
-                }
-            }
+    closeSidebar: function(){
+        let sidebar = document.querySelector("#sidebarDiv");
+        for(let i = 0; i < sidebar.children.length; i++){
+            sidebar.children[i].style.display = "none";
         }
+        sidebar.classList = "sidebarHide";
 
-        return recipeList;
-    }
-
-    /*
-    Create revenue data for graphing
-    Input:
-        dateRange: [start index, end index] (this.transactionIndices)
-    Return:
-        [total revenue for each day]
-    */
-    graphDailyRevenue(dateRange){
-        if(!dateRange){
-            return false;
+        if(window.screen.availWidth <= 1000){
+            document.querySelector(".contentBlock").style.display = "flex";
+            document.getElementById("mobileMenuSelector").style.display = "block";
+            document.getElementById("sidebarCloser").style.display = "none";
         }
+    },
 
-        let dataList = new Array(30).fill(0);
-        let currentDate = this.transactions[dateRange[0]].date;
-        let arrayIndex = 0;
-
-        for(let i = dateRange[0]; i <= dateRange[1]; i++){
-            if(this.transactions[i].date.getDate() !== currentDate.getDate()){
-                currentDate = this.transactions[i].date;
-                arrayIndex++;
-            }
-
-            for(let j = 0; j < this.transactions[i].recipes.length; j++){
-                dataList[arrayIndex] += (this.transactions[i].recipes[j].recipe.price / 100) * this.transactions[i].recipes[j].quantity;
-            }
-        }
-
-        return dataList;
-    }
     
-    /*
-    Groups all of the merchant's ingredients by their category
-    Return: [{
-        name: category name,
-        ingredients: [Ingredient Object]
-    }]
-    */
-    categorizeIngredients(){
-        let ingredientsByCategory = [];
-
-        for(let i = 0; i < this.ingredients.length; i++){
-            let categoryExists = false;
-            for(let j = 0; j < ingredientsByCategory.length; j++){
-                if(this.ingredients[i].ingredient.category === ingredientsByCategory[j].name){
-                    ingredientsByCategory[j].ingredients.push(this.ingredients[i]);
-
-                    categoryExists = true;
-                    break;
-                }
-            }
-
-            if(!categoryExists){
-                ingredientsByCategory.push({
-                    name: this.ingredients[i].ingredient.category,
-                    ingredients: [this.ingredients[i]]
-                });
-            }
-        }
-
-        return ingredientsByCategory;
-    }
 
-    unitizeIngredients(){
-        let ingredientsByUnit = [];
+    changeMenu: function(){
+        let menu = document.querySelector(".menu");
+        let buttons = document.querySelectorAll(".menuButton");
+        if(!menu.classList.contains("menuMinimized")){
+            menu.classList = "menu menuMinimized";
 
-        for(let i = 0; i < this.ingredients.length; i++){
-            let unitExists = false;
-            for(let j = 0; j < ingredientsByUnit.length; j++){
-                if(this.ingredients[i].ingredient.unit === ingredientsByUnit[j].name){
-                    ingredientsByUnit[j].ingredients.push(this.ingredients[i]);
-
-                    unitExists = true;
-                    break;
-                }
+            for(let button of buttons){
+                button.children[1].style.display = "none";
             }
 
-            if(!unitExists){
-                ingredientsByUnit.push({
-                    name: this.ingredients[i].ingredient.unit,
-                    ingredients: [this.ingredients[i]]
-                });
-            }
-        }
-
-        return ingredientsByUnit;
-    }
+            document.querySelector("#max").style.display = "none";
+            document.querySelector("#min").style.display = "flex";
 
-    getRecipesForIngredient(ingredient){
-        let recipes = [];
+            
+        }else if(menu.classList.contains("menuMinimized")){
+            menu.classList = "menu";
 
-        for(let i = 0; i < this.recipes.length; i++){
-            for(let j = 0; j < this.recipes[i].ingredients.length; j++){
-                if(this.recipes[i].ingredients[j].ingredient === ingredient){
-                    recipes.push(this.recipes[i]);
-                }
+            for(let button of buttons){
+                button.children[1].style.display = "block";
             }
-        }
-
-        return recipes;
-    }
-}
-
-let convertToMain = (unit, quantity)=>{
-    let converted = 0;
 
-    if(merchant.units.mass.includes(unit)){
-        switch(unit){
-            case "g": converted = quantity; break;
-            case "kg": converted = quantity * 1000; break;
-            case "oz": converted = quantity * 28.3495; break;
-            case "lb": converted = quantity * 453.5924; break;
-        }
-    }else if(merchant.units.volume.includes(unit)){
-        switch(unit){
-            case "ml": converted = quantity / 1000; break;
-            case "l": converted = quantity; break;
-            case "tsp": converted = quantity / 202.8842; break;
-            case "tbsp": converted = quantity / 67.6278; break;
-            case "ozfl": converted = quantity / 33.8141; break;
-            case "cup": converted = quantity / 4.1667; break;
-            case "pt": converted = quantity / 2.1134; break;
-            case "qt": converted = quantity / 1.0567; break;
-            case "gal": converted = quantity * 3.7854; break;
+            setTimeout(()=>{
+                document.querySelector("#max").style.display = "flex";
+                document.querySelector("#min").style.display = "none";
+            }, 150);
         }
-    }else if(merchant.units.length.includes(unit)){
-        switch(unit){
-            case "mm": converted = quantity / 1000; break;
-            case "cm": converted = quantity / 100; break;
-            case "m": converted = quantity; break;
-            case "in": converted = quantity / 39.3701; break;
-            case "ft": converted = quantity / 3.2808; break;
-        }
-    }else{
-        converted = quantity;
-    }
-
-    return converted;
-}
-
-/* 
-Switches to a different strand
-Input:
- name: name of the strand.  Must end with "Strand"
-*/
-window.changeStrand = (name)=>{
-    closeSidebar();
-
-    for(let strand of document.querySelectorAll(".strand")){
-        strand.style.display = "none";
-    }
-
-    let buttons = document.querySelectorAll(".menuButton");
-    for(let i = 0; i < buttons.length - 1; i++){
-        buttons[i].classList = "menuButton";
-        buttons[i].disabled = false;
-    }
-
-    let activeButton = {};
-    switch(name){
-        case 1: 
-            activeButton = document.getElementById("homeBtn");
-            document.getElementById("homeStrand").style.display = "flex";
-            home.display();
-            break;
-        case 2: 
-            activeButton = document.getElementById("ingredientsBtn");
-            document.getElementById("ingredientsStrand").style.display = "flex";
-            ingredients.display();
-            break;
-        case 3:
-            activeButton = document.getElementById("recipeBookBtn");
-            document.getElementById("recipeBookStrand").style.display = "flex";
-            recipeBook.display();
-            break;
-        case 4:
-            activeButton = document.getElementById("ordersBtn");
-            document.getElementById("ordersStrand").style.display = "flex";
-            orders.display();
-            break;
-        case 5:
-            activeButton = document.getElementById("transactionsBtn");
-            document.getElementById("transactionsStrand").style.display = "flex";
-            transactions.display();
-            break;
-    }
-
-    activeButton.classList = "menuButton active";
-    activeButton.disabled = true;
-
-    if(window.screen.availWidth <= 1000){
-        closeMenu();
-    }
-}
-
-//Close any open sidebar
-let closeSidebar = ()=>{
-    let sidebar = document.querySelector("#sidebarDiv");
-    for(let i = 0; i < sidebar.children.length; i++){
-        sidebar.children[i].style.display = "none";
-    }
-    sidebar.classList = "sidebarHide";
+    },
 
-    if(window.screen.availWidth <= 1000){
-        document.querySelector(".contentBlock").style.display = "flex";
-        document.getElementById("mobileMenuSelector").style.display = "block";
-        document.getElementById("sidebarCloser").style.display = "none";
-    }
-}
-
-/*
-Open a specific sidebar
-Input:
- sidebar: the outermost element of the sidebar (must contain class sidebar)
-*/
-let openSidebar = (sidebar)=>{
-    document.querySelector("#sidebarDiv").classList = "sidebar";
-
-    let sideBars = document.querySelector("#sidebarDiv").children;
-    for(let i = 0; i < sideBars.length; i++){
-        sideBars[i].style.display = "none";
-    }
-
-    sidebar.style.display = "flex";
-
-    if(window.screen.availWidth <= 1000){
+    openMenu: function(){
+        document.getElementById("menu").style.display = "flex";
         document.querySelector(".contentBlock").style.display = "none";
-        document.getElementById("mobileMenuSelector").style.display = "none";
-        document.getElementById("sidebarCloser").style.display = "block";
-    }
-}
-
-let changeMenu = ()=>{
-    let menu = document.querySelector(".menu");
-    let buttons = document.querySelectorAll(".menuButton");
-    if(!menu.classList.contains("menuMinimized")){
-        menu.classList = "menu menuMinimized";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{closeMenu()};
+    },
 
-        for(let button of buttons){
-            button.children[1].style.display = "none";
-        }
-
-        document.querySelector("#max").style.display = "none";
-        document.querySelector("#min").style.display = "flex";
-
-        
-    }else if(menu.classList.contains("menuMinimized")){
-        menu.classList = "menu";
-
-        for(let button of buttons){
-            button.children[1].style.display = "block";
-        }
-
-        setTimeout(()=>{
-            document.querySelector("#max").style.display = "flex";
-            document.querySelector("#min").style.display = "none";
-        }, 150);
+    closeMenu: function(){
+        document.getElementById("menu").style.display = "none";
+        document.querySelector(".contentBlock").style.display = "flex";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{openMenu()};
     }
 }
 
-let openMenu = ()=>{
-    document.getElementById("menu").style.display = "flex";
-    document.querySelector(".contentBlock").style.display = "none";
-    document.getElementById("mobileMenuSelector").onclick = ()=>{closeMenu()};
-}
-
-let closeMenu = ()=>{
-    document.getElementById("menu").style.display = "none";
-    document.querySelector(".contentBlock").style.display = "flex";
-    document.getElementById("mobileMenuSelector").onclick = ()=>{openMenu()};
-}
-
 if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
     changeMenu();
     document.getElementById("menuShifter2").style.display = "none";
 }
 
-merchant = new Merchant(data.merchant, data.transactions);
-home.display(merchant);
+controller.openStrand("home");

views/dashboardPage/js/home.js

@@ -5,9 +5,9 @@ module.exports = {
     display: function(merchant){
         if(!this.isPopulated){
             this.drawRevenueCard(merchant);
-            this.drawRevenueGraph();
-            this.drawInventoryCheckCard();
-            this.drawPopularCard();
+            this.drawRevenueGraph(merchant);
+            this.drawInventoryCheckCard(merchant);
+            this.drawPopularCard(merchant);
 
             this.isPopulated = true;
         }
@@ -36,7 +36,7 @@ module.exports = {
         document.querySelector("#revenueChange img").src = img;
     },
 
-    drawRevenueGraph: function(){
+    drawRevenueGraph: function(merchant){
         let graphCanvas = document.querySelector("#graphCanvas");
         let today = new Date();
 
@@ -67,7 +67,7 @@ module.exports = {
         }
     },
 
-    drawInventoryCheckCard: function(){
+    drawInventoryCheckCard: function(merchant){
         let num;
         if(merchant.ingredients.length < 5){
             num = merchant.ingredients.length;
@@ -107,7 +107,7 @@ module.exports = {
         document.getElementById("inventoryCheck").onclick = ()=>{this.submitInventoryCheck()};
     },
 
-    drawPopularCard: function(){
+    drawPopularCard: function(merchant){
         let dataArray = [];
         let now = new Date();
         let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);

views/dashboardPage/js/ingredientDetails.js

@@ -1,10 +1,11 @@
 module.exports = {
     ingredient: {},
 
-    display: function(ingredient){
+    display: function(merchant, ingredient){
         this.ingredient = ingredient;
 
-        sidebar = document.querySelector("#ingredientDetails");
+        document.getElementById("editIngBtn").onclick = ()=>{this.edit()};
+        document.getElementById("removeIngBtn").onclick = ()=>{this.remove(merchant)};
 
         document.querySelector("#ingredientDetails p").innerText = ingredient.ingredient.category;
         document.querySelector("#ingredientDetails h1").innerText = ingredient.ingredient.name;
@@ -78,11 +79,9 @@ module.exports = {
                 button.classList.add("unitActive");
             }
         }
-
-        openSidebar(sidebar);
     },
 
-    remove: function(){
+    remove: function(merchant){
         for(let i = 0; i < merchant.recipes.length; i++){
             for(let j = 0; j < merchant.recipes[i].ingredients.length; j++){
                 if(this.ingredient.ingredient === merchant.recipes[i].ingredients[j].ingredient){

views/dashboardPage/js/ingredients.js

@@ -2,15 +2,15 @@ module.exports = {
     isPopulated: false,
     ingredients: [],
 
-    display: function(){
+    display: function(merchant){
         if(!this.isPopulated){
-            this.populateByProperty("category");
+            this.populateByProperty("category", merchant);
 
             this.isPopulated = true;
         }
     },
 
-    populateByProperty: function(property){
+    populateByProperty: function(property, merchant){
         let categories;
         if(property === "category"){
             categories = merchant.categorizeIngredients();
@@ -40,7 +40,7 @@ module.exports = {
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
                 ingredientDiv.children[2].innerText = `${ingredient.ingredient.convert(ingredient.quantity).toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
-                ingredientDiv.onclick = ()=>{ingredientDetailsComp.display(ingredient)};
+                ingredientDiv.onclick = ()=>{controller.openSidebar("ingredientDetails", ingredient)};
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
 

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -1,20 +1,20 @@
 <div id="ingredientDetails">
     <div class="sidebarIconButtons mobileHide">
-        <button class="iconButton" onclick="closeSidebar()">
+        <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>
 
-        <button class="iconButton" onclick="ingredientDetailsComp.edit()">
+        <button id="editIngBtn" class="iconButton">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M12 20h9"></path>
                 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
             </svg>
         </button>
 
-        <button class="iconButton" onclick="ingredientDetailsComp.remove()">
+        <button id="removeIngBtn" class="iconButton">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="3 6 5 6 21 6"></polyline>
                 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>