Add ingredients component will not reload every time it is opened

views/dashboardPage/components/addIngredients.ejs

@@ -10,7 +10,7 @@
 
     <div id="addIngredientList"></div>
 
-    <button class="button" onclick="ingredientsStrandObj.submitAddIngredients()">Add</button>
+    <button class="button" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
 
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">
@@ -39,4 +39,125 @@
             <input type="number" min="0" step="0.01">
         </div>
     </template>
+
+    <script>
+        let addIngredientsComp = {
+            isPopulated: false,
+
+            display: function(){
+                let sidebar = document.querySelector("#addIngredients");
+
+                if(!this.isPopulated){
+                    let addIngredientsDiv = document.getElementById("addIngredientList");
+                    let categoryTemplate = document.getElementById("addIngredientsCategory");
+                    let ingredientTemplate = document.getElementById("addIngredientsIngredient");
+
+                    fetch("/ingredients")
+                        .then((response) => response.json())
+                        .then((response)=>{
+                            if(typeof(response) === "string"){
+                                banner.createError(response);
+                            }else{
+                                let categories = categorizeIngredientsFromDB(response);
+
+                                while(addIngredientsDiv.children.length > 0){
+                                    addIngredientsDiv.removeChild(addIngredientsDiv.firstChild);
+                                }
+                                this.addIngredientsDiv = [];
+                                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[1].innerText = categories[i].ingredients[j].name;
+                                        ingredientDiv._id = categories[i].ingredients[j].id;
+                                        ingredientDiv._name = categories[i].ingredients[j].name;
+                                        ingredientDiv._unit = categories[i].ingredients[j].unit;
+                                        ingredientDiv._category = categories[i].name;
+
+                                        categoryDiv.children[1].appendChild(ingredientDiv);
+
+                                        this.addIngredientsDiv.push(ingredientDiv);
+                                    }
+                                }
+                            }
+                        })
+                        .catch((err)=>{
+                            banner.createError("Unable to retrieve data");
+                        });
+
+                    this.isPopulated = true;
+                }
+
+                openSidebar(sidebar);
+            },
+
+            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";
+                }
+            },
+
+            submitAddIngredients: function(){
+                let addIngredients = [];
+
+                for(let i = 0; i < this.addIngredientsDiv.length; i++){
+                    let ingredient = this.addIngredientsDiv[i];
+
+                    if(ingredient.children[0].checked){
+                        if(!validator.ingredient.quantity(ingredient.children[2].value)){
+                            return;
+                        }
+
+                        addIngredients.push({
+                            ingredient: {
+                                _id: ingredient._id,
+                                name: ingredient._name,
+                                category: ingredient._category,
+                                unit: ingredient._unit
+                            },
+                            quantity: ingredient.children[2].value,
+                        });
+                    }
+                }
+
+                fetch("/merchant/ingredients/add", {
+                    method: "PUT",
+                    headers: {
+                        "Content-Type": "application/json;charset=utf-8"
+                    },
+                    body: JSON.stringify(addIngredients)
+                })
+                    .then((response)=>{
+                        if(typeof(response.data) === "string"){
+                            banner.createError(response.data);
+                        }else{
+                            banner.createNotification("Ingredients added");
+                            updateInventory(addIngredients);
+                        }
+                    })
+                    .catch((err)=>{
+                        console.log(err);
+                        banner.createError("Unable to update data.  Please refresh the page");
+                    });
+            }
+        }
+    </script>
 </div>

views/dashboardPage/controller.js

@@ -58,6 +58,8 @@ let updateInventory = (ingredients, remove = false)=>{
 
     homeStrandObj.drawInventoryCheckCard();
     ingredientsStrandObj.populateIngredients();
+    addIngredientsComp.isPopulated = false;
+    closeSidebar();
 }
 
 //Close any open sidebar

views/dashboardPage/dashboard.ejs

@@ -57,7 +57,7 @@
                 <div id="ingredientHead">
                     <h1 class="strandTitle">Ingredient Inventory</h1>
 
-                    <button class="button" onclick="ingredientsStrandObj.displayAddIngredients()">
+                    <button class="button" onclick="addIngredientsComp.display()">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                         add
                     </button>

views/dashboardPage/ingredients.js

@@ -71,68 +71,7 @@ window.ingredientsStrandObj = {
         }
     },
 
-    displayAddIngredients: function(){
-        let sidebar = document.querySelector("#addIngredients");
-        let addIngredientsDiv = document.getElementById("addIngredientList");
-        let categoryTemplate = document.getElementById("addIngredientsCategory");
-        let ingredientTemplate = document.getElementById("addIngredientsIngredient");
-
-        fetch("/ingredients")
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let categories = categorizeIngredientsFromDB(response);
-
-                    this.addIngredientsDiv = [];
-                    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[1].innerText = categories[i].ingredients[j].name;
-                            ingredientDiv._id = categories[i].ingredients[j].id;
-                            ingredientDiv._name = categories[i].ingredients[j].name;
-                            ingredientDiv._unit = categories[i].ingredients[j].unit;
-                            ingredientDiv._category = categories[i].name;
-
-                            categoryDiv.children[1].appendChild(ingredientDiv);
-
-                            this.addIngredientsDiv.push(ingredientDiv);
-                        }
-                    }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("Unable to retrieve data");
-            });
-
-        openSidebar(sidebar);
-    },
-
-    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";
-        }
-    },
+    
 
     displayIngredient: function(ingredient, category){
         sidebar = document.querySelector("#ingredientDetails");
@@ -156,49 +95,5 @@ window.ingredientsStrandObj = {
         }
 
         document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
-    },
-
-    submitAddIngredients: function(){
-        let addIngredients = [];
-
-        for(let i = 0; i < this.addIngredientsDiv.length; i++){
-            let ingredient = this.addIngredientsDiv[i];
-
-            if(ingredient.children[0].checked){
-                if(!validator.ingredient.quantity(ingredient.children[2].value)){
-                    return;
-                }
-
-                addIngredients.push({
-                    ingredient: {
-                        _id: ingredient._id,
-                        name: ingredient._name,
-                        category: ingredient._category,
-                        unit: ingredient._unit
-                    },
-                    quantity: ingredient.children[2].value,
-                });
-            }
-        }
-
-        fetch("/merchant/ingredients/add", {
-            method: "PUT",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(addIngredients)
-        })
-            .then((response)=>{
-                if(typeof(response.data) === "string"){
-                    banner.createError(response.data);
-                }else{
-                    banner.createNotification("Ingredients added");
-                    updateInventory(addIngredients);
-                }
-            })
-            .catch((err)=>{
-                console.log(err);
-                banner.createError("Unable to update data.  Please refresh the page");
-            });
     }
 }