Add ability to remove ingredients

controllers/merchantData.js

@@ -272,9 +272,6 @@ module.exports = {
     },
 
     //POST - Removes an ingredient from the merchant's inventory
-    //Inputs: 
-    //  ingredientId: id of ingredient to remove
-    //Returns: Nothing
     removeMerchantIngredient: function(req, res){
         if(!req.session.user){
             req.session.error = "Must be logged in to do that";
@@ -284,7 +281,7 @@ module.exports = {
         Merchant.findOne({_id: req.session.user})
             .then((merchant)=>{
                 for(let i = 0; i < merchant.inventory.length; i++){
-                    if(req.body.ingredientId === merchant.inventory[i].ingredient._id.toString()){
+                    if(req.params.id === merchant.inventory[i].ingredient._id.toString()){
                         merchant.inventory.splice(i, 1);
                         break;
                     }
@@ -292,7 +289,7 @@ module.exports = {
 
                 merchant.save()
                     .then((merchant)=>{
-                        return res.json(req.body);
+                        return res.json({});
                     })
                     .catch((err)=>{
                         return res.json("Error: unable to save user data");

routes.js

@@ -18,7 +18,7 @@ module.exports = function(app){
     // app.get("/merchant/recipes/update", merchantData.updateRecipes);
     // app.post("/merchant/recipes/remove", merchantData.removeRecipe);
     app.put("/merchant/ingredients/add", merchantData.addMerchantIngredient);
-    // app.post("/merchant/ingredients/remove", merchantData.removeMerchantIngredient);
+    app.delete("/merchant/ingredients/remove/:id", merchantData.removeMerchantIngredient);
     app.put("/merchant/ingredients/update", merchantData.updateMerchantIngredient);
     // app.post("/merchant/recipes/ingredients/create", merchantData.addRecipeIngredient);
     // app.post("/merchant/recipes/ingredients/update", merchantData.updateRecipeIngredient);

views/dashboardPage/components/components.css

@@ -183,16 +183,24 @@
         visibility: hidden;
     }
 
-.sidebarIconButton{
+.sidebarIconButtons{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 50px;
+}
+
+.sidebarIconButtons > button{
+    display: flex;
+    align-items: center;
     background: none;
     border: none;
     cursor: pointer;
     padding: 3px;
     border-radius: 5px;
-    margin-right: auto;
 }
 
-    .sidebarIconButton:hover{
+    .sidebarIconButtons > button:hover{
         background: rgb(0, 27, 45);
         color: white;
     }

views/dashboardPage/components/ingredientDetails.ejs

@@ -1,10 +1,26 @@
 <div id="ingredientDetails">
-    <button class="sidebarIconButton" onclick="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>
+    <div class="sidebarIconButtons">
+        <button onclick="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>
+            <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 onclick="ingredientDetailsComp.remove()">
+            <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>
+            </svg>
+        </button>
+    </div>
 
     <p></p>
     <h1></h1>
@@ -19,4 +35,61 @@
     <label>Average Daily Use (30 days)
         <p id="dailyUse"></p>
     </label>
+
+    <script>
+        let ingredientDetailsComp = {
+            ingredient: {},
+
+            display: function(ingredient, category){
+                this.ingredient = ingredient;
+
+                sidebar = document.querySelector("#ingredientDetails");
+                openSidebar(sidebar);
+
+                document.querySelector("#ingredientDetails p").innerText = category.name;
+                document.querySelector("#ingredientDetails h1").innerText = ingredient.name;
+                document.querySelector("#ingredientStock").innerText = `${ingredient.quantity} ${ingredient.unit}`;
+
+                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);
+                    quantities.push(ingredientSold(dateIndices(startDay, endDay), ingredient.id));
+                }
+
+                let sum = 0;
+                for(let quantity of quantities){
+                    sum += quantity;
+                }
+
+                document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
+            },
+
+            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.id === merchant.recipes[i].ingredients[j].ingredient._id){
+                            banner.createError("Must remove ingredient from all recipes before removing");
+                            return;
+                        }
+                    }
+                }
+
+                fetch(`/merchant/ingredients/remove/${this.ingredient.id}`, {
+                    method: "DELETE",
+                })
+                    .then((response) => response.json())
+                    .then((response)=>{
+                        if(typeof(response) === "string"){
+                            banner.createError(response);
+                        }else{
+                            banner.createNotification("Ingredient removed");
+                            updateInventory([this.ingredient], true);
+                        }
+                    })
+                    .catch((err)=>{});
+            }
+        }
+    </script>
 </div>

views/dashboardPage/controller.js

@@ -41,7 +41,7 @@ let updateInventory = (ingredients, remove = false)=>{
         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);
+                    merchant.inventory.splice(j, 1);
                 }else{
                     merchant.inventory[j].quantity = ingredients[i].quantity;
                 }

views/dashboardPage/ingredients.js

@@ -42,7 +42,7 @@ window.ingredientsStrandObj = {
             for(let ingredient of category.ingredients){
                 let ingredientDiv = document.createElement("div");
                 ingredientDiv.classList = "ingredient";
-                ingredientDiv.onclick = ()=>{this.displayIngredient(ingredient, category)};
+                ingredientDiv.onclick = ()=>{ingredientDetailsComp.display(ingredient, category)};
                 ingredientsDiv.appendChild(ingredientDiv);
 
                 let ingredientName = document.createElement("p");
@@ -69,31 +69,5 @@ window.ingredientsStrandObj = {
             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";
         }
-    },
-
-    
-
-    displayIngredient: function(ingredient, category){
-        sidebar = document.querySelector("#ingredientDetails");
-        openSidebar(sidebar);
-
-        document.querySelector("#ingredientDetails p").innerText = category.name;
-        document.querySelector("#ingredientDetails h1").innerText = ingredient.name;
-        document.querySelector("#ingredientStock").innerText = `${ingredient.quantity} ${ingredient.unit}`;
-
-        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);
-            quantities.push(ingredientSold(dateIndices(startDay, endDay), ingredient.id));
-        }
-
-        let sum = 0;
-        for(let quantity of quantities){
-            sum += quantity;
-        }
-
-        document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
     }
 }