Add edit button for a recipe. Add delete button for a recipe.

controllers/home.js

@@ -257,5 +257,43 @@ module.exports = {
                 console.log(err);
                 return res.render("error");
             });
+    },
+
+    updateRecipeIngredient: function(req, res){
+        Recipe.findOne({_id: req.body.recipeId})
+            .populate("ingredients.id")
+            .then((recipe)=>{
+                for(let i = 0; i < recipe.ingredients.length; i++){
+                    if(recipe.ingredients[i]._id.toString() === req.body.ingredient._id){
+                        recipe.ingredients.splice(i, 1);
+                        recipe.ingredients.push(req.body.ingredient);
+                        break;
+                    }
+                }
+
+                recipe.save()
+                    .then((recipe)=>{
+                        return res.json(recipe);
+                    })
+                    .catch((err)=>{
+                        console.log(err);
+                        return res.render("error");
+                    })
+            })
+            .catch((err)=>{
+                console.log(err);
+                res.render("error");
+            })
+    },
+
+    deleteRecipe: function(req, res){
+        Recipe.findOneAndDelete(req.body.id)
+            .then((recipe)=>{
+                return res.json(recipe);
+            })
+            .catch((err)=>{
+                console.log(err);
+                return res.render("error");
+            });
     }
 }

routes.js

@@ -11,4 +11,6 @@ module.exports = function(app){
     app.post("/ingredients/createone", home.createIngredient);
     app.get("/recipes", home.displayRecipes);
     app.post("/recipes/ingredients/remove", home.deleteRecipeIngredient);
+    app.post("/recipes/ingredients/update", home.updateRecipeIngredient);
+    app.post("/recipes/remove", home.deleteRecipe);
 }

views/recipesPage/recipes.css

@@ -64,4 +64,8 @@ h1{
 
         td:nth-of-type(3n){
             border: none;
+        }
+
+        #delRecipe{
+            display: "none"
         }

views/recipesPage/recipes.ejs

@@ -13,6 +13,8 @@
 
         <div id="recipes" class="container"></div>
 
+        <button id="delRecipe">Delete Recipe</button>
+
         <div id="ingredient" class="container">
             <table>
                 <thead>

views/recipesPage/recipes.js

@@ -1,9 +1,11 @@
-console.log(recipes);
-
 let recipesPage = {
     //Display all recipes on a card
     displayRecipes: function(){
         let body = document.querySelector(".container");
+
+        while(body.children.length > 0){
+            body.removeChild(body.firstChild);
+        }
         
         for(let recipe of recipes){
             let recipeDiv = document.createElement("div");
@@ -37,8 +39,13 @@ let recipesPage = {
         recipesDiv.style.display = "none";
         ingredientDiv.style.display = "flex";
 
+        let delRecipe = document.querySelector("#delRecipe");
+        delRecipe.style.display = "inline-block";
+        delRecipe.onclick = ()=>{this.deleteRecipe(recipe);};
+
         for(let ingredient of recipe.ingredients){
             let row = document.createElement("tr");
+            row.recipeId = recipe._id;
             tbody.appendChild(row);
 
             let name = document.createElement("td");
@@ -52,6 +59,11 @@ let recipesPage = {
             let actions = document.createElement("td");
             row.appendChild(actions);
 
+            let editButton = document.createElement("button");
+            editButton.innerText = "Edit";
+            editButton.onclick = ()=>{this.editIngredient(row, ingredient);};
+            actions.appendChild(editButton);
+
             let removeButton = document.createElement("button");
             removeButton.innerText = "Remove";
             removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredient._id, row);};
@@ -59,6 +71,8 @@ let recipesPage = {
         }
     },
 
+    //Delete ingredient from table
+    //Delete ingredient from database
     deleteIngredient: function(recipeId, ingredientId, row){
         row.parentNode.removeChild(row);
         
@@ -70,6 +84,74 @@ let recipesPage = {
                 banner.createError("There was an error and the ingredient could not be removed from the recipe");
                 console.log(err);
             });
+    },
+
+
+    //Change quantity field to input
+    //Change edit button
+    editIngredient: function(row, ingredient){
+        let td = row.children[1];
+        td.innerText = "";
+
+        let input = document.createElement("input");
+        input.type = "number";
+        input.step = "0.01";
+        input.value = ingredient.quantity;
+        td.appendChild(input);
+
+        let para = document.createElement("p");
+        para.innerText = ingredient.id.unitType;
+        td.appendChild(para);
+
+        let button = row.children[2].children[0];
+        button.innerText = "Save";
+        button.onclick = ()=>{this.updateIngredient(row, ingredient);}; 
+    },
+
+    updateIngredient: function(row, ingredient){
+        ingredient.quantity = row.children[1].children[0].value;
+        let td = row.children[1];
+        while(td.children.length > 0){
+            td.removeChild(td.firstChild);
+        }
+        td.innerText = `${ingredient.quantity} ${ingredient.id.unitType}`;
+
+        let button = row.children[2].children[0];
+        button.innerText = "Edit";
+        button.onclick = ()=>{this.editIngredient(row, ingredient);};
+
+        axios.post("/recipes/ingredients/update", {recipeId: row.recipeId, ingredient: ingredient})
+            .then((recipe)=>{
+                banner.createNotification("Ingredient successfully updated");
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("There was an error and the ingredient could not be updated");
+            });
+    },
+
+    deleteRecipe: function(recipe){
+        for(let i = 0; i < recipes.length; i++){
+            if(recipes[i]._id === recipe._id){
+                recipes.splice(i, 1);
+                break;
+            }
+        }
+
+        let ingredientDiv = document.querySelector("#ingredient");
+        let recipesDiv = document.querySelector("#recipes");
+        ingredientDiv.style.display = "none";
+        recipesDiv.style.display = "flex";
+        this.displayRecipes();
+
+        axios.post("recipes/remove", {id: recipe._id})
+            .then((recipe)=>{
+                banner.createNotification("Recipe removed");
+            })
+            .catch((err)=>{
+                console.log(err);
+                banner.createError("There was an error and the recipe could not be removed");
+            });
     }
 }