Add analytics to menu. Set up basics for analytics strand.

views/dashboardPage/dashboard.css

@@ -435,6 +435,41 @@ Recipe Book Strand
         overflow-y: auto;
     }
 
+/*
+Analytics Strand
+*/
+.analContent{
+    display: flex;
+    justify-content: space-around;
+    padding: 15px;
+}
+
+    .itemsList{
+        list-style-type: none;
+        width: 15%;
+    }
+
+        .itemButton{
+            background: rgb(179, 191, 209);
+            color: white;
+            border-radius: 5px;
+            border: 1px solid black;
+            padding: 5px;
+            margin: 1px;
+            width: 90%;
+            text-align: center;
+        }
+
+        .analItemActive{
+
+        }
+
+    .analData{
+        width: 85%;
+        height: 100%;
+        background: red;
+    }
+
 /* 
 Orders Strand 
 */

views/dashboardPage/dashboard.ejs

@@ -29,7 +29,7 @@
                 <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
             </div>
         
-            <button class="menuButton active" id="homeBtn" class="active" onclick="controller.openStrand('home')">
+            <button class="menuButton active" id="homeBtn" onclick="controller.openStrand('home')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                     <polyline points="9 22 9 12 15 12 15 22"></polyline>
@@ -53,6 +53,14 @@
                 </svg>
                 <p>RECIPE BOOK</p>
             </button>
+
+            <button class="menuButton" id="analyticsBtn" onclick="controller.openStrand('analytics')">
+                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                    <polyline points="17 6 23 6 23 12"></polyline>
+                </svg>
+                <p>ANALYTICS</p>
+            </button>
         
             <button class="menuButton" id="ordersBtn" onclick="controller.openStrand('orders')">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -246,6 +254,20 @@
                 </template>
             </div>
 
+            <div id="analyticsStrand" class="strand">
+                <div class="strandHead">
+                    <h1 class="strandTitle">ANALYTICS</h1>
+                </div>
+
+                <div class="analContent">
+                    <ul id="itemsList" class="itemsList"></ul>
+
+                    <div class="analData">
+
+                    </div>
+                </div>
+            </div>
+
             <div id="ordersStrand" class="strand">
                 <div class="strandHead">
                     <h1 class="strandTitle">ORDERS</h1>

views/dashboardPage/js/analytics.js

@@ -0,0 +1,15 @@
+let analytics = {
+    display: function(){
+        const itemsList = document.getElementById("itemsList");
+
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let li = document.createElement("li");
+            li.classList.add("itemButton");
+            li.item = merchant.ingredients[i];
+            li.innerText = merchant.ingredients[i].ingredient.name;
+            itemsList.appendChild(li);
+        }
+    }
+}
+
+module.exports = analytics;

views/dashboardPage/js/dashboard.js

@@ -1,6 +1,7 @@
 const home = require("./home.js");
 const ingredients = require("./ingredients.js");
 const recipeBook = require("./recipeBook.js");
+const analytics = require("./analytics.js");
 const orders = require("./orders.js");
 const transactions = require("./transactions.js");
 
@@ -53,6 +54,11 @@ controller = {
                 document.getElementById("recipeBookStrand").style.display = "flex";
                 recipeBook.display(Recipe);
                 break;
+            case "analytics":
+                activeButton = document.getElementById("analyticsBtn");
+                document.getElementById("analyticsStrand").style.display = "flex";
+                analytics.display();
+                break;
             case "orders":
                 activeButton = document.getElementById("ordersBtn");
                 document.getElementById("ordersStrand").style.display = "flex";