Add sidebar for ingredient details with some data on it

views/dashboardPage/components/components.css

@@ -28,4 +28,32 @@
 
 #addIngredient{
     flex-direction: column;
-}
+}
+
+#ingredientDetails{
+    flex-direction: column;
+    align-items: center;
+}
+
+    .lineBorder{
+        width: 100%;
+        border-bottom: 1px solid gray;
+    }
+
+    #ingredientDetails > p{
+        border-radius: 10px;
+        background: gray;
+        color: white;
+        padding: 0 3px;
+        font-size: 14px;
+    }
+
+    #ingredientDetails label{
+        font-size: 15px;
+        text-align: left;
+    }
+
+    #ingredientDetails label p{
+        font-size: 25px;
+        font-weight: bold;
+    }

views/dashboardPage/components/ingredientDetails.ejs

@@ -0,0 +1,15 @@
+<div id="ingredientDetails" class="sidebarHide">
+    <p></p>
+    <h2></h2>
+    <div class="lineBorder"></div>
+
+    <label>Current Stock
+        <p id="ingredientStock"></p>
+    </label>
+
+    <div class="lineBorder"></div>
+
+    <label>Average Daily Use (30 days)
+        <p id="dailyUse"></p>
+    </label>
+</div>

views/dashboardPage/controller.js

@@ -16,6 +16,12 @@ let changeStrand = (name)=>{
     window[`${name}Obj`].display();
 }
 
+//Gets the indices of two dates from transactions
+//Inputs
+//  from: starting date
+//  to: ending date (default to now)
+//Output
+//  Array containing starting index and ending index
 let dateIndices = (from, to = new Date())=>{
     let indices = [];
 
@@ -36,6 +42,107 @@ let dateIndices = (from, to = new Date())=>{
     return indices;
 }
 
+//Gets the quantity of each ingredient sold between two dates (dateRange)
+//Inputs
+//  dateRange: list containing a start date and an end date
+//Output
+//  List of objects
+//      id: id of specific ingredient
+//      quantity: quantity sold of that ingredient
+//      name: name of the ingredient
+let ingredientsSold = (dateRange)=>{
+    let recipes = recipesSold(dateRange);
+    let ingredientList = [];
+
+    for(let recipe of recipes){
+        for(let merchRecipe of merchant.recipes){
+            for(let ingredient of merchRecipe.ingredients){
+                let exists = false;
+                for(let item of ingredientList){
+                    if(item.id === ingredient.ingredient._id){
+                        exists = true;
+                        item.quantity += ingredient.quantity * recipe.quantity;
+                        break;
+                    }
+                }
+
+                if(!exists){
+                    ingredientList.push({
+                        id: ingredient.ingredient._id,
+                        quantity: ingredient.quantity * recipe.quantity,
+                        name: ingredient.ingredient.name,
+                        unit: ingredient.ingredient.unit
+                    })
+                }
+            }
+        }
+    }
+
+    return ingredientList;
+}
+
+//Gets the quantity of a single ingredient sold between two dates (dateRange)
+let ingredientSold = (dateRange,  id)=>{
+    let recipes = recipesSold(dateRange);
+    let total = 0;
+
+    let checkRecipes = [];
+    let quantities = [];
+    for(let merchRecipe of merchant.recipes){
+        for(let merchIngredient of merchRecipe.ingredients){
+            if(merchIngredient.ingredient._id === id){
+                checkRecipes.push(merchRecipe._id);
+                quantities.push(merchIngredient.quantity);
+                break;
+            }
+        }
+    }
+
+    for(let recipe of recipes){
+        for(let i = 0; i < checkRecipes.length; i++){
+            if(checkRecipes[i] === recipe.id){
+                total += recipe.quantity * quantities[i];
+                break;
+            }
+        }
+    }
+
+    return total;
+}
+
+//Gets the number of recipes sold between two dates (dateRange)
+//Inputs
+//  dateRange: array containing a start date and an end date
+//Output
+//  List of objects
+//      id: id of specific recipe
+//      quantity: quantity sold of that recipe
+let recipesSold = (dateRange)=>{
+    let recipeList = [];
+
+    for(let i = dateRange[0]; i <= dateRange[1]; i++){
+        for(let recipe of transactions[i].recipes){
+            let exists = false;
+            for(let item of recipeList){
+                if(item.id === recipe.recipe){
+                    exists = true;
+                    item.quantity += recipe.quantity;
+                    break;
+                }
+            }
+
+            if(!exists){
+                recipeList.push({
+                    id: recipe.recipe,
+                    quantity: recipe.quantity
+                })
+            }
+        }
+    }
+
+    return recipeList;
+}
+
 for(let transaction of transactions){
     transaction.date = new Date(transaction.date);
 }

views/dashboardPage/dashboard.ejs

@@ -77,6 +77,8 @@
 
         <% include ./components/addIngredient %>
 
+        <% include ./components/ingredientDetails %>
+
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
         <script src="../shared/graphs.js"></script>

views/dashboardPage/home.js

@@ -79,7 +79,7 @@ window.homeStrandObj = {
             let now = new Date();
             let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
 
-            let ingredientList = this.ingredientsSold(this.getDateIndex(thisMonth));
+            let ingredientList = ingredientsSold(dateIndices(thisMonth));
             for(let i = 0; i < 5; i++){
                 let max = ingredientList[0].quantity
                 let index = 0;
@@ -193,99 +193,5 @@ window.homeStrandObj = {
                     console.log(err);
                 });
         }
-    },
-
-    //Gets the quantity of each ingredient sold between two dates (dateRange)
-    //Inputs
-    //  dateRange: array containing a start date and an end date
-    //Output
-    //  List of objects
-    //      id: id of specific ingredient
-    //      quantity: quantity sold of that ingredient
-    //      name: name of the ingredient
-    ingredientsSold: function(dateRange){
-        let recipes = this.recipesSold(dateRange);
-        let ingredientList = [];
-
-        for(let recipe of recipes){
-            for(let merchRecipe of merchant.recipes){
-                for(let ingredient of merchRecipe.ingredients){
-                    let exists = false;
-                    for(let item of ingredientList){
-                        if(item.id === ingredient.ingredient._id){
-                            exists = true;
-                            item.quantity += ingredient.quantity * recipe.quantity;
-                            break;
-                        }
-                    }
-
-                    if(!exists){
-                        ingredientList.push({
-                            id: ingredient.ingredient._id,
-                            quantity: ingredient.quantity * recipe.quantity,
-                            name: ingredient.ingredient.name,
-                            unit: ingredient.ingredient.unit
-                        })
-                    }
-                }
-            }
-        }
-
-        return ingredientList;
-    },
-
-    //Gets the number of recipes sold between two dates (dateRange)
-    //Inputs
-    //  dateRange: array containing a start date and an end date
-    //Output
-    //  List of objects
-    //      id: id of specific recipe
-    //      quantity: quantity sold of that recipe
-    recipesSold: function(dateRange){
-        let recipeList = [];
-
-        for(let i = dateRange[0]; i <= dateRange[1]; i++){
-            for(let recipe of transactions[i].recipes){
-                let exists = false;
-                for(let item of recipeList){
-                    if(item.id === recipe.recipe){
-                        exists = true;
-                        item.quantity += recipe.quantity;
-                        break;
-                    }
-                }
-
-                if(!exists){
-                    recipeList.push({
-                        id: recipe.recipe,
-                        quantity: recipe.quantity
-                    })
-                }
-            }
-        }
-
-        return recipeList;
-    },
-
-    //Gives start and stop indices from transactions for a date range
-    //Inputs
-    //  from: datetime to start at
-    //  to: datetimie to end at
-    //Output
-    //  Array containing 2 elements, start index and stop index
-    getDateIndex: function(from, to = new Date()){
-        let indexRange = [0, transactions.length - 1];
-        for(let i = 0; i < transactions.length; i++){
-            if(from <= transactions[i].date && indexRange[0] === 0){
-                indexRange[0] = i;
-            }
-
-            if(to < transactions[i].date){
-                indexRange[1] = i - 1;
-                break;
-            }
-        }
-
-        return indexRange;
     }
 }

