172 lines
7.5 KiB
JavaScript
172 lines
7.5 KiB
JavaScript
/*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 collapsed' 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 collapsed' 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;
|
|
}
|
|
});
|
|
} |