Merge branch 'development'

controllers/merchantData.js

@@ -79,12 +79,12 @@ module.exports = {
                 axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${req.session.merchantId}/items?access_token=${req.session.accessToken}`)
                     .then((response)=>{
                         let recipes = [];
-                        for(let item of response.data.elements){
+                        for(let i = 0; i < response.data.elements.length; i++){
                             let recipe = new Recipe({
-                                posId: item.id,
+                                posId: response.data.elements[i].id,
                                 merchant: merchant,
-                                name: item.name,
-                                price: item.price,
+                                name: response.data.elements[i].name,
+                                price: response.data.elements[i].price,
                                 ingredients: []
                             });
 

controllers/orderData.js

@@ -42,6 +42,52 @@ module.exports = {
             });
     },
 
+    /*
+    POST - retrieves a list of transactions based on the filter
+    req.body = {
+        startDate: starting date to filter on,
+        endDate: ending date to filter on,
+        ingredients: list of recipes.to filter on
+    }
+    */
+    orderFilter: function(req, res){
+        if(!req.session.user){
+            req.session.error = "MUST BE LOGGED IN TO DO THAT";
+            return res.redirect("/");
+        }
+
+        let objectifiedIngredients = [];
+        for(let i = 0; i < req.body.ingredients.length; i++){
+            objectifiedIngredients.push(new ObjectId(req.body.ingredients[i]));
+        }
+        let startDate = new Date(req.body.startDate);
+        let endDate = new Date(req.body.endDate);
+        endDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);
+        Order.aggregate([
+            {$match: {
+                merchant: new ObjectId(req.session.user),
+                date: {
+                    $gte: startDate,
+                    $lt: endDate
+                },
+                ingredients: {
+                    $elemMatch: {
+                        ingredient: {
+                            $in: objectifiedIngredients
+                        }
+                    }
+                }
+            }},
+            {$sort: {date: 1}}
+        ])
+            .then((orders)=>{
+                return res.json(orders);
+            })
+            .catch((err)=>{
+                return res.json("ERROR: UNABLE TO RETRIEVE YOUR TRANSACTIONS");
+            });
+    },
+
     /*
     POST - Creates a new order from the site
     req.body = {
@@ -72,6 +118,7 @@ module.exports = {
                 res.json(response);
             })
             .catch((err)=>{
+                console.log(err);
                 return res.json("ERROR: UNABLE TO SAVE ORDER");
             });
 

controllers/otherData.js

@@ -58,11 +58,11 @@ module.exports = {
         let authorizationCode = "";
         let merchantId = "";
 
-        for(let str of dataArr){
-            if(str.slice(0, str.indexOf("=")) === "merchant_id"){
-                merchantId = str.slice(str.indexOf("=") + 1);
-            }else if(str.slice(0, str.indexOf("=")) === "code"){
-                authorizationCode = str.slice(str.indexOf("=") + 1);
+        for(let i = 0; i < dataArr.length; i++){
+            if(dataArr[i].slice(0, dataArr[i].indexOf("=")) === "merchant_id"){
+                merchantId = dataArr[i].slice(dataArr[i].indexOf("=") + 1);
+            }else if(dataArr[i].slice(0, dataArr[i].indexOf("=")) === "code"){
+                authorizationCode = dataArr[i].slice(dataArr[i].indexOf("=") + 1);
             }
         }
 

controllers/recipeData.js

@@ -158,10 +158,9 @@ module.exports = {
             return res.redirect("/");
         }
 
-        Merchant.find({_id: req.session.user})
+        Merchant.findOne({_id: req.session.user})
             .populate("recipes")
-            .then((response)=>{
-                merchant = response[0];
+            .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();
@@ -176,23 +175,23 @@ module.exports = {
                             }
                         }
 
-                        for(let recipe of deletedRecipes){
-                            for(let i = 0; i < merchant.recipes.length; i++){
-                                if(recipe._id === merchant.recipes[i]._id){
-                                    merchant.recipes.splice(i, 1);
+                        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 recipe of result.data.elements){
+                        for(let i = 0; i < result.data.elements.length; i++){
                             let newRecipe = new Recipe({
-                                posId: recipe.id,
+                                posId: result.data.elements[i].id,
                                 merchant: merchant._id,
-                                name: recipe.name,
+                                name: result.data.elements[i].name,
                                 ingredients: [],
-                                price: recipe.price
+                                price: result.data.elements[i].price
                             });
 
                             merchant.recipes.push(newRecipe);

controllers/renderer.js

@@ -1,8 +1,9 @@
 const axios = require("axios");
 const ObjectId = require("mongoose").Types.ObjectId;
 
-const Merchant = require("../models/merchant");
-const Transaction = require("../models/transaction");
+const Merchant = require("../models/merchant.js");
+const Transaction = require("../models/transaction.js");
+const Activity = require("../models/activity.js");
 
 module.exports = {
     /*
@@ -11,6 +12,15 @@ module.exports = {
     Renders landingPage
     */
     landingPage: function(req, res){
+        let activity = new Activity({
+            ipAddr: req.headers['x-forwarded-for'] || req.connection.remoteAddress,
+            merchant: req.session.user,
+            route: "landing",
+            date: new Date()
+        })
+            .save()
+            .catch(()=>{});
+
         let error = {};
         let isLoggedIn = req.session.isLoggedIn || false;
         if(req.session.error){
@@ -33,31 +43,74 @@ module.exports = {
             req.session.error = "MUST BE LOGGED IN TO DO THAT";
             return res.redirect("/");
         }
-
-        Merchant.findOne({_id: req.session.user}, {password: 0, createdAt: 0})
+        let activity = new Activity({
+            ipAddr: req.headers['x-forwarded-for'] || req.connection.remoteAddress,
+            merchant: req.session.user,
+            route: "dashboard",
+            date: new Date()
+        })
+            .save()
+            .catch(()=>{});
+
+        Merchant.findOne(
+            {_id: req.session.user},
+            {
+                name: 1,
+                pos: 1,
+                posId: 1,
+                posAccessToken: 1,
+                lastUpdatedTime: 1,
+                inventory: 1,
+                recipes: 1
+            }
+        )
             .populate("inventory.ingredient")
             .populate("recipes")
-            .then((merchant)=>{
+            .then(async (merchant)=>{
+                let promiseArray = [];
                 if(merchant.pos === "clover"){
-                    axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${merchant.posId}/orders?filter=clientCreatedTime>=${merchant.lastUpdatedTime}&expand=lineItems&access_token=${merchant.posAccessToken}`)
-                        .then((result)=>{
+                    const subscriptionCheck = axios.get(`${process.env.CLOVER_ADDRESS}/v3/apps/${process.env.SUBLINE_CLOVER_APPID}/merchants/${merchant.posId}/billing_info?access_token=${merchant.posAccessToken}`);
+                    const transactionRetrieval = axios.get(`${process.env.CLOVER_ADDRESS}/v3/merchants/${merchant.posId}/orders?filter=modifiedTime>=${merchant.lastUpdatedTime}&expand=lineItems&expand=payment&access_token=${merchant.posAccessToken}`);
+                    await Promise.all([subscriptionCheck, transactionRetrieval])
+                        .then(async (response)=>{
+                            if(response[0].data.status !== "ACTIVE"){
+                                req.session.error = "SUBSCRIPTION EXPIRED.  PLEASE RENEW ON CLOVER";
+                                return res.redirect("/");
+                            }
+
+                            const updatedTime = Date.now();
+                            
+                            //Create Subline transactions from Clover Transactions
                             let transactions = [];
-                            for(let order of result.data.elements){
+                            for(let i = 0; i < response[1].data.elements.length; i++){
+                                let order = response[1].data.elements[i];
+                                if(order.paymentState !== "PAID"){
+                                    break;
+                                }
                                 let newTransaction = new Transaction({
                                     merchant: merchant._id,
                                     date: new Date(order.createdTime),
-                                    device: order.device.id
+                                    device: order.device.id,
+                                    posId: order.id
                                 });
 
-                                for(let item of order.lineItems.elements){
-                                    let recipe = merchant.recipes.find(r => r.posId === item.item.id);
+                                //Go through lineItems from Clover
+                                //Get the appropriate recipe from Subline
+                                //Add it to the transaction or increment if existing
+                                for(let j = 0; j < order.lineItems.elements.length; j++){
+                                    let recipe = {}
+                                    for(let k = 0; k < merchant.recipes.length; k++){
+                                        if(merchant.recipes[k].posId === order.lineItems.elements[j].item.id){
+                                            recipe = merchant.recipes[k];
+                                            break;
+                                        }
+                                    }
+
                                     if(recipe){
-                                        //Search and increment/add instead of just push
-                                        // newTransaction.recipes.push(recipe._id);
                                         let isNewRecipe = true;
-                                        for(let newRecipe of newTransaction.recipes){
-                                            if(newRecipe.recipe === recipe._id){
-                                                newRecipe.quantity++;
+                                        for(let k = 0; k < newTransaction.recipes.length; k++){
+                                            if(newTransaction.recipes[k].recipe === recipe._id){
+                                                newTransaction.recipes[k].quantity++;
                                                 isNewRecipe = false;
                                                 break;
                                             }
@@ -70,92 +123,69 @@ module.exports = {
                                             });
                                         }
 
-                                        //End modifications
-                                        for(let ingredient of recipe.ingredients){
+                                        //Subtract ingredients from merchants total for each ingredient in a recipe
+                                        for(let k = 0; k < recipe.ingredients.length; k++){
                                             let inventoryIngredient = {};
-                                            for(let invItem of merchant.inventory){
-                                                if(invItem.ingredient._id.toString() === ingredient.ingredient._id.toString()){
-                                                    inventoryIngredient = invItem;
+                                            for(let l = 0; l < merchant.inventory.length; l++){
+                                                if(merchant.inventory[l].ingredient._id.toString() === recipe.ingredients[k].ingredient._id.toString()){
+                                                    inventoryIngredient = merchant.inventory[l];
+                                                    break;
                                                 }
                                             }
-                                            inventoryIngredient.quantity = (inventoryIngredient.quantity - ingredient.quantity).toFixed(2);
+                                            inventoryIngredient.quantity = inventoryIngredient.quantity - ingredient.quantity;
                                         }
                                     }
                                 }
 
                                 transactions.push(newTransaction);
-                                merchant.lastUpdatedTime = Date.now();
                             }
 
-                            merchant.save()
-                                .then((updatedMerchant)=>{
-                                    updatedMerchant.accessToken = undefined;
-                                    merchant = updatedMerchant;
-                                    
-                                    Transaction.create(transactions);
-
-                                    let date = new Date();
-                                    let firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1);
-
-                                    return Transaction.aggregate([
-                                        {$match: {
-                                            merchant: new ObjectId(req.session.user),
-                                            date: {$gte: firstDay}
-                                        }},
-                                        {$sort: {date: 1}},
-                                        {$project: {
-                                            date: 1,
-                                            recipes: 1
-                                        }}
-                                    ])
-                                })
-                                .then((transactions)=>{
-                                    res.render("dashboardPage/dashboard", {merchant: merchant, transactions: transactions});
-                                })
-                                .catch((err)=>{
-                                    let errorMessage = "Error: unable to update data";
-                                    
-                                    merchant.password = undefined;
-                                    return res.render("dashboardPage/dashboard", {merchant: merchant, error: errorMessage, transactions: []});
-                                });
+                            merchant.lastUpdatedTime = updatedTime;
+
+                            //Remove any existing orders so that they can ber replaced
+                            let ids = [];
+                            for(let i = 0; i < transactions.length; i++){
+                                ids.push(transactions[i].posId);
+                            }
+                            Transaction.deleteMany({posId: {$in: ids}});
+
+                            promiseArray.push(Transaction.create(transactions));
                         })
                         .catch((err)=>{
-                            let errorMessage = "There was an error and we could not retrieve your transactions from Clover";
-
-                            merchant.password = undefined;
-                            return res.render("dashboardPage/dashboard", {merchant: merchant, error: errorMessage, transactions: []});
+                            req.session.error = "ERROR: UNABLE TO RETRIEVE DATA FROM CLOVER";
+                            return res.redirect("/");
                         });
-                }else if(merchant.pos === "none"){
-                    merchant.password = undefined;
-
-                    let date = new Date();
-                    let firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1);
-
-                    Transaction.aggregate([
-                        {$match: {
-                            merchant: new ObjectId(req.session.user),
-                            date: {$gte: firstDay},
-                        }},
-                        {$sort: {date: 1}},
-                        {$project: {
-                            date: 1,
-                            recipes: 1
-                        }}
-                    ])
-                        .then((transactions)=>{
-                            return res.render("dashboardPage/dashboard", {merchant: merchant, transactions: transactions})
-                        })
-                        .catch((err)=>{});
-                        
-                }else{
-                    req.session.error = "ERROR: WEBSITE PANIC!";
-                    
-                    return res.redirect("/");
                 }
+
+                return Promise.all([merchant.save()].concat(promiseArray));
+            })
+            .then((response)=>{
+                let date = new Date();
+                let firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1);
+
+                Transaction.aggregate([
+                    {$match: {
+                        merchant: new ObjectId(req.session.user),
+                        date: {$gte: firstDay},
+                    }},
+                    {$sort: {date: 1}},
+                    {$project: {
+                        date: 1,
+                        recipes: 1
+                    }}
+                ])
+                    .then((transactions)=>{
+                        response[0]._id = undefined;
+                        response[0].posAccessToken = undefined;
+                        response[0].lastUpdatedTime = undefined;
+                        response[0].accountStatus = undefined;
+
+                        return res.render("dashboardPage/dashboard", {merchant: response[0], transactions: transactions});
+                    })
+                    .catch((err)=>{});
             })
             .catch((err)=>{
-                req.session.error = "ERROR: COULD NOT RETRIEVE USER DATA";
-                
+                req.session.error = "ERROR: UNABLE TO RETRIEVE USER DATA";
                 return res.redirect("/");
             });
     },

controllers/transactionData.js

@@ -1,59 +1,54 @@
 const Transaction = require("../models/transaction");
 const Merchant = require("../models/merchant");
 
+const ObjectId = require("mongoose").Types.ObjectId;
+
 module.exports = {
     /*
-    GET - Creates 5000 transactions for logged in merchant for testing
+    POST - retrieves a list of transactions based on the filter
+    req.body = {
+        startDate: starting date to filter on,
+        endDate: ending date to filter on,
+        recipes: list of recipes to filter on
+    }
+    NOTE: May be a good idea to search recipes with for looping rather than query
+        Needs some testing and playing with if so
     */
-    populate: function(req, res){
+    getTransactions: function(req, res){
         if(!req.session.user){
-            res.session.error = "Must be logged in to do that";
+            req.session.error = "MUST BE LOGGED IN TO DO THAT";
             return res.redirect("/");
         }
 
-        function randomDate() {
-            let now = new Date();
-            let start = new Date();
-            start.setFullYear(now.getFullYear() - 1);
-            return new Date(start.getTime() + Math.random() * (now.getTime() - start.getTime()));
+        let objectifiedRecipes = [];
+        for(let i = 0; i < req.body.recipes.length; i++){
+            objectifiedRecipes.push(new ObjectId(req.body.recipes[i]));
         }
-
-        Merchant.findOne({_id: req.session.user})
-            .then((merchant)=>{
-                let newTransactions = [];
-
-                for(let i = 0; i < 5000; i++){
-                    let newTransaction = new Transaction({
-                        merchant: merchant._id,
-                        date: randomDate(),
-                        recipes: []
-                    });
-
-                    let numberOfRecipes = Math.floor((Math.random() * 5) + 1);
-
-                    for(let j = 0; j < numberOfRecipes; j++){
-                        let recipeNumber = Math.floor(Math.random() * merchant.recipes.length);
-                        let randQuantity = Math.floor((Math.random() * 3) + 1);
-
-                        newTransaction.recipes.push({
-                            recipe: merchant.recipes[recipeNumber],
-                            quantity: randQuantity
-                        });
+        let startDate = new Date(req.body.startDate);
+        let endDate = new Date(req.body.endDate);
+        endDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);
+        Transaction.aggregate([
+            {$match: {
+                merchant: new ObjectId(req.session.user),
+                date: {
+                    $gte: startDate,
+                    $lt: endDate
+                },
+                recipes: {
+                    $elemMatch: {
+                        recipe: {
+                            $in: objectifiedRecipes
+                        }
                     }
-
-                    newTransactions.push(newTransaction);
                 }
-
-                Transaction.create(newTransactions)
-                    .then((transactions)=>{
-                        return res.redirect("/dashboard");
-                    })
-                    .catch((err)=>{
-                        return;
-                    });
+            }},
+            {$sort: {date: 1}}
+        ])
+            .then((transactions)=>{
+                return res.json(transactions);
             })
             .catch((err)=>{
-                return;
+                return res.json("ERROR: UNABLE TO RETRIEVE YOUR TRANSACTIONS");
             });
     },
 
@@ -105,5 +100,60 @@ module.exports = {
             .catch((err)=>{
                 return res.json("ERROR: UNABLE TO DELETE TRANSACTION");
             });
+    },
+
+    /*
+    GET - Creates 5000 transactions for logged in merchant for testing
+    */
+    populate: function(req, res){
+        if(!req.session.user){
+            res.session.error = "Must be logged in to do that";
+            return res.redirect("/");
+        }
+
+        function randomDate() {
+            let now = new Date();
+            let start = new Date();
+            start.setFullYear(now.getFullYear() - 1);
+            return new Date(start.getTime() + Math.random() * (now.getTime() - start.getTime()));
+        }
+
+        Merchant.findOne({_id: req.session.user})
+            .then((merchant)=>{
+                let newTransactions = [];
+
+                for(let i = 0; i < 5000; i++){
+                    let newTransaction = new Transaction({
+                        merchant: merchant._id,
+                        date: randomDate(),
+                        recipes: []
+                    });
+
+                    let numberOfRecipes = Math.floor((Math.random() * 5) + 1);
+
+                    for(let j = 0; j < numberOfRecipes; j++){
+                        let recipeNumber = Math.floor(Math.random() * merchant.recipes.length);
+                        let randQuantity = Math.floor((Math.random() * 3) + 1);
+
+                        newTransaction.recipes.push({
+                            recipe: merchant.recipes[recipeNumber],
+                            quantity: randQuantity
+                        });
+                    }
+
+                    newTransactions.push(newTransaction);
+                }
+
+                Transaction.create(newTransactions)
+                    .then((transactions)=>{
+                        return res.redirect("/dashboard");
+                    })
+                    .catch((err)=>{
+                        return;
+                    });
+            })
+            .catch((err)=>{
+                return;
+            });
     }
 }

models/activity.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const ActivitySchema = new mongoose.Schema({
+    ipAddr: String,
+    merchant: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "Merchant"
+    },
+    route: String,
+    date: {
+        type: Date,
+        required: true
+    }
+});
+
+module.exports = mongoose.model("Activity", ActivitySchema);

models/transaction.js

@@ -20,7 +20,8 @@ const TransactionSchema = new mongoose.Schema({
             type: Number,
             min: [0, "Must be a positive number"]
         }
-    }]
+    }],
+    posId: String
 });
 
 module.exports = mongoose.model("Transaction", TransactionSchema);

package.json

@@ -5,7 +5,8 @@
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app.js"
+    "start": "node app.js",
+    "watch-js": "watchify views/dashboardPage/js/dashboard.js -o views/dashboardPage/bundle.js"
   },
   "repository": {
     "type": "git",
@@ -25,5 +26,10 @@
     "ejs": "^2.7.1",
     "express": "^4.17.1",
     "mongoose": "^5.7.4"
+  },
+  "devDependencies": {
+    "browserify": "^16.5.1",
+    "tinyify": "^2.5.2",
+    "watchify": "^3.11.1"
   }
 }

routes.js

