Change recipe ingredients to use a template

views/dashboardPage/components/components.css

@@ -314,7 +314,7 @@
     width: 100%;
 }
 
-    #recipeIngredients{
+    #recipeIngredientList{
         width: 100%;
     }
 

views/dashboardPage/components/recipeDetails.ejs

@@ -26,7 +26,7 @@
 
     <h1></h1>
 
-    <div id="recipeIngredients"></div>
+    <div id="recipeIngredientList"></div>
 
     <div class="lineBorder"></div>
 
@@ -36,38 +36,46 @@
         <p></p>
     </div>
 
+    <template id="recipeIngredient">
+        <div class="recipeIngredient">
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+
     <script>
         let recipeDetailsComp = {
             recipe: {},
 
             display: function(recipe){
                 this.recipe = recipe;
+                console.log(recipe);
                 openSidebar(document.querySelector("#recipeDetails"));
 
                 document.querySelector("#recipeDetails h1").innerText = recipe.name;
 
-                let ingredientList = document.querySelector("#recipeIngredients");
+                let ingredientList = document.querySelector("#recipeIngredientList");
                 while(ingredientList.children.length > 0){
                     ingredientList.removeChild(ingredientList.firstChild);
                 }
 
-                for(let ingredient of recipe.ingredients){
-                    let ingredientDiv = document.createElement("div");
-                    ingredientDiv.classList = "recipeIngredient";
-                    ingredientList.appendChild(ingredientDiv);
+                let template = document.querySelector("#recipeIngredient").content.children[0];
+                for(let i = 0; i < recipe.ingredients.length; i++){
+                    ingredientDiv = template.cloneNode(true);
 
-                    let ingredientName = document.createElement("p");
-                    ingredientName.innerText = ingredient.ingredient.name;
-                    ingredientDiv.appendChild(ingredientName);
+                    ingredientDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
+                    ingredientDiv.children[1].innerText = `${recipe.ingredients[i].quantity} ${recipe.ingredients[i].ingredient.unit}`;
 
-                    let ingredientQuantity = document.createElement("p");
-                    ingredientQuantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
-                    ingredientDiv.appendChild(ingredientQuantity);
+                    ingredientList.appendChild(ingredientDiv);
                 }
 
                 document.querySelector("#recipePrice p").innerText = `$${(recipe.price / 100).toFixed(2)}`;
             },
 
+            edit: function(){
+                console.log("edit recipe");
+            },
+
             remove: function(){
                 fetch(`/merchant/recipes/remove/${this.recipe._id}`, {
                     method: "DELETE"