Remove already owned ingredients from add ingredients

views/dashboardPage/components/addIngredients.ejs

@@ -10,7 +10,7 @@
 
     <div id="addIngredientList"></div>
 
-    <button class="button" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
+    <button class="button addIngredientsBtn" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
 
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">
@@ -58,6 +58,14 @@
                             if(typeof(response) === "string"){
                                 banner.createError(response);
                             }else{
+                                for(let i = 0; i < merchant.inventory.length; i++){
+                                    for(let j = 0; j < response.length; j++){
+                                        if(merchant.inventory[i].ingredient._id === response[j]._id){
+                                            response.splice(j, 1);
+                                            break;
+                                        }
+                                    }
+                                }
                                 let categories = categorizeIngredientsFromDB(response);
 
                                 while(addIngredientsDiv.children.length > 0){
@@ -89,6 +97,7 @@
                             }
                         })
                         .catch((err)=>{
+                            console.log(err);
                             banner.createError("Unable to retrieve data");
                         });
 

views/dashboardPage/components/components.css

@@ -211,6 +211,7 @@
 
     #addIngredientList{
         overflow-y: auto;
+        margin-bottom: 15px;
     }
 
     .addIngredient{
@@ -222,6 +223,10 @@
         border-radius: 5px;
     }
 
+    .addIngredientsBtn{
+        margin-left: auto;
+    }
+
 #ingredientDetails{
     flex-direction: column;
     align-items: center;