@@ -34,11 +34,13 @@ module.exports = function(app){
 
     //Orders
     app.get("/order", orderData.getOrders);
-    app.post("/order", orderData.createOrder);
+    app.post("/order", orderData.orderFilter);
+    app.post("/order/create", orderData.createOrder);
     app.delete("/order/:id", orderData.removeOrder);
 
     //Transactions
-    app.post("/transaction", transactionData.createTransaction);
+    app.post("/transaction", transactionData.getTransactions);
+    app.post("/transaction/create", transactionData.createTransaction);
     app.delete("/transaction/:id", transactionData.remove);
     app.get("/populatesometransactions", transactionData.populate);
 

views/dashboardPage/bundle.js

@@ -1 +1,3128 @@
-console.error("Error: Cannot find module '/home/leemorgan/projects/subline/InventoryManagement/views/dashboardPage/js/dashboard.js' from '/home/leemorgan/projects/subline/InventoryManagement'");
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+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;
+},{}],2:[function(require,module,exports){
+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"],
+            other: ["each"]
+        }
+        
+        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
+                });
+            }
+        }
+    
+        controller.updateData("ingredient");
+        controller.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]);
+            }
+        }
+
+        controller.updateData("recipe");
+        controller.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]);
+            }
+        }
+
+        controller.updateData("order");
+        controller.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);
+        }
+
+        controller.updateData("transaction");
+        controller.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;
+    }
+}
+
+module.exports = Merchant;
+},{"./Ingredient.js":1,"./Recipe.js":4,"./Transaction.js":5}],3:[function(require,module,exports){
+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;
+},{}],4:[function(require,module,exports){
+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;
+},{}],5:[function(require,module,exports){
+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;
+},{}],6:[function(require,module,exports){
+module.exports = {
+    isPopulated: false,
+    fakeMerchant: {},
+    chosenIngredients: [],
+
+    display: function(Merchant){
+        if(!this.isPopulated){
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
+            fetch("/ingredients")
+                .then((response) => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        for(let i = 0; i < merchant.ingredients.length; i++){
+                            for(let j = 0; j < response.length; j++){
+                                if(merchant.ingredients[i].ingredient.id === response[j]._id){
+                                    response.splice(j, 1);
+                                    break;
+                                }
+                            }
+                        }
+                        
+                        for(let i = 0; i < response.length; i++){
+                            response[i] = {ingredient: response[i]}
+                        }
+                        this.fakeMerchant = new Merchant({
+                                name: "none",
+                                inventory: response,
+                                recipes: [],
+                            },
+                            []
+                        );
+
+                        this.populateAddIngredients(true);
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("UNABLE TO RETRIEVE DATA");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+
+            this.isPopulated = true;
+        }
+    },
+
+    populateAddIngredients: function(newRequest = false){
+        let addIngredientsDiv = document.getElementById("addIngredientList");
+        let categoryTemplate = document.getElementById("addIngredientsCategory");
+        let ingredientTemplate = document.getElementById("addIngredientsIngredient");
+
+        let categories = this.fakeMerchant.categorizeIngredients();
+
+        while(addIngredientsDiv.children.length > 0){
+            addIngredientsDiv.removeChild(addIngredientsDiv.firstChild);
+        }
+        for(let i = 0; i < categories.length; i++){
+            let categoryDiv = categoryTemplate.content.children[0].cloneNode(true);
+            categoryDiv.children[0].children[0].innerText = categories[i].name;
+            categoryDiv.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(categoryDiv)};
+            categoryDiv.children[1].style.display = "none";
+            categoryDiv.children[0].children[1].children[1].style.display = "none";
+
+            addIngredientsDiv.appendChild(categoryDiv);
+            
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
+                ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
+                ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
+
+                categoryDiv.children[1].appendChild(ingredientDiv);
+            }
+        }
+
+        if(newRequest){
+            let myIngredients = document.getElementById("myIngredients");
+            while(myIngredients.children.length > 0){
+                myIngredients.removeChild(myIngredients.firstChild);
+            }
+        }
+
+        document.getElementById("addIngredientsBtn").onclick = ()=>{this.submit()};
+        document.getElementById("openNewIngredient").onclick = ()=>{controller.openSidebar("newIngredient")};
+    },
+
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
+    addOne: function(element){
+        element.parentElement.removeChild(element);
+        document.getElementById("myIngredients").appendChild(element);
+        document.getElementById("myIngredientsDiv").style.display = "flex";
+
+        for(let i = 0; i < this.fakeMerchant.ingredients.length; i++){
+            if(this.fakeMerchant.ingredients[i].ingredient === element.ingredient){
+                this.fakeMerchant.ingredients.splice(i, 1);
+                this.chosenIngredients.push(element.ingredient);
+                break;
+            }
+        }
+
+        let input = document.createElement("input");
+        input.type = "number";
+        input.min = "0";
+        input.step = "0.01";
+        input.placeholder = "QUANTITY";
+        element.insertBefore(input, element.children[1]);
+
+        let select = element.children[2];
+        select.style.display = "block";
+        let units = merchant.units[element.ingredient.unitType];
+        for(let i = 0; i < units.length; i++){
+            let option = document.createElement("option");
+            option.innerText = units[i].toUpperCase();
+            option.type = element.ingredient.unitType;
+            option.value = units[i];
+            select.appendChild(option);
+        }
+
+        element.children[3].innerText = "-";
+        element.children[3].onclick = ()=>{this.removeOne(element)};
+    },
+
+    removeOne: function(element){
+        element.parentElement.removeChild(element);
+
+        element.removeChild(element.children[1]);
+
+        let select = element.children[1];
+        while(select.children.length > 0){
+            select.removeChild(select.firstChild);
+        }
+        select.style.display = "none";
+
+        element.children[2].innerText = "+";
+        element.children[2].onclick = ()=>{this.addOne(element)};
+
+        if(document.getElementById("myIngredients").children.length === 0){
+            document.getElementById("myIngredientsDiv").style.display = "none";
+        }
+
+        for(let i = 0; i < this.chosenIngredients.length; i++){
+            if(this.chosenIngredients[i] === element.ingredient){
+                this.chosenIngredients.splice(i, 1);
+                this.fakeMerchant.ingredients.push({
+                    ingredient: element.ingredient
+                });
+                break;
+            }
+        }
+        
+        this.populateAddIngredients();
+    },
+
+    submit: function(){
+        let ingredients = document.getElementById("myIngredients").children;
+        let newIngredients = [];
+        let fetchable = [];
+
+        for(let i = 0; i < ingredients.length; i++){
+            let quantity = ingredients[i].children[1].value;
+            let unit = ingredients[i].children[2].value;
+
+            if(quantity === ""){
+                banner.createError("PLEASE ENTER A QUANTITY FOR EACH INGREDIENT YOU WANT TO ADD TO YOUR INVENTORY");
+                return;
+            }
+            quantity = controller.convertToMain(unit, quantity);
+
+            let newIngredient = {
+                ingredient: ingredients[i].ingredient,
+                quantity: quantity
+            }
+            newIngredient.ingredient.unit = unit;
+
+            newIngredients.push(newIngredient);
+
+            fetchable.push({
+                id: ingredients[i].ingredient.id,
+                quantity: quantity,
+                defaultUnit: unit
+            });
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/merchant/ingredients/add", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(fetchable)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editIngredients(newIngredients);
+                    this.isPopulated = false;
+                    banner.createNotification("ALL INGREDIENTS ADDED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+},{}],7:[function(require,module,exports){
+const home = require("./home.js");
+const ingredients = require("./ingredients.js");
+const recipeBook = require("./recipeBook.js");
+const orders = require("./orders.js");
+const transactions = require("./transactions.js");
+
+const addIngredients = require("./addIngredients.js");
+const ingredientDetails = require("./ingredientDetails.js");
+const newIngredient = require("./newIngredient.js");
+const newOrder = require("./newOrder.js");
+const newRecipe = require("./newRecipe.js");
+const newTransaction = require("./newTransaction.js");
+const orderDetails = require("./orderDetails.js");
+const recipeDetails = require("./recipeDetails.js");
+const transactionDetails = require("./transactionDetails.js");
+
+const Merchant = require("./Merchant.js");
+const Ingredient = require("./Ingredient.js");
+const Recipe = require("./Recipe.js");
+const Order = require("./Order.js");
+const Transaction = require("./Transaction.js");
+
+merchant = new Merchant(data.merchant, data.transactions);
+
+controller = {
+    openStrand: function(strand){
+        this.closeSidebar();
+
+        let strands = document.querySelectorAll(".strand");
+        for(let i = 0; i < strands.length; i++){
+            strands[i].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(strand){
+            case "home": 
+                activeButton = document.getElementById("homeBtn");
+                document.getElementById("homeStrand").style.display = "flex";
+                home.display();
+                break;
+            case "ingredients": 
+                activeButton = document.getElementById("ingredientsBtn");
+                document.getElementById("ingredientsStrand").style.display = "flex";
+                ingredients.display();
+                break;
+            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(Order);
+                break;
+            case "transactions":
+                activeButton = document.getElementById("transactionsBtn");
+                document.getElementById("transactionsStrand").style.display = "flex";
+                transactions.display(Transaction);
+                break;
+        }
+
+        activeButton.classList = "menuButton active";
+        activeButton.disabled = true;
+
+        if(window.screen.availWidth <= 1000){
+            this.closeMenu();
+        }
+    },
+
+    /*
+    Open a specific sidebar
+    Input:
+    sidebar: the outermost element of the sidebar (must contain class sidebar)
+    */
+    openSidebar: function(sidebar, data = {}){
+        this.closeSidebar();
+
+        document.getElementById("sidebarDiv").classList = "sidebar";
+        document.getElementById(sidebar).style.display = "flex";
+
+        switch(sidebar){
+            case "ingredientDetails":
+                ingredientDetails.display(data);
+                break;
+            case "addIngredients":
+                addIngredients.display(Merchant);
+                break;
+            case "newIngredient":
+                newIngredient.display(Ingredient);
+                break;
+            case "recipeDetails":
+                recipeDetails.display(data);
+                break;
+            case "addRecipe":
+                newRecipe.display(Recipe);
+                break;
+            case "orderDetails":
+                orderDetails.display(data);
+                break;
+            case "newOrder":
+                newOrder.display(Order);
+                break;
+            case "transactionDetails":
+                transactionDetails.display(data);
+                break;
+            case "newTransaction":
+                newTransaction.display(Transaction);
+                break;
+        }
+
+        if(window.screen.availWidth <= 1000){
+            document.querySelector(".contentBlock").style.display = "none";
+            document.getElementById("mobileMenuSelector").style.display = "none";
+            document.getElementById("sidebarCloser").style.display = "block";
+        }
+    },
+
+    closeSidebar: function(){
+        let sidebar = document.getElementById("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";
+        }
+    },
+
+    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 < buttons.length; i++){
+                buttons[i].children[1].style.display = "none";
+            }
+
+            document.getElementById("max").style.display = "none";
+            document.getElementById("min").style.display = "flex";
+
+            
+        }else if(menu.classList.contains("menuMinimized")){
+            menu.classList = "menu";
+
+            for(let i = 0; i < buttons.length; i++){
+                buttons[i].children[1].style.display = "block";
+            }
+
+            setTimeout(()=>{
+                document.getElementById("max").style.display = "flex";
+                document.getElementById("min").style.display = "none";
+            }, 150);
+        }
+    },
+
+    openMenu: function(){
+        document.getElementById("menu").style.display = "flex";
+        document.querySelector(".contentBlock").style.display = "none";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{this.closeMenu()};
+    },
+
+    closeMenu: function(){
+        document.getElementById("menu").style.display = "none";
+        document.querySelector(".contentBlock").style.display = "flex";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{this.openMenu()};
+    },
+
+    convertToMain: function(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;
+    },
+
+    /*
+    Sets certain strands to repopulate everything the next time it is opened
+    Use for when any data is changed
+    item = whatever is being updated
+    */
+    updateData: function(item){
+        switch(item){
+            case "ingredient":
+                home.drawInventoryCheckCard();
+                ingredients.populateByProperty("category");
+                addIngredients.isPopulated = false;
+                break;
+            case "recipe":
+                transactions.isPopulated = false;
+                recipeBook.populateRecipes();
+                break;
+            case "order":
+                orders.populate();
+                break;
+            case "transaction":
+                transactions.isPopulated = false;
+                transactions.display(Transaction);
+                break;
+            case "unit":
+                home.isPopulated = false;
+                ingredients.populateByProperty("category");
+                break;
+        }
+    }
+}
+
+if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
+    this.changeMenu();
+    document.getElementById("menuShifter2").style.display = "none";
+}
+
+controller.openStrand("home");
+},{"./Ingredient.js":1,"./Merchant.js":2,"./Order.js":3,"./Recipe.js":4,"./Transaction.js":5,"./addIngredients.js":6,"./home.js":8,"./ingredientDetails.js":9,"./ingredients.js":10,"./newIngredient.js":11,"./newOrder.js":12,"./newRecipe.js":13,"./newTransaction.js":14,"./orderDetails.js":15,"./orders.js":16,"./recipeBook.js":17,"./recipeDetails.js":18,"./transactionDetails.js":19,"./transactions.js":20}],8:[function(require,module,exports){
+module.exports = {
+    isPopulated: false,
+    graph: {},
+
+    display: function(){
+        if(!this.isPopulated){
+            this.drawRevenueCard();
+            this.drawRevenueGraph();
+            this.drawInventoryCheckCard();
+            this.drawPopularCard();
+
+            this.isPopulated = true;
+        }
+    },
+
+    drawRevenueCard: function(){
+        let today = new Date();
+        let firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+        let firstOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+        let lastMonthtoDay = new Date(new Date().setMonth(today.getMonth() - 1));
+
+        let revenueThisMonth = merchant.revenue(merchant.transactionIndices(firstOfMonth));
+        let revenueLastmonthToDay = merchant.revenue(merchant.transactionIndices(firstOfLastMonth, lastMonthtoDay));
+
+        document.getElementById("revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
+
+        let revenueChange = ((revenueThisMonth - revenueLastmonthToDay) / revenueLastmonthToDay) * 100;
+        
+        let img = "";
+        if(revenueChange >= 0){
+            img = "/shared/images/upArrow.png";
+        }else{
+            img = "/shared/images/downArrow.png";
+        }
+        document.querySelector("#revenueChange p").innerText = `${Math.abs(revenueChange).toFixed(2)}% vs last month`;
+        document.querySelector("#revenueChange img").src = img;
+    },
+
+    drawRevenueGraph: function(){
+        let graphCanvas = document.getElementById("graphCanvas");
+        let today = new Date();
+
+        graphCanvas.height = graphCanvas.parentElement.clientHeight;
+        graphCanvas.width = graphCanvas.parentElement.clientWidth;
+
+        let LineGraph = require("../../shared/graphs.js").LineGraph;
+        this.graph = new LineGraph(graphCanvas);
+        this.graph.addTitle("Revenue");
+
+        let thirtyAgo = new Date(today);
+        thirtyAgo.setDate(today.getDate() - 29);
+
+        let data = merchant.graphDailyRevenue(merchant.transactionIndices(thirtyAgo));
+        if(data){
+            this.graph.addData(
+                data,
+                [thirtyAgo, new Date()],
+                "Revenue"
+            );
+        }else{
+            document.getElementById("graphCanvas").style.display = "none";
+            
+            let notice = document.createElement("h1");
+            notice.innerText = "NO DATA YET";
+            notice.classList = "notice";
+            document.getElementById("graphCard").appendChild(notice);
+        }
+    },
+
+    drawInventoryCheckCard: function(){
+        let num;
+        if(merchant.ingredients.length < 5){
+            num = merchant.ingredients.length;
+        }else{
+            num = 5;
+        }
+        let rands = [];
+        for(let i = 0; i < num; i++){
+            let rand = Math.floor(Math.random() * merchant.ingredients.length);
+
+            if(rands.includes(rand)){
+                i--;
+            }else{
+                rands[i] = rand;
+            }
+        }
+
+        let ul = document.querySelector("#inventoryCheckCard ul");
+        let template = document.getElementById("ingredientCheck").content.children[0];
+        while(ul.children.length > 0){
+            ul.removeChild(ul.firstChild);
+        }
+        for(let i = 0; i < rands.length; i++){
+            let ingredientCheck = template.cloneNode(true);
+            let input = ingredientCheck.children[1].children[1];
+
+            ingredientCheck.ingredient = merchant.ingredients[rands[i]];
+            ingredientCheck.children[0].innerText = merchant.ingredients[rands[i]].ingredient.name;
+            ingredientCheck.children[1].children[0].onclick = ()=>{input.value--};
+            input.value = merchant.ingredients[rands[i]].quantity.toFixed(2);
+            ingredientCheck.children[1].children[2].onclick = ()=>{input.value++}
+            ingredientCheck.children[2].innerText = merchant.ingredients[rands[i]].ingredient.unit.toUpperCase();
+
+            ul.appendChild(ingredientCheck);
+        }
+
+        document.getElementById("inventoryCheck").onclick = ()=>{this.submitInventoryCheck()};
+    },
+
+    drawPopularCard: function(){
+        let dataArray = [];
+        let now = new Date();
+        let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+        let ingredientList = merchant.ingredientsSold(merchant.transactionIndices(thisMonth));
+        if(ingredientList !== false){
+            window.ingredientList = [...ingredientList];
+            let iterations = (ingredientList.length < 5) ? ingredientList.length : 5;
+            for(let i = 0; i < iterations; i++){
+                try{
+                    let max = ingredientList[0].quantity;
+                    let index = 0;
+                    for(let j = 0; j < ingredientList.length; j++){
+                        if(ingredientList[j].quantity > max){
+                            max = ingredientList[j].quantity;
+                            index = j;
+                        }
+                    }
+
+                    dataArray.push({
+                        num: max,
+                        label: ingredientList[index].ingredient.name + ": " +
+                        ingredientList[index].ingredient.convert(ingredientList[index].quantity).toFixed(2) +
+                        " " + ingredientList[index].ingredient.unit
+                    });
+                    ingredientList.splice(index, 1);
+                }catch(err){
+                    break;
+                }
+            }
+
+            let thisCanvas = document.getElementById("popularCanvas");
+            thisCanvas.width = thisCanvas.parentElement.offsetWidth * 0.8;
+            thisCanvas.height = thisCanvas.parentElement.offsetHeight * 0.8;
+
+            let HorizontalBarGraph = require("../../shared/graphs.js").HorizontalBarGraph;
+            let popularGraph = new HorizontalBarGraph(thisCanvas);
+            popularGraph.addData(dataArray);
+        }else{
+            document.getElementById("popularCanvas").style.display = "none";
+
+            let notice = document.createElement("p");
+            notice.innerText = "N/A";
+            notice.classList = "notice";
+            document.getElementById("popularIngredientsCard").appendChild(notice);
+        }
+    },
+
+    submitInventoryCheck: function(){
+        let lis = document.querySelectorAll("#inventoryCheckCard li");
+
+        let changes = [];
+        let fetchData = [];
+
+        for(let i = 0; i < lis.length; i++){
+            if(lis[i].children[1].children[1].value >= 0){
+                let merchIngredient = lis[i].ingredient;
+
+                let value = parseFloat(lis[i].children[1].children[1].value);
+
+                if(value !== merchIngredient.quantity){
+                    changes.push({
+                        id: merchIngredient.ingredient.id,
+                        ingredient: merchIngredient.ingredient,
+                        quantity: value
+                    });
+
+                    fetchData.push({
+                        id: merchIngredient.ingredient.id,
+                        quantity: value
+                    });
+                }
+            }else{
+                banner.createError("CANNOT HAVE NEGATIVE INGREDIENTS");
+                return;
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+        
+        if(fetchData.length > 0){
+            fetch("/merchant/ingredients/update", {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify(fetchData)
+            })
+                .then((response) => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        
+
+                        merchant.editIngredients(changes);
+                        banner.createNotification("INGREDIENTS UPDATED");
+                    }
+                })
+                .catch((err)=>{})
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+        }
+    }
+}
+},{"../../shared/graphs.js":21}],9:[function(require,module,exports){
+module.exports = {
+    ingredient: {},
+    dailyUse: 0,
+
+    display: function(ingredient){
+        this.ingredient = ingredient;
+
+        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;
+        let ingredientStock = document.getElementById("ingredientStock");
+        ingredientStock.innerText = `${ingredient.ingredient.convert(ingredient.quantity).toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
+        ingredientStock.style.display = "block";
+        let ingredientInput = document.getElementById("ingredientInput");
+        ingredientInput.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+        ingredientInput.style.display = "none";
+
+        let quantities = [];
+        let now = new Date();
+        for(let i = 1; i < 31; i++){
+            let endDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i)
+            let startDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i - 1);
+            let indices = merchant.transactionIndices(startDay, endDay);
+
+            if(indices === false){
+                quantities.push(0);
+            }else{
+                quantities.push(merchant.singleIngredientSold(indices, ingredient));
+            }
+        }
+
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+
+        this.dailyUse = sum / quantities.length;
+
+        document.getElementById("dailyUse").innerText = `${ingredient.ingredient.convert(this.dailyUse).toFixed(2)} ${ingredient.ingredient.unit}`;
+
+        let ul = document.getElementById("ingredientRecipeList");
+        let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
+        while(ul.children.length > 0){
+            ul.removeChild(ul.firstChild);
+        }
+        for(let i = 0; i < recipes.length; i++){
+            let li = document.createElement("li");
+            li.innerText = recipes[i].name;
+            li.onclick = ()=>{
+                controller.openStrand("recipeBook");
+                controller.openSidebar("recipeDetails", recipes[i]);
+            }
+            ul.appendChild(li);
+        }
+
+        let ingredientButtons = document.getElementById("ingredientButtons");
+        let units = [];
+        let unitLabel = document.getElementById("displayUnitLabel");
+        let defaultButton = document.getElementById("defaultUnit");
+        if(this.ingredient.ingredient.unitType !== "other"){
+            units = merchant.units[this.ingredient.ingredient.unitType];
+            unitLabel.style.display = "block";
+            defaultButton.style.display = "block";
+        }else{
+            unitLabel.style.display = "none";
+            defaultButton.style.display = "none";
+        }
+        
+        while(ingredientButtons.children.length > 0){
+            ingredientButtons.removeChild(ingredientButtons.firstChild);
+        }
+        for(let i = 0; i < units.length; i++){
+            let button = document.createElement("button");
+            button.classList.add("unitButton");
+            button.innerText = units[i].toUpperCase();
+            button.onclick = ()=>{this.changeUnit(button, units[i])};
+            ingredientButtons.appendChild(button);
+
+            if(units[i] === this.ingredient.ingredient.unit){
+                button.classList.add("unitActive");
+            }
+        }
+
+        document.getElementById("defaultUnit").onclick = ()=>{this.changeUnitDefault()};
+        document.getElementById("editSubmitButton").onclick = ()=>{this.editSubmit()};
+    },
+
+    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){
+                    banner.createError("MUST REMOVE INGREDIENT FROM ALL RECIPES BEFORE REMOVING FROM INVENTORY");
+                    return;
+                }
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/merchant/ingredients/remove/${this.ingredient.ingredient.id}`, {
+            method: "DELETE",
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    banner.createNotification("INGREDIENT REMOVED");
+                    merchant.editIngredients([this.ingredient], true);
+                }
+            })
+            .catch((err)=>{})
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    edit: function(){
+        document.getElementById("ingredientStock").style.display = "none";
+        document.getElementById("ingredientInput").style.display = "block";
+        document.getElementById("editSubmitButton").style.display = "block";
+    },
+
+    editSubmit: function(){
+        this.ingredient.quantity = controller.convertToMain(
+            this.ingredient.ingredient.unit,
+            Number(document.getElementById("ingredientInput").value)
+        );
+        
+        let data = [{
+            id: this.ingredient.ingredient.id,
+            quantity: controller.convertToMain(this.ingredient.ingredient.unit, this.ingredient.quantity)
+        }];
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/merchant/ingredients/update", {
+            method: "PUT",
+            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{
+                    merchant.editIngredients([this.ingredient]);
+                    banner.createNotification("INGREDIENT UPDATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    changeUnit: function(newActive, unit){
+        this.ingredient.ingredient.unit = unit;
+
+        let ingredientButtons = document.querySelectorAll(".unitButton");
+        for(let i = 0; i < ingredientButtons.length; i++){
+            ingredientButtons[i].classList.remove("unitActive");
+        }
+
+        newActive.classList.add("unitActive");
+
+        controller.updateData("unit");
+        document.getElementById("ingredientStock").innerText = `${this.ingredient.ingredient.convert(this.ingredient.quantity).toFixed(2)} ${this.ingredient.ingredient.unit.toUpperCase()}`;
+        document.getElementById("dailyUse").innerText = `${this.ingredient.ingredient.convert(this.dailyUse).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+    },
+
+    changeUnitDefault: function(){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        let id = this.ingredient.ingredient.id;
+        let unit = this.ingredient.ingredient.unit;
+        fetch(`/merchant/ingredients/update/${id}/${unit}`, {
+            method: "put",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+        })
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    banner.createNotification("INGREDIENT DEFAULT UNIT UPDATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+},{}],10:[function(require,module,exports){
+module.exports = {
+    isPopulated: false,
+    ingredients: [],
+
+    display: function(){
+        if(!this.isPopulated){
+            this.populateByProperty("category");
+
+            document.getElementById("ingredientSearch").oninput = ()=>{this.search()};
+            document.getElementById("ingredientClearButton").onclick = ()=>{this.clearSorting()};
+            document.getElementById("ingredientSelect").onchange = ()=>{this.sort()};
+
+            this.isPopulated = true;
+        }
+    },
+
+    populateByProperty: function(property){
+        let categories;
+        if(property === "category"){
+            categories = merchant.categorizeIngredients();
+        }else if(property === "unit"){
+            categories = merchant.unitizeIngredients();
+        }
+        
+        let ingredientStrand = document.getElementById("categoryList");
+        let categoryTemplate = document.getElementById("categoryDiv").content.children[0];
+        let ingredientTemplate = document.getElementById("ingredient").content.children[0];
+        this.ingredients = [];
+
+        while(ingredientStrand.children.length > 0){
+            ingredientStrand.removeChild(ingredientStrand.firstChild);
+        }
+
+        for(let i = 0; i < categories.length; i++){
+            let categoryDiv = categoryTemplate.cloneNode(true);
+            categoryDiv.children[0].children[0].innerText = categories[i].name;
+            categoryDiv.children[0].children[1].onclick = ()=>{this.toggleCategory(categoryDiv.children[1], categoryDiv.children[0].children[1])};
+            categoryDiv.children[1].style.display = "none";
+            ingredientStrand.appendChild(categoryDiv);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let ingredient = categories[i].ingredients[j];
+                let ingredientDiv = ingredientTemplate.cloneNode(true);
+
+                ingredientDiv.children[0].innerText = ingredient.ingredient.name;
+                ingredientDiv.children[2].innerText = `${ingredient.ingredient.convert(ingredient.quantity).toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
+                ingredientDiv.onclick = ()=>{controller.openSidebar("ingredientDetails", ingredient)};
+                ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
+                ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
+
+                categoryDiv.children[1].appendChild(ingredientDiv);
+                this.ingredients.push(ingredientDiv);
+            }
+        }
+
+    },
+
+    displayIngredientsOnly: function(ingredients){
+        let ingredientDiv = document.getElementById("categoryList");
+
+        while(ingredientDiv.children.length > 0){
+            ingredientDiv.removeChild(ingredientDiv.firstChild);
+        }
+        for(let i = 0; i < ingredients.length; i++){
+            ingredientDiv.appendChild(ingredients[i]);
+        }
+    },
+
+    toggleCategory: function(div, button){
+        if(div.style.display === "none"){
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
+            div.style.display = "flex";
+        }else if(div.style.display === "flex"){
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+            div.style.display = "none";
+        }
+    },
+
+    search: function(){
+        let input = document.getElementById("ingredientSearch").value.toLowerCase();
+        document.getElementById("ingredientSelect").selectedIndex = 0;
+
+        if(input === ""){
+            this.populateByProperty("category");
+            document.getElementById("ingredientClearButton").style.display = "none";
+            return;
+        }
+
+        let matchingIngredients = [];
+        for(let i = 0; i < this.ingredients.length; i++){
+            if(this.ingredients[i]._name.includes(input)){
+                matchingIngredients.push(this.ingredients[i]);
+            }
+        }
+
+        document.getElementById("ingredientClearButton").style.display = "inline";
+        this.displayIngredientsOnly(matchingIngredients);
+    },
+
+    sort: function(){
+        let sortType = document.getElementById("ingredientSelect").value;
+        
+        if(sortType === ""){
+            return;
+        }
+
+        document.getElementById("ingredientSearch").value = "";
+
+        if(sortType === "category"){
+            this.populateByProperty("category");
+            return;
+        }
+
+        if(sortType === "unit"){
+            this.populateByProperty("unit");
+            return;
+        }
+
+        document.getElementById("ingredientClearButton").style.display = "inline";
+        let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
+        this.displayIngredientsOnly(sortedIngredients);
+    },
+
+    clearSorting: function(button){
+        document.getElementById("ingredientSearch").value = "";
+        document.getElementById("ingredientSelect").selectedIndex = 0;
+        document.getElementById("ingredientClearButton").style.display = "none";
+
+        this.populateByProperty("category");
+    }
+}
+},{}],11:[function(require,module,exports){
+module.exports = {
+    display: function(Ingredient){
+        document.getElementById("newIngName").value = "";
+        document.getElementById("newIngCategory").value = "";
+        document.getElementById("newIngQuantity").value = 0;
+
+        document.getElementById("submitNewIng").onclick = ()=>{this.submit(Ingredient)};
+    },
+
+    submit: function(Ingredient){
+        let unitSelector = document.getElementById("unitSelector");
+        let options = document.querySelectorAll("#unitSelector option");
+
+        let unit = unitSelector.value;
+
+        let newIngredient = {
+            ingredient: {
+                name: document.getElementById("newIngName").value,
+                category: document.getElementById("newIngCategory").value,
+                unitType: options[unitSelector.selectedIndex].getAttribute("type"),
+            },
+            quantity: controller.convertToMain(unit, document.getElementById("newIngQuantity").value),
+            defaultUnit: unit
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/ingredients/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(newIngredient)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editIngredients([{
+                        ingredient: new Ingredient(
+                            response.ingredient._id,
+                            response.ingredient.name,
+                            response.ingredient.category,
+                            response.ingredient.unitType,
+                            response.defaultUnit,
+                            merchant
+                        ),
+                        quantity: response.quantity
+                    }]);
+
+                    banner.createNotification("INGREDIENT CREATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+},{}],12:[function(require,module,exports){
+module.exports = {
+    isPopulated: false,
+    unused: [],
+
+    display: function(Order){
+        if(!this.isPopulated){
+            let categories = merchant.categorizeIngredients();
+            let categoriesList = document.getElementById("newOrderCategories");
+            let template = document.getElementById("addIngredientsCategory").content.children[0];
+            let ingredientTemplate = document.getElementById("addIngredientsIngredient").content.children[0];
+    
+            for(let i = 0; i < categories.length; i++){
+                let category = template.cloneNode(true);
+    
+                category.children[0].children[0].innerText = categories[i].name;
+                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
+                category.children[0].children[1].children[1].style.display = "none";
+                category.children[1].style.display = "none";
+                
+                categoriesList.appendChild(category);
+    
+                for(let j = 0; j < categories[i].ingredients.length; j++){
+                    let ingredientDiv = ingredientTemplate.cloneNode(true);
+    
+                    ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                    ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv, category.children[1])};
+                    ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
+    
+                    this.unused.push(categories[i].ingredients[j]);
+                    category.children[1].appendChild(ingredientDiv);
+                }
+            }
+
+            document.getElementById("submitNewOrder").onclick = ()=>{this.submit(Order)};
+
+            this.isPopulated = true;
+        }
+    },
+
+    addOne: function(ingredientDiv, container){
+        for(let i = 0; i < this.unused.length; i++){
+            if(this.unused[i] === ingredientDiv){
+                this.unused.splice(i, 1);
+                break;
+            }
+        }
+
+        let quantityInput = document.createElement("input");
+        quantityInput.type = "number";
+        quantityInput.placeholder = `QUANTITY (${ingredientDiv.ingredient.unit})`;
+        quantityInput.min = "0";
+        quantityInput.step = "0.01";
+        ingredientDiv.insertBefore(quantityInput, ingredientDiv.children[1]);
+
+        let priceInput = document.createElement("input");
+        priceInput.type = "number";
+        priceInput.placeholder = "Price Per Unit";
+        priceInput.min = "0";
+        priceInput.step = "0.01";
+        ingredientDiv.insertBefore(priceInput, ingredientDiv.children[2]);
+
+        ingredientDiv.children[4].innerText = "-";
+        ingredientDiv.children[4].onclick = ()=>{this.removeOne(ingredientDiv, container)};
+
+        container.removeChild(ingredientDiv);
+        document.getElementById("newOrderAdded").appendChild(ingredientDiv);
+    },
+
+    removeOne: function(ingredientDiv, container){
+        this.unused.push(ingredientDiv.ingredient);
+
+        ingredientDiv.removeChild(ingredientDiv.children[1]);
+        ingredientDiv.removeChild(ingredientDiv.children[1]);
+        ingredientDiv.children[1].innerText = "+";
+        ingredientDiv.children[1].onclick = ()=>{this.addOne(ingredientDiv, container)};
+        
+        ingredientDiv.parentElement.removeChild(ingredientDiv);
+        container.appendChild(ingredientDiv);
+    },
+
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
+    submit: function(Order){
+        let categoriesList = document.getElementById("newOrderAdded");
+        let ingredients = [];
+
+        for(let i = 0; i < categoriesList.children.length; i++){
+            let quantity = categoriesList.children[i].children[1].value;
+            let price = categoriesList.children[i].children[2].value;
+
+            let fakeOrder = new Order(undefined, undefined, new Date(), [], undefined);
+            if(quantity !== ""  && price !== ""){
+                ingredients.push({
+                    ingredient: categoriesList.children[i].ingredient.id,
+                    quantity: controller.convertToMain(categoriesList.children[i].ingredient.unit, parseFloat(quantity)),
+                    price: categoriesList.children[i].ingredient.convert(parseInt(price * 100))
+                });
+            }
+        }
+
+        let time = document.getElementById("orderTime").value;
+        let date = document.getElementById("orderDate").value;
+        let dateTime = "";
+        if(time === "" && date === ""){
+            dateTime = undefined;
+        }else if(time === "" && date !== ""){
+            dateTime = date;
+        }else if(time !== "" && date === ""){
+            banner.createError("PLEASE ADD A DATE IF YOU WISH TO HAVE A TIME");
+        }else{
+            dateTime = `${date}T${time}:00`
+        }
+
+        let data = {
+            name: document.getElementById("orderName").value,
+            date: dateTime,
+            ingredients: ingredients
+        };
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+        
+        fetch("/order/create", {
+            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 order = new Order(
+                       response._id,
+                       response.name,
+                       response.date,
+                       response.ingredients,
+                       merchant 
+                    )
+
+                    merchant.editOrders([order]);
+                    merchant.editIngredients(order.ingredients, false, true);
+                    banner.createNotification("ORDER CREATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOEMTHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}
+},{}],13:[function(require,module,exports){
+module.exports = {
+    display: function(Recipe){
+        console.log("display");
+        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
+        let categories = merchant.categorizeIngredients();
+
+        while(ingredientsSelect.children.length > 0){
+            ingredientsSelect.removeChild(ingredientsSelect.firstChild);
+        }
+
+        for(let i = 0; i < categories.length; i++){
+            let optgroup = document.createElement("optgroup");
+            optgroup.label = categories[i].name;
+            ingredientsSelect.appendChild(optgroup);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let option = document.createElement("option");
+                option.value = categories[i].ingredients[j].ingredient.id;
+                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
+                optgroup.appendChild(option);
+            }
+        }
+
+        document.getElementById("ingredientCount").onclick = ()=>{this.changeRecipeCount()};
+        document.getElementById("submitNewRecipe").onclick = ()=>{this.submit(Recipe)};
+    },
+
+    //Updates the number of ingredient inputs displayed for new recipes
+    changeRecipeCount: function(){
+        console.log("doing things");
+        let newCount = document.getElementById("ingredientCount").value;
+        let ingredientsDiv = document.getElementById("recipeInputIngredients");
+        let oldCount = ingredientsDiv.children.length;
+
+        if(newCount > oldCount){
+            let newDivs = newCount - oldCount;
+
+            for(let i = 0; i < newDivs; i++){
+                let newNode = ingredientsDiv.children[0].cloneNode(true);
+                newNode.children[2].children[0].value = "";
+
+                ingredientsDiv.appendChild(newNode);
+            }
+
+            for(let i = 0; i < newCount; i++){
+                ingredientsDiv.children[i].children[0].innerText = `INGREDIENT ${i + 1}`;
+            }
+        }else if(newCount < oldCount){
+            let newDivs = oldCount - newCount;
+
+            for(let i = 0; i < newDivs; i++){
+                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
+            }
+        }
+    },
+
+    submit: function(Recipe){
+        let newRecipe = {
+            name: document.getElementById("newRecipeName").value,
+            price: document.getElementById("newRecipePrice").value,
+            ingredients: []
+        }
+
+        let inputs = document.querySelectorAll("#recipeInputIngredients > div");
+        for(let i = 0; i < inputs.length; i++){
+            for(let j = 0; j < merchant.ingredients.length; j++){
+                if(merchant.ingredients[j].ingredient.id === inputs[i].children[1].children[0].value){
+                    newRecipe.ingredients.push({
+                        ingredient: inputs[i].children[1].children[0].value,
+                        quantity: controller.convertToMain(merchant.ingredients[j].ingredient.unit, inputs[i].children[2].children[0].value)
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/recipe/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(newRecipe)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    let recipe = new Recipe(
+                        response._id,
+                        response.name,
+                        response.price,
+                        response.ingredients,
+                        merchant,
+                    );
+                    
+                    merchant.editRecipes([recipe]);
+                    banner.createNotification("RECIPE CREATED");
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}
+},{}],14:[function(require,module,exports){
+module.exports = {
+    display: function(Transaction){
+        let recipeList = document.getElementById("newTransactionRecipes");
+        let template = document.getElementById("createTransaction").content.children[0];
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.recipe = merchant.recipes[i];
+            recipeList.appendChild(recipeDiv);
+
+            recipeDiv.children[0].innerText = merchant.recipes[i].name;
+        }
+
+        document.getElementById("submitNewTransaction").onclick = ()=>{this.submit(Transaction)};
+    },
+
+    submit: function(Transaction){
+        let recipeDivs = document.getElementById("newTransactionRecipes");
+        let date = document.getElementById("newTransactionDate").valueAsDate;
+        
+        if(date > new Date()){
+            banner.createError("CANNOT HAVE A DATE IN THE FUTURE");
+            return;
+        }
+        
+        let newTransaction = {
+            date: date,
+            recipes: []
+        };
+
+        for(let i = 0; i < recipeDivs.children.length;  i++){
+            let quantity = recipeDivs.children[i].children[1].value;
+            if(quantity !== "" && quantity > 0){
+                newTransaction.recipes.push({
+                    recipe: recipeDivs.children[i].recipe.id,
+                    quantity: quantity
+                });
+            }else if(quantity < 0){
+                banner.createError("CANNOT HAVE NEGATIVE VALUES");
+                return;
+            }
+        }
+
+        if(newTransaction.recipes.length > 0){
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
+            fetch("/transaction/create", {
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify(newTransaction)
+            })
+                .then(response => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        let transaction = new Transaction(
+                            response._id,
+                            response.date,
+                            response.recipes,
+                            merchant
+                        );
+                        merchant.editTransactions(transaction);
+                        banner.createNotification("NEW TRANSACTION CREATED");
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+        }
+    }
+}
+},{}],15:[function(require,module,exports){
+module.exports = {
+    display: function(order){
+        document.getElementById("removeOrderBtn").onclick = ()=>{this.remove(order)};
+
+        document.getElementById("orderDetailName").innerText = order.name;
+        document.getElementById("orderDetailDate").innerText = order.date.toLocaleDateString("en-US");
+        document.getElementById("orderDetailTime").innerText = order.date.toLocaleTimeString("en-US");
+
+        let ingredientList = document.getElementById("orderIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        let template = document.getElementById("orderIngredient").content.children[0];
+        let grandTotal = 0;
+        for(let i = 0; i < order.ingredients.length; i++){
+            let ingredientDiv = template.cloneNode(true);
+            let price = (order.ingredients[i].quantity * order.ingredients[i].price) / 100;
+            grandTotal += price;
+
+            let ingredient = order.ingredients[i].ingredient;
+            let priceText = ingredient.convert(order.ingredients[i].quantity).toFixed(2) + " " + 
+                ingredient.unit.toUpperCase() + " x $" +
+                (order.convertPrice(ingredient.unitType, ingredient.unit, order.ingredients[i].price) / 100).toFixed(2);
+            ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
+            ingredientDiv.children[1].innerText = priceText;
+            ingredientDiv.children[2].innerText = `$${price.toFixed(2)}`;
+
+            ingredientList.appendChild(ingredientDiv);
+        }
+
+        document.querySelector("#orderTotalPrice p").innerText = `$${grandTotal.toFixed(2)}`;
+    },
+
+    remove: function(order){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/order/${order.id}`, {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            }
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editOrders([order], true);
+                    banner.createNotification("ORDER REMOVED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+},{}],16:[function(require,module,exports){
+const Order = require("./Order");
+
+module.exports = {
+    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{
+                        let newOrders = [];
+                        for(let i = 0; i < response.length; i++){
+                            newOrders.push(new Order(
+                                response[i]._id,
+                                response[i].name,
+                                response[i].date,
+                                response[i].ingredients,
+                                merchant
+                            ));
+                        }
+                        merchant.editOrders(newOrders);
+
+                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
+
+                        this.isFetched = true;
+                    }
+                })
+                .catch((err)=>{
+                    console.log(err);
+                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+        }
+    },
+
+    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 brk = document.createElement("br");
+            ingredientDropdown.appendChild(brk);
+        }
+
+        while(listDiv.children.length > 0){
+            listDiv.removeChild(listDiv.firstChild);
+        }
+
+        for(let i = 0; i < merchant.orders.length; i++){
+            let row = template.cloneNode(true);
+            let totalCost = 0;
+            
+            for(let j = 0; j < merchant.orders[i].ingredients.length; j++){
+                totalCost += merchant.orders[i].ingredients[j].quantity * merchant.orders[i].ingredients[j].price;
+            }
+
+            row.children[0].innerText = merchant.orders[i].name;
+            row.children[1].innerText = `${merchant.orders[i].ingredients.length} items`;
+            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
+            row.children[3].innerText = `$${(totalCost / 100).toFixed(2)}`;
+            row.order = merchant.orders[i];
+            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
+            listDiv.appendChild(row);
+        }
+    },
+
+    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);
+            }
+        }
+
+        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)=>{
+                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].ingredients,
+                            merchant
+                        );
+
+                        let cost = 0;
+                        for(let j = 0; j < order.ingredients.length; j++){
+                            cost += (order.ingredients[j].price / 100) * order.ingredients[j].quantity;
+                        }
+
+                        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];
+
+        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");
+        }
+    }
+}
+},{"./Order":3}],17:[function(require,module,exports){
+module.exports = {
+    isPopulated: false,
+    recipeDivList: [],
+
+    display: function(){
+        if(!this.isPopulated){
+            this.populateRecipes();
+
+            if(merchant.pos === "clover"){
+                document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate()};
+            }
+            document.getElementById("recipeSearch").oninput = ()=>{this.search()};
+            document.getElementById("recipeClearButton").onclick = ()=>{this.clearSorting()};
+
+            this.isPopulated = true;
+        }
+    },
+
+    populateRecipes: function(){
+        let recipeList = document.getElementById("recipeList");
+        let template = document.getElementById("recipe").content.children[0];
+
+        this.recipeDivList = [];
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.onclick = ()=>{controller.openSidebar("recipeDetails", merchant.recipes[i])};
+            recipeDiv._name = merchant.recipes[i].name;
+            recipeList.appendChild(recipeDiv);
+
+            recipeDiv.children[0].innerText = merchant.recipes[i].name;
+            recipeDiv.children[1].innerText = `$${(merchant.recipes[i].price / 100).toFixed(2)}`;
+
+            this.recipeDivList.push(recipeDiv);
+        }
+    },
+
+    search: function(){
+        let input = document.getElementById("recipeSearch").value.toLowerCase();
+        let recipeList = document.getElementById("recipeList");
+        let clearButton = document.getElementById("recipeClearButton");
+
+        let matchingRecipes = [];
+        for(let i = 0; i < this.recipeDivList.length; i++){
+            if(this.recipeDivList[i]._name.toLowerCase().includes(input)){
+                matchingRecipes.push(this.recipeDivList[i]);
+            }
+        }
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+        for(let i = 0; i < matchingRecipes.length; i++){
+            recipeList.appendChild(matchingRecipes[i]);
+        }
+
+        if(input === ""){
+            clearButton.style.display = "none";
+        }else{
+            clearButton.style.display = "inline";
+        }
+    },
+
+    clearSorting: function(){
+        document.getElementById("recipeSearch").value = "";
+        this.search();
+    },
+
+    posUpdate: function(){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/recipe/update/clover", {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+        })
+            .then(response => response.json())
+            .then((response)=>{
+                let newRecipes = [];
+                for(let i = 0; i < response.new.length; i++){
+                    newRecipes.push(new Recipe(
+                        response.new[i]._id,
+                        response.new[i].name,
+                        response.new[i].price,
+                        merchant,
+                        []
+                    ));
+                }
+                if(newRecipes.length > 0){
+                    merchant.editRecipes(newRecipes);
+                }
+
+                let removeRecipes = [];
+                for(let i = 0; i < response.removed.length; i++){
+                    for(let j = 0; j < merchant.recipes.length; j++){
+                        if(response.removed[i]._id === merchant.recipes[j].id){
+                            removeRecipes.push(merchant.recipes[j], true);
+                            break;
+                        }
+                    }
+                }
+                if(removeRecipes.length > 0){
+                    merchant.editRecipes(removeRecipes, true);
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG.  PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+},{}],18:[function(require,module,exports){
+module.exports = {
+    recipe: {},
+
+    display: function(recipe){
+        this.recipe = recipe;
+
+        document.getElementById("recipeName").style.display = "block";
+        document.getElementById("recipeNameIn").style.display = "none";
+        document.querySelector("#recipeDetails h1").innerText = recipe.name;
+
+        let ingredientList = document.getElementById("recipeIngredientList");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        let template = document.getElementById("recipeIngredient").content.children[0];
+        for(let i = 0; i < recipe.ingredients.length; i++){
+            ingredientDiv = template.cloneNode(true);
+
+            ingredientDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
+            ingredientDiv.children[2].innerText = `${recipe.ingredients[i].ingredient.convert(recipe.ingredients[i].quantity).toFixed(2)} ${recipe.ingredients[i].ingredient.unit}`;
+            ingredientDiv.ingredient = recipe.ingredients[i].ingredient;
+            ingredientDiv.name = recipe.ingredients[i].ingredient.name;
+
+            ingredientList.appendChild(ingredientDiv);
+        }
+
+        document.getElementById("addRecIng").style.display = "none";
+
+        let price = document.getElementById("recipePrice");
+        price.children[1].style.display = "block";
+        price.children[2].style.display = "none";
+        price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;
+
+        document.getElementById("recipeUpdate").style.display = "none";
+
+        document.getElementById("editRecipeBtn").onclick = ()=>{this.edit()};
+        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove()};
+        document.getElementById("addRecIng").onclick = ()=>{this.displayAddIngredient()};
+        document.getElementById("recipeUpdate").onclick = ()=>{this.update()};
+    },
+
+    edit: function(){
+        let ingredientDivs = document.getElementById("recipeIngredientList");
+
+        if(merchant.pos === "none"){
+            let name = document.getElementById("recipeName");
+            let nameIn = document.getElementById("recipeNameIn");
+            name.style.display = "none";
+            nameIn.style.display = "block";
+            nameIn.value = this.recipe.name;
+
+            let price = document.getElementById("recipePrice");
+            price.children[1].style.display = "none";
+            price.children[2].style.display = "block";
+            price.children[2].value = parseFloat((this.recipe.price / 100).toFixed(2));
+        }
+
+        for(let i = 0; i < ingredientDivs.children.length; i++){
+            let div = ingredientDivs.children[i];
+
+            div.children[2].innerText = this.recipe.ingredients[i].ingredient.unit;
+            div.children[1].style.display = "block";
+            div.children[1].value = this.recipe.ingredients[i].ingredient.convert(this.recipe.ingredients[i].quantity).toFixed(2);
+            div.children[3].style.display = "block";
+            div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
+        }
+
+        document.getElementById("addRecIng").style.display = "flex";
+        document.getElementById("recipeUpdate").style.display = "flex";
+    },
+
+    update: function(){
+        this.recipe.name = document.getElementById("recipeNameIn").value || this.recipe.name;
+        this.recipe.price = Math.round((document.getElementById("recipePrice").children[2].value * 100)) || this.recipe.price;
+        this.recipe.ingredients = [];
+
+        let divs = document.getElementById("recipeIngredientList").children;
+        for(let i = 0; i < divs.length; i++){
+            if(divs[i].name === "new"){
+                let select = divs[i].children[0];
+                this.recipe.ingredients.push({
+                    ingredient: select.options[select.selectedIndex].ingredient,
+                    quantity: controller.convertToMain(select.options[select.selectedIndex].ingredient.unit, divs[i].children[1].value)
+                });
+            }else{
+                this.recipe.ingredients.push({
+                    ingredient: divs[i].ingredient,
+                    quantity: controller.convertToMain(divs[i].ingredient.unit, divs[i].children[1].value)
+                });
+            }
+        }
+
+        let data = {
+            id: this.recipe.id,
+            name: this.recipe.name,
+            price: this.recipe.price,
+            ingredients: []
+        }
+
+        for(let i = 0; i < this.recipe.ingredients.length; i++){
+            data.ingredients.push({
+                ingredient: this.recipe.ingredients[i].ingredient.id,
+                quantity: this.recipe.ingredients[i].quantity
+            });
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/recipe/update", {
+            method: "PUT",
+            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{
+                    merchant.editRecipes([this.recipe]);
+                    banner.createNotification("RECIPE UPDATE");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    remove: function(){
+        fetch(`/merchant/recipes/remove/${this.recipe.id}`, {
+            method: "DELETE"
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editRecipes([this.recipe], true);
+                    banner.createNotification("RECIPE REMOVED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            });
+    },
+
+    displayAddIngredient: function(){
+        let template = document.getElementById("addRecIngredient").content.children[0].cloneNode(true);
+        template.name = "new";
+        document.getElementById("recipeIngredientList").appendChild(template);
+
+        let categories = merchant.categorizeIngredients();
+
+        for(let i = 0; i < categories.length; i++){
+            let optGroup = document.createElement("optgroup");
+            optGroup.label = categories[i].name;
+            template.children[0].appendChild(optGroup);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let option = document.createElement("option");
+                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
+                option.ingredient = categories[i].ingredients[j].ingredient;
+                optGroup.appendChild(option);
+            }
+        }
+    }
+}
+},{}],19:[function(require,module,exports){
+module.exports = {
+    transaction: {},
+
+    display: function(transaction){
+        this.transaction = transaction;
+
+        let recipeList = document.getElementById("transactionRecipes");
+        let template = document.getElementById("transactionRecipe").content.children[0];
+        let totalRecipes = 0;
+        let totalPrice = 0;
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < transaction.recipes.length; i++){
+            let recipe = template.cloneNode(true);
+            let price = transaction.recipes[i].quantity * transaction.recipes[i].recipe.price;
+
+            recipe.children[0].innerText = transaction.recipes[i].recipe.name;
+            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x $${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
+            recipe.children[2].innerText = `$${(price / 100).toFixed(2)}`;
+            recipeList.appendChild(recipe);
+
+            totalRecipes += transaction.recipes[i].quantity;
+            totalPrice += price;
+        }
+
+        let months = ["January", "Fecbruary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        let dateString = `${days[transaction.date.getDay()]}, ${months[transaction.date.getMonth()]} ${transaction.date.getDate()}, ${transaction.date.getFullYear()}`;
+
+        document.getElementById("transactionDate").innerText = dateString;
+        document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
+        document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
+        document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+        document.getElementById("removeTransBtn").onclick = ()=>{this.remove()};
+    },
+
+    remove: function(){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/transaction/${this.transaction.id}`, {
+            method: "delete",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+        })
+            .then(response => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editTransactions(this.transaction, true);
+                    banner.createNotification("TRANSACTION REMOVED");
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}
+},{}],20:[function(require,module,exports){
+module.exports = {
+    isPopulated: false, 
+
+    display: function(Transaction){
+        if(!this.isPopulated){
+            let transactionsList = document.getElementById("transactionsList");
+            let dateDropdown = document.getElementById("dateDropdown");
+            let recipeDropdown = document.getElementById("recipeDropDown");
+            let template = document.getElementById("transaction").content.children[0];
+
+            let now = new Date();
+            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
+            document.getElementById("transFilDate1").valueAsDate = monthAgo;
+            document.getElementById("transFilDate2").valueAsDate = now;
+
+            dateDropdown.style.display = "none";
+            recipeDropdown.style.display = "none";
+
+            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
+            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
+
+            while(recipeDropdown.children.length > 0){
+                recipeDropdown.removeChild(recipeDropdown.firstChild);
+            }
+
+            for(let i = 0; i < merchant.recipes.length; i++){
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.recipe = merchant.recipes[i];
+                recipeDropdown.appendChild(checkbox);
+
+                let label = document.createElement("label");
+                label.innerText = merchant.recipes[i].name;
+                label.for = checkbox;
+                recipeDropdown.appendChild(label);
+
+                let brk = document.createElement("br");
+                recipeDropdown.appendChild(brk);
+            }
+
+            while(transactionsList.children.length > 0){
+                transactionsList.removeChild(transactionsList.firstChild);
+            }
+
+            let i = 0
+            while(i < merchant.transactions.length && i < 100){
+                let transactionDiv = template.cloneNode(true);
+                let transaction = merchant.transactions[i];
+
+                transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                transactionsList.appendChild(transactionDiv);
+
+                let totalRecipes = 0;
+                let totalPrice = 0;
+
+                for(let j = 0; j < merchant.transactions[i].recipes.length; j++){
+                    totalRecipes += merchant.transactions[i].recipes[j].quantity;
+                    totalPrice += merchant.transactions[i].recipes[j].recipe.price * merchant.transactions[i].recipes[j].quantity;
+                }
+
+                transactionDiv.children[0].innerText = `${merchant.transactions[i].date.toLocaleDateString()} ${merchant.transactions[i].date.toLocaleTimeString()}`;
+                transactionDiv.children[1].innerText = `${totalRecipes} recipes sold`;
+                transactionDiv.children[2].innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+                i++;
+            }
+
+            document.getElementById("transFormSubmit").onsubmit = ()=>{this.submitFilter(Transaction)};
+
+            this.isPopulated = true;
+        }
+    },
+
+    submitFilter: function(Transaction){
+        event.preventDefault();
+
+        let data = {
+            startDate: document.getElementById("transFilDate1").valueAsDate,
+            endDate: document.getElementById("transFilDate2").valueAsDate,
+            recipes: []
+        }
+
+        if(data.startDate >= data.endDate){
+            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            return;
+        }
+
+        let recipeChoices = document.getElementById("recipeDropDown");
+        for(let i = 0; i < recipeChoices.children.length; i += 3){
+            if(recipeChoices.children[i].checked){
+                data.recipes.push(recipeChoices.children[i].recipe.id);
+            }
+        }
+
+        if(data.recipes.length === 0){
+            for(let i = 0; i < merchant.recipes.length; i++){
+                data.recipes.push(merchant.recipes[i].id);
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/transaction", {
+            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 transactionList = document.getElementById("transactionsList");
+                    let template = document.getElementById("transaction").content.children[0];
+
+                    while(transactionList.children.length > 0){
+                        transactionList.removeChild(transactionList.firstChild);
+                    }
+
+                    for(let i = 0; i < response.length; i++){
+                        let transactionDiv = template.cloneNode(true);
+                        let recipeCount = 0;
+                        let cost = 0;
+                        let transaction = new Transaction(
+                            response[i]._id,
+                            response[i].date,
+                            response[i].recipes,
+                            merchant
+                        );
+
+                        for(let j = 0; j < transaction.recipes.length; j++){
+                            recipeCount += transaction.recipes[j].quantity;
+                            cost += transaction.recipes[j].quantity * transaction.recipes[j].recipe.price;
+                        }
+
+                        transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
+                        transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
+                        transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
+                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                        transactionList.appendChild(transactionDiv);
+                    }
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("UNABLE TO DISPLAY THE TRANSACTIONS");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    toggleDropdown: function(dropdown){
+        event.preventDefault();
+        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+
+        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");
+        }
+    }
+}
+},{}],21:[function(require,module,exports){
+//Creates a line graph within a canvas
+//Will expand or shrink to the size of the canvas
+//Inputs:
+//  canvas = the canvas that you would like to draw on
+//  yName = a string for the name of the Y axis
+//  xName = a string for the name of the X axis
+class LineGraph{
+    constructor(canvas){
+        this.canvas = canvas;
+        this.context = canvas.getContext("2d");
+        this.left = canvas.clientWidth - (canvas.clientWidth * 0.95);
+        this.right = canvas.clientWidth * 1;
+        this.top = canvas.clientHeight - (canvas.clientHeight * 1);
+        this.bottom = canvas.clientHeight * 0.85;
+        this.data = [];
+        this.max = 0;
+        this.xRange = [];
+        this.colors = [];
+        this.colorIndex = 0;
+
+        for(let i = 0; i < 100; i++){
+            let redRand = Math.floor(Math.random() * 200);
+            let greenRand = Math.floor(Math.random() * 200);
+            let blueRand = Math.floor(Math.random() * 200);
+
+            this.colors.push(`rgb(${redRand}, ${greenRand}, ${blueRand})`);
+        }
+    }
+
+    //Add a dataset to the graph to draw
+    //Inputs:
+    //  data = array containing list of numbers as the data points for the graph
+    //      data[0] will be on the left.  data[data.length-1] will be on the right.
+    //  xRange = array containing two elements, start and end for x axis data (currently only dates)
+    //  name = string name for the line.  Used for display and finding lines.  Each must be unique
+    addData(data, xRange, name){
+        data = {
+            set: data,
+            colorIndex: this.colorIndex,
+            name: name
+        }
+        this.colorIndex++;
+        this.data.push(data);
+
+        let isChange = false;
+        for(let i = 0; i < data.set.length; i++){
+            if(data.set[i] > this.max){
+                this.max = data.set[i];
+                this.verticalMultiplier = (this.bottom - this.top) / this.max;
+                this.horizontalMultiplier = (this.right - this.left) / (data.set.length - 1);
+                isChange = true;
+            }
+        }
+
+        if(this.xRange.length === 0){
+            this.xRange = xRange;
+            isChange = true;
+        }else{
+            if(xRange[0] < this.xRange[0]){
+                this.xRange[0] = xRange[0];
+                isChange = true;
+            }
+            if(xRange[1] > this.xRange[1]){
+                this.xRange[1] = xRange[1];
+                isChange = true;
+            }
+        }
+
+        if(isChange){
+            this.drawGraph();
+        }else{
+            this.drawLine(data);
+        }
+    }
+
+    //Removes a single data set from the graph and its line
+    //Inputs:
+    //  id = the unique identifier of the data set that was passed in with addData function
+    removeData(name){
+        for(let i = 0; i < this.data.length; i++){
+            if(this.data[i].name === name){
+                this.data.splice(i, 1);
+                break;
+            }
+        }
+
+        this.drawGraph();
+    }
+
+    //Completely clears all data
+    //Does not delete the current graph displaying
+    clearData(){
+        this.max = 0;
+        this.data = [];
+        this.xRange = [];
+    }
+
+    addTitle(title){
+        this.top = this.canvas.clientHeight - (this.canvas.clientHeight * 0.9);
+        
+        this.title = title;
+    }
+
+    /**********
+    *********PRIVATE*********
+    **********/
+    drawGraph(){
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        this.drawYAxis();
+        this.drawXAxis();
+
+        for(let i = 0; i < this.data.length; i++){
+            this.drawLine(this.data[i]);
+        }
+
+        if(this.title){
+            this.context.font = "25px Saira";
+            let xLocation = ((this.right - this.left) / 2) - (this.context.measureText(this.title).width / 2);
+            this.context.fillText(this.title, xLocation, this.top - 10);
+        }
+    }
+
+    drawLine(data){
+        for(let i = 0; i < data.set.length - 1; i++){
+            this.context.beginPath();
+            this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom - (this.verticalMultiplier * data.set[i]));
+            this.context.lineTo(this.left + (this.horizontalMultiplier * (i + 1)), this.bottom - (this.verticalMultiplier * data.set[i + 1]));
+            this.context.strokeStyle = this.colors[data.colorIndex];
+            this.context.lineWidth = 2;
+            this.context.stroke();
+        }
+
+        this.context.strokeStyle = "black";
+
+        if(this.data.length > 1){
+            this.drawLegend(data.colorIndex, data.name);
+        }
+    }
+
+    drawXAxis(){
+        this.context.beginPath();
+        this.context.moveTo(this.left, this.bottom);
+        this.context.lineTo(this.right, this.bottom);
+        this.context.lineWidth = 4;
+        this.context.stroke();
+
+        this.context.setLineDash([5, 10]);
+        this.context.font = "10px Arial";
+        this.context.lineWidth = 1;
+
+        if(Object.prototype.toString.call(this.xRange[0]) === '[object Date]'){
+            let diff = Math.abs(Math.floor((Date.UTC(this.xRange[0].getFullYear(), this.xRange[0].getMonth(), this.xRange[0].getDate()) - Date.UTC(this.xRange[1].getFullYear(), this.xRange[1].getMonth(), this.xRange[1].getDate())) / (1000 * 60 * 60 * 24))) + 1;
+            let showDate = new Date(this.xRange[0]);
+            
+            for(let i = 0; i < diff; i += Math.floor(diff / 10)){
+                this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + (this.horizontalMultiplier * i) - 20, this.bottom + 15);
+
+                if(i !== 0){
+                    this.context.beginPath()
+                    this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom);
+                    this.context.lineTo(this.left + (this.horizontalMultiplier * i), this.top);
+                    this.context.strokeStyle = "#a5a5a5";
+                    this.context.stroke();
+                }
+
+                showDate.setDate(showDate.getDate() + Math.abs(diff / 10));
+            }
+            
+        }
+
+        this.context.strokeStyle = "black";
+        this.context.setLineDash([]);
+    }
+
+    drawYAxis(){
+        this.context.beginPath();
+        this.context.moveTo(this.left, this.top);
+        this.context.lineTo(this.left, this.bottom);
+        this.context.lineWidth = 2;
+        this.context.stroke();
+
+        this.context.setLineDash([5, 10]);
+        this.context.font = "10px Arial";
+        this.context.lineWidth = 1;
+
+        let axisNum = 0;
+        let verticalIncrement = (this.bottom - this.top) / 10;
+        let verticalOffset = 0;
+        do{
+            this.context.fillText(Math.round(axisNum).toString(), this.left - 20, this.bottom - verticalOffset + 3);
+
+            this.context.beginPath();
+            this.context.moveTo(this.left, this.bottom - verticalOffset);
+            this.context.lineTo(this.right, this.bottom - verticalOffset);
+            this.context.strokeStyle = "#a5a5a5";
+            this.context.stroke();
+
+            verticalOffset += verticalIncrement;
+            axisNum += this.max / 10;
+        }while(verticalOffset <= (this.bottom - this.top));
+
+        this.context.strokeStyle = "black";
+        this.context.setLineDash([]);
+    }
+
+    drawLegend(colorIndex, name){
+        let verticalOffset;
+        for(let i = 0; i < this.data.length; i++){
+            if(this.data[i].name === name){
+                verticalOffset = i * 25;
+                break;
+            }
+        }
+
+        this.context.beginPath();
+        this.context.fillStyle = this.colors[colorIndex];
+        this.context.fillRect(this.right + 50, this.top + 50 + verticalOffset, 10, 10);
+        this.context.stroke();
+
+        this.context.font = "15px Arial";
+        this.context.fillText(name, this.right + 65, this.top + 60 + verticalOffset);
+
+        this.context.fillStyle = "black";
+    }
+}
+
+class HorizontalBarGraph{
+    constructor(canvas){
+        this.canvas = canvas;
+        this.context = canvas.getContext("2d");
+        this.left = 0;
+        this.right = canvas.clientWidth;
+        this.top = canvas.clientHeight - (canvas.clientHeight * 0.99);
+        this.bottom = canvas.clientHeight;
+        this.data = [];
+        this.max = 0;
+    }
+
+    //Adds an array of data points to the chart
+    //All data is removed  and redrawn when called
+    //Must pass in all data points
+    //Inputs: 
+    //  dataArray: array of objects
+    //      num: number for the actual data
+    //      label: text to display on bar
+    addData(dataArray){
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        for(let i = 0; i < dataArray.length; i++){
+            if(dataArray[i].num > this.max){
+                this.max = dataArray[i].num;
+            }
+
+            this.data.push(dataArray[i]);
+        }
+
+        this.drawGraph();
+    }
+
+    drawGraph(){
+        let barHeight = ((this.bottom - this.top) / this.data.length) - 2;
+
+        for(let i = 0; i < this.data.length; i++){
+            let topLocation = this.top + (i * barHeight) + 5;
+            let width = (this.right - this.left) * (this.data[i].num / this.max);
+
+            if(this.data[i].num >= this.max){
+                this.context.fillStyle = "rgb(255, 99, 107)";
+            }else{
+                this.context.fillStyle = "rgb(179, 191, 209)";
+            }
+
+            this.context.beginPath();
+            this.context.fillRect(this.left, topLocation, width, barHeight - 5);
+            this.context.stroke();
+
+            let textLocation  = 15;
+            this.context.font = "12px Saira";
+            this.context.fillStyle = "black";
+            this.context.fillText(this.data[i].label, textLocation, (this.top) + (i * barHeight) + (barHeight / 1.5));
+        }
+    }
+}
+
+module.exports = {
+    LineGraph: LineGraph,
+    HorizontalBarGraph: HorizontalBarGraph
+}
+},{}]},{},[7]);

views/dashboardPage/controller.js

@@ -1,113 +0,0 @@
-/* 
-Switches to a different strand
-Input:
- name: name of the strand.  Must end with "Strand"
-*/
-let 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].onclick = ()=>{changeStrand(`${buttons[i].id.slice(0, buttons[i].id.indexOf("Btn"))}Strand`)};
-    }
-
-    let activeButton = document.querySelector(`#${name.slice(0, name.indexOf("Strand"))}Btn`);
-    activeButton.classList = "menuButton active";
-    activeButton.onclick = undefined;
-
-    document.querySelector(`#${name}`).style.display = "flex";
-    window[`${name}Obj`].display();
-
-    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){
-        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";
-
-        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);
-    }
-}
-
-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";
-}
-homeStrandObj.display();

views/dashboardPage/dashboard.css

@@ -27,15 +27,17 @@ Multi-strand use classes
 */
 .strand{
     flex-direction: column;
-    height: 100%;
+    height: 100vh;
     width: 100%;
+    padding-bottom: 25px;
+    box-sizing: border-box;
 }
 
     .strandHead{
         display: flex;
         justify-content: space-between;
         width: 100%;
-        padding: 50px 50px 0 50px;
+        padding: 10px 50px 0 50px;
         align-items: center;
         box-sizing: border-box;
     }
@@ -447,6 +449,25 @@ Orders Strand
         overflow-y: auto;
     }
 
+    .filterForm{
+        padding: 5px;
+        margin: 0;
+        align-items: center;
+        max-height: 150px;
+    }
+
+        .filterForm > div{
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+        .filterForm input[type=submit]{
+            max-height: 30px;
+            padding: 0;
+            font-size: 15px;
+        }
+
 /*
 Transactions Strand
 */
@@ -461,6 +482,65 @@ Transactions Strand
         margin-top: 50px;
     }
 
+    #transactionFilter{
+        padding: 5px;
+        margin: 0;
+        align-items: center;
+        max-height: 150px;
+    }
+
+        #transactionFilter > div{
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+        }
+
+            .dropdown{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                position: relative;
+                margin: 0;
+            }
+
+                .dropdown button{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 25px;
+                    width: 25px;
+                    border-radius: 5px;
+                    border: 1px solid black;
+                    background: none;
+                    cursor: pointer;
+                }
+
+                    .dropdownHead{
+                        display: flex;
+                    }
+
+                    .dropdown button:hover{
+                        background: rgb(0, 27, 45);
+                        color: white;
+                    }
+
+                .dropdownContents{
+                    text-align: left;
+                    position: absolute;
+                    top: 25px;
+                    background: rgb(240, 252, 255);
+                    z-index: 1;
+                    padding: 2px;
+                    border: 1px solid black;
+                    border-radius: 5px;
+                    padding: 5px;
+                    white-space: nowrap;
+                }
+
+                    .dropDownContents label{
+                        margin: 0;
+                    }
+
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;
@@ -504,6 +584,10 @@ Transactions Strand
             color: black;
         }
 
+    .filterForm{
+        display: none;
+    }
+
     /*
     Home
     */
@@ -592,6 +676,6 @@ Transactions Strand
     Transactions
     */
     .transactionsList{
-        width: 95%;
+        width: 100%;
     }
 }

views/dashboardPage/dashboard.ejs

@@ -18,7 +18,7 @@
                     <p>THE SUBLINE</p>
                 </a>
         
-                <button class="menuShifter" onclick="changeMenu()">&#8801;</button>
+                <button class="menuShifter" onclick="controller.changeMenu()">&#8801;</button>
             </div>
         
             <div id="min" class="menuHead menuHeadMin">
@@ -26,10 +26,10 @@
                     <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
                 </a>
         
-                <button id="menuShifter2" onclick="changeMenu()">&#8801;</button>
+                <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
             </div>
         
-            <button class="menuButton active" id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
+            <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('ingredientsStrand')">
+            <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('recipeBookStrand')">
+            <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('ordersStrand')">
+            <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('transactionsStrand')">
+            <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>
@@ -81,8 +81,8 @@
             </a>
         </div>
 
-        <div id="mobileMenuSelector" class="mobileMenuSelector" onclick="openMenu()">&#8801;</div>
-        <button id="sidebarCloser" style="display: none;" onclick="closeSidebar()">
+        <div id="mobileMenuSelector" class="mobileMenuSelector" onclick="controller.openMenu()">&#8801;</div>
+        <button id="sidebarCloser" style="display: none;" 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="18" y1="6" x2="6" y2="18"></line>
                 <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -121,7 +121,7 @@
 
                         <ul></ul>
 
-                        <button class="button" onclick="homeStrandObj.submitInventoryCheck()">Update</button>
+                        <button id="inventoryCheck" class="button">Update</button>
                     </div>
 
                     <div id=popularIngredientsCard class="card">
@@ -150,7 +150,7 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">INGREDIENT INVENTORY</h1>
 
-                    <button class="button mobileHide" onclick="addIngredientsComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="controller.openSidebar('addIngredients')">NEW</button>
                 </div>
 
                 <div class="searchBar">
@@ -159,10 +159,10 @@
                             <circle cx="11" cy="11" r="8"></circle>
                             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                         </svg>
-                        <input id="ingredientSearch" type="text" placeholder="FILTER" oninput="ingredientsStrandObj.search()">
+                        <input id="ingredientSearch" type="text" placeholder="FILTER">
                     </div>
 
-                    <button id="ingredientClearButton" class="clearButton" onclick="ingredientsStrandObj.clearSorting()" style="display: none;">
+                    <button id="ingredientClearButton" class="clearButton" style="display: none;">
                         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="12" cy="12" r="10"></circle>
                             <line x1="15" y1="9" x2="9" y2="15"></line>
@@ -170,7 +170,7 @@
                         </svg>
                     </button>
 
-                    <select id="ingredientSelect" class="mobileHide" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
+                    <select id="ingredientSelect" class="mobileHide">Sort By:
                         <option value="" selected disabled>Sort By:</option>
                         <option value="_name">Ingredient</option>
                         <option value="category">Category</option>
@@ -212,9 +212,9 @@
                     <h1 class="strandTitle">RECIPE BOOK</h1>
 
                     <% if(merchant.pos === "none"){ %>
-                        <button class="button mobileHide" onclick="newRecipeComp.display()">NEW</button>
+                        <button class="button mobileHide" onclick="controller.openSidebar('addRecipe')">NEW</button>
                     <% }else if(merchant.pos === "clover"){ %>
-                        <button class="button mobileHide" onclick="recipeBookStrandObj.posUpdate()">UPDATE</button>
+                        <button id="posUpdateRecipe" class="button mobileHide">UPDATE</button>
                     <% } %>
                 </div>
 
@@ -224,10 +224,10 @@
                             <circle cx="11" cy="11" r="8"></circle>
                             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                         </svg>
-                        <input id="recipeSearch" type="text" placeholder="FILTER" oninput="recipeBookStrandObj.search()">
+                        <input id="recipeSearch" type="text" placeholder="FILTER">
                     </div>
 
-                    <button id="recipeClearButton" class="clearButton" onclick="recipeBookStrandObj.clearSorting()" style="display: none;">
+                    <button id="recipeClearButton" class="clearButton" style="display: none;">
                         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="12" cy="12" r="10"></circle>
                             <line x1="15" y1="9" x2="9" y2="15"></line>
@@ -250,9 +250,49 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">ORDERS</h1>
 
-                    <button class="button mobileHide" onclick="newOrderComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="controller.openSidebar('newOrder')">NEW</button>
                 </div>
 
+                <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>
+                    </div>
+
+                    <input class="button" type="submit" value="SUBMIT">
+                </form>
+
                 <div id="orderList"></div>
 
                 <template id="order">
@@ -269,9 +309,49 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">TRANSACTIONS</h1>
 
-                    <button class="button mobileHide" onclick="newTransactionComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="controller.openSidebar('newTransaction')">NEW</button>
                 </div>
 
+                <form id="transFormSubmit" class="filterForm">
+                    <h2>Search</h2>
+                    <div>
+                        <div class="dropdown">
+                            <div class="dropdownHead">
+                                <p>DATES</p>
+                                <button id="dateFilterBtn">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="6 9 12 15 18 9"></polyline>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="dropdownContents" id="dateDropdown">
+                                <label>From:
+                                    <input id="transFilDate1"type="date">
+                                </label>
+                                
+                                <label>To:
+                                    <input id="transFilDate2" type="date">
+                                </label>
+                            </div>
+                            
+                        </div>
+                        <div class="dropdown">
+                            <div class="dropdownHead">
+                                <p>RECIPES</p>
+                                <button id="recipeFilterBtn">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="6 9 12 15 18 9"></polyline>
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <div class="dropdownContents" id="recipeDropDown"></div>
+                        </div>
+                    </div>
+
+                    <input class="button" type="submit" value="SUBMIT">
+                </form>
+
                 <div id="transactionsList" class="transactionsList"></div>
 
                 <template id="transaction">
@@ -287,42 +367,25 @@
 
         <div id="sidebarDiv" class="sidebarHide">
             <% include ./sidebars/addIngredients %>
-
             <% include ./sidebars/newIngredient %>
-
             <% include ./sidebars/ingredientDetails %>
-
             <% include ./sidebars/recipeDetails %>
-
-            <% include ./sidebars/addRecipe %>
-
+            <% include ./sidebars/newRecipe %>
             <% include ./sidebars/orderDetails %>
-
             <% include ./sidebars/newOrder %>
-
             <% include ./sidebars/transactionDetails %>
-
             <% include ./sidebars/newTransaction %>
         </div>
 
         <% include ../shared/loader %>
 
-        <script src="/dashboardPage/Merchant.js"></script>
         <script>
-            let merchant = new Merchant(
-                <%- JSON.stringify(merchant) %>,
-                <%- JSON.stringify(transactions) %>
-            );
+            let data = {
+                merchant: <%- JSON.stringify(merchant) %>,
+                transactions: <%- JSON.stringify(transactions) %>
+            }
         </script>
-        <script src="../shared/graphs.js"></script>
-        <script src="/dashboardPage/home.js"></script>
-        <script src="/dashboardPage/ingredients.js"></script>
-        <script src="/dashboardPage/recipeBook.js"></script>
-        <script src="/dashboardPage/sidebars/sidebars.js"></script>
-        <script src="/dashboardPage/controller.js"></script>
-        <script src="/dashboardPage/orders.js"></script>
-        <script src="/dashboardPage/transactions.js"></script>
-        <script src="../shared/validation.js"></script>
+        <script src="./dashboardPage/bundle.js"></script>
 
         <noscript>Please turn on javascript for this site to work properly</noscript>
     </body>

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/Merchant.js → views/dashboardPage/js/Merchant.js

@@ -1,144 +1,6 @@
-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;
-            }
-        }
-
-        return price;
-    }
-}
+const Ingredient = require("./Ingredient.js");
+const Recipe = require("./Recipe.js");
+const Transaction = require("./Transaction.js");
 
 class Merchant{
     constructor(oldMerchant, transactions){
@@ -151,7 +13,8 @@ class Merchant{
         this.units = {
             mass: ["g", "kg", "oz", "lb"],
             volume: ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"],
-            length: ["mm", "cm", "m", "in", "foot"]
+            length: ["mm", "cm", "m", "in", "foot"],
+            other: ["each"]
         }
         
         for(let i = 0; i < oldMerchant.inventory.length; i++){
@@ -226,10 +89,8 @@ class Merchant{
             }
         }
     
-        homeStrandObj.drawInventoryCheckCard();
-        ingredientsStrandObj.populateByProperty("category");
-        addIngredientsComp.isPopulated = false;
-        closeSidebar();
+        controller.updateData("ingredient");
+        controller.closeSidebar();
     }
 
     /*
@@ -260,8 +121,8 @@ class Merchant{
             }
         }
 
-        recipeBookStrandObj.populateRecipes();
-        closeSidebar();
+        controller.updateData("recipe");
+        controller.closeSidebar();
     }
 
     /*
@@ -291,8 +152,8 @@ class Merchant{
             }
         }
 
-        ordersStrandObj.populate();
-        closeSidebar();
+        controller.updateData("order");
+        controller.closeSidebar();
     }
 
     editTransactions(transaction, remove = false){
@@ -313,9 +174,8 @@ class Merchant{
             this.transactions.sort((a, b) => a.date > b.date ? 1 : -1);
         }
 
-        transactionsStrandObj.isPopulated = false;
-        transactionsStrandObj.display();
-        closeSidebar();
+        controller.updateData("transaction");
+        controller.closeSidebar();
     }
 
     /*
@@ -564,39 +424,4 @@ class Merchant{
     }
 }
 
-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/addIngredients.js

@@ -0,0 +1,231 @@
+module.exports = {
+    isPopulated: false,
+    fakeMerchant: {},
+    chosenIngredients: [],
+
+    display: function(Merchant){
+        if(!this.isPopulated){
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
+            fetch("/ingredients")
+                .then((response) => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        for(let i = 0; i < merchant.ingredients.length; i++){
+                            for(let j = 0; j < response.length; j++){
+                                if(merchant.ingredients[i].ingredient.id === response[j]._id){
+                                    response.splice(j, 1);
+                                    break;
+                                }
+                            }
+                        }
+                        
+                        for(let i = 0; i < response.length; i++){
+                            response[i] = {ingredient: response[i]}
+                        }
+                        this.fakeMerchant = new Merchant({
+                                name: "none",
+                                inventory: response,
+                                recipes: [],
+                            },
+                            []
+                        );
+
+                        this.populateAddIngredients(true);
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("UNABLE TO RETRIEVE DATA");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+
+            this.isPopulated = true;
+        }
+    },
+
+    populateAddIngredients: function(newRequest = false){
+        let addIngredientsDiv = document.getElementById("addIngredientList");
+        let categoryTemplate = document.getElementById("addIngredientsCategory");
+        let ingredientTemplate = document.getElementById("addIngredientsIngredient");
+
+        let categories = this.fakeMerchant.categorizeIngredients();
+
+        while(addIngredientsDiv.children.length > 0){
+            addIngredientsDiv.removeChild(addIngredientsDiv.firstChild);
+        }
+        for(let i = 0; i < categories.length; i++){
+            let categoryDiv = categoryTemplate.content.children[0].cloneNode(true);
+            categoryDiv.children[0].children[0].innerText = categories[i].name;
+            categoryDiv.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(categoryDiv)};
+            categoryDiv.children[1].style.display = "none";
+            categoryDiv.children[0].children[1].children[1].style.display = "none";
+
+            addIngredientsDiv.appendChild(categoryDiv);
+            
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
+                ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
+                ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
+
+                categoryDiv.children[1].appendChild(ingredientDiv);
+            }
+        }
+
+        if(newRequest){
+            let myIngredients = document.getElementById("myIngredients");
+            while(myIngredients.children.length > 0){
+                myIngredients.removeChild(myIngredients.firstChild);
+            }
+        }
+
+        document.getElementById("addIngredientsBtn").onclick = ()=>{this.submit()};
+        document.getElementById("openNewIngredient").onclick = ()=>{controller.openSidebar("newIngredient")};
+    },
+
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
+    addOne: function(element){
+        element.parentElement.removeChild(element);
+        document.getElementById("myIngredients").appendChild(element);
+        document.getElementById("myIngredientsDiv").style.display = "flex";
+
+        for(let i = 0; i < this.fakeMerchant.ingredients.length; i++){
+            if(this.fakeMerchant.ingredients[i].ingredient === element.ingredient){
+                this.fakeMerchant.ingredients.splice(i, 1);
+                this.chosenIngredients.push(element.ingredient);
+                break;
+            }
+        }
+
+        let input = document.createElement("input");
+        input.type = "number";
+        input.min = "0";
+        input.step = "0.01";
+        input.placeholder = "QUANTITY";
+        element.insertBefore(input, element.children[1]);
+
+        let select = element.children[2];
+        select.style.display = "block";
+        let units = merchant.units[element.ingredient.unitType];
+        for(let i = 0; i < units.length; i++){
+            let option = document.createElement("option");
+            option.innerText = units[i].toUpperCase();
+            option.type = element.ingredient.unitType;
+            option.value = units[i];
+            select.appendChild(option);
+        }
+
+        element.children[3].innerText = "-";
+        element.children[3].onclick = ()=>{this.removeOne(element)};
+    },
+
+    removeOne: function(element){
+        element.parentElement.removeChild(element);
+
+        element.removeChild(element.children[1]);
+
+        let select = element.children[1];
+        while(select.children.length > 0){
+            select.removeChild(select.firstChild);
+        }
+        select.style.display = "none";
+
+        element.children[2].innerText = "+";
+        element.children[2].onclick = ()=>{this.addOne(element)};
+
+        if(document.getElementById("myIngredients").children.length === 0){
+            document.getElementById("myIngredientsDiv").style.display = "none";
+        }
+
+        for(let i = 0; i < this.chosenIngredients.length; i++){
+            if(this.chosenIngredients[i] === element.ingredient){
+                this.chosenIngredients.splice(i, 1);
+                this.fakeMerchant.ingredients.push({
+                    ingredient: element.ingredient
+                });
+                break;
+            }
+        }
+        
+        this.populateAddIngredients();
+    },
+
+    submit: function(){
+        let ingredients = document.getElementById("myIngredients").children;
+        let newIngredients = [];
+        let fetchable = [];
+
+        for(let i = 0; i < ingredients.length; i++){
+            let quantity = ingredients[i].children[1].value;
+            let unit = ingredients[i].children[2].value;
+
+            if(quantity === ""){
+                banner.createError("PLEASE ENTER A QUANTITY FOR EACH INGREDIENT YOU WANT TO ADD TO YOUR INVENTORY");
+                return;
+            }
+            quantity = controller.convertToMain(unit, quantity);
+
+            let newIngredient = {
+                ingredient: ingredients[i].ingredient,
+                quantity: quantity
+            }
+            newIngredient.ingredient.unit = unit;
+
+            newIngredients.push(newIngredient);
+
+            fetchable.push({
+                id: ingredients[i].ingredient.id,
+                quantity: quantity,
+                defaultUnit: unit
+            });
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/merchant/ingredients/add", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(fetchable)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editIngredients(newIngredients);
+                    this.isPopulated = false;
+                    banner.createNotification("ALL INGREDIENTS ADDED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}

views/dashboardPage/js/dashboard.js

@@ -0,0 +1,252 @@
+const home = require("./home.js");
+const ingredients = require("./ingredients.js");
+const recipeBook = require("./recipeBook.js");
+const orders = require("./orders.js");
+const transactions = require("./transactions.js");
+
+const addIngredients = require("./addIngredients.js");
+const ingredientDetails = require("./ingredientDetails.js");
+const newIngredient = require("./newIngredient.js");
+const newOrder = require("./newOrder.js");
+const newRecipe = require("./newRecipe.js");
+const newTransaction = require("./newTransaction.js");
+const orderDetails = require("./orderDetails.js");
+const recipeDetails = require("./recipeDetails.js");
+const transactionDetails = require("./transactionDetails.js");
+
+const Merchant = require("./Merchant.js");
+const Ingredient = require("./Ingredient.js");
+const Recipe = require("./Recipe.js");
+const Order = require("./Order.js");
+const Transaction = require("./Transaction.js");
+
+merchant = new Merchant(data.merchant, data.transactions);
+
+controller = {
+    openStrand: function(strand){
+        this.closeSidebar();
+
+        let strands = document.querySelectorAll(".strand");
+        for(let i = 0; i < strands.length; i++){
+            strands[i].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(strand){
+            case "home": 
+                activeButton = document.getElementById("homeBtn");
+                document.getElementById("homeStrand").style.display = "flex";
+                home.display();
+                break;
+            case "ingredients": 
+                activeButton = document.getElementById("ingredientsBtn");
+                document.getElementById("ingredientsStrand").style.display = "flex";
+                ingredients.display();
+                break;
+            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(Order);
+                break;
+            case "transactions":
+                activeButton = document.getElementById("transactionsBtn");
+                document.getElementById("transactionsStrand").style.display = "flex";
+                transactions.display(Transaction);
+                break;
+        }
+
+        activeButton.classList = "menuButton active";
+        activeButton.disabled = true;
+
+        if(window.screen.availWidth <= 1000){
+            this.closeMenu();
+        }
+    },
+
+    /*
+    Open a specific sidebar
+    Input:
+    sidebar: the outermost element of the sidebar (must contain class sidebar)
+    */
+    openSidebar: function(sidebar, data = {}){
+        this.closeSidebar();
+
+        document.getElementById("sidebarDiv").classList = "sidebar";
+        document.getElementById(sidebar).style.display = "flex";
+
+        switch(sidebar){
+            case "ingredientDetails":
+                ingredientDetails.display(data);
+                break;
+            case "addIngredients":
+                addIngredients.display(Merchant);
+                break;
+            case "newIngredient":
+                newIngredient.display(Ingredient);
+                break;
+            case "recipeDetails":
+                recipeDetails.display(data);
+                break;
+            case "addRecipe":
+                newRecipe.display(Recipe);
+                break;
+            case "orderDetails":
+                orderDetails.display(data);
+                break;
+            case "newOrder":
+                newOrder.display(Order);
+                break;
+            case "transactionDetails":
+                transactionDetails.display(data);
+                break;
+            case "newTransaction":
+                newTransaction.display(Transaction);
+                break;
+        }
+
+        if(window.screen.availWidth <= 1000){
+            document.querySelector(".contentBlock").style.display = "none";
+            document.getElementById("mobileMenuSelector").style.display = "none";
+            document.getElementById("sidebarCloser").style.display = "block";
+        }
+    },
+
+    closeSidebar: function(){
+        let sidebar = document.getElementById("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";
+        }
+    },
+
+    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 < buttons.length; i++){
+                buttons[i].children[1].style.display = "none";
+            }
+
+            document.getElementById("max").style.display = "none";
+            document.getElementById("min").style.display = "flex";
+
+            
+        }else if(menu.classList.contains("menuMinimized")){
+            menu.classList = "menu";
+
+            for(let i = 0; i < buttons.length; i++){
+                buttons[i].children[1].style.display = "block";
+            }
+
+            setTimeout(()=>{
+                document.getElementById("max").style.display = "flex";
+                document.getElementById("min").style.display = "none";
+            }, 150);
+        }
+    },
+
+    openMenu: function(){
+        document.getElementById("menu").style.display = "flex";
+        document.querySelector(".contentBlock").style.display = "none";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{this.closeMenu()};
+    },
+
+    closeMenu: function(){
+        document.getElementById("menu").style.display = "none";
+        document.querySelector(".contentBlock").style.display = "flex";
+        document.getElementById("mobileMenuSelector").onclick = ()=>{this.openMenu()};
+    },
+
+    convertToMain: function(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;
+    },
+
+    /*
+    Sets certain strands to repopulate everything the next time it is opened
+    Use for when any data is changed
+    item = whatever is being updated
+    */
+    updateData: function(item){
+        switch(item){
+            case "ingredient":
+                home.drawInventoryCheckCard();
+                ingredients.populateByProperty("category");
+                addIngredients.isPopulated = false;
+                break;
+            case "recipe":
+                transactions.isPopulated = false;
+                recipeBook.populateRecipes();
+                break;
+            case "order":
+                orders.populate();
+                break;
+            case "transaction":
+                transactions.isPopulated = false;
+                transactions.display(Transaction);
+                break;
+            case "unit":
+                home.isPopulated = false;
+                ingredients.populateByProperty("category");
+                break;
+        }
+    }
+}
+
+if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
+    this.changeMenu();
+    document.getElementById("menuShifter2").style.display = "none";
+}
+
+controller.openStrand("home");

