Sub-ingredients now display on the ingredient details sidebar instead of recipes.

views/dashboardPage/dashboard.css

@@ -99,6 +99,14 @@ Multi-strand use classes
     font-size: 16px;
 }
 
+    .choosable.offColor{
+        background: rgb(179, 191, 209);
+    }
+
+        .choosable.offColor{
+            background: rgb(201, 201, 201);
+        }
+
     .choosable.tall{
         padding: 15px;
     }

views/dashboardPage/ejs/sidebars/ingredientDetails.ejs

@@ -40,13 +40,14 @@
 
     <div class="lineBorder"></div>
 
-    <label id="recipeListLabel">RECIPES:</label>
+    <label id="recipeListLabel">SUB-INGREDIENTS:</label>
 
-    <div id="ingredientRecipeList"></div>
+    <div id="subIngredientList"></div>
 
     <template id="ingredientRecipe">
-        <div>
+        <button class="choosable offColor">
             <p></p>
-        </div>
+            <p></p>
+        </button>
     </template>
 </div>

views/dashboardPage/js/sidebars/ingredientDetails.js

@@ -27,24 +27,20 @@ let ingredientDetails = {
         const dailyUseDiv = document.getElementById("dailyUse");
         dailyUseDiv.innerText = `${dailyUse.toFixed(2)} ${ingredient.ingredient.unit.toUpperCase()}`;
 
-        //Show recipes that this ingredient is a part of
-        let recipeList = document.getElementById("ingredientRecipeList");
+        let subIngredientList = document.getElementById("subIngredientList");
         let template = document.getElementById("ingredientRecipe").content.children[0];
-        let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
 
-        while(recipeList.children.length > 0){
-            recipeList.removeChild(recipeList.firstChild);
+        while(subIngredientList.children.length > 0){
+            subIngredientList.removeChild(subIngredientList.firstChild);
         }
 
-        for(let i = 0; i < recipes.length; i++){
-            let recipeDiv = template.cloneNode(true);
-            recipeDiv.children[0].innerText = recipes[i].name;
-            recipeDiv.onclick = ()=>{
-                controller.openStrand("recipeBook");
-                controller.openSidebar("recipeDetails", recipes[i]);
-            }
-            recipeDiv.classList.add("choosable");
-            recipeList.appendChild(recipeDiv);
+        for(let i = 0; i < ingredient.ingredient.subIngredients.length; i++){
+            let subIngredient = ingredient.ingredient.subIngredients[i];
+            let button = template.cloneNode(true);
+            button.children[0].innerText = subIngredient.ingredient.name;
+            button.children[1].innerText = `${subIngredient.quantity} ${subIngredient.ingredient.unit}`;
+            button.onclick = ()=>{this.display(merchant.getIngredient(subIngredient.ingredient.id))};
+            subIngredientList.appendChild(button);
         }
     },
 

views/dashboardPage/sidebars.css

@@ -252,7 +252,7 @@ Ingredient Details
         padding: 10px;
     }
 
-    #ingredientRecipeList{
+    #subIngredientList{
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -846,7 +846,7 @@ NEW TRANSACTION
                 margin: 0;
             }
 
-            #recipeListLabel, #ingredientRecipeList{
+            #recipeListLabel, #subIngredientList{
                 display: none;
             }
 
@@ -908,7 +908,7 @@ NEW TRANSACTION
                 font-size: 35px;
             }
 
-            #recipeListLabel, #ingredientRecipeList{
+            #recipeListLabel, #subIngredientList{
                 display: flex;
             }