Enable ability to add ingredients to recipes

controllers/recipeData.js

@@ -68,7 +68,7 @@ module.exports = {
                 for(let i = 0; i < req.body.ingredients.length; i++){
                     let isNew = true;
                     for(let j = 0; j < recipe.ingredients.length; j++){
-                        if(req.body.ingredients[i].ingredient === recipe.ingredients[j]._id.toString()){
+                        if(req.body.ingredients[i].ingredient === recipe.ingredients[j].ingredient._id.toString()){
                             isNew = false;
                             recipe.ingredients[j].quantity = req.body.ingredients[i].quantity;
                             break;
@@ -83,7 +83,7 @@ module.exports = {
                 for(let i = 0; i < recipe.ingredients.length; i++){
                     let doesntExist = true;
                     for(let j = 0; j < req.body.ingredients.length; j++){
-                        if(recipe.ingredients[i]._id === req.body.ingredients[j]._id){
+                        if(recipe.ingredients[i].ingredient._id.toString() === req.body.ingredients[j].ingredient){
                             doesntExist = false;
                             break;
                         }
@@ -94,8 +94,6 @@ module.exports = {
                     }
                 }
 
-                // console.log(recipe);
-
                 return recipe.save()
             })
             .then((response)=>{

views/dashboardPage/components/addIngredients.ejs

@@ -99,7 +99,6 @@
                             }
                         })
                         .catch((err)=>{
-                            console.log(err);
                             banner.createError("Unable to retrieve data");
                         });
 
@@ -166,7 +165,6 @@
                             }
                         })
                         .catch((err)=>{
-                            console.log(err);
                             banner.createError("Unable to update data.  Please refresh the page");
                         });
                 }

views/dashboardPage/components/components.js

@@ -0,0 +1,152 @@
+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].quantity} ${recipe.ingredients[i].ingredient.unit}`;
+            ingredientDiv._id = recipe.ingredients[i].ingredient._id;
+            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");
+
+        let name = document.querySelector("#recipeName");
+        let nameIn = document.querySelector("#recipeNameIn");
+        name.style.display = "none";
+        nameIn.style.display = "block";
+        nameIn.placeholder = name.innerText;
+
+        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].placeholder = this.recipe.ingredients[i].quantity;
+            div.children[3].style.display = "block";
+            div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
+        }
+
+        document.querySelector("#addRecIng").style.display = "flex";
+
+        let price = document.querySelector("#recipePrice");
+        price.children[1].style.display = "none";
+        price.children[2].style.display = "block";
+        price.children[2].placeholder = price.children[1].innerText;
+
+        document.querySelector("#recipeUpdate").style.display = "flex";
+    },
+
+    update: function(){
+        let updatedRecipe = {
+            _id: this.recipe._id,
+            name: document.querySelector("#recipeNameIn").value || this.recipe.name,
+            price: Math.round((document.querySelector("#recipePrice").children[2].value * 100)) || this.recipe.price,
+            ingredients: []
+        }
+
+        let divs = document.querySelector("#recipeIngredientList").children;
+        for(let i = 0; i < divs.length; i++){
+            if(divs[i].name === "new"){
+                updatedRecipe.ingredients.push({
+                    ingredient: divs[i].children[0].value,
+                    quantity: divs[i].children[1].value
+                })
+            }else{
+                updatedRecipe.ingredients.push({
+                    ingredient: divs[i]._id,
+                    quantity: divs[i].children[1].value || divs[i].children[1].placeholder
+                });
+            }
+        }
+
+        if(validator.recipe(updatedRecipe)){
+            fetch("/recipe/update", {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify(updatedRecipe)
+            })
+                .then((response) => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        updateRecipes(updatedRecipe);
+                        banner.createNotification("Recipe successfully updated");
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("Something went wrong.  Please refresh the page");
+                })
+        }
+    },
+
+    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{
+                    updateRecipes(this.recipe, true);
+                    banner.createNotification("Recipe removed");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("Something went wrong.  Try refreshing the page");
+            });
+    },
+
+    displayAddIngredient: function(){
+        let template = document.querySelector("#addRecIngredient").content.children[0].cloneNode(true);
+        template.name = "new";
+        document.querySelector("#recipeIngredientList").appendChild(template);
+
+        let categories = categorizeIngredients(merchant.inventory);
+
+        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].name} (${categories[i].ingredients[j].unit})`;
+                option.value = categories[i].ingredients[j].id;
+                optGroup.appendChild(option);
+            }
+        }
+    }
+}

