recipes.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. let recipesObj = {
  2. isPopulated: false,
  3. display: function(){
  4. controller.clearScreen();
  5. controller.recipesStrand.style.display = "flex";
  6. if(!this.isPopulated){
  7. this.populateRecipes();
  8. this.isPopulated = true;
  9. }
  10. },
  11. populateRecipes: function(){
  12. let body = document.querySelector("#recipesContainer");
  13. while(body.children.length > 0){
  14. body.removeChild(body.firstChild);
  15. }
  16. for(let recipe of merchant.recipes){
  17. let recipeDiv = document.createElement("div");
  18. recipeDiv.classList = "recipe-card";
  19. recipeDiv.onclick = ()=>{singleRecipeObj.display(recipe)};
  20. body.appendChild(recipeDiv);
  21. if(recipe.ingredients.length === 0){
  22. recipeDiv.classList = "recipe-card empty-recipe";
  23. }else{
  24. recipeDiv.classList = "recipe-card";
  25. }
  26. let title = document.createElement("h2");
  27. title.innerText = recipe.name;
  28. recipeDiv.appendChild(title);
  29. let ingredientList = document.createElement("ul");
  30. recipeDiv.appendChild(ingredientList);
  31. for(let ingredient of recipe.ingredients){
  32. let ul = document.createElement("li");
  33. ul.innerText = ingredient.ingredient.name;
  34. ingredientList.appendChild(ul);
  35. }
  36. }
  37. },
  38. updateRecipes: function(){
  39. axios.get("/merchant/recipes/update")
  40. .then((result)=>{
  41. merchant = result.data.merchant;
  42. this.displayRecipes();
  43. banner.createNotification("Your recipes have been updated successfully");
  44. if(result.data.count > 0){
  45. banner.createError(`You have ${result.data.count} recipes with no ingredients. Please update them.`);
  46. }
  47. })
  48. .catch((err)=>{
  49. banner.createError("There was an error and your recipes could not be updated");
  50. });
  51. }
  52. }