views/dashboardPage/ingredients.js

@@ -31,6 +31,7 @@ window.ingredientsStrandObj = {
                 for(let ingredient of category.ingredients){
                     let ingredientDiv = document.createElement("div");
                     ingredientDiv.classList = "ingredient";
+                    ingredientDiv.onclick = ()=>{this.displayIngredient(ingredient, category)};
                     ingredientsDiv.appendChild(ingredientDiv);
 
                     let ingredientName = document.createElement("p");
@@ -106,5 +107,35 @@ window.ingredientsStrandObj = {
         }else{
             sidebar.classList = "sidebarHide";
         }
+    },
+
+    displayIngredient: function(ingredient, category){
+        sidebar = document.querySelector("#ingredientDetails");
+
+        sidebar.classList = "sidebar";
+
+        document.querySelector("#ingredientDetails p").innerText = category.name;
+        document.querySelector("#ingredientDetails h2").innerText = ingredient.name;
+        document.querySelector("#ingredientStock").innerText = `${ingredient.quantity} ${ingredient.unit}`;
+
+        let start = performance.now();
+
+        let quantities = [];
+        let now = new Date();
+        for(let i = 1; i < 31; i++){
+            let endDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i)
+            let startDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i - 1);
+            quantities.push(ingredientSold(dateIndices(startDay, endDay), ingredient.id));
+        }
+
+        let sum = 0;
+        for(let quantity of quantities){
+            sum += quantity;
+        }
+
+        let end = performance.now();
+        console.log(`${end-start} ms`);
+
+        document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
     }
 }