PaperBag/www/plan/recipe.js

/*jshint sub:true, esversion: 6, -W083 */

class Recipe {
    constructor(jsonObj){
        this.portionAmount = 1;
        if(typeof jsonObj === "undefined"){
            alert('create new store?');
        }
        else {
            this.recipes = jsonObj.data;
        }
    }

    getAccordionHtml(appendId){
        let appendElem = $(appendId);
        if(!appendElem.hasClass('accordion')){ appendElem.addClass('accordion'); }

        for(const key in this.recipes){
            const recipe = this.recipes[key];

            let html = "<div class='accordion-item'>"+
                "  <h2 class='accordion-header' id='heading"+key+"'>"+
                "    <button class='accordion-button' type='button' data-bs-toggle='collapse' data-bs-target='#collapse"+key+"' aria-expanded='true' aria-controls='collapse"+key+"'>"+recipe.name+"</button>"+
                "  </h2>"+
                "  <div id='collapse"+key+"' class='accordion-collapse collapse' aria-labelledby='heading"+key+"' data-bs-parent='#addStoreRecipe'>"+
                "    <div class='accordion-body'>"+
                "      <ul class='list-group list-group-flush' id='recipeItems"+key+"' data-recipe-name='"+recipe.name+"' data-recipe-id='"+recipe['recipe_id']+"'>";

            for(const itemKey in recipe.items){
                const recipeItem = recipe.items[itemKey];
                html += "<li class='list-group-item'>"+
                        "<div class='row'>"+
                            "<span class='col-1 number recipeItemAmount' data-amount='"+recipeItem.amount+"'>"+recipeItem.amount+"</span> "+
                            "<span class='col itemName'>"+recipeItem.name+"</span> "+
                            "<span class='col-3 price'>"+recipeItem.price+"</span> ";
                if(recipe.owner) {
                    html += "<span class='col-2 editing gx-3' style='display: none;' data-itemid='"+recipeItem['recipe_item_id']+"'><img src='../icon/pencil-square.svg' class='ariaButton editRow' alt='Edit'><img src='../icon/x-circle.svg' class='ariaButton delRow' alt='Remove' style='filter: invert(28%) sepia(93%) saturate(1776%) hue-rotate(334deg) brightness(89%) contrast(94%);'></span> ";
                }
                html += "</div>"+
                    "</li>";
            }

            html +=     "      </ul>"+
                "      <div class='row row-cols-2'><label >Portions:</label><div class='input-group portionAmountBtns'>"+
                "        <button class='btn btn-outline-danger' data-type='descend' type='button'>-</button>"+
                "        <input class='form-control' data-type='edit' type='number' value='"+this.portionAmount+"' min='1' max='99' aria-label='Amount of portions'>"+
                "        <button class='btn btn-outline-success' data-type='ascend' type='button'>+</button>"+
                "      </div></div>"+
                "    <button class='btn btn-primary m-1 addStoreContents'>Add as a store</button>";
            if(recipe.owner){
                html += "    <button class='btn btn-secondary m-1 editList' data-recipeid='"+key+"'>Edit list...</button>";
            }
            html += "  </div>"+
                "</div>";

            let htmlElem = $(html);

            // MODIFY PORTIONS
            htmlElem.find('.portionAmountBtns button, .portionAmountBtns input').on('click', portionEv=>{
                let clickedElem = $(portionEv.currentTarget);
                let inputElem = clickedElem.parent().find('input');
                let amountNum = Number(inputElem.val());
                switch (clickedElem.attr('data-type')){
                    case 'descend':
                        if(amountNum > 1){
                            amountNum--;
                        }
                        break;
                    case 'ascend':
                        if(amountNum < 99){
                            amountNum++;
                        }
                        break;
                }
                this.portionAmount = amountNum;

                inputElem.val(amountNum);
                inputElem.trigger('change');
            });
            htmlElem.find('.portionAmountBtns input').on('change', portionChangeEv => {
                let amountModifier = Number($(portionChangeEv.currentTarget).val());
                $("#recipeItems"+key+" li .number").each((k, portionVal)=>{
                    let elem = $(portionVal);
                    elem.html( Number(elem.attr('data-amount'))*amountModifier );
                });
            });

            // SAVE AS A STORE
            htmlElem.find('.addStoreContents').one('click', addStoreEv => {
                let recipeList = $(addStoreEv.currentTarget).parent().find('ul');
                let recipeItems = [];
                recipeList.find("li").each((k, recipeItem)=> {
                    let elem = $(recipeItem);
                    recipeItems.push([elem.find('.itemName').html(), elem.find('.price').html(), elem.find('.recipeItemAmount').html()]);
                });

                this.saveToStore(recipeList.attr('data-recipe-name'), recipeItems);
                addStoreModal.hide();
            });

            // TODO: EDIT RECIPE
            htmlElem.find('.editList').css('cursor','pointer').one('click', editListEv => {
                let accBody = $(editListEv.currentTarget).parent();

                accBody.find('li .editing').show();
            });

            htmlElem.find(".ariaButton").off('keydown').on('keydown', function(e){
                if(e.code === "Space" || e.code === "Enter"){
                    e.preventDefault();
                    $(this).trigger('click');
                }
            });

            htmlElem.find('.editRow').on('click', ev=>{this.editRow(ev);});
            htmlElem.find('.delRow').on('click', ev=>{this.editRow(ev, true);});

            htmlElem.appendTo(appendElem);
        }

    }

    editRow(event, doDelete){
        doDelete = doDelete || false;
        let eventElem = $(event.currentTarget);
        let recipe_id = eventElem.parent().parent().parent().parent().attr('data-recipe-id');
        let r_item_id = eventElem.parent().attr('data-itemid');
        let item_name = eventElem.parent().parent().find('.itemName').html();

        if(doDelete){
            ajaxPost('/api/v1/recipe', { recipe_id: recipe_id, del_item_num: r_item_id, delName: item_name }).done(resp => {
                // eventElem.remove();
                eventElem.parent().parent().parent().hide();
            });
        }
        else {
            alert("Edit coming soon..."+"\nrecipeid: "+recipe_id+"\nitem_num: "+item_num);
        }
    }

    saveToStore(storeName, recipeItems){
        if(typeof Store !== "undefined" && typeof stores !== "undefined"){
            if(!storeName){
                storeName = 'Recipe';
            }
            else {
                storeName = 'Recipe: '+storeName;
            }

            stores.push( new Store(storeName));
            let storeKey = stores.length - 1;
            return stores[storeKey].getStoreID().done(json => {
                for (const recKey in recipeItems) {
                    const recItem = recipeItems[recKey];
                    stores[storeKey].addItem(recItem[0], recItem[1], recItem[2]);
                }
            });
        }
        console.error("Store class not initialized, or no stores-list found.");
        return false;
    }
}

function ajaxPost(url, params){
    return $.post(url, params)
        .done(resp => {
            if(resp.status !== 0){
                alert(resp.message);
                return;
            }
        });
}