subline/views/dashboardPage/components/addIngredients.ejs

<div id="addIngredients">
    <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 New Ingredients</h1>

    <div id="addIngredientList"></div>

    <button class="button addIngredientsBtn" onclick="addIngredientsComp.submitAddIngredients()">Add</button>

    <template id="addIngredientsCategory">
        <div class="addIngredientsCategory">
            <div class="categoryHeader">
                <h5></h5>
                
                <button>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>

                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="18 15 12 9 6 15"></polyline>
                    </svg>
                </button>
            </div>

            <div class="addIngredientsIngredients"></div>
        </div>
    </template>

    <template id="addIngredientsIngredient">
        <div class="addIngredientsIngredient">
            <input type="checkbox">
            <p></p>
            <input type="number" min="0" step="0.01">
        </div>
    </template>

    <script>
        let addIngredientsComp = {
            isPopulated: false,

            display: function(){
                let sidebar = document.querySelector("#addIngredients");

                if(!this.isPopulated){
                    let addIngredientsDiv = document.getElementById("addIngredientList");
                    let categoryTemplate = document.getElementById("addIngredientsCategory");
                    let ingredientTemplate = document.getElementById("addIngredientsIngredient");

                    fetch("/ingredients")
                        .then((response) => response.json())
                        .then((response)=>{
                            if(typeof(response) === "string"){
                                banner.createError(response);
                            }else{
                                for(let i = 0; i < merchant.inventory.length; i++){
                                    for(let j = 0; j < response.length; j++){
                                        if(merchant.inventory[i].ingredient._id === response[j]._id){
                                            response.splice(j, 1);
                                            break;
                                        }
                                    }
                                }
                                let categories = categorizeIngredientsFromDB(response);

                                while(addIngredientsDiv.children.length > 0){
                                    addIngredientsDiv.removeChild(addIngredientsDiv.firstChild);
                                }
                                this.addIngredientsDiv = [];
                                for(let i = 0; i < categories.length; i++){
                                    let categoryDiv = categoryTemplate.content.children[0].cloneNode(true);
                                    categoryDiv.children[0].children[0].innerText = categories[i].name;
                                    categoryDiv.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(categoryDiv)};
                                    categoryDiv.children[1].style.display = "none";
                                    categoryDiv.children[0].children[1].children[1].style.display = "none";

                                    addIngredientsDiv.appendChild(categoryDiv);
                                    
                                    for(let j = 0; j < categories[i].ingredients.length; j++){
                                        let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
                                        ingredientDiv.children[1].innerText = categories[i].ingredients[j].name;
                                        ingredientDiv._id = categories[i].ingredients[j].id;
                                        ingredientDiv._name = categories[i].ingredients[j].name;
                                        ingredientDiv._unit = categories[i].ingredients[j].unit;
                                        ingredientDiv._category = categories[i].name;

                                        categoryDiv.children[1].appendChild(ingredientDiv);

                                        this.addIngredientsDiv.push(ingredientDiv);
                                    }
                                }
                            }
                        })
                        .catch((err)=>{
                            console.log(err);
                            banner.createError("Unable to retrieve data");
                        });

                    this.isPopulated = true;
                }

                openSidebar(sidebar);
            },

            toggleAddIngredient: function(categoryElement){
                let button = categoryElement.children[0].children[1];
                let ingredientDisplay = categoryElement.children[1];

                if(ingredientDisplay.style.display === "none"){
                    ingredientDisplay.style.display = "flex";

                    button.children[0].style.display = "none";
                    button.children[1].style.display = "block";
                }else{
                    ingredientDisplay.style.display = "none";

                    button.children[0].style.display = "block";
                    button.children[1].style.display = "none";
                }
            },

            submitAddIngredients: function(){
                let addIngredients = [];

                for(let i = 0; i < this.addIngredientsDiv.length; i++){
                    let ingredient = this.addIngredientsDiv[i];

                    if(ingredient.children[0].checked){
                        if(!validator.ingredient.quantity(ingredient.children[2].value)){
                            return;
                        }

                        addIngredients.push({
                            ingredient: {
                                _id: ingredient._id,
                                name: ingredient._name,
                                category: ingredient._category,
                                unit: ingredient._unit
                            },
                            quantity: ingredient.children[2].value,
                        });
                    }
                }

                fetch("/merchant/ingredients/add", {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    body: JSON.stringify(addIngredients)
                })
                    .then((response)=>{
                        if(typeof(response.data) === "string"){
                            banner.createError(response.data);
                        }else{
                            banner.createNotification("Ingredients added");
                            updateInventory(addIngredients);
                        }
                    })
                    .catch((err)=>{
                        console.log(err);
                        banner.createError("Unable to update data.  Please refresh the page");
                    });
            }
        }
    </script>
</div>