Populate and display transactions

views/dashboardPage/dashboard.css

@@ -414,5 +414,19 @@ Orders Strand
     #orderList{
         width: 50%;
         margin-top: 50px;
-        overflow: auto;
+        overflow-y: auto;
+    }
+
+/*
+Transactions Strand
+*/
+.transactions{
+    display: none;
+    align-items: center;
+}
+
+    .transactionsList{
+        width: 50%;
+        overflow-y: auto;
+        margin-top: 50px;
     }

views/dashboardPage/dashboard.ejs

@@ -267,21 +267,22 @@
                     </div>
                 </template>
             </div>
-        </div>
 
-        <div id="transactionsStrand" class="strand">
-            <div class="strandHead">
-                <h1 class="strandTitle">Transactions</h1>
-            </div>
+            <div id="transactionsStrand" class="strand transactions">
+                <div class="strandHead">
+                    <h1 class="strandTitle">Transactions</h1>
+                </div>
 
-            <div id="transactionsList"></div>
+                <div id="transactionsList" class="transactionsList"></div>
+
+                <template id="transaction">
+                    <div class="itemDisplay">
+                        <p></p>
+                        <p></p>
+                    </div>
+                </template>
+            </div>
 
-            <template id="transaction">
-                <div class="itemDisplay">
-                    <p></p>
-                    <p></p>
-                </div>
-            </template>
         </div>
 
         <div id="sidebarDiv" class="sidebarHide">
@@ -304,12 +305,10 @@
 
         <script src="/dashboardPage/Merchant.js"></script>
         <script>
-            console.time("Load");
             let merchant = new Merchant(
                 <%- JSON.stringify(merchant) %>,
                 <%- JSON.stringify(transactions) %>
             );
-            console.timeEnd("Load");
         </script>
         <script src="../shared/graphs.js"></script>
         <script src="/dashboardPage/home.js"></script>

views/dashboardPage/transactions.js

@@ -2,21 +2,24 @@ 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 dates = merchant.transactionIndices(firstOfMonth);
             let transactionsList = document.getElementById("transactionsList");
             let template = document.getElementById("transaction").content.children[0];
 
-            for(let i = dates[0]; i < dates[1]; i++){
+            for(let i = merchant.transactions.length - 1; i > merchant.transactions.length - 101 ; i--){
                 let transaction = template.cloneNode(true);
                 transactionsList.appendChild(transaction);
 
                 transaction.children[0].innerText = `${merchant.transactions[i].date.toLocaleDateString()} ${merchant.transactions[i].date.toLocaleTimeString()}`;
                 transaction.children[1].innerText = `${merchant.transactions[i].recipes.length} recipes sold`;
             }
+
+            this.isPopulated = true;
         }
+        console.timeEnd("populate transactions");
     }
 }