Add recipes to ingredient details

views/dashboardPage/components/components.css

@@ -471,4 +471,23 @@
         #orderTotalPrice{
             font-size: 25px;
             font-weight: bold;
-        }
+        }
+
+/* Ingredient Details */
+#ingredientRecipeList{
+    list-style: none;
+    overflow: auto;
+}
+
+#ingredientRecipeList > li{
+    font-size: 25px;
+    font-weight: bold;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+    #ingredientRecipeList > li:hover{
+        background: rgb(0, 27, 45);
+        color: white;
+    }

views/dashboardPage/components/components.js

@@ -462,4 +462,111 @@ let addIngredientsComp = {
                 });
         }
     }
+}
+
+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}`;
+        document.querySelector("#ingredientInput").placeholder = `${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}`;
+
+        let ul = document.querySelector("#ingredientRecipeList");
+        let recipes = recipesForIngredient(ingredient.id);
+        while(ul.children.length > 0){
+            ul.removeChild(ul.firstChild);
+        }
+        for(let i = 0; i < recipes.length; i++){
+            let li = document.createElement("li");
+            console.log(recipes[i]);
+            li.innerText = recipes[i].name;
+            li.onclick = ()=>{
+                changeStrand("recipeBookStrand");
+                recipeDetailsComp.display(recipes[i]);
+            }
+            ul.appendChild(li);
+        }
+    },
+
+    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)=>{});
+    },
+
+    edit: function(){
+        document.querySelector("#ingredientStock").style.display = "none";
+        document.querySelector("#ingredientInput").style.display = "block";
+        document.querySelector("#editSubmitButton").style.display = "block";
+    },
+
+    editSubmit: function(){
+        let data = [{
+            id: this.ingredient.id,
+            quantity: Number(document.querySelector("#ingredientInput").value)
+        }];
+
+        if(validator.ingredientQuantity(data[0].quantity)){
+            fetch("/merchant/ingredients/update", {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify(data)
+            })
+                .then((response) => response.json())
+                .then((response)=>{
+                    if(typeof(response) === "string"){
+                        banner.createError(response);
+                    }else{
+                        updateInventory(data);
+                        banner.createNotification("Ingredient updated");
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("Something went wrong, try refreshing the page");
+                });
+        }
+    }
 }

views/dashboardPage/components/ingredientDetails.ejs

@@ -37,98 +37,11 @@
         <p id="dailyUse"></p>
     </label>
 
-    <button id="editSubmitButton" class="button" onclick="ingredientDetailsComp.editSubmit()" style="display: none;">Save Changes</button>
-
-    <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}`;
-                document.querySelector("#ingredientInput").placeholder = `${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)=>{});
-            },
-
-            edit: function(){
-                document.querySelector("#ingredientStock").style.display = "none";
-                document.querySelector("#ingredientInput").style.display = "block";
-                document.querySelector("#editSubmitButton").style.display = "block";
-            },
+    <div class="lineBorder"></div>
 
-            editSubmit: function(){
-                let data = [{
-                    id: this.ingredient.id,
-                    quantity: Number(document.querySelector("#ingredientInput").value)
-                }];
+    <label>Contained in:
+        <ul id="ingredientRecipeList"></ul>
+    </label>
 
-                if(validator.ingredientQuantity(data[0].quantity)){
-                    fetch("/merchant/ingredients/update", {
-                        method: "PUT",
-                        headers: {
-                            "Content-Type": "application/json;charset=utf-8"
-                        },
-                        body: JSON.stringify(data)
-                    })
-                        .then((response) => response.json())
-                        .then((response)=>{
-                            if(typeof(response) === "string"){
-                                banner.createError(response);
-                            }else{
-                                updateInventory(data);
-                                banner.createNotification("Ingredient updated");
-                            }
-                        })
-                        .catch((err)=>{
-                            banner.createError("Something went wrong, try refreshing the page");
-                        });
-                }
-            }
-        }
-    </script>
+    <button id="editSubmitButton" class="button" onclick="ingredientDetailsComp.editSubmit()" style="display: none;">Save Changes</button>
 </div>

views/dashboardPage/controller.js

@@ -57,9 +57,7 @@ let updateInventory = (ingredients, remove = false)=>{
         }
     }
 
-    console.log("updating");
     homeStrandObj.drawInventoryCheckCard();
-    console.log("still updating?");
     ingredientsStrandObj.populateByProperty("category");
     addIngredientsComp.isPopulated = false;
     closeSidebar();
@@ -434,6 +432,21 @@ let categorizeIngredientsFromDB = (ingredients)=>{
     return ingredientsByCategory;
 }
 
+let recipesForIngredient = (ingredientId)=>{
+    let recipes = [];
+
+    for(let i = 0; i < merchant.recipes.length; i++){
+        for(let j = 0; j < merchant.recipes[i].ingredients.length; j++){
+            if(merchant.recipes[i].ingredients[j].ingredient._id === ingredientId){
+                recipes.push(merchant.recipes[i]);
+                break;
+            }
+        }
+    }
+
+    return recipes;
+}
+
 for(let transaction of transactions){
     transaction.date = new Date(transaction.date);
 }