Items now searchable on the analytics page.

views/dashboardPage/css/strands/analytics.css

@@ -37,12 +37,21 @@
 }
 
     .itemsList{
+        display: flex;
+        flex-direction: column;
         list-style-type: none;
         width: 15%;
         max-height: 95%;
         overflow-y: auto;
+        margin-bottom: auto;
     }
 
+        .itemsList > *{
+            width: 100%;
+            box-sizing: border-box;
+            margin: 2px 0;
+        }
+
     .analData{
         display: flex;
         flex-direction: column;

views/dashboardPage/ejs/strands/analytics.ejs

@@ -26,7 +26,9 @@
     </div>
 
     <div id="analIndividualIngredient" class="analContent">
-        <div id="analIngredientList" class="itemsList"></div>
+        <div id="analIngredientList" class="itemsList">
+            <input id="analIngredientSearch" type="text" placeholder="SEARCH">
+        </div>
 
         <div class="analData">
             <div id="itemUseGraph" class="card analCard"></div>
@@ -98,13 +100,17 @@
     </div>
 
     <div id="analCategoryIngredient" class="analContent" style="display:none;">
-        <div id="analCategoriesList" class="itemsList"></div>
+        <div id="analCategoriesList" class="itemsList">
+            <input type="text" placeholder="SEARCH">
+        </div>
 
         <div id="analCategoriesGraph"></div>
     </div>
 
     <div id="analIndividualRecipe" class="analContent" style="display:none;">
-        <ul id="analRecipeList" class="itemsList"></ul>
+        <ul id="analRecipeList" class="itemsList">
+            <input type="text" placeholder="SEARCH">
+        </ul>
 
         <div class="analData">
             <div id="recipeSalesGraph" class="card analCard"></div>
@@ -126,7 +132,9 @@
     </div>
 
     <div id="analCategoryRecipe" class="analContent" style="display:none">
-        <ul id="analCatRecipeList" class="itemsList"></ul>
+        <ul id="analCatRecipeList" class="itemsList">
+            <input type="text" placeholder="SEARCH">
+        </ul>
 
         <div id="analCatRecipeGraph"></div>
     </div>

views/dashboardPage/js/strands/analytics.js

@@ -10,6 +10,15 @@ let analytics = {
 
     display: function(){
         if(!this.isPopulated){
+            let analIngredientList = document.getElementById("analIngredientList");
+            let analCategoriesList = document.getElementById("analCategoriesList");
+            let analRecipeList = document.getElementById("analRecipeList");
+            let analCatRecipeList = document.getElementById("analCatRecipeList");
+            analIngredientList.onkeyup = ()=>{this.searchItems(analIngredientList.children)};
+            analCategoriesList.onkeyup = ()=>{this.searchItems(analCategoriesList.children)};
+            analRecipeList.onkeyup = ()=>{this.searchItems(analRecipeList.children)};
+            analCatRecipeList.onkeyup = ()=>{this.searchItems(analCatRecipeList.children)};
+
             let ingredientTab = document.getElementById("analIngredientsTab");
             let recipeTab = document.getElementById("analRecipesTab");
             let categoryTab = document.getElementById("analCategoriesTab");
@@ -42,8 +51,8 @@ let analytics = {
         let recipeButtons = document.getElementById("analRecipeList");
         let recipeCategoryButtons = document.getElementById("analCatRecipeList");
 
-        while(ingredientButtons.children.length > 0){
-            ingredientButtons.removeChild(ingredientButtons.firstChild);
+        while(ingredientButtons.children.length > 1){
+            ingredientButtons.removeChild(ingredientButtons.lastChild);
         }
 
         for(let i = 0; i < merchant.inventory.length; i++){
@@ -57,7 +66,7 @@ let analytics = {
             ingredientButtons.appendChild(button);
         }
 
-        while(categoryButtons.children.length > 0){
+        while(categoryButtons.children.length > 1){
             categoryButtons.removeChild(categoryButtons.firstChild);
         }
 
@@ -73,7 +82,7 @@ let analytics = {
             categoryButtons.appendChild(button);
         }
 
-        while(recipeButtons.children.length > 0){
+        while(recipeButtons.children.length > 1){
             recipeButtons.removeChild(recipeButtons.firstChild);
         }
 
@@ -88,7 +97,7 @@ let analytics = {
             recipeButtons.appendChild(button);
         }
 
-        while(recipeCategoryButtons.children.length > 0){
+        while(recipeCategoryButtons.children.length > 1){
             recipeCategoryButtons.removeChild(recipeCategoryButtons.firstChild);
         }
 
@@ -454,6 +463,23 @@ let analytics = {
                 this.displayRecipeCategory();
             }
         }
+    },
+
+    searchItems: function(list){
+        let searchString = list[0].value;
+        if(searchString === ""){
+            for(let i = 1; i < list.length; i++){
+                list[i].style.display = "block";
+            }
+        }else{
+            for(let i = 1; i < list.length; i++){
+                if(!list[i].innerText.toLowerCase().includes(searchString)){
+                    list[i].style.display = "none";
+                }else{
+                    list[i].style.display = "block";
+                }
+            }
+        }
     }
 }