Change ingredients in order details into a button.

Update style appropriately.

views/dashboardPage/bundle.js

@@ -344,7 +344,7 @@ class Merchant{
     getIngredient(id){
         for(let i = 0; i < this._ingredients.length; i++){
             if(this._ingredients[i].ingredient.id === id){
-                return this._ingredients[i].ingredient;
+                return this._ingredients[i];
             }
         }
     }
@@ -3158,8 +3158,12 @@ let orderDetails = {
             
             ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
             ingredientDiv.children[2].innerText = `$${order.ingredients[i].cost().toFixed(2)}`;
+            ingredientDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", merchant.getIngredient(order.ingredients[i].ingredient.id));
+            }
             
-            const ingredientDisplay = ingredientDiv.children[1];
+            let ingredientDisplay = ingredientDiv.children[1];
             if(ingredient.specialUnit === "bottle"){
                 ingredientDisplay.innerText = `${order.ingredients[i].quantity.toFixed(2)} bottles x $${order.ingredients.pricePerUnit.toFixed(2)}`;
             }else{

views/dashboardPage/js/Merchant.js

@@ -217,7 +217,7 @@ class Merchant{
     getIngredient(id){
         for(let i = 0; i < this._ingredients.length; i++){
             if(this._ingredients[i].ingredient.id === id){
-                return this._ingredients[i].ingredient;
+                return this._ingredients[i];
             }
         }
     }

views/dashboardPage/js/orderDetails.js

@@ -19,8 +19,12 @@ let orderDetails = {
             
             ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
             ingredientDiv.children[2].innerText = `$${order.ingredients[i].cost().toFixed(2)}`;
+            ingredientDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", merchant.getIngredient(order.ingredients[i].ingredient.id));
+            }
             
-            const ingredientDisplay = ingredientDiv.children[1];
+            let ingredientDisplay = ingredientDiv.children[1];
             if(ingredient.specialUnit === "bottle"){
                 ingredientDisplay.innerText = `${order.ingredients[i].quantity.toFixed(2)} bottles x $${order.ingredients.pricePerUnit.toFixed(2)}`;
             }else{

views/dashboardPage/sidebars/orderDetails.ejs

@@ -47,7 +47,7 @@
     </div>
 
     <template id="orderIngredient">
-        <div class="orderIngredient">
+        <div class="choosable">
             <p></p>
             <p></p>
             <p></p>

views/dashboardPage/sidebars/sidebars.css

@@ -641,18 +641,6 @@ EDIT RECIPE
         font-weight: bold;
     }
 
-    .orderIngredient{
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        box-sizing: border-box;
-        background: rgb(240, 252, 255);
-        border: 1px solid black;
-        border-radius: 5px;
-        padding: 10px;
-        margin: 5px 0;
-    }
-
 /*
 ORDER FILTER
 */