Display orderDetails sidebar

views/dashboardPage/components/components.css

@@ -435,4 +435,26 @@
         padding: 10px;
     }
 
-    
+/* Order Details */
+#orderDetails{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #orderIngredients{
+        width: 90%;
+    }
+
+        .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;
+        }

views/dashboardPage/components/components.js

@@ -293,4 +293,35 @@ let newIngredientComp = {
                 });
         }
     }
+}
+
+let orderDetailsComp = {
+    display: function(order){
+        openSidebar(document.querySelector("#orderDetails"));
+
+        document.querySelector("#orderDetails h1").innerText = order.orderId || order._id;
+        document.querySelector("#orderDetails h3").innerText = new Date(order.date).toLocaleDateString("en-US");
+
+        let ingredientList = document.querySelector("#orderIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        let template = document.querySelector("#orderIngredient").content.children[0];
+        for(let i = 0; i < order.ingredients.length; i++){
+            let ingredient = template.cloneNode(true);
+
+            for(let j = 0; j < merchant.inventory.length; j++){
+                if(order.ingredients[i].ingredient === merchant.inventory[j].ingredient._id){
+                    ingredient.children[0].innerText = `${merchant.inventory[j].ingredient.name}: ${order.ingredients[i].quantity}`;
+                    break;
+                }
+            }
+
+            ingredient.children[1].innerText = `$${(order.ingredients[i].price / 100).toFixed(2)}`;
+            ingredient.children[2].innerText = ((order.ingredients[i].quantity * order.ingredients[i].price) / 100).toFixed(2);
+
+            ingredientList.appendChild(ingredient);
+        }
+    }
 }

views/dashboardPage/components/orderDetails.ejs

@@ -0,0 +1,24 @@
+<div id="orderDetails">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    <h1></h1>
+
+    <h3></h3>
+
+    <div id="orderIngredients"></div>
+
+    <template id="orderIngredient">
+        <div class="orderIngredient">
+            <p></p>
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/dashboard.ejs

@@ -118,6 +118,8 @@
 
             <% include ./components/addRecipe %>
 
+            <% include ./components/orderDetails %>
+
             <% include ./components/newOrder %>
         </div>
 

views/dashboardPage/orders.js

@@ -37,6 +37,7 @@ window.ordersStrandObj = {
                             row.children[3].innerText = (totalCost / 100).toFixed(2);
                             row._date = row.children[2].innerText;
                             row._id = response[i]._id;
+                            row.onclick = ()=>{orderDetailsComp.display(response[i])};
 
                             window.orders.push(row);
                             listDiv.appendChild(row);