Change style of analytics strand tabs.

Add categories to tabs on analytics strand.

views/dashboardPage/css/strands/analytics.css

@@ -1,53 +1,22 @@
-.switch{
-    position: relative;
-    display: inline-block;
-    width: 239px;
-    height: 34px;
+.analTabButton{
+    background: rgb(0, 27, 45);
+    border: none;
     color: white;
+    cursor: pointer;
+    padding: 5px;
+    width: 125px;
 }
 
-    .switch input{
-        opacity: 0;
-        width: 0;
-        height: 0;
+    .analTabButton.active{
+        background: rgb(179, 191, 209);
+        color: black;
     }
 
-        .switch input:focus + .slider{
-            box-shadow: 0 0 1px #2196F3;
-        }
-
-        .switch input:checked + .slider:before {
-            -webkit-transform: translateX(105px);
-            -ms-transform: translateX(92px);
-            transform: translateX(125px);
-        }
-
-    .slider{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        padding: 0 24px 0 5px;
-        background: rgb(0, 27, 45);
-        transition: 0.2s;
-    }
-
-        .slider:before{
-            position: absolute;
-            content: "";
-            height: 30px;
-            width: 110px;
-            left: 1px;
-            bottom: 1px;
-            background: rgba(255, 255, 255, 0.2);
-            border: 1px solid rgb(255, 99, 107);
-            transition: 0.5s;
-        }
+#analCategoriesTab{
+    border-left: 3px solid rgb(255, 99, 107);
+    border-right: 3px solid rgb(255, 99, 107);
+    width: 131px;
+}
 
 .analContent{
     display: flex;

views/dashboardPage/ejs/strands/analytics.ejs

@@ -2,10 +2,11 @@
     <div class="strandHead">
         <h1 class="strandTitle">ANALYTICS</h1>
 
-        <label class="switch">
-            <input id="analSlider" type="checkbox">
-            <span class="slider"><p>INGREDIENTS</p><p>RECIPES</p></span>
-        </label>
+        <div id="analTabs">
+            <button id="analIngredientsTab" class="analTabButton active">INGREDIENTS</button><!--
+            --><button id="analCategoriesTab" class="analTabButton">CATEGORIES</button><!--
+            --><button id="analRecipesTab" class="analTabButton">RECIPES</button>
+        </div>
 
         <div class="dateRange">
             <h3 class="analDateRange">Date Range:</h3>
@@ -91,6 +92,10 @@
         </div>
     </div>
 
+    <div id="analCategoryContent">
+        <h1>CATEGORIES</h1>
+    </div>
+
     <div id="analRecipeContent" class="analContent">
         <ul id="analRecipeList" class="itemsList"></ul>
 

views/dashboardPage/js/strands/analytics.js

@@ -9,15 +9,19 @@ let analytics = {
     display: function(){
         if(!this.isPopulated){
             document.getElementById("analRecipeContent").style.display = "none";
+            
+            let ingredientTab = document.getElementById("analIngredientsTab");
+            let recipeTab = document.getElementById("analRecipesTab");
+            let categoryTab = document.getElementById("analCategoriesTab");
+            ingredientTab.onclick = ()=>{this.tab(ingredientTab)};
+            categoryTab.onclick = ()=>{this.tab(categoryTab)};
+            recipeTab.onclick = ()=>{this.tab(recipeTab)};
 
             let to = new Date();
             let from = new Date(to.getFullYear(), to.getMonth() - 1, to.getDate());
 
             document.getElementById("analStartDate").valueAsDate = from;
             document.getElementById("analEndDate").valueAsDate = to;
-            let analSlider = document.getElementById("analSlider");
-            analSlider.onclick = ()=>{this.switchDisplay()};
-            analSlider.checked = false;
             document.getElementById("analDateBtn").onclick = ()=>{this.newDates()};
 
             this.populateButtons();
@@ -213,6 +217,10 @@ let analytics = {
         document.getElementById("analDaySeven").innerText = `${(dayUse[6] / dayCount[6]).toFixed(2)} ${this.ingredient.unit.toUpperCase()}`;
     },
 
+    displayCategory: function(){
+        console.log("howdy");
+    },
+
     displayRecipe: function(){
         if(this.recipe === undefined || this.transactionsByDate.length === 0) return;
 
@@ -274,22 +282,6 @@ let analytics = {
         document.getElementById("recipeAvgRevenue").innerText = `$${(avg * this.recipe.price).toFixed(2)}`;
     },
 
-    switchDisplay: function(){
-        const checkbox = document.getElementById("analSlider");
-        let ingredient = document.getElementById("analIngredientContent");
-        let recipe = document.getElementById("analRecipeContent");
-
-        if(checkbox.checked === true){
-            ingredient.style.display = "none";
-            recipe.style.display = "flex";
-            this.displayRecipe();
-        }else{
-            ingredient.style.display = "flex";
-            recipe.style.display = "none";
-            this.displayIngredient();
-        }
-    },
-
     newDates: async function(){
         const from = document.getElementById("analStartDate").valueAsDate;
         const to = document.getElementById("analEndDate").valueAsDate;
@@ -299,10 +291,53 @@ let analytics = {
 
         await this.getData(from, to);
 
-        if(document.getElementById("analSlider").checked === true){
-            this.displayRecipe();
-        }else{
-            this.displayIngredient();
+        let analTabs = document.getElementById("analTabs");
+        for(let i = 0; i < analTabs.children.length; i++){
+            if(analTabs.children[i].classList.contains("active")){
+                switch(analTabs.children[i].innerText.toLowerCase()){
+                    case "ingredients":
+                        this.displayIngredient();
+                        break;
+                    case "categories":
+                        this.displayCategory();
+                        break;
+                    case "recipes":
+                        this.displayRecipe();
+                        break;
+                }
+            }
+        }
+    },
+
+    tab: function(tab){
+        let analTabs = document.getElementById("analTabs");
+        let ingredientContent = document.getElementById("analIngredientContent");
+        let categoryContent = document.getElementById("analCategoryContent");
+        let recipeContent = document.getElementById("analRecipeContent");
+
+        for(let i = 0; i < analTabs.children.length; i++){
+            analTabs.children[i].classList.remove("active");
+        }
+
+        tab.classList.add("active");
+
+        ingredientContent.style.display = "none";
+        categoryContent.style.display = "none";
+        recipeContent.style.display = "none";
+
+        switch(tab.innerText.toLowerCase()){
+            case "ingredients":
+                this.displayIngredient();
+                ingredientContent.style.display = "flex";
+                break;
+            case "categories":
+                this.displayCategory();
+                categoryContent.style.display = "flex";
+                break;
+            case "recipes":
+                recipeContent.style.display = "flex";
+                this.displayRecipe();
+                break;
         }
     }
 }