Add a transaction details sidebar

views/dashboardPage/dashboard.css

@@ -67,6 +67,19 @@ Multi-strand use classes
         font-weight: bold;
     }
 
+.smallItemDisplay{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    margin: 5px 0;
+    width: 100%;
+    background: rgb(240, 252, 255);
+    border-radius: 5px;
+    border: 1px solid gray;
+    box-sizing: border-box;
+}
+
 .searchBar{
     display: flex;
     justify-content: space-between;

views/dashboardPage/dashboard.ejs

@@ -299,6 +299,8 @@
             <% include ./sidebars/orderDetails %>
 
             <% include ./sidebars/newOrder %>
+
+            <% include ./sidebars/transactionDetails %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/sidebars/sidebars.css

@@ -553,7 +553,9 @@ Add Recipe
         margin: 5px 0;
     }
 
-/* Ingredient Details */
+/* 
+Ingredient Details 
+*/
 #ingredientRecipeList{
     list-style: none;
     overflow: auto;
@@ -570,4 +572,23 @@ Add Recipe
     #ingredientRecipeList > li:hover{
         background: rgb(0, 27, 45);
         color: white;
+    }
+
+/*
+Transaction Details
+*/
+.transactionDetails{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .transactionRecipes{
+        width: 100%;
+    }
+
+    .totals{
+        font-size: 25px;
+        font-weight: bold;
     }

views/dashboardPage/sidebars/sidebars.js

@@ -862,4 +862,41 @@ let newRecipeComp = {
                 loader.style.display = "none";
             });
     },
+}
+
+let transactionDetailsComp = {
+    display: function(transaction){
+        let recipeList = document.getElementById("transactionRecipes");
+        let template = document.getElementById("transactionRecipe").content.children[0];
+        let totalRecipes = 0;
+        let totalPrice = 0;
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < transaction.recipes.length; i++){
+            let recipe = template.cloneNode(true);
+            let price = transaction.recipes[i].quantity * transaction.recipes[i].recipe.price;
+
+            recipe.children[0].innerText = transaction.recipes[i].recipe.name;
+            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x ${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
+            recipe.children[2].innerText = (price / 100).toFixed(2);
+            recipeList.appendChild(recipe);
+
+            totalRecipes += transaction.recipes[i].quantity;
+            totalPrice += price;
+        }
+
+        let months = ["January", "Fecbruary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        let dateString = `${days[transaction.date.getDay()]}, ${months[transaction.date.getMonth()]} ${transaction.date.getDate()}, ${transaction.date.getFullYear()}`;
+
+        document.getElementById("transactionDate").innerText = dateString;
+        document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
+        document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
+        document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+        openSidebar(document.getElementById("transactionDetails"));
+    }
 }

views/dashboardPage/sidebars/transactionDetails.ejs

@@ -0,0 +1,48 @@
+<div id="transactionDetails" class="transactionDetails">
+    <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>
+
+        <button class="iconButton" onclick="transactionDetailsComp.edit()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20h9"></path>
+                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+            </svg>
+        </button>
+
+        <% if(merchant.pos === "none"){ %>
+            <button class="iconButton" onclick="transactionDetailsComp.remove()">
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+            </button>
+        <% } %>
+    </div>
+
+    <h1 id="transactionDate"></h1>
+    <h2 id="transactionTime"></h2>
+
+    <div class="lineBorder"></div>
+
+    <h3>Recipes</h3>
+    <div id="transactionRecipes" class="transactionRecipes"></div>
+
+    <div class="lineBorder"></div>
+
+    <h3>Totals</h3>
+    <p id="totalRecipes" class="totals"></p>
+    <p id="totalPrice" class="totals"></p>
+
+    <template id="transactionRecipe">
+        <div class="transactionRecipe smallItemDisplay">
+            <p></p>
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/transactions.js

@@ -2,16 +2,13 @@ window.transactionsStrandObj = {
     isPopulated: false, 
 
     display: function(){
-        console.time("populate transactions");
         if(!this.isPopulated){
-            let now = new Date();
-            let firstOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
             let transactionsList = document.getElementById("transactionsList");
             let template = document.getElementById("transaction").content.children[0];
 
             for(let i = merchant.transactions.length - 1; i > merchant.transactions.length - 101 ; i--){
                 let transaction = template.cloneNode(true);
+                transaction.onclick = ()=>{transactionDetailsComp.display(merchant.transactions[i])};
                 transactionsList.appendChild(transaction);
 
                 transaction.children[0].innerText = `${merchant.transactions[i].date.toLocaleDateString()} ${merchant.transactions[i].date.toLocaleTimeString()}`;
@@ -20,6 +17,5 @@ window.transactionsStrandObj = {
 
             this.isPopulated = true;
         }
-        console.timeEnd("populate transactions");
     }
 }