window.recipeBookStrandObj = { isPopulated: false, recipeDivList: [], display: function(){ if(!this.isPopulated){ this.populateRecipes(); this.isPopulated = true; } }, populateRecipes: function(){ let recipeList = document.querySelector("#recipeList"); while(recipeList.children.length > 0){ recipeList.removeChild(recipeList.firstChild); } for(let recipe of merchant.recipes){ let recipeDiv = document.createElement("div"); recipeDiv.classList = "rowItem"; recipeDiv.onclick = ()=>{recipeDetailsComp.display(recipe)}; recipeDiv._name = recipe.name; recipeList.appendChild(recipeDiv); let recipeName = document.createElement("p"); recipeName.innerText = recipe.name; recipeDiv.appendChild(recipeName); let recipePrice = document.createElement("p"); recipePrice.innerText = `$${(recipe.price / 100).toFixed(2)}`; recipeDiv.appendChild(recipePrice); this.recipeDivList.push(recipeDiv); } }, 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"); let clearButton = document.getElementById("recipeClearButton"); let matchingRecipes = []; for(let i = 0; i < this.recipeDivList.length; i++){ if(this.recipeDivList[i]._name.toLowerCase().includes(input)){ matchingRecipes.push(this.recipeDivList[i]); } } while(recipeList.children.length > 0){ recipeList.removeChild(recipeList.firstChild); } for(let i = 0; i < matchingRecipes.length; i++){ recipeList.appendChild(matchingRecipes[i]); } if(input === ""){ clearButton.style.display = "none"; }else{ clearButton.style.display = "inline"; } }, clearSorting: function(){ document.getElementById("recipeSearch").value = ""; this.search(); } }