Create universal ingredient update function

views/dashboardPage/components/components.css

@@ -110,6 +110,7 @@
 .logout{
     display: flex;
     justify-content: center;
+    align-items: center;
     position: absolute;
     bottom: 25px;
     color: white;

views/dashboardPage/components/menu.ejs

@@ -36,13 +36,13 @@
         <p>Orders</p>
     </button>
 
-    <a class="logout" href="/logout">   
+    <a class="logout" href="/logout">
+        <p>Logout</p>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
             <polyline points="16 17 21 12 16 7"></polyline>
             <line x1="21" y1="12" x2="9" y2="12"></line>
         </svg>
-        <p>Logout</p>
     </a>
 
     <script>

views/dashboardPage/controller.js

@@ -18,6 +18,41 @@ let changeStrand = (name)=>{
     window[`${name}Obj`].display();
 }
 
+//Updates all specified item in the merchant's inventory and updates the page
+//If ingredient doesn't exist, add it
+//Inputs:
+//  Array of objects
+//      id: id of ingredient
+//      quantity: updated quantity (optional)
+//      name: name of ingredient (only for new ingredient)
+//      category: category of ingredient (only for new ingredient)
+//      unit: unit of measurement (only for new ingredient)
+//  remove: if true, remove ingredient from inventory
+let updateInventory = (ingredients, remove = false)=>{
+    for(let i = 0; i < ingredients.length; i++){
+        let isNew = true;
+        for(let j = 0; j < merchant.inventory.length; j++){
+            if(merchant.inventory[j].ingredient._id === ingredients[i].id){
+                if(remove){
+                    merchant.inventory.splice(i, 1);
+                }else{
+                    merchant.inventory[j].quantity = ingredients[i].quantity;
+                }
+
+                isNew = false;
+                break;
+            }
+        }
+
+        if(isNew){
+            merchant.inventory.push(ingredients[i]);
+        }
+    }
+
+    homeStrandObj.drawInventoryCheckCard();
+    ingredientsStrandObj.populateIngredients();
+}
+
 let closeSidebar = ()=>{
     let sidebar = document.querySelector("#sidebarDiv");
     for(let i = 0; i < sidebar.children.length; i++){

views/dashboardPage/dashboard.ejs

@@ -42,7 +42,7 @@
 
                         <ul></ul>
 
-                        <button class="button" onclick="homeStrandObj.updateInventory()">Update</button>
+                        <button class="button" onclick="homeStrandObj.submitInventoryCheck()">Update</button>
                     </div>
 
                     <div id=popularIngredientsCard class="card">
@@ -62,6 +62,8 @@
                         add
                     </button>
                 </div>
+
+                <div id="categoryList"></div>
             </div>
 
             <div id="recipeBookStrand" class="strand">
@@ -103,5 +105,7 @@
         <script src="/dashboardPage/controller.js"></script>
         <script src="/dashboardPage/orders.js"></script>
         <script src="../shared/validation.js"></script>
+
+        <noscript>Please turn on javascript for this site to work properly</noscript>
     </body>
 </html>

views/dashboardPage/home.js

@@ -4,56 +4,70 @@ window.homeStrandObj = {
 
     display: function(){
         if(!this.isPopulated){
-            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));
+            this.drawRevenueCard();
+            this.drawRevenueGraph();
+            this.drawInventoryCheckCard();
+            this.drawPopularCard();
 
-            let revenueThisMonth = this.calculateRevenue(dateIndices(firstOfMonth));
-            let revenueLastmonthToDay = this.calculateRevenue(dateIndices(firstOfLastMonth, lastMonthtoDay));
+            this.isPopulated = true;
+        }
+    },
 
-            document.querySelector("#revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
+    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 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;
+        let revenueThisMonth = this.calculateRevenue(dateIndices(firstOfMonth));
+        let revenueLastmonthToDay = this.calculateRevenue(dateIndices(firstOfLastMonth, lastMonthtoDay));
 
-            let graphCanvas = document.querySelector("#graphCanvas");
+        document.querySelector("#revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
 
-            graphCanvas.height = graphCanvas.parentElement.clientHeight;
-            graphCanvas.width = graphCanvas.parentElement.clientWidth;
+        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;
+    },
 
-            this.graph = new LineGraph(graphCanvas);
-            this.graph.addTitle("Revenue");
+    drawRevenueGraph: function(){
+        let graphCanvas = document.querySelector("#graphCanvas");
+        let today = new Date();
 
-            let thirtyAgo = new Date(today);
-            thirtyAgo.setDate(today.getDate() - 29);
+        graphCanvas.height = graphCanvas.parentElement.clientHeight;
+        graphCanvas.width = graphCanvas.parentElement.clientWidth;
 
-            let data = this.graphData(dateIndices(thirtyAgo));
-            if(data){
-                this.graph.addData(
-                    data,
-                    [thirtyAgo, new Date()],
-                    "Revenue"
-                );
-            }else{
-                document.querySelector("#graphCanvas").style.display = "none";
-                
-                let notice = document.createElement("h1");
-                notice.innerText = "NO DATA YET";
-                notice.classList = "notice";
-                document.querySelector("#graphCard").appendChild(notice);
-            }
+        this.graph = new LineGraph(graphCanvas);
+        this.graph.addTitle("Revenue");
+
+        let thirtyAgo = new Date(today);
+        thirtyAgo.setDate(today.getDate() - 29);
+
+        let data = this.graphData(dateIndices(thirtyAgo));
+        if(data){
+            this.graph.addData(
+                data,
+                [thirtyAgo, new Date()],
+                "Revenue"
+            );
+        }else{
+            document.querySelector("#graphCanvas").style.display = "none";
+            
+            let notice = document.createElement("h1");
+            notice.innerText = "NO DATA YET";
+            notice.classList = "notice";
+            document.querySelector("#graphCard").appendChild(notice);
+        }
+    },
 
-            //Inventory Check
-            let rands = [];
+    drawInventoryCheckCard: function(){
+        let rands = [];
             for(let i = 0; i < 5; i++){
                 let rand = Math.floor(Math.random() * merchant.inventory.length);
 
@@ -87,47 +101,45 @@ window.homeStrandObj = {
                 label.innerText = merchant.inventory[rands[i]].ingredient.unit;
                 li.appendChild(label);
             }
+    },
 
-            //Most Popular ingredients
-            let dataArray = [];
-            let now = new Date();
-            let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
-            let ingredientList = ingredientsSold(dateIndices(thisMonth));
-            if(ingredientList){
-                for(let i = 0; i < 5; i++){
-                    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;
-                        }
-                    }
+    drawPopularCard: function(){
+        let dataArray = [];
+        let now = new Date();
+        let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
 
-                    dataArray.push({
-                        num: max,
-                        label: `${ingredientList[index].name}: ${ingredientList[index].quantity} ${ingredientList[index].unit}`
-                    });
-                    ingredientList.splice(index, 1);
+        let ingredientList = ingredientsSold(dateIndices(thisMonth));
+        if(ingredientList){
+            for(let i = 0; i < 5; i++){
+                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;
+                    }
                 }
 
-                let thisCanvas = document.querySelector("#popularCanvas");
-                thisCanvas.width = thisCanvas.parentElement.clientWidth;
-                thisCanvas.height = thisCanvas.parentElement.clientHeight * 0.75;
+                dataArray.push({
+                    num: max,
+                    label: `${ingredientList[index].name}: ${ingredientList[index].quantity} ${ingredientList[index].unit}`
+                });
+                ingredientList.splice(index, 1);
+            }
 
-                let popularGraph = new HorizontalBarGraph(document.querySelector("#popularCanvas"));
-                popularGraph.addData(dataArray);
-            }else{
-                document.querySelector("#popularCanvas").style.display = "none";
+            let thisCanvas = document.querySelector("#popularCanvas");
+            thisCanvas.width = thisCanvas.parentElement.clientWidth;
+            thisCanvas.height = thisCanvas.parentElement.clientHeight * 0.75;
 
-                let notice = document.createElement("p");
-                notice.innerText = "N/A";
-                notice.classList = "notice";
-                document.querySelector("#popularIngredientsCard").appendChild(notice);
-            }
+            let popularGraph = new HorizontalBarGraph(document.querySelector("#popularCanvas"));
+            popularGraph.addData(dataArray);
+        }else{
+            document.querySelector("#popularCanvas").style.display = "none";
 
-            this.isPopulated = true;
+            let notice = document.createElement("p");
+            notice.innerText = "N/A";
+            notice.classList = "notice";
+            document.querySelector("#popularIngredientsCard").appendChild(notice);
         }
     },
 
@@ -174,7 +186,7 @@ window.homeStrandObj = {
         return dataList;
     },
 
-    updateInventory: function(){
+    submitInventoryCheck: function(){
         let lis = document.querySelectorAll("#inventoryCheckCard ul li");
 
         let changes = [];
@@ -207,15 +219,10 @@ window.homeStrandObj = {
             })
                 .then((response)=>{
                     banner.createError("Ingredients updated");
-                    1
                     if(typeof(response.data) === "string"){
                         console.log(err);
                     }else{
-                        for(let change of changes){
-                            merchant.inventory.find((item)=> item.ingredient._id === change.id).quantity = change.quantity;
-                            this.isPopulated = false;
-                            this.display();
-                        }
+                        updateInventory(changes);
                     }
                 })
                 .catch((err)=>{

views/dashboardPage/ingredients.js

@@ -3,57 +3,62 @@ window.ingredientsStrandObj = {
 
     display: function(){
         if(!this.isPopulated){
-            let categories = categorizeIngredients();
-
-            let ingredientStrand = document.querySelector("#ingredientsStrand");
-            for(let category of categories){
-                let categoryDiv = document.createElement("div");
-                categoryDiv.classList = "categoryDiv"
-                ingredientStrand.appendChild(categoryDiv);
-
-                let headerDiv = document.createElement("div");
-                categoryDiv.appendChild(headerDiv);
-                
-                let headerTitle = document.createElement("p");
-                headerTitle.innerText = category.name;
-                headerDiv.appendChild(headerTitle);
-
-                let ingredientsDiv = document.createElement("div");
-                ingredientsDiv.classList = "ingredientsDiv";
-                ingredientsDiv.style.display = "none";
-                categoryDiv.appendChild(ingredientsDiv);
-
-                let headerButton = document.createElement("button");
-                headerButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/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>';
-                headerButton.onclick = ()=>{this.toggleCategory(ingredientsDiv, headerButton)};
-                headerDiv.appendChild(headerButton);
-
-                for(let ingredient of category.ingredients){
-                    let ingredientDiv = document.createElement("div");
-                    ingredientDiv.classList = "ingredient";
-                    ingredientDiv.onclick = ()=>{this.displayIngredient(ingredient, category)};
-                    ingredientsDiv.appendChild(ingredientDiv);
-
-                    let ingredientName = document.createElement("p");
-                    ingredientName.innerText = ingredient.name;
-                    ingredientDiv.appendChild(ingredientName);
-
-                    let spacer = document.createElement("p");
-                    spacer.innerText = "-".repeat(25);
-                    ingredientDiv.appendChild(spacer);
-
-                    let ingredientData = document.createElement("p");
-                    ingredientData.innerText = `${ingredient.quantity} ${ingredient.unit}`;
-                    ingredientDiv.appendChild(ingredientData);
-                }
-
-                
-            }
+            this.populateIngredients();
 
             this.isPopulated = true;
         }
     },
 
+    populateIngredients: function(){
+        let categories = categorizeIngredients();
+
+        let ingredientStrand = document.querySelector("#categoryList");
+        while(ingredientStrand.children.length > 0){
+            ingredientStrand.removeChild(ingredientStrand.firstChild);
+        }
+        for(let category of categories){
+            let categoryDiv = document.createElement("div");
+            categoryDiv.classList = "categoryDiv"
+            ingredientStrand.appendChild(categoryDiv);
+
+            let headerDiv = document.createElement("div");
+            categoryDiv.appendChild(headerDiv);
+            
+            let headerTitle = document.createElement("p");
+            headerTitle.innerText = category.name;
+            headerDiv.appendChild(headerTitle);
+
+            let ingredientsDiv = document.createElement("div");
+            ingredientsDiv.classList = "ingredientsDiv";
+            ingredientsDiv.style.display = "none";
+            categoryDiv.appendChild(ingredientsDiv);
+
+            let headerButton = document.createElement("button");
+            headerButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/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>';
+            headerButton.onclick = ()=>{this.toggleCategory(ingredientsDiv, headerButton)};
+            headerDiv.appendChild(headerButton);
+
+            for(let ingredient of category.ingredients){
+                let ingredientDiv = document.createElement("div");
+                ingredientDiv.classList = "ingredient";
+                ingredientDiv.onclick = ()=>{this.displayIngredient(ingredient, category)};
+                ingredientsDiv.appendChild(ingredientDiv);
+
+                let ingredientName = document.createElement("p");
+                ingredientName.innerText = ingredient.name;
+                ingredientDiv.appendChild(ingredientName);
+
+                let spacer = document.createElement("p");
+                spacer.innerText = "-".repeat(25);
+                ingredientDiv.appendChild(spacer);
+
+                let ingredientData = document.createElement("p");
+                ingredientData.innerText = `${ingredient.quantity} ${ingredient.unit}`;
+                ingredientDiv.appendChild(ingredientData);
+            }
+        }
+    },
+
     toggleCategory: function(div, button){
         if(div.style.display === "none"){
             button.innerHTML = '<svg xmlns="http://www.w3.org/2000/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>';
@@ -67,12 +72,6 @@ window.ingredientsStrandObj = {
     displayAddIngredient: function(){
         let sidebar = document.querySelector("#addIngredient");
         openSidebar(sidebar);
-
-        // if(sidebar.classList.value === "sidebarHide"){
-        //     sidebar.classList = "sidebar";
-        // }else{
-        //     sidebar.classList = "sidebarHide";
-        // }
     },
 
     displayIngredient: function(ingredient, category){