Create method for selecting number of ingredients for a new recipe

views/dashboardPage/components/addRecipe.ejs

@@ -0,0 +1,37 @@
+<div id="addRecipe" class="sidebarHide">
+    <button class="sidebarIconButton" onclick="closeSidebar()">
+        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+        </svg>
+    </button>
+
+    <h1>Add a recipe</h1>
+
+    <div class="recipeBasicInfo">
+        <label>Name:
+            <input id="name" type="text">
+        </label>
+
+        <label>Price:
+            <input id="price" type="number" step="0.01" min="0">
+        </label>
+
+        <label># of Ingredients
+            <input id="ingredientCount" type="number" step="1" min="1" onchange="recipeBookStrandObj.changeRecipeCount()">
+        </label>
+    </div>
+
+        <div id="recipeInputIngredients">
+            <div>
+                <label>Ingredient:
+                    <select></select>
+                </label>
+
+                <label>Quantity:
+                    <input type="number" step="0.01" min="0">
+                </label>
+            </div>
+        </div>
+    
+</div>

views/dashboardPage/components/components.css

@@ -1,6 +1,6 @@
 .sidebar{
     display: flex;
-    width: 18vw;
+    width: 25vw;
     height: 100vh;
     box-sizing: border-box;
     padding: 25px;
@@ -28,7 +28,6 @@
     background: none;
     border: none;
     cursor: pointer;
-    margin-bottom: 100px;
     padding: 3px;
     border-radius: 5px;
     margin-right: auto;
@@ -119,4 +118,22 @@
     #recipePrice p{
         font-size: 25px;
         font-weight: bold;
+    }
+
+#addRecipe{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+    #addRecipe label{
+        display: flex;
+    }
+
+    #addRecipe input{
+        width: 50%;
+    }
+
+    #recipeInputIngredients div{
+        background: rgb(0, 27, 45);
     }

views/dashboardPage/controller.js

@@ -153,6 +153,41 @@ let recipesSold = (dateRange)=>{
     return recipeList;
 }
 
+let categorizeIngredients = ()=>{
+    let ingredientsByCategory = [];
+
+    for(let item of merchant.inventory){
+        let categoryExists = false;
+        for(let category of ingredientsByCategory){
+            if(item.ingredient.category === category.name){
+                category.ingredients.push({
+                    id: item.ingredient._id,
+                    name: item.ingredient.name,
+                    quantity: item.quantity,
+                    unit: item.ingredient.unit
+                });
+
+                categoryExists = true;
+                break;
+            }
+        }
+
+        if(!categoryExists){
+            ingredientsByCategory.push({
+                name: item.ingredient.category,
+                ingredients: [{
+                    id: item.ingredient._id,
+                    name: item.ingredient.name,
+                    quantity: item.quantity,
+                    unit: item.ingredient.unit
+                }]
+            });
+        }
+    }
+
+    return ingredientsByCategory;
+}
+
 for(let transaction of transactions){
     transaction.date = new Date(transaction.date);
 }

views/dashboardPage/dashboard.ejs

@@ -71,7 +71,7 @@
                     <h1>Recipe Book</h1>
 
                     <% if(merchant.pos === "none"){ %>
-                        <button class="button">
+                        <button class="button" onclick="recipeBookStrandObj.displayAddRecipe()">
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                             add
                         </button>
@@ -92,6 +92,8 @@
 
         <% include ./components/recipeDetails %>
 
+        <% include ./components/addRecipe %>
+
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
         <script src="../shared/graphs.js"></script>

views/dashboardPage/ingredients.js

@@ -3,7 +3,7 @@ window.ingredientsStrandObj = {
 
     display: function(){
         if(!this.isPopulated){
-            let categories = this.categorizeIngredients();
+            let categories = categorizeIngredients();
 
             let ingredientStrand = document.querySelector("#ingredientsStrand");
             for(let category of categories){
@@ -54,41 +54,6 @@ window.ingredientsStrandObj = {
         }
     },
 
-    categorizeIngredients: function(){
-        let ingredientsByCategory = [];
-
-        for(let item of merchant.inventory){
-            let categoryExists = false;
-            for(let category of ingredientsByCategory){
-                if(item.ingredient.category === category.name){
-                    category.ingredients.push({
-                        id: item.ingredient._id,
-                        name: item.ingredient.name,
-                        quantity: item.quantity,
-                        unit: item.ingredient.unit
-                    });
-
-                    categoryExists = true;
-                    break;
-                }
-            }
-
-            if(!categoryExists){
-                ingredientsByCategory.push({
-                    name: item.ingredient.category,
-                    ingredients: [{
-                        id: item.ingredient._id,
-                        name: item.ingredient.name,
-                        quantity: item.quantity,
-                        unit: item.ingredient.unit
-                    }]
-                });
-            }
-        }
-
-        return ingredientsByCategory;
-    },
-
     toggleCategory: function(div, button){
         if(div.style.display === "none"){
             button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';

views/dashboardPage/recipeBook.js

@@ -51,5 +51,51 @@ window.recipeBookStrandObj = {
         }
 
         document.querySelector("#recipePrice p").innerText = `$${(recipe.price / 100).toFixed(2)}`;
+    },
+
+    displayAddRecipe: function(){
+        closeSidebar();
+
+        document.querySelector("#addRecipe").classList = "sidebar";
+
+        document.querySelector("#ingredientCount").value = 1;
+
+        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
+        let categories = categorizeIngredients();
+        for(let category of categories){
+            let optgroup = document.createElement("optgroup");
+            optgroup.label = category.name;
+            ingredientsSelect.appendChild(optgroup);
+
+            for(let ingredient of category.ingredients){
+                let option = document.createElement("option");
+                option.value = ingredient.id;
+                option.innerText = ingredient.name;
+                optgroup.appendChild(option);
+            }
+        }
+    },
+
+    changeRecipeCount: function(){
+        let newCount = document.querySelector("#ingredientCount").value;
+        let ingredientsDiv = document.querySelector("#recipeInputIngredients");
+        let oldCount = ingredientsDiv.children.length;
+
+        if(newCount > oldCount){
+            let newDivs = newCount - oldCount;
+
+            for(let i = 0; i < newDivs; i++){
+                let newNode = ingredientsDiv.children[0].cloneNode(true);
+                newNode.children[1].children[0].value = "";
+
+                ingredientsDiv.appendChild(newNode);
+            }
+        }else if(newCount < oldCount){
+            let newDivs = oldCount - newCount;
+
+            for(let i = 0; i < newDivs; i++){
+                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
+            }
+        }
     }
 }