views/dashboardPage/components/recipeDetails.ejs

@@ -67,151 +67,4 @@
             <input type="number" min="0" step="0.01">
         </div>
     </template>
-
-    <script>
-        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].quantity} ${recipe.ingredients[i].ingredient.unit}`;
-                    ingredientDiv._id = recipe.ingredients[i].ingredient._id;
-                    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");
-
-                let name = document.querySelector("#recipeName");
-                let nameIn = document.querySelector("#recipeNameIn");
-                name.style.display = "none";
-                nameIn.style.display = "block";
-                nameIn.placeholder = name.innerText;
-
-                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].placeholder = this.recipe.ingredients[i].quantity;
-                    div.children[3].style.display = "block";
-                    div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
-                }
-
-                document.querySelector("#addRecIng").style.display = "flex";
-
-                let price = document.querySelector("#recipePrice");
-                price.children[1].style.display = "none";
-                price.children[2].style.display = "block";
-                price.children[2].placeholder = price.children[1].innerText;
-
-                document.querySelector("#recipeUpdate").style.display = "flex";
-            },
-
-            update: function(){
-                let updatedRecipe = {
-                    _id: this.recipe._id,
-                    name: document.querySelector("#recipeNameIn").value || this.recipe.name,
-                    price: Math.round((document.querySelector("#recipePrice").children[2].value * 100)) || this.recipe.price,
-                    ingredients: []
-                }
-
-                let divs = document.querySelector("#recipeIngredientList").children;
-                for(let i = 0; i < divs.length; i++){
-                    updatedRecipe.ingredients.push({
-                        ingredient: divs[i]._id,
-                        quantity: divs[i].children[1].value || divs[i].children[1].placeholder
-                    });
-                }
-
-                if(validator.recipe(updatedRecipe)){
-                    fetch("/recipe/update", {
-                        method: "PUT",
-                        headers: {
-                            "Content-Type": "application/json;charset=utf-8"
-                        },
-                        body: JSON.stringify(updatedRecipe)
-                    })
-                        .then((response) => response.json())
-                        .then((response)=>{
-                            if(typeof(response) === "string"){
-                                banner.createError(response);
-                            }else{
-                                updateRecipes(updatedRecipe);
-                                banner.createNotification("Recipe successfully updated");
-                            }
-                        })
-                        .catch((err)=>{
-                            banner.createError("Something went wrong.  Please refresh the page");
-                        })
-                }
-            },
-
-            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{
-                            updateRecipes(this.recipe, true);
-                            banner.createNotification("Recipe removed");
-                        }
-                    })
-                    .catch((err)=>{
-                        banner.createError("Something went wrong.  Try refreshing the page");
-                    });
-            },
-
-            displayAddIngredient: function(){
-                let template = document.querySelector("#addRecIngredient").content.children[0].cloneNode(true);
-                document.querySelector("#recipeIngredientList").appendChild(template);
-
-                let categories = categorizeIngredients(merchant.inventory);
-
-                for(let i = 0; i < categories.length; i++){
-                    let optGroup = document.createElement("optgroup");
-                    optGroup.innerText = 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].name} (${categories[i].ingredients[j].unit})`;
-                        option.value = categories[i].ingredients[j].id;
-                        optGroup.appendChild(option);
-                    }
-                }
-            }
-        }
-    </script>
 </div>

views/dashboardPage/dashboard.ejs

@@ -102,6 +102,7 @@
         <script src="/dashboardPage/home.js"></script>
         <script src="/dashboardPage/ingredients.js"></script>
         <script src="/dashboardPage/recipeBook.js"></script>
+        <script src="/dashboardPage/components/components.js"></script>
         <script src="/dashboardPage/controller.js"></script>
         <script src="/dashboardPage/orders.js"></script>
         <script src="../shared/validation.js"></script>

views/dashboardPage/home.js

@@ -238,9 +238,7 @@ window.homeStrandObj = {
                         updateInventory(changes);
                     }
                 })
-                .catch((err)=>{
-                    console.log(err);
-                });
+                .catch((err)=>{});
         }
     }
 }