Fix ability to add recipes

views/dashboardPage/Merchant.js

@@ -138,36 +138,18 @@ class Merchant{
     /*
     Updates a recipe in the merchants list of recipes
     Can create, edit or remove
-    Inputs:
-        recipe: object
-            _id: id of recipe
-            name: name of recipe
-            price: price of recipe
-            ingredients: list of ingredients
-                ingredient: id of ingredient
-                quantity: quantity of ingredient
-        remove: if true, remove ingredient from inventory
+    recipe = Recipe object
+    remove = will remove recipe when true
     */
-    addRecipe(recipe, remove = false){
+    editRecipe(recipe, remove = false){
         let isNew = true;
-        let index = 0;
-
-        for(let i = 0; i < recipe.ingredients.length; i++){
-            for(let j = 0; j < merchant.inventory.length; j++){
-                if(merchant.inventory[j].ingredient._id === recipe.ingredients[i].ingredient){
-                    recipe.ingredients[i].ingredient = merchant.inventory[j].ingredient;
-                    break;
-                }
-            }
-        }
 
         for(let i = 0; i < merchant.recipes.length; i++){
-            if(recipe._id === merchant.recipes[i]._id){
+            if(recipe === merchant.recipes[i]){
                 if(remove){
                     merchant.recipes.splice(i, 1);
                 }else{
                     merchant.recipes[i] = recipe;
-                    index = i;
                 }
 
                 isNew = false;
@@ -177,7 +159,6 @@ class Merchant{
 
         if(isNew){
             merchant.recipes.push(recipe);
-            index = merchant.recipes.length - 1;
         }
 
         recipeBookStrandObj.populateRecipes();

views/dashboardPage/components/addRecipe.ejs

@@ -20,7 +20,7 @@
         </label>
 
         <label># of Ingredients
-            <input id="ingredientCount" type="number" step="1" min="1" onchange="recipeBookStrandObj.changeRecipeCount()">
+            <input id="ingredientCount" type="number" step="1" min="1" onchange="newRecipeComp.changeRecipeCount()">
         </label>
     </div>
 
@@ -40,5 +40,5 @@
         </div>
     </div>
     
-    <button class="button" onclick="recipeBookStrandObj.submitNewRecipe()">Create</button>
+    <button class="button" onclick="newRecipeComp.submit()">Create</button>
 </div>

views/dashboardPage/components/components.js

@@ -667,4 +667,101 @@ let ingredientDetailsComp = {
                 });
         }
     }
+}
+
+let newRecipeComp = {
+    display: function(){
+        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
+        let categories = merchant.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.ingredient.id;
+                option.innerText = ingredient.ingredient.name;
+                optgroup.appendChild(option);
+            }
+        }
+
+        openSidebar(document.querySelector("#addRecipe"));
+    },
+
+    //Updates the number of ingredient inputs displayed for new recipes
+    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[2].children[0].value = "";
+
+                ingredientsDiv.appendChild(newNode);
+            }
+
+            for(let i = 0; i < newCount; i++){
+                ingredientsDiv.children[i].children[0].innerText = `Ingredient ${i + 1}`;
+            }
+        }else if(newCount < oldCount){
+            let newDivs = oldCount - newCount;
+
+            for(let i = 0; i < newDivs; i++){
+                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
+            }
+        }
+    },
+
+    submit: function(){
+        let newRecipe = {
+            name: document.querySelector("#newRecipeName").value,
+            price: document.querySelector("#newRecipePrice").value,
+            ingredients: []
+        }
+
+        let inputs = document.querySelectorAll("#recipeInputIngredients > div");
+        for(let input of inputs){
+            newRecipe.ingredients.push({
+                ingredient: input.children[1].children[0].value,
+                quantity: input.children[2].children[0].value
+            });
+        }
+
+        if(!validator.recipe(newRecipe)){
+            return;
+        }
+
+        fetch("/recipe/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(newRecipe)
+        })
+            .then((response) => response.json())
+            .then((response)=>{
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else{
+                    let recipe = new Recipe(
+                        response._id,
+                        response.name,
+                        response.price,
+                        response.ingredients,
+                        merchant,
+                    );
+                    
+                    merchant.editRecipe(recipe);
+                    banner.createNotification("New recipe successfully created");
+                }
+            })
+            .catch((err)=>{
+                banner.createError("Refresh page to update data");
+            });
+    },
 }

views/dashboardPage/dashboard.ejs

@@ -139,7 +139,7 @@
                     <h1 class="strandTitle">Recipe Book</h1>
 
                     <% if(merchant.pos === "none"){ %>
-                        <button class="button" onclick="recipeBookStrandObj.displayAddRecipe()">
+                        <button class="button" onclick="newRecipeComp.display()">
                             <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>

views/dashboardPage/recipeBook.js

@@ -36,98 +36,6 @@ window.recipeBookStrandObj = {
         }
     },
 
-    displayAddRecipe: function(){
-        openSidebar(document.querySelector("#addRecipe"));
-
-        let ingredientsSelect = document.querySelector("#recipeInputIngredients select");
-        let categories = categorizeIngredients(merchant.inventory);
-        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);
-            }
-        }
-    },
-
-    //Updates the number of ingredient inputs displayed for new recipes
-    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[2].children[0].value = "";
-
-                ingredientsDiv.appendChild(newNode);
-            }
-
-            for(let i = 0; i < newCount; i++){
-                ingredientsDiv.children[i].children[0].innerText = `Ingredient ${i + 1}`;
-            }
-        }else if(newCount < oldCount){
-            let newDivs = oldCount - newCount;
-
-            for(let i = 0; i < newDivs; i++){
-                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
-            }
-        }
-    },
-
-    submitNewRecipe: function(){
-        let newRecipe = {
-            name: document.querySelector("#newRecipeName").value,
-            price: document.querySelector("#newRecipePrice").value,
-            ingredients: []
-        }
-
-        let inputs = document.querySelectorAll("#recipeInputIngredients > div");
-        for(let input of inputs){
-            newRecipe.ingredients.push({
-                ingredient: input.children[1].children[0].value,
-                quantity: input.children[2].children[0].value
-            });
-        }
-
-        if(!validator.recipe(newRecipe)){
-            return;
-        }
-
-        fetch("/recipe/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(newRecipe)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    newRecipe._id = response._id;
-                    newRecipe.price = Math.round(newRecipe.price * 100);
-                    for(let i = 0; i < newRecipe.ingredients.length; i++){
-                        newRecipe.ingredients[i].quantity = parseFloat(newRecipe.ingredients[i].quantity);
-                    }
-                    updateRecipes(newRecipe);
-                    banner.createNotification("New recipe successfully created");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("Refresh page to update data");
-            });
-    },
-
     search: function(){
         let input = document.getElementById("recipeSearch").value.toLowerCase();
         let recipeList = document.getElementById("recipeList");