subline/views/dashboardPage/components/recipeDetails.ejs

<div id="recipeDetails">
    <div class="sidebarIconButtons">
        <button class="iconButton" 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>

        <% if(merchant.pos === "none"){ %>
            <button class="iconButton" onclick="recipeDetailsComp.edit()">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 20h9"></path>
                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                </svg>
            </button>

            <button class="iconButton" onclick="recipeDetailsComp.remove()">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
            </button>
        <% } %>
    </div>

    <h1 id="recipeName"></h1>
    <input id="recipeNameIn" type="text" style="display: none;">

    <div id="recipeIngredientList"></div>

    <div class="lineBorder"></div>

    <div id="recipePrice">
        <h3>Price</h3>
        <p></p>
        <input type="number" min="0" step="0.01" style="display: none;">
    </div>

    <button id="recipeUpdate" onclick="recipeDetailsComp.update()" class="button" style="display: none;">Update</button>

    <template id="recipeIngredient">
        <div class="recipeIngredient">
            <p></p>
            <input type="number" min="0" step="0.01" style="display: none;">
            <p></p>
            <button class="iconButton" style="display: none;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
            </button>
        </div>
    </template>

    <script>
        let recipeDetailsComp = {
            recipe: {},

            display: function(recipe){
                this.recipe = recipe;
                openSidebar(document.querySelector("#recipeDetails"));

                document.querySelector("#recipeName").style.display = "block";
                document.querySelector("#recipeNameIn").style.display = "none";
                document.querySelector("#recipeDetails h1").innerText = recipe.name;

                let ingredientList = document.querySelector("#recipeIngredientList");
                while(ingredientList.children.length > 0){
                    ingredientList.removeChild(ingredientList.firstChild);
                }

                let template = document.querySelector("#recipeIngredient").content.children[0];
                for(let i = 0; i < recipe.ingredients.length; i++){
                    ingredientDiv = template.cloneNode(true);

                    ingredientDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
                    ingredientDiv.children[2].innerText = `${recipe.ingredients[i].quantity} ${recipe.ingredients[i].ingredient.unit}`;
                    ingredientDiv._id = recipe.ingredients[i].ingredient._id;
                    ingredientDiv.name = recipe.ingredients[i].ingredient.name;

                    ingredientList.appendChild(ingredientDiv);
                }

                let price = document.querySelector("#recipePrice");
                price.children[1].style.display = "block";
                price.children[2].style.display = "none";
                price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;

                document.querySelector("#recipeUpdate").style.display = "none";
            },

            edit: function(){
                let ingredientDivs = document.querySelector("#recipeIngredientList");

                let name = document.querySelector("#recipeName");
                let nameIn = document.querySelector("#recipeNameIn");
                name.style.display = "none";
                nameIn.style.display = "block";
                nameIn.placeholder = name.innerText;

                for(let i = 0; i < ingredientDivs.children.length; i++){
                    let div = ingredientDivs.children[i];

                    div.children[2].innerText = this.recipe.ingredients[i].ingredient.unit;
                    div.children[1].style.display = "block";
                    div.children[1].placeholder = this.recipe.ingredients[i].quantity;
                    div.children[3].style.display = "block";
                    div.children[3].onclick = ()=>{div.parentElement.removeChild(div)};
                }

                let price = document.querySelector("#recipePrice");
                price.children[1].style.display = "none";
                price.children[2].style.display = "block";
                price.children[2].placeholder = price.children[1].innerText;

                document.querySelector("#recipeUpdate").style.display = "block";
            },

            update: function(){
                let updatedRecipe = {
                    _id: this.recipe._id,
                    name: document.querySelector("#recipeNameIn").value || this.recipe.name,
                    price: Math.round((document.querySelector("#recipePrice").children[2].value * 100)) || this.recipe.price,
                    ingredients: []
                }

                let divs = document.querySelector("#recipeIngredientList").children;
                for(let i = 0; i < divs.length; i++){
                    updatedRecipe.ingredients.push({
                        ingredient: divs[i]._id,
                        quantity: divs[i].children[1].value || divs[i].children[1].placeholder
                    });
                }

                if(validator.recipe(updatedRecipe)){
                    fetch("/recipe/update", {
                        method: "PUT",
                        headers: {
                            "Content-Type": "application/json;charset=utf-8"
                        },
                        body: JSON.stringify(updatedRecipe)
                    })
                        .then((response) => response.json())
                        .then((response)=>{
                            if(typeof(response) === "string"){
                                banner.createError(response);
                            }else{
                                updateRecipes(updatedRecipe);
                                banner.createNotification("Recipe successfully updated");
                            }
                        })
                        .catch((err)=>{
                            banner.createError("Something went wrong.  Please refresh the page");
                        })
                }
            },

            remove: function(){
                fetch(`/merchant/recipes/remove/${this.recipe._id}`, {
                    method: "DELETE"
                })
                    .then((response) => response.json())
                    .then((response)=>{
                        if(typeof(response) === "string"){
                            banner.createError(response);
                        }else{
                            updateRecipes(this.recipe, true);
                            banner.createNotification("Recipe removed");
                        }
                    })
                    .catch((err)=>{
                        banner.createError("Something went wrong.  Try refreshing the page");
                    });
            }
        }
    </script>
</div>