views/dashboardPage/home.js → views/dashboardPage/js/home.js

@@ -1,4 +1,4 @@
-window.homeStrandObj = {
+module.exports = {
     isPopulated: false,
     graph: {},
 
@@ -22,7 +22,7 @@ window.homeStrandObj = {
         let revenueThisMonth = merchant.revenue(merchant.transactionIndices(firstOfMonth));
         let revenueLastmonthToDay = merchant.revenue(merchant.transactionIndices(firstOfLastMonth, lastMonthtoDay));
 
-        document.querySelector("#revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
+        document.getElementById("revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
 
         let revenueChange = ((revenueThisMonth - revenueLastmonthToDay) / revenueLastmonthToDay) * 100;
         
@@ -37,12 +37,13 @@ window.homeStrandObj = {
     },
 
     drawRevenueGraph: function(){
-        let graphCanvas = document.querySelector("#graphCanvas");
+        let graphCanvas = document.getElementById("graphCanvas");
         let today = new Date();
 
         graphCanvas.height = graphCanvas.parentElement.clientHeight;
         graphCanvas.width = graphCanvas.parentElement.clientWidth;
 
+        let LineGraph = require("../../shared/graphs.js").LineGraph;
         this.graph = new LineGraph(graphCanvas);
         this.graph.addTitle("Revenue");
 
@@ -57,12 +58,12 @@ window.homeStrandObj = {
                 "Revenue"
             );
         }else{
-            document.querySelector("#graphCanvas").style.display = "none";
+            document.getElementById("graphCanvas").style.display = "none";
             
             let notice = document.createElement("h1");
             notice.innerText = "NO DATA YET";
             notice.classList = "notice";
-            document.querySelector("#graphCard").appendChild(notice);
+            document.getElementById("graphCard").appendChild(notice);
         }
     },
 
@@ -85,7 +86,7 @@ window.homeStrandObj = {
         }
 
         let ul = document.querySelector("#inventoryCheckCard ul");
-        let template = document.querySelector("#ingredientCheck").content.children[0];
+        let template = document.getElementById("ingredientCheck").content.children[0];
         while(ul.children.length > 0){
             ul.removeChild(ul.firstChild);
         }
@@ -102,6 +103,8 @@ window.homeStrandObj = {
 
             ul.appendChild(ingredientCheck);
         }
+
+        document.getElementById("inventoryCheck").onclick = ()=>{this.submitInventoryCheck()};
     },
 
     drawPopularCard: function(){
@@ -110,9 +113,9 @@ window.homeStrandObj = {
         let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
 
         let ingredientList = merchant.ingredientsSold(merchant.transactionIndices(thisMonth));
-        window.ingredientList = [...ingredientList];
-        let iterations = (ingredientList.length < 5) ? ingredientList.length : 5;
-        if(ingredientList.length > 0){
+        if(ingredientList !== false){
+            window.ingredientList = [...ingredientList];
+            let iterations = (ingredientList.length < 5) ? ingredientList.length : 5;
             for(let i = 0; i < iterations; i++){
                 try{
                     let max = ingredientList[0].quantity;
@@ -137,18 +140,19 @@ window.homeStrandObj = {
             }
 
             let thisCanvas = document.getElementById("popularCanvas");
-            thisCanvas.width = thisCanvas.parentElement.offsetWidth;
-            thisCanvas.height = thisCanvas.parentElement.offsetHeight;
+            thisCanvas.width = thisCanvas.parentElement.offsetWidth * 0.8;
+            thisCanvas.height = thisCanvas.parentElement.offsetHeight * 0.8;
 
+            let HorizontalBarGraph = require("../../shared/graphs.js").HorizontalBarGraph;
             let popularGraph = new HorizontalBarGraph(thisCanvas);
             popularGraph.addData(dataArray);
         }else{
-            document.querySelector("#popularCanvas").style.display = "none";
+            document.getElementById("popularCanvas").style.display = "none";
 
             let notice = document.createElement("p");
             notice.innerText = "N/A";
             notice.classList = "notice";
-            document.querySelector("#popularIngredientsCard").appendChild(notice);
+            document.getElementById("popularIngredientsCard").appendChild(notice);
         }
     },
 
@@ -156,6 +160,7 @@ window.homeStrandObj = {
         let lis = document.querySelectorAll("#inventoryCheckCard li");
 
         let changes = [];
+        let fetchData = [];
 
         for(let i = 0; i < lis.length; i++){
             if(lis[i].children[1].children[1].value >= 0){
@@ -169,6 +174,11 @@ window.homeStrandObj = {
                         ingredient: merchIngredient.ingredient,
                         quantity: value
                     });
+
+                    fetchData.push({
+                        id: merchIngredient.ingredient.id,
+                        quantity: value
+                    });
                 }
             }else{
                 banner.createError("CANNOT HAVE NEGATIVE INGREDIENTS");
@@ -179,19 +189,21 @@ window.homeStrandObj = {
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
         
-        if(changes.length > 0){
+        if(fetchData.length > 0){
             fetch("/merchant/ingredients/update", {
                 method: "PUT",
                 headers: {
                     "Content-Type": "application/json;charset=utf-8"
                 },
-                body: JSON.stringify(changes)
+                body: JSON.stringify(fetchData)
             })
                 .then((response) => response.json())
                 .then((response)=>{
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
+                        
+
                         merchant.editIngredients(changes);
                         banner.createNotification("INGREDIENTS UPDATED");
                     }

views/dashboardPage/js/ingredientDetails.js

@@ -0,0 +1,206 @@
+module.exports = {
+    ingredient: {},
+    dailyUse: 0,
+
+    display: function(ingredient){
+        this.ingredient = ingredient;
+
+        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;
+        let ingredientStock = document.getElementById("ingredientStock");
+        ingredientStock.innerText = `${ingredient.ingredient.convert(ingredient.quantity).toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
+        ingredientStock.style.display = "block";
+        let ingredientInput = document.getElementById("ingredientInput");
+        ingredientInput.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+        ingredientInput.style.display = "none";
+
+        let quantities = [];
+        let now = new Date();
+        for(let i = 1; i < 31; i++){
+            let endDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i)
+            let startDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i - 1);
+            let indices = merchant.transactionIndices(startDay, endDay);
+
+            if(indices === false){
+                quantities.push(0);
+            }else{
+                quantities.push(merchant.singleIngredientSold(indices, ingredient));
+            }
+        }
+
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+
+        this.dailyUse = sum / quantities.length;
+
+        document.getElementById("dailyUse").innerText = `${ingredient.ingredient.convert(this.dailyUse).toFixed(2)} ${ingredient.ingredient.unit}`;
+
+        let ul = document.getElementById("ingredientRecipeList");
+        let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
+        while(ul.children.length > 0){
+            ul.removeChild(ul.firstChild);
+        }
+        for(let i = 0; i < recipes.length; i++){
+            let li = document.createElement("li");
+            li.innerText = recipes[i].name;
+            li.onclick = ()=>{
+                controller.openStrand("recipeBook");
+                controller.openSidebar("recipeDetails", recipes[i]);
+            }
+            ul.appendChild(li);
+        }
+
+        let ingredientButtons = document.getElementById("ingredientButtons");
+        let units = [];
+        let unitLabel = document.getElementById("displayUnitLabel");
+        let defaultButton = document.getElementById("defaultUnit");
+        if(this.ingredient.ingredient.unitType !== "other"){
+            units = merchant.units[this.ingredient.ingredient.unitType];
+            unitLabel.style.display = "block";
+            defaultButton.style.display = "block";
+        }else{
+            unitLabel.style.display = "none";
+            defaultButton.style.display = "none";
+        }
+        
+        while(ingredientButtons.children.length > 0){
+            ingredientButtons.removeChild(ingredientButtons.firstChild);
+        }
+        for(let i = 0; i < units.length; i++){
+            let button = document.createElement("button");
+            button.classList.add("unitButton");
+            button.innerText = units[i].toUpperCase();
+            button.onclick = ()=>{this.changeUnit(button, units[i])};
+            ingredientButtons.appendChild(button);
+
+            if(units[i] === this.ingredient.ingredient.unit){
+                button.classList.add("unitActive");
+            }
+        }
+
+        document.getElementById("defaultUnit").onclick = ()=>{this.changeUnitDefault()};
+        document.getElementById("editSubmitButton").onclick = ()=>{this.editSubmit()};
+    },
+
+    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){
+                    banner.createError("MUST REMOVE INGREDIENT FROM ALL RECIPES BEFORE REMOVING FROM INVENTORY");
+                    return;
+                }
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/merchant/ingredients/remove/${this.ingredient.ingredient.id}`, {
+            method: "DELETE",
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    banner.createNotification("INGREDIENT REMOVED");
+                    merchant.editIngredients([this.ingredient], true);
+                }
+            })
+            .catch((err)=>{})
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    edit: function(){
+        document.getElementById("ingredientStock").style.display = "none";
+        document.getElementById("ingredientInput").style.display = "block";
+        document.getElementById("editSubmitButton").style.display = "block";
+    },
+
+    editSubmit: function(){
+        this.ingredient.quantity = controller.convertToMain(
+            this.ingredient.ingredient.unit,
+            Number(document.getElementById("ingredientInput").value)
+        );
+        
+        let data = [{
+            id: this.ingredient.ingredient.id,
+            quantity: controller.convertToMain(this.ingredient.ingredient.unit, this.ingredient.quantity)
+        }];
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/merchant/ingredients/update", {
+            method: "PUT",
+            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{
+                    merchant.editIngredients([this.ingredient]);
+                    banner.createNotification("INGREDIENT UPDATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    changeUnit: function(newActive, unit){
+        this.ingredient.ingredient.unit = unit;
+
+        let ingredientButtons = document.querySelectorAll(".unitButton");
+        for(let i = 0; i < ingredientButtons.length; i++){
+            ingredientButtons[i].classList.remove("unitActive");
+        }
+
+        newActive.classList.add("unitActive");
+
+        controller.updateData("unit");
+        document.getElementById("ingredientStock").innerText = `${this.ingredient.ingredient.convert(this.ingredient.quantity).toFixed(2)} ${this.ingredient.ingredient.unit.toUpperCase()}`;
+        document.getElementById("dailyUse").innerText = `${this.ingredient.ingredient.convert(this.dailyUse).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+    },
+
+    changeUnitDefault: function(){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        let id = this.ingredient.ingredient.id;
+        let unit = this.ingredient.ingredient.unit;
+        fetch(`/merchant/ingredients/update/${id}/${unit}`, {
+            method: "put",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+        })
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    banner.createNotification("INGREDIENT DEFAULT UNIT UPDATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}

views/dashboardPage/ingredients.js → views/dashboardPage/js/ingredients.js

@@ -1,4 +1,4 @@
-window.ingredientsStrandObj = {
+module.exports = {
     isPopulated: false,
     ingredients: [],
 
@@ -6,6 +6,10 @@ window.ingredientsStrandObj = {
         if(!this.isPopulated){
             this.populateByProperty("category");
 
+            document.getElementById("ingredientSearch").oninput = ()=>{this.search()};
+            document.getElementById("ingredientClearButton").onclick = ()=>{this.clearSorting()};
+            document.getElementById("ingredientSelect").onchange = ()=>{this.sort()};
+
             this.isPopulated = true;
         }
     },
@@ -18,9 +22,9 @@ window.ingredientsStrandObj = {
             categories = merchant.unitizeIngredients();
         }
         
-        let ingredientStrand = document.querySelector("#categoryList");
-        let categoryTemplate = document.querySelector("#categoryDiv").content.children[0];
-        let ingredientTemplate = document.querySelector("#ingredient").content.children[0];
+        let ingredientStrand = document.getElementById("categoryList");
+        let categoryTemplate = document.getElementById("categoryDiv").content.children[0];
+        let ingredientTemplate = document.getElementById("ingredient").content.children[0];
         this.ingredients = [];
 
         while(ingredientStrand.children.length > 0){
@@ -40,7 +44,7 @@ window.ingredientsStrandObj = {
 
                 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();
 
@@ -52,7 +56,7 @@ window.ingredientsStrandObj = {
     },
 
     displayIngredientsOnly: function(ingredients){
-        let ingredientDiv = document.querySelector("#categoryList");
+        let ingredientDiv = document.getElementById("categoryList");
 
         while(ingredientDiv.children.length > 0){
             ingredientDiv.removeChild(ingredientDiv.firstChild);
@@ -73,12 +77,12 @@ window.ingredientsStrandObj = {
     },
 
     search: function(){
-        let input = document.querySelector("#ingredientSearch").value.toLowerCase();
-        document.querySelector("#ingredientSelect").selectedIndex = 0;
+        let input = document.getElementById("ingredientSearch").value.toLowerCase();
+        document.getElementById("ingredientSelect").selectedIndex = 0;
 
         if(input === ""){
             this.populateByProperty("category");
-            document.querySelector("#ingredientClearButton").style.display = "none";
+            document.getElementById("ingredientClearButton").style.display = "none";
             return;
         }
 
@@ -89,16 +93,18 @@ window.ingredientsStrandObj = {
             }
         }
 
-        document.querySelector("#ingredientClearButton").style.display = "inline";
+        document.getElementById("ingredientClearButton").style.display = "inline";
         this.displayIngredientsOnly(matchingIngredients);
     },
 
-    sort: function(sortType){
+    sort: function(){
+        let sortType = document.getElementById("ingredientSelect").value;
+        
         if(sortType === ""){
             return;
         }
 
-        document.querySelector("#ingredientSearch").value = "";
+        document.getElementById("ingredientSearch").value = "";
 
         if(sortType === "category"){
             this.populateByProperty("category");
@@ -110,15 +116,15 @@ window.ingredientsStrandObj = {
             return;
         }
 
-        document.querySelector("#ingredientClearButton").style.display = "inline";
+        document.getElementById("ingredientClearButton").style.display = "inline";
         let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
         this.displayIngredientsOnly(sortedIngredients);
     },
 
     clearSorting: function(button){
-        document.querySelector("#ingredientSearch").value = "";
-        document.querySelector("#ingredientSelect").selectedIndex = 0;
-        document.querySelector("#ingredientClearButton").style.display = "none";
+        document.getElementById("ingredientSearch").value = "";
+        document.getElementById("ingredientSelect").selectedIndex = 0;
+        document.getElementById("ingredientClearButton").style.display = "none";
 
         this.populateByProperty("category");
     }

views/dashboardPage/js/newIngredient.js

@@ -0,0 +1,63 @@
+module.exports = {
+    display: function(Ingredient){
+        document.getElementById("newIngName").value = "";
+        document.getElementById("newIngCategory").value = "";
+        document.getElementById("newIngQuantity").value = 0;
+
+        document.getElementById("submitNewIng").onclick = ()=>{this.submit(Ingredient)};
+    },
+
+    submit: function(Ingredient){
+        let unitSelector = document.getElementById("unitSelector");
+        let options = document.querySelectorAll("#unitSelector option");
+
+        let unit = unitSelector.value;
+
+        let newIngredient = {
+            ingredient: {
+                name: document.getElementById("newIngName").value,
+                category: document.getElementById("newIngCategory").value,
+                unitType: options[unitSelector.selectedIndex].getAttribute("type"),
+            },
+            quantity: controller.convertToMain(unit, document.getElementById("newIngQuantity").value),
+            defaultUnit: unit
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/ingredients/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(newIngredient)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editIngredients([{
+                        ingredient: new Ingredient(
+                            response.ingredient._id,
+                            response.ingredient.name,
+                            response.ingredient.category,
+                            response.ingredient.unitType,
+                            response.defaultUnit,
+                            merchant
+                        ),
+                        quantity: response.quantity
+                    }]);
+
+                    banner.createNotification("INGREDIENT CREATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}

views/dashboardPage/js/newOrder.js

@@ -0,0 +1,170 @@
+module.exports = {
+    isPopulated: false,
+    unused: [],
+
+    display: function(Order){
+        if(!this.isPopulated){
+            let categories = merchant.categorizeIngredients();
+            let categoriesList = document.getElementById("newOrderCategories");
+            let template = document.getElementById("addIngredientsCategory").content.children[0];
+            let ingredientTemplate = document.getElementById("addIngredientsIngredient").content.children[0];
+    
+            for(let i = 0; i < categories.length; i++){
+                let category = template.cloneNode(true);
+    
+                category.children[0].children[0].innerText = categories[i].name;
+                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
+                category.children[0].children[1].children[1].style.display = "none";
+                category.children[1].style.display = "none";
+                
+                categoriesList.appendChild(category);
+    
+                for(let j = 0; j < categories[i].ingredients.length; j++){
+                    let ingredientDiv = ingredientTemplate.cloneNode(true);
+    
+                    ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                    ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv, category.children[1])};
+                    ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
+    
+                    this.unused.push(categories[i].ingredients[j]);
+                    category.children[1].appendChild(ingredientDiv);
+                }
+            }
+
+            document.getElementById("submitNewOrder").onclick = ()=>{this.submit(Order)};
+
+            this.isPopulated = true;
+        }
+    },
+
+    addOne: function(ingredientDiv, container){
+        for(let i = 0; i < this.unused.length; i++){
+            if(this.unused[i] === ingredientDiv){
+                this.unused.splice(i, 1);
+                break;
+            }
+        }
+
+        let quantityInput = document.createElement("input");
+        quantityInput.type = "number";
+        quantityInput.placeholder = `QUANTITY (${ingredientDiv.ingredient.unit})`;
+        quantityInput.min = "0";
+        quantityInput.step = "0.01";
+        ingredientDiv.insertBefore(quantityInput, ingredientDiv.children[1]);
+
+        let priceInput = document.createElement("input");
+        priceInput.type = "number";
+        priceInput.placeholder = "Price Per Unit";
+        priceInput.min = "0";
+        priceInput.step = "0.01";
+        ingredientDiv.insertBefore(priceInput, ingredientDiv.children[2]);
+
+        ingredientDiv.children[4].innerText = "-";
+        ingredientDiv.children[4].onclick = ()=>{this.removeOne(ingredientDiv, container)};
+
+        container.removeChild(ingredientDiv);
+        document.getElementById("newOrderAdded").appendChild(ingredientDiv);
+    },
+
+    removeOne: function(ingredientDiv, container){
+        this.unused.push(ingredientDiv.ingredient);
+
+        ingredientDiv.removeChild(ingredientDiv.children[1]);
+        ingredientDiv.removeChild(ingredientDiv.children[1]);
+        ingredientDiv.children[1].innerText = "+";
+        ingredientDiv.children[1].onclick = ()=>{this.addOne(ingredientDiv, container)};
+        
+        ingredientDiv.parentElement.removeChild(ingredientDiv);
+        container.appendChild(ingredientDiv);
+    },
+
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
+    submit: function(Order){
+        let categoriesList = document.getElementById("newOrderAdded");
+        let ingredients = [];
+
+        for(let i = 0; i < categoriesList.children.length; i++){
+            let quantity = categoriesList.children[i].children[1].value;
+            let price = categoriesList.children[i].children[2].value;
+
+            let fakeOrder = new Order(undefined, undefined, new Date(), [], undefined);
+            if(quantity !== ""  && price !== ""){
+                ingredients.push({
+                    ingredient: categoriesList.children[i].ingredient.id,
+                    quantity: controller.convertToMain(categoriesList.children[i].ingredient.unit, parseFloat(quantity)),
+                    price: categoriesList.children[i].ingredient.convert(parseInt(price * 100))
+                });
+            }
+        }
+
+        let time = document.getElementById("orderTime").value;
+        let date = document.getElementById("orderDate").value;
+        let dateTime = "";
+        if(time === "" && date === ""){
+            dateTime = undefined;
+        }else if(time === "" && date !== ""){
+            dateTime = date;
+        }else if(time !== "" && date === ""){
+            banner.createError("PLEASE ADD A DATE IF YOU WISH TO HAVE A TIME");
+        }else{
+            dateTime = `${date}T${time}:00`
+        }
+
+        let data = {
+            name: document.getElementById("orderName").value,
+            date: dateTime,
+            ingredients: ingredients
+        };
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+        
+        fetch("/order/create", {
+            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 order = new Order(
+                       response._id,
+                       response.name,
+                       response.date,
+                       response.ingredients,
+                       merchant 
+                    )
+
+                    merchant.editOrders([order]);
+                    merchant.editIngredients(order.ingredients, false, true);
+                    banner.createNotification("ORDER CREATED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOEMTHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}

views/dashboardPage/js/newRecipe.js

@@ -0,0 +1,113 @@
+module.exports = {
+    display: function(Recipe){
+        console.log("display");
+        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
+        let categories = merchant.categorizeIngredients();
+
+        while(ingredientsSelect.children.length > 0){
+            ingredientsSelect.removeChild(ingredientsSelect.firstChild);
+        }
+
+        for(let i = 0; i < categories.length; i++){
+            let optgroup = document.createElement("optgroup");
+            optgroup.label = categories[i].name;
+            ingredientsSelect.appendChild(optgroup);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let option = document.createElement("option");
+                option.value = categories[i].ingredients[j].ingredient.id;
+                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
+                optgroup.appendChild(option);
+            }
+        }
+
+        document.getElementById("ingredientCount").onclick = ()=>{this.changeRecipeCount()};
+        document.getElementById("submitNewRecipe").onclick = ()=>{this.submit(Recipe)};
+    },
+
+    //Updates the number of ingredient inputs displayed for new recipes
+    changeRecipeCount: function(){
+        console.log("doing things");
+        let newCount = document.getElementById("ingredientCount").value;
+        let ingredientsDiv = document.getElementById("recipeInputIngredients");
+        let oldCount = ingredientsDiv.children.length;
+
+        if(newCount > oldCount){
+            let newDivs = newCount - oldCount;
+
+            for(let i = 0; i < newDivs; i++){
+                let newNode = ingredientsDiv.children[0].cloneNode(true);
+                newNode.children[2].children[0].value = "";
+
+                ingredientsDiv.appendChild(newNode);
+            }
+
+            for(let i = 0; i < newCount; i++){
+                ingredientsDiv.children[i].children[0].innerText = `INGREDIENT ${i + 1}`;
+            }
+        }else if(newCount < oldCount){
+            let newDivs = oldCount - newCount;
+
+            for(let i = 0; i < newDivs; i++){
+                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
+            }
+        }
+    },
+
+    submit: function(Recipe){
+        let newRecipe = {
+            name: document.getElementById("newRecipeName").value,
+            price: document.getElementById("newRecipePrice").value,
+            ingredients: []
+        }
+
+        let inputs = document.querySelectorAll("#recipeInputIngredients > div");
+        for(let i = 0; i < inputs.length; i++){
+            for(let j = 0; j < merchant.ingredients.length; j++){
+                if(merchant.ingredients[j].ingredient.id === inputs[i].children[1].children[0].value){
+                    newRecipe.ingredients.push({
+                        ingredient: inputs[i].children[1].children[0].value,
+                        quantity: controller.convertToMain(merchant.ingredients[j].ingredient.unit, inputs[i].children[2].children[0].value)
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/recipe/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(newRecipe)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    let recipe = new Recipe(
+                        response._id,
+                        response.name,
+                        response.price,
+                        response.ingredients,
+                        merchant,
+                    );
+                    
+                    merchant.editRecipes([recipe]);
+                    banner.createNotification("RECIPE CREATED");
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}

views/dashboardPage/js/newTransaction.js

@@ -0,0 +1,82 @@
+module.exports = {
+    display: function(Transaction){
+        let recipeList = document.getElementById("newTransactionRecipes");
+        let template = document.getElementById("createTransaction").content.children[0];
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.recipe = merchant.recipes[i];
+            recipeList.appendChild(recipeDiv);
+
+            recipeDiv.children[0].innerText = merchant.recipes[i].name;
+        }
+
+        document.getElementById("submitNewTransaction").onclick = ()=>{this.submit(Transaction)};
+    },
+
+    submit: function(Transaction){
+        let recipeDivs = document.getElementById("newTransactionRecipes");
+        let date = document.getElementById("newTransactionDate").valueAsDate;
+        
+        if(date > new Date()){
+            banner.createError("CANNOT HAVE A DATE IN THE FUTURE");
+            return;
+        }
+        
+        let newTransaction = {
+            date: date,
+            recipes: []
+        };
+
+        for(let i = 0; i < recipeDivs.children.length;  i++){
+            let quantity = recipeDivs.children[i].children[1].value;
+            if(quantity !== "" && quantity > 0){
+                newTransaction.recipes.push({
+                    recipe: recipeDivs.children[i].recipe.id,
+                    quantity: quantity
+                });
+            }else if(quantity < 0){
+                banner.createError("CANNOT HAVE NEGATIVE VALUES");
+                return;
+            }
+        }
+
+        if(newTransaction.recipes.length > 0){
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
+            fetch("/transaction/create", {
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify(newTransaction)
+            })
+                .then(response => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        let transaction = new Transaction(
+                            response._id,
+                            response.date,
+                            response.recipes,
+                            merchant
+                        );
+                        merchant.editTransactions(transaction);
+                        banner.createNotification("NEW TRANSACTION CREATED");
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+        }
+    }
+}

views/dashboardPage/js/orderDetails.js

@@ -0,0 +1,61 @@
+module.exports = {
+    display: function(order){
+        document.getElementById("removeOrderBtn").onclick = ()=>{this.remove(order)};
+
+        document.getElementById("orderDetailName").innerText = order.name;
+        document.getElementById("orderDetailDate").innerText = order.date.toLocaleDateString("en-US");
+        document.getElementById("orderDetailTime").innerText = order.date.toLocaleTimeString("en-US");
+
+        let ingredientList = document.getElementById("orderIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        let template = document.getElementById("orderIngredient").content.children[0];
+        let grandTotal = 0;
+        for(let i = 0; i < order.ingredients.length; i++){
+            let ingredientDiv = template.cloneNode(true);
+            let price = (order.ingredients[i].quantity * order.ingredients[i].price) / 100;
+            grandTotal += price;
+
+            let ingredient = order.ingredients[i].ingredient;
+            let priceText = ingredient.convert(order.ingredients[i].quantity).toFixed(2) + " " + 
+                ingredient.unit.toUpperCase() + " x $" +
+                (order.convertPrice(ingredient.unitType, ingredient.unit, order.ingredients[i].price) / 100).toFixed(2);
+            ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
+            ingredientDiv.children[1].innerText = priceText;
+            ingredientDiv.children[2].innerText = `$${price.toFixed(2)}`;
+
+            ingredientList.appendChild(ingredientDiv);
+        }
+
+        document.querySelector("#orderTotalPrice p").innerText = `$${grandTotal.toFixed(2)}`;
+    },
+
+    remove: function(order){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/order/${order.id}`, {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            }
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editOrders([order], true);
+                    banner.createNotification("ORDER REMOVED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}

views/dashboardPage/js/orders.js

@@ -0,0 +1,191 @@
+const Order = require("./Order");
+
+module.exports = {
+    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{
+                        let newOrders = [];
+                        for(let i = 0; i < response.length; i++){
+                            newOrders.push(new Order(
+                                response[i]._id,
+                                response[i].name,
+                                response[i].date,
+                                response[i].ingredients,
+                                merchant
+                            ));
+                        }
+                        merchant.editOrders(newOrders);
+
+                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
+
+                        this.isFetched = true;
+                    }
+                })
+                .catch((err)=>{
+                    console.log(err);
+                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
+        }
+    },
+
+    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 brk = document.createElement("br");
+            ingredientDropdown.appendChild(brk);
+        }
+
+        while(listDiv.children.length > 0){
+            listDiv.removeChild(listDiv.firstChild);
+        }
+
+        for(let i = 0; i < merchant.orders.length; i++){
+            let row = template.cloneNode(true);
+            let totalCost = 0;
+            
+            for(let j = 0; j < merchant.orders[i].ingredients.length; j++){
+                totalCost += merchant.orders[i].ingredients[j].quantity * merchant.orders[i].ingredients[j].price;
+            }
+
+            row.children[0].innerText = merchant.orders[i].name;
+            row.children[1].innerText = `${merchant.orders[i].ingredients.length} items`;
+            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
+            row.children[3].innerText = `$${(totalCost / 100).toFixed(2)}`;
+            row.order = merchant.orders[i];
+            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
+            listDiv.appendChild(row);
+        }
+    },
+
+    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);
+            }
+        }
+
+        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)=>{
+                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].ingredients,
+                            merchant
+                        );
+
+                        let cost = 0;
+                        for(let j = 0; j < order.ingredients.length; j++){
+                            cost += (order.ingredients[j].price / 100) * order.ingredients[j].quantity;
+                        }
+
+                        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];
+
+        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");
+        }
+    }
+}

views/dashboardPage/recipeBook.js → views/dashboardPage/js/recipeBook.js

@@ -1,4 +1,4 @@
-window.recipeBookStrandObj = {
+module.exports = {
     isPopulated: false,
     recipeDivList: [],
 
@@ -6,6 +6,12 @@ window.recipeBookStrandObj = {
         if(!this.isPopulated){
             this.populateRecipes();
 
+            if(merchant.pos === "clover"){
+                document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate()};
+            }
+            document.getElementById("recipeSearch").oninput = ()=>{this.search()};
+            document.getElementById("recipeClearButton").onclick = ()=>{this.clearSorting()};
+
             this.isPopulated = true;
         }
     },
@@ -21,7 +27,7 @@ window.recipeBookStrandObj = {
 
         for(let i = 0; i < merchant.recipes.length; i++){
             let recipeDiv = template.cloneNode(true);
-            recipeDiv.onclick = ()=>{recipeDetailsComp.display(merchant.recipes[i])};
+            recipeDiv.onclick = ()=>{controller.openSidebar("recipeDetails", merchant.recipes[i])};
             recipeDiv._name = merchant.recipes[i].name;
             recipeList.appendChild(recipeDiv);
 

views/dashboardPage/js/recipeDetails.js

@@ -0,0 +1,173 @@
+module.exports = {
+    recipe: {},
+
+    display: function(recipe){
+        this.recipe = recipe;
+
+        document.getElementById("recipeName").style.display = "block";
+        document.getElementById("recipeNameIn").style.display = "none";
+        document.querySelector("#recipeDetails h1").innerText = recipe.name;
+
+        let ingredientList = document.getElementById("recipeIngredientList");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        let template = document.getElementById("recipeIngredient").content.children[0];
+        for(let i = 0; i < recipe.ingredients.length; i++){
+            ingredientDiv = template.cloneNode(true);
+
+            ingredientDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
+            ingredientDiv.children[2].innerText = `${recipe.ingredients[i].ingredient.convert(recipe.ingredients[i].quantity).toFixed(2)} ${recipe.ingredients[i].ingredient.unit}`;
+            ingredientDiv.ingredient = recipe.ingredients[i].ingredient;
+            ingredientDiv.name = recipe.ingredients[i].ingredient.name;
+
+            ingredientList.appendChild(ingredientDiv);
+        }
+
+        document.getElementById("addRecIng").style.display = "none";
+
+        let price = document.getElementById("recipePrice");
+        price.children[1].style.display = "block";
+        price.children[2].style.display = "none";
+        price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;
+
+        document.getElementById("recipeUpdate").style.display = "none";
+
+        document.getElementById("editRecipeBtn").onclick = ()=>{this.edit()};
+        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove()};
+        document.getElementById("addRecIng").onclick = ()=>{this.displayAddIngredient()};
+        document.getElementById("recipeUpdate").onclick = ()=>{this.update()};
+    },
+
+    edit: function(){
+        let ingredientDivs = document.getElementById("recipeIngredientList");
+
+        if(merchant.pos === "none"){
+            let name = document.getElementById("recipeName");
+            let nameIn = document.getElementById("recipeNameIn");
+            name.style.display = "none";
+            nameIn.style.display = "block";
+            nameIn.value = this.recipe.name;
+
+            let price = document.getElementById("recipePrice");
+            price.children[1].style.display = "none";
+            price.children[2].style.display = "block";
+            price.children[2].value = parseFloat((this.recipe.price / 100).toFixed(2));
+        }
+
+        for(let i = 0; i < ingredientDivs.children.length; i++){
+            let div = ingredientDivs.children[i];
+
+            div.children[2].innerText = this.recipe.ingredients[i].ingredient.unit;
+            div.children[1].style.display = "block";
+            div.children[1].value = this.recipe.ingredients[i].ingredient.convert(this.recipe.ingredients[i].quantity).toFixed(2);
+            div.children[3].style.display = "block";
+            div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
+        }
+
+        document.getElementById("addRecIng").style.display = "flex";
+        document.getElementById("recipeUpdate").style.display = "flex";
+    },
+
+    update: function(){
+        this.recipe.name = document.getElementById("recipeNameIn").value || this.recipe.name;
+        this.recipe.price = Math.round((document.getElementById("recipePrice").children[2].value * 100)) || this.recipe.price;
+        this.recipe.ingredients = [];
+
+        let divs = document.getElementById("recipeIngredientList").children;
+        for(let i = 0; i < divs.length; i++){
+            if(divs[i].name === "new"){
+                let select = divs[i].children[0];
+                this.recipe.ingredients.push({
+                    ingredient: select.options[select.selectedIndex].ingredient,
+                    quantity: controller.convertToMain(select.options[select.selectedIndex].ingredient.unit, divs[i].children[1].value)
+                });
+            }else{
+                this.recipe.ingredients.push({
+                    ingredient: divs[i].ingredient,
+                    quantity: controller.convertToMain(divs[i].ingredient.unit, divs[i].children[1].value)
+                });
+            }
+        }
+
+        let data = {
+            id: this.recipe.id,
+            name: this.recipe.name,
+            price: this.recipe.price,
+            ingredients: []
+        }
+
+        for(let i = 0; i < this.recipe.ingredients.length; i++){
+            data.ingredients.push({
+                ingredient: this.recipe.ingredients[i].ingredient.id,
+                quantity: this.recipe.ingredients[i].quantity
+            });
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/recipe/update", {
+            method: "PUT",
+            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{
+                    merchant.editRecipes([this.recipe]);
+                    banner.createNotification("RECIPE UPDATE");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    remove: function(){
+        fetch(`/merchant/recipes/remove/${this.recipe.id}`, {
+            method: "DELETE"
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editRecipes([this.recipe], true);
+                    banner.createNotification("RECIPE REMOVED");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            });
+    },
+
+    displayAddIngredient: function(){
+        let template = document.getElementById("addRecIngredient").content.children[0].cloneNode(true);
+        template.name = "new";
+        document.getElementById("recipeIngredientList").appendChild(template);
+
+        let categories = merchant.categorizeIngredients();
+
+        for(let i = 0; i < categories.length; i++){
+            let optGroup = document.createElement("optgroup");
+            optGroup.label = categories[i].name;
+            template.children[0].appendChild(optGroup);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let option = document.createElement("option");
+                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
+                option.ingredient = categories[i].ingredients[j].ingredient;
+                optGroup.appendChild(option);
+            }
+        }
+    }
+}

views/dashboardPage/js/transactionDetails.js

@@ -0,0 +1,68 @@
+module.exports = {
+    transaction: {},
+
+    display: function(transaction){
+        this.transaction = transaction;
+
+        let recipeList = document.getElementById("transactionRecipes");
+        let template = document.getElementById("transactionRecipe").content.children[0];
+        let totalRecipes = 0;
+        let totalPrice = 0;
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < transaction.recipes.length; i++){
+            let recipe = template.cloneNode(true);
+            let price = transaction.recipes[i].quantity * transaction.recipes[i].recipe.price;
+
+            recipe.children[0].innerText = transaction.recipes[i].recipe.name;
+            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x $${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
+            recipe.children[2].innerText = `$${(price / 100).toFixed(2)}`;
+            recipeList.appendChild(recipe);
+
+            totalRecipes += transaction.recipes[i].quantity;
+            totalPrice += price;
+        }
+
+        let months = ["January", "Fecbruary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        let dateString = `${days[transaction.date.getDay()]}, ${months[transaction.date.getMonth()]} ${transaction.date.getDate()}, ${transaction.date.getFullYear()}`;
+
+        document.getElementById("transactionDate").innerText = dateString;
+        document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
+        document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
+        document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+        document.getElementById("removeTransBtn").onclick = ()=>{this.remove()};
+    },
+
+    remove: function(){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch(`/transaction/${this.transaction.id}`, {
+            method: "delete",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+        })
+            .then(response => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    merchant.editTransactions(this.transaction, true);
+                    banner.createNotification("TRANSACTION REMOVED");
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+}

views/dashboardPage/js/transactions.js

@@ -0,0 +1,168 @@
+module.exports = {
+    isPopulated: false, 
+
+    display: function(Transaction){
+        if(!this.isPopulated){
+            let transactionsList = document.getElementById("transactionsList");
+            let dateDropdown = document.getElementById("dateDropdown");
+            let recipeDropdown = document.getElementById("recipeDropDown");
+            let template = document.getElementById("transaction").content.children[0];
+
+            let now = new Date();
+            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
+            document.getElementById("transFilDate1").valueAsDate = monthAgo;
+            document.getElementById("transFilDate2").valueAsDate = now;
+
+            dateDropdown.style.display = "none";
+            recipeDropdown.style.display = "none";
+
+            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
+            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
+
+            while(recipeDropdown.children.length > 0){
+                recipeDropdown.removeChild(recipeDropdown.firstChild);
+            }
+
+            for(let i = 0; i < merchant.recipes.length; i++){
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.recipe = merchant.recipes[i];
+                recipeDropdown.appendChild(checkbox);
+
+                let label = document.createElement("label");
+                label.innerText = merchant.recipes[i].name;
+                label.for = checkbox;
+                recipeDropdown.appendChild(label);
+
+                let brk = document.createElement("br");
+                recipeDropdown.appendChild(brk);
+            }
+
+            while(transactionsList.children.length > 0){
+                transactionsList.removeChild(transactionsList.firstChild);
+            }
+
+            let i = 0
+            while(i < merchant.transactions.length && i < 100){
+                let transactionDiv = template.cloneNode(true);
+                let transaction = merchant.transactions[i];
+
+                transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                transactionsList.appendChild(transactionDiv);
+
+                let totalRecipes = 0;
+                let totalPrice = 0;
+
+                for(let j = 0; j < merchant.transactions[i].recipes.length; j++){
+                    totalRecipes += merchant.transactions[i].recipes[j].quantity;
+                    totalPrice += merchant.transactions[i].recipes[j].recipe.price * merchant.transactions[i].recipes[j].quantity;
+                }
+
+                transactionDiv.children[0].innerText = `${merchant.transactions[i].date.toLocaleDateString()} ${merchant.transactions[i].date.toLocaleTimeString()}`;
+                transactionDiv.children[1].innerText = `${totalRecipes} recipes sold`;
+                transactionDiv.children[2].innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+                i++;
+            }
+
+            document.getElementById("transFormSubmit").onsubmit = ()=>{this.submitFilter(Transaction)};
+
+            this.isPopulated = true;
+        }
+    },
+
+    submitFilter: function(Transaction){
+        event.preventDefault();
+
+        let data = {
+            startDate: document.getElementById("transFilDate1").valueAsDate,
+            endDate: document.getElementById("transFilDate2").valueAsDate,
+            recipes: []
+        }
+
+        if(data.startDate >= data.endDate){
+            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            return;
+        }
+
+        let recipeChoices = document.getElementById("recipeDropDown");
+        for(let i = 0; i < recipeChoices.children.length; i += 3){
+            if(recipeChoices.children[i].checked){
+                data.recipes.push(recipeChoices.children[i].recipe.id);
+            }
+        }
+
+        if(data.recipes.length === 0){
+            for(let i = 0; i < merchant.recipes.length; i++){
+                data.recipes.push(merchant.recipes[i].id);
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/transaction", {
+            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 transactionList = document.getElementById("transactionsList");
+                    let template = document.getElementById("transaction").content.children[0];
+
+                    while(transactionList.children.length > 0){
+                        transactionList.removeChild(transactionList.firstChild);
+                    }
+
+                    for(let i = 0; i < response.length; i++){
+                        let transactionDiv = template.cloneNode(true);
+                        let recipeCount = 0;
+                        let cost = 0;
+                        let transaction = new Transaction(
+                            response[i]._id,
+                            response[i].date,
+                            response[i].recipes,
+                            merchant
+                        );
+
+                        for(let j = 0; j < transaction.recipes.length; j++){
+                            recipeCount += transaction.recipes[j].quantity;
+                            cost += transaction.recipes[j].quantity * transaction.recipes[j].recipe.price;
+                        }
+
+                        transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
+                        transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
+                        transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
+                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                        transactionList.appendChild(transactionDiv);
+                    }
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("UNABLE TO DISPLAY THE TRANSACTIONS");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    },
+
+    toggleDropdown: function(dropdown){
+        event.preventDefault();
+        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+
+        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");
+        }
+    }
+}

views/dashboardPage/orders.js

@@ -1,74 +0,0 @@
-window.ordersStrandObj = {
-    isFetched: false,
-
-    display: async function(){
-        if(!this.isFetched){
-            window.orders = [];
-
-            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{
-                        let newOrders = [];
-                        for(let i = 0; i < response.length; i++){
-                            newOrders.push(new Order(
-                                response[i]._id,
-                                response[i].name,
-                                response[i].date,
-                                response[i].ingredients,
-                                merchant
-                            ));
-                        }
-                        merchant.editOrders(newOrders);
-
-                        this.isFetched = true;
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
-    },
-
-    populate: function(){
-        let listDiv = document.querySelector("#orderList");
-        let template = document.querySelector("#order").content.children[0];
-
-        while(listDiv.children.length > 0){
-            listDiv.removeChild(listDiv.firstChild);
-        }
-
-        for(let i = 0; i < merchant.orders.length; i++){
-            let row = template.cloneNode(true);
-            let totalCost = 0;
-            
-            for(let j = 0; j < merchant.orders[i].ingredients.length; j++){
-                
-                totalCost += merchant.orders[i].ingredients[j].quantity * merchant.orders[i].ingredients[j].price;
-            }
-
-            row.children[0].innerText = merchant.orders[i].name;
-            row.children[1].innerText = `${merchant.orders[i].ingredients.length} items`;
-            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
-            row.children[3].innerText = `$${(totalCost / 100).toFixed(2)}`;
-            row.order = merchant.orders[i];
-            row.onclick = ()=>{orderDetailsComp.display(merchant.orders[i])};
-
-            window.orders.push(row);
-            listDiv.appendChild(row);
-        }
-    }
-}

views/dashboardPage/sidebars/addIngredients.ejs

@@ -1,6 +1,6 @@
 <div id="addIngredients">
     <div class="sidebarIconButtons">
-        <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>
@@ -22,9 +22,9 @@
         <div class="lineBorder"></div>
     </div>
 
-    <button id="addIngredientsBtn" class="button" onclick="addIngredientsComp.submit()">CREATE</button>
+    <button id="addIngredientsBtn" class="button">CREATE</button>
 
-    <button class="button2Link" onclick="newIngredientComp.display()">CAN'T FIND WHAT YOU'RE LOOKING FOR? CREATE IT...</button>
+    <button class="button2Link" id="openNewIngredient">CAN'T FIND WHAT YOU'RE LOOKING FOR? CREATE IT...</button>
 
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">

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>
@@ -47,11 +47,11 @@
 
     <div class="lineBorder"></div>
 
-    <label>DISPLAY UNIT:</label>
+    <label id="displayUnitLabel">DISPLAY UNIT:</label>
 
     <div id="ingredientButtons" class="ingredientButtons"></div>
 
-    <button id="defaultUnit" class="button" onclick="ingredientDetailsComp.changeUnitDefault()">SET DEFAULT</button>
+    <button id="defaultUnit" class="button">SET DEFAULT</button>
 
-    <button id="editSubmitButton" class="button" onclick="ingredientDetailsComp.editSubmit()" style="display: none;">SAVE CHANGES</button>
+    <button id="editSubmitButton" class="button" style="display: none;">SAVE CHANGES</button>
 </div>

views/dashboardPage/sidebars/newIngredient.ejs

@@ -1,6 +1,6 @@
 <div id="newIngredient">
     <div class="sidebarIconButtons">
-        <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>
@@ -52,10 +52,10 @@
             </optgroup>
 
             <optgroup label="OTHER">
-                <option value="count">count</option>
+                <option type="other" value="each">each</option>
             </optgroup>
         </select>
     </label>
 
-    <button class="button" onclick="newIngredientComp.submit()">CREATE</button>
+    <button id="submitNewIng" class="button">CREATE</button>
 </div>

views/dashboardPage/sidebars/newOrder.ejs

@@ -1,6 +1,6 @@
 <div id="newOrder">
     <div class="sidebarIconButtons">
-        <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>
@@ -10,11 +10,18 @@
 
     <h1>NEW ORDER</h1>
 
-    <label>ID OR NAME(OPTIONAL):
-        <input id="orderName" type="text"> 
+    <label>ID/NAME:
+        <input id="orderName" type="text">
     </label>
 
-    <input id="orderDate" type="date">
+    <label>Date:
+        <input id="orderDate" type="date">
+    </label>
+
+    <label>Time:
+        <input id="orderTime" type="time">
+    </label>
+    
 
     <div id=newOrderCategories></div>
 
@@ -26,5 +33,5 @@
 
     <div class="lineBorder"></div>
 
-    <button class="button" onclick="newOrderComp.submit()">CREATE</button>
+    <button id="submitNewOrder" class="button">CREATE</button>
 </div>

views/dashboardPage/sidebars/addRecipe.ejs → views/dashboardPage/sidebars/newRecipe.ejs

@@ -1,6 +1,6 @@
 <div id="addRecipe">
     <div class="sidebarIconButtons">
-        <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>
@@ -20,7 +20,7 @@
         </label>
 
         <label># OF INGREDIENTS
-            <input id="ingredientCount" type="number" step="1" min="1" onchange="newRecipeComp.changeRecipeCount()">
+            <input id="ingredientCount" type="number" step="1" min="1">
         </label>
     </div>
 
@@ -40,5 +40,5 @@
         </div>
     </div>
     
-    <button class="button" onclick="newRecipeComp.submit()">CREATE</button>
+    <button id="submitNewRecipe" class="button">CREATE</button>
 </div>

views/dashboardPage/sidebars/newTransaction.ejs

@@ -1,6 +1,6 @@
 <div id="newTransaction" class="newTransaction">
     <div class="sidebarIconButtons">
-        <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>
@@ -14,7 +14,7 @@
 
     <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
 
-    <button class="button" onclick="newTransactionComp.submit()">Create</button>
+    <button id="submitNewTransaction" class="button">Create</button>
 
     <template id="createTransaction">
         <div class="createTransaction smallItemDisplay">

views/dashboardPage/sidebars/orderDetails.ejs

@@ -1,6 +1,6 @@
 <div id="orderDetails">
     <div class="sidebarIconButtons">
-        <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>
@@ -15,9 +15,11 @@
         </button>
     </div>
 
-    <h1></h1>
+    <h1 id="orderDetailName"></h1>
 
-    <h3></h3>
+    <h3 id="orderDetailDate"></h3>
+
+    <h3 id="orderDetailTime"></h3>
 
     <div id="orderIngredients"></div>
 

views/dashboardPage/sidebars/recipeDetails.ejs

@@ -1,13 +1,13 @@
 <div id="recipeDetails">
     <div class="sidebarIconButtons">
-        <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="recipeDetailsComp.edit()">
+        <button id="editRecipeBtn" 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>
@@ -15,7 +15,7 @@
         </button>
 
         <% if(merchant.pos === "none"){ %>
-            <button class="iconButton" onclick="recipeDetailsComp.remove()">
+            <button id="removeRecipeBtn" 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>
@@ -30,7 +30,7 @@
 
     <div id="recipeIngredientList"></div>
 
-    <button id="addRecIng" class="iconButton" onclick="recipeDetailsComp.displayAddIngredient()" style="display: none;">
+    <button id="addRecIng" class="iconButton" style="display: none;">
         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <circle cx="12" cy="12" r="10"></circle>
             <line x1="12" y1="8" x2="12" y2="16"></line>
@@ -46,7 +46,7 @@
         <input type="number" min="0" step="0.01" style="display: none;">
     </div>
 
-    <button id="recipeUpdate" onclick="recipeDetailsComp.update()" class="button" style="display: none;">Update</button>
+    <button id="recipeUpdate" class="button" style="display: none;">Update</button>
 
     <template id="recipeIngredient">
         <div class="recipeIngredient">

views/dashboardPage/sidebars/sidebars.css

@@ -332,6 +332,7 @@ Ingredient Details
     #ingredientDetails label{
         font-size: 20px;
         text-align: center;
+        margin: 0;
     }
 
     #ingredientDetails label p{
@@ -340,25 +341,61 @@ Ingredient Details
         padding: 10px;
     }
 
-    .unitButton{
-        margin: 5px;
-        padding: 5px;
-        background: none;
+    .ingredientButtons{
+        display: flex;
+        justify-content: space-around;
+        padding: 10px;
+    }
+
+        .unitButton{
+            margin: 5px;
+            padding: 3px;
+            background: none;
+            border: 1px solid black;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+            .unitButton:hover{
+                background: rgb(0, 27, 45);
+                color: white;
+            }
+
+            .unitActive{
+                background: rgb(255, 99, 107);
+            }
+
+        #defaultUnit{
+            padding: 5px;
+            font-size: 15px;
+        }
+
+    #ingredientRecipeList{
+        list-style: none;
+        overflow: auto;
+        max-height: 150px;
+        width: 90%;
+        margin-left: auto;
+    }
+
+    #ingredientRecipeList > li{
+        font-size: 15px;
+        padding: 10px;
+        border-radius: 5px;
+        font-weight: bold;
+        background: rgb(240, 252, 255);
         border: 1px solid black;
-        font-size: 25px;
         cursor: pointer;
-        border-radius: 5px;
+        margin: 1px 0;
     }
 
-        .unitButton:hover{
+        #ingredientRecipeList > li:hover{
             background: rgb(0, 27, 45);
             color: white;
         }
 
-        .unitActive{
-            background: rgb(255, 99, 107);
-        }
-
 /* 
 Recipe Details 
 */
@@ -574,27 +611,6 @@ Add Recipe
         margin: 5px 0;
     }
 
-/* 
-Ingredient Details 
-*/
-#ingredientRecipeList{
-    list-style: none;
-    overflow: auto;
-}
-
-#ingredientRecipeList > li{
-    font-size: 25px;
-    font-weight: bold;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-    #ingredientRecipeList > li:hover{
-        background: rgb(0, 27, 45);
-        color: white;
-    }
-
 /*
 Transaction Details
 */
@@ -678,4 +694,8 @@ New Transaction
         .orderIngredient{
             color: black;
         }
+
+    #ingredientRecipeList li{
+        color: black;
+    }
 }

views/dashboardPage/sidebars/sidebars.js

@@ -1,1121 +0,0 @@
-let recipeDetailsComp = {
-    recipe: {},
-
-    display: function(recipe){
-        this.recipe = recipe;
-        openSidebar(document.querySelector("#recipeDetails"));
-
-        document.querySelector("#recipeName").style.display = "block";
-        document.querySelector("#recipeNameIn").style.display = "none";
-        document.querySelector("#recipeDetails h1").innerText = recipe.name;
-
-        let ingredientList = document.querySelector("#recipeIngredientList");
-        while(ingredientList.children.length > 0){
-            ingredientList.removeChild(ingredientList.firstChild);
-        }
-
-        let template = document.querySelector("#recipeIngredient").content.children[0];
-        for(let i = 0; i < recipe.ingredients.length; i++){
-            ingredientDiv = template.cloneNode(true);
-
-            ingredientDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
-            ingredientDiv.children[2].innerText = `${recipe.ingredients[i].ingredient.convert(recipe.ingredients[i].quantity).toFixed(2)} ${recipe.ingredients[i].ingredient.unit}`;
-            ingredientDiv.ingredient = recipe.ingredients[i].ingredient;
-            ingredientDiv.name = recipe.ingredients[i].ingredient.name;
-
-            ingredientList.appendChild(ingredientDiv);
-        }
-
-        document.querySelector("#addRecIng").style.display = "none";
-
-        let price = document.querySelector("#recipePrice");
-        price.children[1].style.display = "block";
-        price.children[2].style.display = "none";
-        price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;
-
-        document.querySelector("#recipeUpdate").style.display = "none";
-    },
-
-    edit: function(){
-        let ingredientDivs = document.querySelector("#recipeIngredientList");
-
-        if(merchant.pos === "none"){
-            let name = document.querySelector("#recipeName");
-            let nameIn = document.querySelector("#recipeNameIn");
-            name.style.display = "none";
-            nameIn.style.display = "block";
-            nameIn.value = this.recipe.name;
-
-            let price = document.querySelector("#recipePrice");
-            price.children[1].style.display = "none";
-            price.children[2].style.display = "block";
-            price.children[2].value = parseFloat((this.recipe.price / 100).toFixed(2));
-        }
-
-        for(let i = 0; i < ingredientDivs.children.length; i++){
-            let div = ingredientDivs.children[i];
-
-            div.children[2].innerText = this.recipe.ingredients[i].ingredient.unit;
-            div.children[1].style.display = "block";
-            div.children[1].value = this.recipe.ingredients[i].ingredient.convert(this.recipe.ingredients[i].quantity).toFixed(2);
-            div.children[3].style.display = "block";
-            div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
-        }
-
-        document.querySelector("#addRecIng").style.display = "flex";
-        document.querySelector("#recipeUpdate").style.display = "flex";
-    },
-
-    update: function(){
-        this.recipe.name = document.querySelector("#recipeNameIn").value || this.recipe.name;
-        this.recipe.price = Math.round((document.querySelector("#recipePrice").children[2].value * 100)) || this.recipe.price;
-        this.recipe.ingredients = [];
-
-        let divs = document.querySelector("#recipeIngredientList").children;
-        for(let i = 0; i < divs.length; i++){
-            if(divs[i].name === "new"){
-                let select = divs[i].children[0];
-                this.recipe.ingredients.push({
-                    ingredient: select.options[select.selectedIndex].ingredient,
-                    quantity: convertToMain(select.options[select.selectedIndex].ingredient.unit, divs[i].children[1].value)
-                });
-            }else{
-                this.recipe.ingredients.push({
-                    ingredient: divs[i].ingredient,
-                    quantity: convertToMain(divs[i].ingredient.unit, divs[i].children[1].value)
-                });
-            }
-        }
-
-        let data = {
-            id: this.recipe.id,
-            name: this.recipe.name,
-            price: this.recipe.price,
-            ingredients: []
-        }
-
-        for(let i = 0; i < this.recipe.ingredients.length; i++){
-            data.ingredients.push({
-                ingredient: this.recipe.ingredients[i].ingredient.id,
-                quantity: this.recipe.ingredients[i].quantity
-            });
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/recipe/update", {
-            method: "PUT",
-            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{
-                    merchant.editRecipes([this.recipe]);
-                    banner.createNotification("RECIPE UPDATE");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-
-    remove: function(){
-        fetch(`/merchant/recipes/remove/${this.recipe.id}`, {
-            method: "DELETE"
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    merchant.editRecipes([this.recipe], true);
-                    banner.createNotification("RECIPE REMOVED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            });
-    },
-
-    displayAddIngredient: function(){
-        let template = document.querySelector("#addRecIngredient").content.children[0].cloneNode(true);
-        template.name = "new";
-        document.querySelector("#recipeIngredientList").appendChild(template);
-
-        let categories = merchant.categorizeIngredients();
-
-        for(let i = 0; i < categories.length; i++){
-            let optGroup = document.createElement("optgroup");
-            optGroup.label = categories[i].name;
-            template.children[0].appendChild(optGroup);
-
-            for(let j = 0; j < categories[i].ingredients.length; j++){
-                let option = document.createElement("option");
-                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
-                option.ingredient = categories[i].ingredients[j].ingredient;
-                optGroup.appendChild(option);
-            }
-        }
-    }
-}
-
-let newOrderComp = {
-    isPopulated: false,
-    unused: [],
-
-    display: function(){
-        if(!this.isPopulated){
-            let categories = merchant.categorizeIngredients();
-            let categoriesList = document.querySelector("#newOrderCategories");
-            let template = document.querySelector("#addIngredientsCategory").content.children[0];
-            let ingredientTemplate = document.querySelector("#addIngredientsIngredient").content.children[0];
-    
-            for(let i = 0; i < categories.length; i++){
-                let category = template.cloneNode(true);
-    
-                category.children[0].children[0].innerText = categories[i].name;
-                category.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(category)};
-                category.children[0].children[1].children[1].style.display = "none";
-                category.children[1].style.display = "none";
-                
-                categoriesList.appendChild(category);
-    
-                for(let j = 0; j < categories[i].ingredients.length; j++){
-                    let ingredientDiv = ingredientTemplate.cloneNode(true);
-    
-                    ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                    ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv, category.children[1])};
-                    ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
-    
-                    this.unused.push(categories[i].ingredients[j]);
-                    category.children[1].appendChild(ingredientDiv);
-                }
-            }
-
-            this.isPopulated = true;
-        }
-
-        openSidebar(document.querySelector("#newOrder"));
-    },
-
-    addOne: function(ingredientDiv, container){
-        for(let i = 0; i < this.unused.length; i++){
-            if(this.unused[i] === ingredientDiv){
-                this.unused.splice(i, 1);
-                break;
-            }
-        }
-
-        let quantityInput = document.createElement("input");
-        quantityInput.type = "number";
-        quantityInput.placeholder = `QUANTITY (${ingredientDiv.ingredient.unit})`;
-        quantityInput.min = "0";
-        quantityInput.step = "0.01";
-        ingredientDiv.insertBefore(quantityInput, ingredientDiv.children[1]);
-
-        let priceInput = document.createElement("input");
-        priceInput.type = "number";
-        priceInput.placeholder = "Price Per Unit";
-        priceInput.min = "0";
-        priceInput.step = "0.01";
-        ingredientDiv.insertBefore(priceInput, ingredientDiv.children[2]);
-
-        ingredientDiv.children[4].innerText = "-";
-        ingredientDiv.children[4].onclick = ()=>{this.removeOne(ingredientDiv, container)};
-
-        container.removeChild(ingredientDiv);
-        document.getElementById("newOrderAdded").appendChild(ingredientDiv);
-    },
-
-    removeOne: function(ingredientDiv, container){
-        this.unused.push(ingredientDiv.ingredient);
-
-        ingredientDiv.removeChild(ingredientDiv.children[1]);
-        ingredientDiv.removeChild(ingredientDiv.children[1]);
-        ingredientDiv.children[1].innerText = "+";
-        ingredientDiv.children[1].onclick = ()=>{this.addOne(ingredientDiv, container)};
-        
-        ingredientDiv.parentElement.removeChild(ingredientDiv);
-        container.appendChild(ingredientDiv);
-    },
-
-    submit: function(){
-        let categoriesList = document.getElementById("newOrderAdded");
-        let ingredients = [];
-
-        for(let i = 0; i < categoriesList.children.length; i++){
-            let quantity = categoriesList.children[i].children[1].value;
-            let price = categoriesList.children[i].children[2].value;
-
-            let fakeOrder = new Order(undefined, undefined, new Date(), [], undefined);
-            if(quantity !== ""  && price !== ""){
-                ingredients.push({
-                    ingredient: categoriesList.children[i].ingredient.id,
-                    quantity: convertToMain(categoriesList.children[i].ingredient.unit, parseFloat(quantity)),
-                    price: categoriesList.children[i].ingredient.convert(parseInt(price * 100))
-                });
-            }
-        }
-
-        let data = {
-            name: document.getElementById("orderName").value,
-            date: document.getElementById("orderDate").value,
-            ingredients: ingredients
-        };
-
-        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)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let order = new Order(
-                       response._id,
-                       response.name,
-                       response.date,
-                       response.ingredients,
-                       merchant 
-                    )
-
-                    merchant.editOrders([order]);
-                    merchant.editIngredients(order.ingredients, false, true);
-                    banner.createNotification("ORDER CREATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOEMTHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-}
-
-let newIngredientComp = {
-    display: function(){
-        openSidebar(document.querySelector("#newIngredient"));
-
-        document.querySelector("#newIngName").value = "";
-        document.querySelector("#newIngCategory").value = "";
-        document.querySelector("#newIngQuantity").value = 0;
-    },
-
-    submit: function(){
-        let unitSelector = document.getElementById("unitSelector");
-        let options = document.querySelectorAll("#unitSelector option");
-
-        let unit = unitSelector.value;
-
-        let newIngredient = {
-            ingredient: {
-                name: document.getElementById("newIngName").value,
-                category: document.getElementById("newIngCategory").value,
-                unitType: options[unitSelector.selectedIndex].getAttribute("type"),
-            },
-            quantity: convertToMain(unit, document.querySelector("#newIngQuantity").value),
-            defaultUnit: unit
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/ingredients/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(newIngredient)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    merchant.editIngredients([{
-                        ingredient: new Ingredient(
-                            response.ingredient._id,
-                            response.ingredient.name,
-                            response.ingredient.category,
-                            response.ingredient.unitType,
-                            response.defaultUnit,
-                            merchant
-                        ),
-                        quantity: response.quantity
-                    }]);
-
-                    banner.createNotification("INGREDIENT CREATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    }
-}
-
-let orderDetailsComp = {
-    display: function(order){
-        openSidebar(document.querySelector("#orderDetails"));
-
-        document.querySelector("#removeOrderBtn").onclick = ()=>{this.remove(order)};
-
-        document.querySelector("#orderDetails h1").innerText = order.name;
-        document.querySelector("#orderDetails h3").innerText = order.date.toLocaleDateString("en-US");
-
-        let ingredientList = document.querySelector("#orderIngredients");
-        while(ingredientList.children.length > 0){
-            ingredientList.removeChild(ingredientList.firstChild);
-        }
-
-        let template = document.querySelector("#orderIngredient").content.children[0];
-        let grandTotal = 0;
-        for(let i = 0; i < order.ingredients.length; i++){
-            let ingredientDiv = template.cloneNode(true);
-            let price = (order.ingredients[i].quantity * order.ingredients[i].price) / 100;
-            grandTotal += price;
-
-            let ingredient = order.ingredients[i].ingredient;
-            let priceText = ingredient.convert(order.ingredients[i].quantity).toFixed(2) + " " + 
-                ingredient.unit.toUpperCase() + " x $" +
-                (order.convertPrice(ingredient.unitType, ingredient.unit, order.ingredients[i].price) / 100).toFixed(2);
-            ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
-            ingredientDiv.children[1].innerText = priceText;
-            ingredientDiv.children[2].innerText = `$${price.toFixed(2)}`;
-
-            ingredientList.appendChild(ingredientDiv);
-        }
-
-        document.querySelector("#orderTotalPrice p").innerText = `$${grandTotal.toFixed(2)}`;
-    },
-
-    remove: function(order){
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch(`/order/${order.id}`, {
-            method: "DELETE",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            }
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    merchant.editOrders([order], true);
-                    banner.createNotification("ORDER REMOVED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    }
-}
-
-let addIngredientsComp = {
-    isPopulated: false,
-    fakeMerchant: {},
-    chosenIngredients: [],
-
-    display: function(){
-        let sidebar = document.querySelector("#addIngredients");
-
-        if(!this.isPopulated){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/ingredients")
-                .then((response) => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        for(let i = 0; i < merchant.ingredients.length; i++){
-                            for(let j = 0; j < response.length; j++){
-                                if(merchant.ingredients[i].ingredient.id === response[j]._id){
-                                    response.splice(j, 1);
-                                    break;
-                                }
-                            }
-                        }
-                        
-                        for(let i = 0; i < response.length; i++){
-                            response[i] = {ingredient: response[i]}
-                        }
-                        this.fakeMerchant = new Merchant({
-                                name: "none",
-                                inventory: response,
-                                recipes: [],
-                            },
-                            []
-                        );
-
-                        this.populateAddIngredients();
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("UNABLE TO RETRIEVE DATA");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-
-            this.isPopulated = true;
-        }
-
-        openSidebar(sidebar);
-    },
-
-    populateAddIngredients: function(){
-        let addIngredientsDiv = document.getElementById("addIngredientList");
-        let categoryTemplate = document.getElementById("addIngredientsCategory");
-        let ingredientTemplate = document.getElementById("addIngredientsIngredient");
-
-        let categories = this.fakeMerchant.categorizeIngredients();
-
-        while(addIngredientsDiv.children.length > 0){
-            addIngredientsDiv.removeChild(addIngredientsDiv.firstChild);
-        }
-        for(let i = 0; i < categories.length; i++){
-            let categoryDiv = categoryTemplate.content.children[0].cloneNode(true);
-            categoryDiv.children[0].children[0].innerText = categories[i].name;
-            categoryDiv.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(categoryDiv)};
-            categoryDiv.children[1].style.display = "none";
-            categoryDiv.children[0].children[1].children[1].style.display = "none";
-
-            addIngredientsDiv.appendChild(categoryDiv);
-            
-            for(let j = 0; j < categories[i].ingredients.length; j++){
-                let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
-                ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
-                ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
-
-                categoryDiv.children[1].appendChild(ingredientDiv);
-            }
-        }
-
-        let myIngredients = document.getElementById("myIngredients");
-        while(myIngredients.children.length > 0){
-            myIngredients.removeChild(myIngredients.firstChild);
-        }
-    },
-
-    toggleAddIngredient: function(categoryElement){
-        let button = categoryElement.children[0].children[1];
-        let ingredientDisplay = categoryElement.children[1];
-
-        if(ingredientDisplay.style.display === "none"){
-            ingredientDisplay.style.display = "flex";
-
-            button.children[0].style.display = "none";
-            button.children[1].style.display = "block";
-        }else{
-            ingredientDisplay.style.display = "none";
-
-            button.children[0].style.display = "block";
-            button.children[1].style.display = "none";
-        }
-    },
-
-    addOne: function(element){
-        element.parentElement.removeChild(element);
-        document.getElementById("myIngredients").appendChild(element);
-        document.getElementById("myIngredientsDiv").style.display = "flex";
-
-        for(let i = 0; i < this.fakeMerchant.ingredients.length; i++){
-            if(this.fakeMerchant.ingredients[i].ingredient === element.ingredient){
-                this.fakeMerchant.ingredients.splice(i, 1);
-                this.chosenIngredients.push(element.ingredient);
-                break;
-            }
-        }
-
-        let input = document.createElement("input");
-        input.type = "number";
-        input.min = "0";
-        input.step = "0.01";
-        input.placeholder = "QUANTITY";
-        element.insertBefore(input, element.children[1]);
-
-        let select = element.children[2];
-        select.style.display = "block";
-        let units = merchant.units[element.ingredient.unitType];
-        for(let i = 0; i < units.length; i++){
-            let option = document.createElement("option");
-            option.innerText = units[i].toUpperCase();
-            option.type = element.ingredient.unitType;
-            option.value = units[i];
-            select.appendChild(option);
-        }
-
-        element.children[3].innerText = "-";
-        element.children[3].onclick = ()=>{this.removeOne(element)};
-    },
-
-    removeOne: function(element){
-        element.parentElement.removeChild(element);
-
-        element.removeChild(element.children[1]);
-
-        let select = element.children[1];
-        while(select.children.length > 0){
-            select.removeChild(select.firstChild);
-        }
-        select.style.display = "none";
-
-        element.children[2].innerText = "+";
-        element.children[2].onclick = ()=>{this.addOne(element)};
-
-        if(document.getElementById("myIngredients").children.length === 0){
-            document.getElementById("myIngredientsDiv").style.display = "none";
-        }
-
-        for(let i = 0; i < this.chosenIngredients.length; i++){
-            if(this.chosenIngredients[i] === element.ingredient){
-                this.chosenIngredients.splice(i, 1);
-                this.fakeMerchant.ingredients.push({
-                    ingredient: element.ingredient
-                });
-                break;
-            }
-        }
-        this.populateAddIngredients();
-    },
-
-    submit: function(){
-        let ingredients = document.getElementById("myIngredients").children;
-        let newIngredients = [];
-        let fetchable = [];
-
-        for(let i = 0; i < ingredients.length; i++){
-            let quantity = ingredients[i].children[1].value;
-            let unit = ingredients[i].children[2].value;
-
-            if(quantity === ""){
-                banner.createError("PLEASE ENTER A QUANTITY FOR EACH INGREDIENT YOU WANT TO ADD TO YOUR INVENTORY");
-                return;
-            }
-            quantity = convertToMain(unit, quantity);
-
-            let newIngredient = {
-                ingredient: ingredients[i].ingredient,
-                quantity: quantity
-            }
-            newIngredient.ingredient.unit = unit;
-
-            newIngredients.push(newIngredient);
-
-            fetchable.push({
-                id: ingredients[i].ingredient.id,
-                quantity: quantity,
-                defaultUnit: unit
-            });
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/merchant/ingredients/add", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(fetchable)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    merchant.editIngredients(newIngredients);
-                    this.isPopulated = false;
-                    banner.createNotification("ALL INGREDIENTS ADDED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    }
-}
-
-let ingredientDetailsComp = {
-    ingredient: {},
-
-    display: function(ingredient){
-        this.ingredient = ingredient;
-
-        sidebar = document.querySelector("#ingredientDetails");
-
-        document.querySelector("#ingredientDetails p").innerText = ingredient.ingredient.category;
-        document.querySelector("#ingredientDetails h1").innerText = ingredient.ingredient.name;
-        let ingredientStock = document.getElementById("ingredientStock");
-        ingredientStock.innerText = `${ingredient.ingredient.convert(ingredient.quantity).toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
-        ingredientStock.style.display = "block";
-        let ingredientInput = document.getElementById("ingredientInput");
-        ingredientInput.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
-        ingredientInput.style.display = "none";
-
-        let quantities = [];
-        let now = new Date();
-        for(let i = 1; i < 31; i++){
-            let endDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i)
-            let startDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i - 1);
-            let indices = merchant.transactionIndices(startDay, endDay);
-
-            if(indices === false){
-                quantities.push(0);
-            }else{
-                quantities.push(merchant.singleIngredientSold(indices, ingredient));
-            }
-        }
-
-        let sum = 0;
-        for(let quantity of quantities){
-            sum += quantity;
-        }
-
-        document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.ingredient.unit}`;
-
-        let ul = document.querySelector("#ingredientRecipeList");
-        let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
-        while(ul.children.length > 0){
-            ul.removeChild(ul.firstChild);
-        }
-        for(let i = 0; i < recipes.length; i++){
-            let li = document.createElement("li");
-            li.innerText = recipes[i].name;
-            li.onclick = ()=>{
-                changeStrand("recipeBookStrand");
-                recipeDetailsComp.display(recipes[i]);
-            }
-            ul.appendChild(li);
-        }
-
-        let ingredientButtons = document.getElementById("ingredientButtons");
-        let units = merchant.units[this.ingredient.ingredient.unitType];
-        while(ingredientButtons.children.length > 0){
-            ingredientButtons.removeChild(ingredientButtons.firstChild);
-        }
-        for(let i = 0; i < units.length; i++){
-            let button = document.createElement("button");
-            button.classList.add("unitButton");
-            button.innerText = units[i].toUpperCase();
-            button.onclick = ()=>{this.changeUnit(button, units[i])};
-            ingredientButtons.appendChild(button);
-
-            if(units[i] === this.ingredient.ingredient.unit){
-                button.classList.add("unitActive");
-            }
-        }
-
-        openSidebar(sidebar);
-    },
-
-    remove: function(){
-        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){
-                    banner.createError("MUST REMOVE INGREDIENT FROM ALL RECIPES BEFORE REMOVING FROM INVENTORY");
-                    return;
-                }
-            }
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch(`/merchant/ingredients/remove/${this.ingredient.ingredient.id}`, {
-            method: "DELETE",
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    banner.createNotification("INGREDIENT REMOVED");
-                    merchant.editIngredients([this.ingredient], true);
-                }
-            })
-            .catch((err)=>{})
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-
-    edit: function(){
-        document.getElementById("ingredientStock").style.display = "none";
-        document.getElementById("ingredientInput").style.display = "block";
-        document.getElementById("editSubmitButton").style.display = "block";
-    },
-
-    editSubmit: function(){
-        this.ingredient.quantity = Number(document.getElementById("ingredientInput").value);
-        let data = [{
-            id: this.ingredient.ingredient.id,
-            quantity: this.ingredient.quantity
-        }];
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        if(validator.ingredientQuantity(data[0].quantity)){
-            fetch("/merchant/ingredients/update", {
-                method: "PUT",
-                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{
-                        merchant.editIngredients([this.ingredient]);
-                        banner.createNotification("INGREDIENT UPDATED");
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
-    },
-
-    changeUnit: function(newActive, unit){
-        this.ingredient.ingredient.unit = unit;
-
-        let ingredientButtons = document.querySelectorAll(".unitButton");
-        for(let i = 0; i < ingredientButtons.length; i++){
-            ingredientButtons[i].classList.remove("unitActive");
-        }
-
-        newActive.classList.add("unitActive");
-
-        homeStrandObj.isPopulated = false;
-        ingredientsStrandObj.populateByProperty("category");
-        document.getElementById("ingredientStock").innerText = `${this.ingredient.ingredient.convert(this.ingredient.quantity).toFixed(2)} ${this.ingredient.ingredient.unit.toUpperCase()}`;
-    },
-
-    changeUnitDefault: function(){
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        let id = this.ingredient.ingredient.id;
-        let unit = this.ingredient.ingredient.unit;
-        fetch(`/merchant/ingredients/update/${id}/${unit}`, {
-            method: "put",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-        })
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    banner.createNotification("INGREDIENT DEFAULT UNIT UPDATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    }
-}
-
-let newRecipeComp = {
-    display: function(){
-        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
-        let categories = merchant.categorizeIngredients();
-
-        while(ingredientsSelect.children.length > 0){
-            ingredientsSelect.removeChild(ingredientsSelect.firstChild);
-        }
-
-        for(let category of categories){
-            let optgroup = document.createElement("optgroup");
-            optgroup.label = category.name;
-            ingredientsSelect.appendChild(optgroup);
-
-            for(let ingredient of category.ingredients){
-                let option = document.createElement("option");
-                option.value = ingredient.ingredient.id;
-                option.innerText = `${ingredient.ingredient.name} (${ingredient.ingredient.unit})`;
-                optgroup.appendChild(option);
-            }
-        }
-
-        openSidebar(document.querySelector("#addRecipe"));
-    },
-
-    //Updates the number of ingredient inputs displayed for new recipes
-    changeRecipeCount: function(){
-        let newCount = document.querySelector("#ingredientCount").value;
-        let ingredientsDiv = document.querySelector("#recipeInputIngredients");
-        let oldCount = ingredientsDiv.children.length;
-
-        if(newCount > oldCount){
-            let newDivs = newCount - oldCount;
-
-            for(let i = 0; i < newDivs; i++){
-                let newNode = ingredientsDiv.children[0].cloneNode(true);
-                newNode.children[2].children[0].value = "";
-
-                ingredientsDiv.appendChild(newNode);
-            }
-
-            for(let i = 0; i < newCount; i++){
-                ingredientsDiv.children[i].children[0].innerText = `INGREDIENT ${i + 1}`;
-            }
-        }else if(newCount < oldCount){
-            let newDivs = oldCount - newCount;
-
-            for(let i = 0; i < newDivs; i++){
-                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
-            }
-        }
-    },
-
-    submit: function(){
-        let newRecipe = {
-            name: document.getElementById("newRecipeName").value,
-            price: document.getElementById("newRecipePrice").value,
-            ingredients: []
-        }
-
-        let inputs = document.querySelectorAll("#recipeInputIngredients > div");
-        for(let i = 0; i < inputs.length; i++){
-            for(let j = 0; j < merchant.ingredients.length; j++){
-                if(merchant.ingredients[j].ingredient.id === inputs[i].children[1].children[0].value){
-                    newRecipe.ingredients.push({
-                        ingredient: inputs[i].children[1].children[0].value,
-                        quantity: convertToMain(merchant.ingredients[j].ingredient.unit, inputs[i].children[2].children[0].value)
-                    });
-
-                    break;
-                }
-            }
-        }
-
-        if(!validator.recipe(newRecipe)){
-            return;
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/recipe/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(newRecipe)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let recipe = new Recipe(
-                        response._id,
-                        response.name,
-                        response.price,
-                        response.ingredients,
-                        merchant,
-                    );
-                    
-                    merchant.editRecipes([recipe]);
-                    banner.createNotification("RECIPE CREATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-}
-
-let transactionDetailsComp = {
-    transaction: {},
-
-    display: function(transaction){
-        this.transaction = transaction;
-
-        let recipeList = document.getElementById("transactionRecipes");
-        let template = document.getElementById("transactionRecipe").content.children[0];
-        let totalRecipes = 0;
-        let totalPrice = 0;
-
-        while(recipeList.children.length > 0){
-            recipeList.removeChild(recipeList.firstChild);
-        }
-
-        for(let i = 0; i < transaction.recipes.length; i++){
-            let recipe = template.cloneNode(true);
-            let price = transaction.recipes[i].quantity * transaction.recipes[i].recipe.price;
-
-            recipe.children[0].innerText = transaction.recipes[i].recipe.name;
-            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x $${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
-            recipe.children[2].innerText = `$${(price / 100).toFixed(2)}`;
-            recipeList.appendChild(recipe);
-
-            totalRecipes += transaction.recipes[i].quantity;
-            totalPrice += price;
-        }
-
-        let months = ["January", "Fecbruary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-        let dateString = `${days[transaction.date.getDay()]}, ${months[transaction.date.getMonth()]} ${transaction.date.getDate()}, ${transaction.date.getFullYear()}`;
-
-        document.getElementById("transactionDate").innerText = dateString;
-        document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
-        document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
-        document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
-
-        openSidebar(document.getElementById("transactionDetails"));
-    },
-
-    remove: function(){
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch(`/transaction/${this.transaction.id}`, {
-            method: "delete",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-        })
-            .then(response => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    merchant.editTransactions(this.transaction, true);
-                    banner.createNotification("TRANSACTION REMOVED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-}
-
-let newTransactionComp = {
-    display: function(){
-        let recipeList = document.getElementById("newTransactionRecipes");
-        let template = document.getElementById("createTransaction").content.children[0];
-
-        while(recipeList.children.length > 0){
-            recipeList.removeChild(recipeList.firstChild);
-        }
-
-        for(let i = 0; i < merchant.recipes.length; i++){
-            let recipeDiv = template.cloneNode(true);
-            recipeDiv.recipe = merchant.recipes[i];
-            recipeList.appendChild(recipeDiv);
-
-            recipeDiv.children[0].innerText = merchant.recipes[i].name;
-        }
-
-        openSidebar(document.getElementById("newTransaction"));
-    },
-
-    submit: function(){
-        let recipeDivs = document.getElementById("newTransactionRecipes");
-        let date = document.getElementById("newTransactionDate").valueAsDate;
-        
-        if(date > new Date()){
-            banner.createError("CANNOT HAVE A DATE IN THE FUTURE");
-            return;
-        }
-        
-        let newTransaction = {
-            date: date,
-            recipes: []
-        };
-
-        for(let i = 0; i < recipeDivs.children.length;  i++){
-            let quantity = recipeDivs.children[i].children[1].value;
-            if(quantity !== "" && quantity > 0){
-                newTransaction.recipes.push({
-                    recipe: recipeDivs.children[i].recipe.id,
-                    quantity: quantity
-                });
-            }else if(quantity < 0){
-                banner.createError("CANNOT HAVE NEGATIVE VALUES");
-                return;
-            }
-        }
-
-        if(newTransaction.recipes.length > 0){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/transaction", {
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json;charset=utf-8"
-                },
-                body: JSON.stringify(newTransaction)
-            })
-                .then(response => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        let transaction = new Transaction(
-                            response._id,
-                            response.date,
-                            response.recipes,
-                            merchant
-                        );
-                        merchant.editTransactions(transaction);
-                        banner.createNotification("NEW TRANSACTION CREATED");
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
-    }
-}

views/dashboardPage/sidebars/transactionDetails.ejs

@@ -1,6 +1,6 @@
 <div id="transactionDetails" class="transactionDetails">
     <div class="sidebarIconButtons">
-        <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>
@@ -8,7 +8,7 @@
         </button>
 
         <% if(merchant.pos === "none"){ %>
-            <button class="iconButton" onclick="transactionDetailsComp.remove()">
+            <button id="removeTransBtn" 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>

views/dashboardPage/transactions.js

@@ -1,39 +0,0 @@
-window.transactionsStrandObj = {
-    isPopulated: false, 
-
-    display: function(){
-        if(!this.isPopulated){
-            let transactionsList = document.getElementById("transactionsList");
-            let template = document.getElementById("transaction").content.children[0];
-
-            while(transactionsList.children.length > 0){
-                transactionsList.removeChild(transactionsList.firstChild);
-            }
-
-            let i = 0
-            while(i < merchant.transactions.length && i < 100){
-                let transactionDiv = template.cloneNode(true);
-                let transaction = merchant.transactions[i];
-
-                transactionDiv.onclick = ()=>{transactionDetailsComp.display(transaction)};
-                transactionsList.appendChild(transactionDiv);
-
-                let totalRecipes = 0;
-                let totalPrice = 0;
-
-                for(let j = 0; j < merchant.transactions[i].recipes.length; j++){
-                    totalRecipes += merchant.transactions[i].recipes[j].quantity;
-                    totalPrice += merchant.transactions[i].recipes[j].recipe.price * merchant.transactions[i].recipes[j].quantity;
-                }
-
-                transactionDiv.children[0].innerText = `${merchant.transactions[i].date.toLocaleDateString()} ${merchant.transactions[i].date.toLocaleTimeString()}`;
-                transactionDiv.children[1].innerText = `${totalRecipes} recipes sold`;
-                transactionDiv.children[2].innerText = `$${(totalPrice / 100).toFixed(2)}`;
-
-                i++;
-            }
-
-            this.isPopulated = true;
-        }
-    }
-}

views/informationPage/help.js

@@ -1,7 +1,7 @@
 window.helpObj = {
     display: function(){
-        document.querySelector("#legalStrand").style.display = "none";
-        document.querySelector("#helpStrand").style.display = "flex";
+        document.getElementById("legalStrand").style.display = "none";
+        document.getElementById("helpStrand").style.display = "flex";
 
         let button = document.getElementById("logInButton");
         button.innerText="LEGAL";

views/informationPage/legal.js

@@ -1,7 +1,7 @@
 window.legalObj = {
     display: function(){
-        document.querySelector("#legalStrand").style.display = "flex";
-        document.querySelector("#helpStrand").style.display = "none";
+        document.getElementById("legalStrand").style.display = "flex";
+        document.getElementById("helpStrand").style.display = "none";
 
         document.getElementById("joinButton").style.display = "none";
         let button = document.getElementById("logInButton");

views/landingPage/controller.js

@@ -1,7 +1,7 @@
 let controller = {
-    publicStrand: document.querySelector("#publicStrand"),
-    loginStrand: document.querySelector("#loginStrand"),
-    registerStrand: document.querySelector("#registerStrand"),
+    publicStrand: document.getElementById("publicStrand"),
+    loginStrand: document.getElementById("loginStrand"),
+    registerStrand: document.getElementById("registerStrand"),
 
     onStart: function(){
         if(error){

views/landingPage/landing.ejs

@@ -47,8 +47,6 @@
             <form onsubmit="registerObj.submit()">
                 <h1> Join Subline </h1>
 
-                <a class="button buttonWithBorder" href="/cloverlogin"> Sign Up with Clover </a>
-
                 <label id="nameLabel">Restaurant Name
                     <input class="input" id="regName" name="name" type="text" required>
                 </label>
@@ -80,6 +78,10 @@
 
                 <input id="regButton" class="buttonDisabled" type="submit" value="Sign Up with Email">
 
+                <h1>OR</h1>
+
+                <a class="button buttonWithBorder" href="/cloverlogin"> Sign Up with Clover </a>
+
                 <h3 class="link" style="margin-top: 30px;" onclick="loginObj.display()"> Already have an account? Please Sign In </h3>
 
             </form>
@@ -88,8 +90,6 @@
         <div id="loginStrand">
             <form action="/login" method="post">
                 <h1> Welcome Back </h1>
-
-                <a class="button buttonWithBorder" href="/cloverlogin"> Sign In with Clover </a>
         
                 <label>Email
                     <input type="text" name="email" type="email" required>
@@ -101,6 +101,10 @@
         
                 <input id="signIn" type="submit" value="Sign In with Email">
 
+                <h1>OR</h1>
+
+                <a class="button buttonWithBorder" href="/cloverlogin"> Sign In with Clover </a>
+
                 <h3 class="link" style="margin-top: 30px;" onclick="registerObj.display()"> New Here? Please Sign Up </h3>
             </form>
         </div>

views/landingPage/register.js

@@ -3,13 +3,13 @@ let registerObj = {
         controller.clearScreen();
         controller.registerStrand.style.display = "flex";
 
-        document.querySelector("#checkAgree").checked = false;
-        document.querySelector("#regButton").classList = "buttonDisabled";
+        document.getElementById("checkAgree").checked = false;
+        document.getElementById("regButton").classList = "buttonDisabled";
     },
 
     agreement: function(){
-        let checkbox = document.querySelector("#checkAgree");
-        let button = document.querySelector("#regButton");
+        let checkbox = document.getElementById("checkAgree");
+        let button = document.getElementById("regButton");
 
         if(checkbox.checked){
             button.classList = "button";
@@ -22,7 +22,7 @@ let registerObj = {
         event.preventDefault();
 
         let form = document.querySelector("#registerStrand form");
-        let checkbox = document.querySelector("#checkAgree");
+        let checkbox = document.getElementById("checkAgree");
 
         if(!checkbox.checked){
             banner.createError("Please agree to the Privacy Policy and Terms and Conditions to continue");
@@ -37,7 +37,7 @@ let registerObj = {
         }
 
         if(checkbox.checked){
-            if(validator.isSanitary(document.querySelector("#regName").value)){
+            if(validator.isSanitary(document.getElementById("regName").value)){
                 document.getElementById("loaderContainer").style.display = "flex";
                 form.action = "merchant/create/none";
                 form.method = "post";

views/passResetPage/passReset.ejs

@@ -33,8 +33,8 @@
             let submitPass = ()=>{
                 event.preventDefault();
 
-                let pass = document.querySelector("#pass").value;
-                let confirmPass = document.querySelector("#confirmPass").value;
+                let pass = document.getElementById("pass").value;
+                let confirmPass = document.getElementById("confirmPass").value;
 
                 if(validator.merchant.password(pass, confirmPass)){
                     let url = window.location.href;

views/shared/banner.ejs

@@ -37,18 +37,18 @@
                 ul.removeChild(ul.firstChild);
             }
 
-            for(let notification of this.notificationList){
+            for(let i = 0; i < this.notificationList.length; i++){
                 let li = document.createElement("li");                                                                       
                                                                                                             
                 li.classList = "notification";
-                li.innerText = notification;
+                li.innerText = this.notificationList[i];
                 ul.appendChild(li);
             }
 
-            for(let error of this.errorList){
+            for(let i = 0; i < this.errorList.length; i++){
                 let li = document.createElement("li");
                 li.classList = "error";
-                li.innerText = error;
+                li.innerText = this.errorList[i];
                 ul.appendChild(li);
             }
         }

views/shared/graphs.js

@@ -43,9 +43,9 @@ class LineGraph{
         this.data.push(data);
 
         let isChange = false;
-        for(let point of data.set){
-            if(point > this.max){
-                this.max = point;
+        for(let i = 0; i < data.set.length; i++){
+            if(data.set[i] > this.max){
+                this.max = data.set[i];
                 this.verticalMultiplier = (this.bottom - this.top) / this.max;
                 this.horizontalMultiplier = (this.right - this.left) / (data.set.length - 1);
                 isChange = true;
@@ -110,8 +110,8 @@ class LineGraph{
         this.drawYAxis();
         this.drawXAxis();
 
-        for(let dataSet of this.data){
-            this.drawLine(dataSet);
+        for(let i = 0; i < this.data.length; i++){
+            this.drawLine(this.data[i]);
         }
 
         if(this.title){
@@ -247,19 +247,19 @@ class HorizontalBarGraph{
     addData(dataArray){
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-        for(let point of dataArray){
-            if(point.num > this.max){
-                this.max = point.num;
+        for(let i = 0; i < dataArray.length; i++){
+            if(dataArray[i].num > this.max){
+                this.max = dataArray[i].num;
             }
 
-            this.data.push(point);
+            this.data.push(dataArray[i]);
         }
 
         this.drawGraph();
     }
 
     drawGraph(){
-        let barHeight = (this.bottom - this.top) / this.data.length;
+        let barHeight = ((this.bottom - this.top) / this.data.length) - 2;
 
         for(let i = 0; i < this.data.length; i++){
             let topLocation = this.top + (i * barHeight) + 5;
@@ -281,4 +281,9 @@ class HorizontalBarGraph{
             this.context.fillText(this.data[i].label, textLocation, (this.top) + (i * barHeight) + (barHeight / 1.5));
         }
     }
+}
+
+module.exports = {
+    LineGraph: LineGraph,
+    HorizontalBarGraph: HorizontalBarGraph
 }

views/shared/oldController.js

@@ -1,70 +0,0 @@
-class StrandSelector extends HTMLElement{
-    constructor(){
-        super();
-    }
-
-    connectedCallback(){
-        setTimeout(()=>{
-            let firstStrand = document.querySelector(".strand");
-            this.setAttribute("strand", firstStrand.id.slice(0, firstStrand.id.indexOf("Strand")));
-            window[`${firstStrand.id.slice(0, firstStrand.id.indexOf("Strand"))}Obj`].display();
-
-            let strands = document.querySelectorAll(".strand");
-            for(let strand of strands){
-                let selector = document.createElement("button");
-                selector.strandName = strand.id;
-                selector.innerText = strand.id.slice(0, strand.id.indexOf("Strand")).toUpperCase();
-                this.appendChild(selector);
-            }
-
-            for(let button of this.querySelectorAll("button")){
-                button.onclick = ()=>{
-                    this.setAttribute("strand", button.strandName.slice(0, button.strandName.indexOf("Strand")));
-
-                    window[`${button.strandName.slice(0, button.strandName.indexOf("Strand"))}Obj`].display();
-                }
-            }
-
-            strands[0].style.display = "flex";
-        })
-    }
-
-    static get observedAttributes(){
-        return ["strand"];
-    }
-
-    attributeChangedCallback(){
-        setTimeout(()=>{
-            let buttons = this.querySelectorAll("button");
-
-            for(let button of buttons){
-                if(button.innerText.toLowerCase() === this.getAttribute("strand").toLowerCase()){
-                    button.style.borderBottom = "3px solid black";
-                    button.style.cursor = "pointer";
-                }else{
-                    button.style.borderBottom = "none";
-                    button.style.cursor = "pointer";
-                }
-            }
-        })
-    }
-}
-
-customElements.define("strand-selector", StrandSelector);
-
-let actions = document.querySelectorAll(".action");
-for(let action of actions){
-    action.display = ()=>{window[`${action.id.slice(0, action.id.indexOf("Action"))}Obj`].display();};
-}
-
-let strands = document.querySelectorAll(".strand");
-for(let strand of strands){
-    strand.display = ()=>{window[`${strand.id.slice(0, strand.id.indexOf("Strand"))}Obj`].display();};
-}
-
-window.clearScreen = ()=>{
-    let subpages = document.querySelectorAll(".strand, .action");
-    for(let subpage of subpages){
-        subpage.style.display = "none";
-    }
-}

views/shared/shared.css

@@ -163,7 +163,6 @@ form{
         border: rgb(255, 99, 107) solid 2px;
         color: rgb(255, 99, 107);
         margin: 0;
-        margin-top: 18px;
         margin-bottom: 12px;
         padding-top: 14px;
         padding-bottom: 14px;

views/shared/validation.js

@@ -97,8 +97,8 @@ let validator = {
 
             if(errors.length > 0){
                 if(createBanner){
-                    for(let error of errors){
-                        banner.createError(error);
+                    for(let i = 0; i < errors.length; i++){
+                        banner.createError(errors[i]);
                     }
 
                     return false;
@@ -125,13 +125,13 @@ let validator = {
         }
 
         let checkSet = new Set();
-        for(let ingredient of newRecipe.ingredients){
-            if(ingredient.quantity < 0){
+        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(ingredient.ingredient);
+            checkSet.add(newRecipe.ingredients[i].ingredient);
         }
 
         if(checkSet.size !== newRecipe.ingredients.length){
@@ -144,8 +144,8 @@ let validator = {
 
         if(errors.length > 0){
             if(createBanner){
-                for(let error of errors){
-                    banner.createError(error);
+                for(let i = 0; i < errors.length; i++){
+                    banner.createError(errors[i]);
                 }
 
                 return false;
@@ -185,8 +185,8 @@ let validator = {
 
         if(errors.length > 0){
             if(createBanner){
-                for(let error of errors){
-                    banner.createError(error);
+                for(let i = 0; i < errors.length; i++){
+                    banner.createError(errors[i]);
                 }
             }
 
@@ -199,8 +199,8 @@ let validator = {
     isSanitary: function(str, createBanner = true){
         let disallowed = ["\\", "<", ">", "$", "{", "}", "(", ")"];
 
-        for(let char of disallowed){
-            if(str.includes(char)){
+        for(let i = 0; i < disallowed.length; i++){
+            if(str.includes(disallowed[i])){
                 if(createBanner){
                     banner.createError("Your string contains illegal characters");
                 }