600 lines
22 KiB
JavaScript
600 lines
22 KiB
JavaScript
/*jshint sub:true, esversion: 6, -W083 */
|
|
|
|
class Store {
|
|
constructor(title, storeID, state) {
|
|
this.items = [];
|
|
this.state = state || 'planning'; // states: planning/shopping/closed
|
|
|
|
let storeNum = $(".store").length+1;
|
|
this.title = title || "Store "+storeNum;
|
|
this.storeID = storeID || null;
|
|
|
|
let html = "";
|
|
html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
|
|
html += " <div class='card-header'>"+this.title+"</div>";
|
|
html += " <div class='iconWrapper' style='float: left; margin-top: -35px; margin-left: 1px;'>";
|
|
html += " <nav aria-label='State changer'><ul class='pagination'>";
|
|
html += " <li class='page-item planningState "+(this.state === 'planning'?"active":"")+"'><span class='page-link'><img src='../icon/list-check.svg' class='ariaButton' alt='Planning state' title='Planning state' data-toggle='tooltip' tabindex=0 role='button' /></span></li>";
|
|
html += " <li class='page-item shoppingState "+(this.state === 'shopping'?"active":"")+"'><span class='page-link'><img src='../icon/basket2.svg' class='ariaButton' alt='Shopping state' title='Shopping state' data-toggle='tooltip' tabindex=0 role='button' /></span></li>";
|
|
html += " <li class='page-item closedState "+(this.state === 'closed'?"active":"")+"'><span class='page-link'><img src='../icon/check-all.svg' class='ariaButton' alt='Closed state' title='Closed state' data-toggle='tooltip' tabindex=0 role='button' /></span></li>";
|
|
html += " </ul></nav>";
|
|
html += " </div>";
|
|
html += " <div class='iconWrapper'>";
|
|
html += " <img src='../icon/pencil-square.svg' class='editStoreName ariaButton' alt='edit name' data-toggle='tooltip' title='Edit store name' tabindex=0 role='button' />";
|
|
// html += " <img src='../icon/filter-square.svg' class='sortItems ariaButton' alt='sort items' data-toggle='tooltip' title='Sort items by appearance in store' tabindex=0 role='button' />";
|
|
html += " <img src='../icon/x-circle.svg' class='removeStore ariaButton' alt='remove store' data-toggle='tooltip' title='Remove store' tabindex=0 role='button' />";
|
|
html += " </div>";
|
|
html += " <div class='card-body'>";
|
|
html += " <div class='draggable' style='width: 100%; height: 10px; border-width: 1px;'></div> <ul class='list-group list-group-flush storeItems'>";
|
|
html += " <li class='list-group-item emptyList'>No items added</li>";
|
|
html += " </ul>";
|
|
|
|
html += " <span class='addItemFormWrapper'>";
|
|
html += " <hr>";
|
|
html += " <form action='#!' class='form-row input-group input-group-sm addItemForm'>";
|
|
// html += " <input type='text' class='form-control newItemName' placeholder='New Item Name' data-toggle='tooltip' title='New Item Name' aria-label='New Item Name'>";
|
|
// html += " <input type='number' class='form-control newItemPrice' value='0' min='0' step='.01' data-toggle='tooltip' title='Price' aria-label='Price'>";
|
|
html += " <div class='form-control form-floating'>";
|
|
html += " <input type='text' id='newItemName0' class='form-control newItemName' placeholder='New Item Name' aria-label='New Item Name'>";
|
|
html += " <label for='newItemName0'>New Item Name</label>";
|
|
html += " </div>";
|
|
html += " <div class='form-control form-floating'>";
|
|
html += " <input type='number' id='newItemPrice0' class='form-control newItemPrice' value='0' min='0' step='.01' aria-label='Price'>";
|
|
html += " <label for='newItemPrice0'>Price</label>";
|
|
html += " </div>";
|
|
html += " <div class='input-group-append'>";
|
|
html += " <input type='image' class='form-control addItem' src='../icon/plus.svg' alt='+'>";
|
|
html += " </div>";
|
|
html += " </form>";
|
|
html += " </span>";
|
|
|
|
html += " </div>";
|
|
html += " <div class='card-footer subtotal'>Subtotal: <span class='priceWrapper price'>0.00</span></div>";
|
|
html += "</div>";
|
|
|
|
this.selector = $(html).appendTo("#stores");
|
|
|
|
this.selector.find(".addItemForm").on('submit', ev => {
|
|
ev.preventDefault();
|
|
|
|
this.addItem($(ev.target).find('.newItemName').val(), $(ev.target).find('.newItemPrice').val()).done(json => {
|
|
this.selector.find('.newItemPrice').val(0);
|
|
this.selector.find('.newItemName').val("").focus();
|
|
});
|
|
});
|
|
|
|
|
|
/** CHANGE STATE **/
|
|
this.selector.find('.iconWrapper .page-item').on('click', ev=>{
|
|
this.selector.find('.page-item.active').removeClass('active');
|
|
|
|
$(ev.currentTarget).addClass('active');
|
|
|
|
if($(ev.currentTarget).hasClass('planningState')){
|
|
this.setState('planning');
|
|
}
|
|
else if($(ev.currentTarget).hasClass('shoppingState')){
|
|
this.setState('shopping');
|
|
}
|
|
else if($(ev.currentTarget).hasClass('closedState')){
|
|
this.setState('closed');
|
|
}
|
|
});
|
|
|
|
this.selector.find('.editStoreName').one('click', ev => { this.editNameFn(ev); });
|
|
|
|
this.selector.find('.removeStore').on('click', ev => {
|
|
if(confirm("Are you sure you want to remove this store?")){ this.removeStore(); }
|
|
});
|
|
|
|
$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
}
|
|
|
|
setState(state, animTime){
|
|
animTime = animTime || 200;
|
|
let prevState = this.state;
|
|
|
|
if(state === "planning"){
|
|
this.state = "planning";
|
|
this.selector.find('.itemAmountButtons').slideDown(animTime);
|
|
this.selector.find('.itemAmountText').slideUp(animTime);
|
|
this.selector.find('.addItemFormWrapper').slideDown(animTime);
|
|
}
|
|
if(state !== "planning"){
|
|
this.selector.find('.itemAmountButtons').slideUp(animTime);
|
|
this.selector.find('.itemAmountText:not(.oneItem)').slideDown(animTime);
|
|
this.selector.find('.addItemFormWrapper').slideUp(animTime);
|
|
}
|
|
|
|
if(state === "shopping"){
|
|
this.state = "shopping";
|
|
}
|
|
if(state !== "shopping"){
|
|
|
|
}
|
|
|
|
if(state === "closed"){
|
|
this.state = "closed";
|
|
this.selector.find('.remItem').hide();
|
|
}
|
|
if(state !== "closed"){
|
|
this.selector.find('.remItem').show();
|
|
}
|
|
|
|
if(prevState !== state){
|
|
ajaxReq({ plan: 'setState', storeID: this.storeID, state: this.state });
|
|
}
|
|
}
|
|
|
|
editNameFn(ev){
|
|
if(ev.type === 'click'){
|
|
|
|
this.selector.find('.iconWrapper').hide();
|
|
// $(ev.target).parent().hide();
|
|
|
|
let headerElem = $(ev.target).parent().parent().find(".card-header");
|
|
let orgHtml = headerElem.html();
|
|
|
|
headerElem.html("<span style='display: none;'>"+orgHtml+"</span><form action='#' class='changeNameForm'><input type='text' class='newName' value='"+orgHtml+"'><input type='image' src='../icon/pencil-square.svg'></form>");
|
|
headerElem.find(".changeNameForm").on('submit keyup', ev2 => {
|
|
if(ev2.type === "submit"){
|
|
|
|
ev2.preventDefault();
|
|
|
|
let newName = $(ev2.target).find(".newName").val();
|
|
|
|
let that = this;
|
|
this.rename(newName).done(json => {
|
|
|
|
// success
|
|
headerElem.html(newName);
|
|
that.selector.find('.iconWrapper').show();
|
|
that.selector.find('.editStoreName').one('click keyup', ev3 => { this.editNameFn(ev3); });
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
headerElem.find(".newName").on('keyup', ev3 => { this.resetEditNameFn(ev3); });
|
|
headerElem.find('input').first().focus();
|
|
// $("body").one('click', ev3 => { this.resetEditNameFn(ev3); });
|
|
}
|
|
}
|
|
|
|
resetEditNameFn(ev){
|
|
if(
|
|
(ev.type==="keyup" && ev.keyCode === 27) ||
|
|
ev.type !== "keyup"
|
|
){
|
|
// cancel
|
|
let orgHtml = this.selector.find('.card-header span').html();
|
|
this.selector.find('.card-header').html(orgHtml);
|
|
|
|
this.selector.find('.iconWrapper').show();
|
|
this.selector.find('.editStoreName').one('click keyup', ev3 => { this.editNameFn(ev3); });
|
|
|
|
}
|
|
}
|
|
|
|
addItem(text, price){
|
|
if(text.length > 0){
|
|
|
|
if(this.storeID === null){
|
|
this.getStoreID().done(json => { this.addItem(text, price); });
|
|
|
|
return $.ajax();
|
|
}
|
|
|
|
let that = this;
|
|
return ajaxReq({ plan: 'addItem', storeID: this.storeID, name: text, price: price })
|
|
.done(json => {
|
|
return that.addItemHtml(text, price, json['data']);
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
addItemHtml(text, price, itemID, amount){
|
|
amount = amount || 1;
|
|
try {
|
|
price = Number(price);
|
|
this.items.push({ text: text, price: price, itemID: itemID, amount: amount });
|
|
|
|
let html = "\n";
|
|
html += "<li class='list-group-item draggable' id='item_"+itemID+"' data-itemid='"+itemID+"' draggable='true'>";
|
|
html += " <span style='float: left;'>"+text+"</span>";
|
|
|
|
html += " <div class='priceWrapper'><span class='price'>"+(price*amount).toFixed(2)+"</span>";
|
|
html += "<img src='../icon/dash-circle.svg' alt='Remove item' class='remItem ariaButton' data-itemID='"+itemID+"' data-price='"+price+"' style='margin-right: 3px;' tabindex='0' role='button'></div>";
|
|
|
|
html += " <span class='itemAmountWrapper' style='float: left; padding: 0 10px;'>";
|
|
html += " <div class='input-group itemAmountButtons' >"; // "+(this.state !== "planning"?"style='display: none;'":'')+"
|
|
html += " <button class='btn btn-outline-danger itemAmountBtn' type='button'>-</button>";
|
|
html += " <input class='form-control itemAmount itemAmountBtn' type='number' value='"+amount+"' min='0' max='99' aria-label='Amount of item' >";
|
|
if(price !== 0) {
|
|
html += " <span class='input-group-text' style='padding-left: 3px; padding-right: 0; font-size: 12px;text-align: right;'>x<span class='price'>" + price.toFixed(2) + "</span></span>";
|
|
}
|
|
html += " <button class='btn btn-outline-success itemAmountBtn' type='button'>+</button>";
|
|
html += " </div>";
|
|
html += " <div class='itemAmountText "+(amount <= 1?"oneItem":"")+"' style='display: none;'>"; // "+(this.state !== "shopping"?"style='display: none;'":'')+"
|
|
html += " Amount: <span class='itemAmount' style='padding-left: 10px;'>"+amount+"</span>x <span class='price'>" + price.toFixed(2) + "</span>";
|
|
html += " </div>";
|
|
html += " </span>";
|
|
|
|
html += "</li>";
|
|
|
|
this.selector.find("ul.storeItems").append(html);
|
|
this.selector.find(".emptyList").hide();
|
|
this.verify();
|
|
return true;
|
|
}
|
|
catch(e){
|
|
alert("Something failed. Try again.");
|
|
console.error(e, e.stack);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
remItem(pos, itemID, price){
|
|
let that = this;
|
|
|
|
if(this.state === "planning"){
|
|
|
|
return ajaxReq({ plan: 'remItem', storeID: this.storeID, itemID: itemID, price: price })
|
|
.done(json => {
|
|
// console.log("remItem return:", json);
|
|
return that.remItemHtml(itemID);
|
|
});
|
|
}
|
|
|
|
}
|
|
remItemHtml(itemID){
|
|
for(let i = 0; i < this.items.length; i++){
|
|
if(this.items[i].itemID === itemID){
|
|
this.items.splice(i,1);
|
|
break;
|
|
}
|
|
}
|
|
this.selector.find('#item_'+itemID).remove();
|
|
|
|
this.verify();
|
|
return true;
|
|
}
|
|
|
|
setItemAmount(itemID, amount){
|
|
// console.log(itemID, amount, this.items);
|
|
this.items.forEach((item, key) => {
|
|
if(item.itemID === itemID){
|
|
this.items[key].amount = amount;
|
|
this.selector.find('#item_'+itemID+" .priceWrapper .price").html(Number(amount*this.items[key].price).toFixed(2));
|
|
}
|
|
});
|
|
|
|
if(typeof this.itemAmountDelay === "undefined"){
|
|
this.itemAmountDelay = {};
|
|
}
|
|
|
|
if(typeof this.itemAmountDelay[itemID] !== "undefined"){ clearTimeout(this.itemAmountDelay[itemID]); }
|
|
|
|
this.itemAmountDelay[itemID] = setTimeout(() => {
|
|
return ajaxReq({ plan: 'updateItemAmount', storeID: this.storeID, itemID: itemID, newAmount: amount })
|
|
.done(()=>{ this.verify(); });
|
|
}, 500);
|
|
}
|
|
|
|
setItemPosition(itemID, afterID){
|
|
afterID = afterID || 0;
|
|
if(itemID !== afterID){
|
|
return ajaxReq({ plan: 'moveItem', storeID: this.storeID, itemID: itemID, afterID: afterID });
|
|
}
|
|
return false;
|
|
}
|
|
|
|
verify(){
|
|
// UPDATE TOTAL PRICE
|
|
let total = 0;
|
|
this.items.forEach(item => {
|
|
total += item.price*item.amount;
|
|
// console.log("verify - item: "+item.price+"*"+item.amount);
|
|
});
|
|
$(this.selector).find(".subtotal .price").html(total.toFixed(2));
|
|
|
|
// SHOW if-empty MESSAGE
|
|
if(this.selector.find("li").length <= 1){
|
|
this.selector.find(".emptyList").show();
|
|
}
|
|
|
|
// BIND add/remove item amount
|
|
let that = this;
|
|
this.selector.find('.itemAmountBtn').off().on('click change', function(e){
|
|
let itemid = $(this).parent().parent().parent().attr('data-itemid');
|
|
let amountElem = $(this).parent().find('.itemAmount');
|
|
let newValue = Number(amountElem.val());
|
|
|
|
if($(this).html() === "-"){
|
|
newValue--;
|
|
}
|
|
else if($(this).html() === "+"){
|
|
newValue++;
|
|
}
|
|
|
|
if(newValue > 0 && newValue < 100){
|
|
amountElem.val(newValue);
|
|
that.setItemAmount(itemid, newValue);
|
|
|
|
let textAmountElem = $(this).parent().parent().find('.itemAmountText');
|
|
textAmountElem.find('.itemAmount').html(newValue);
|
|
|
|
if(newValue === 1){
|
|
textAmountElem.addClass('oneItem');
|
|
}
|
|
else {
|
|
textAmountElem.removeClass('oneItem');
|
|
}
|
|
}
|
|
});
|
|
|
|
// DRAGGABLE
|
|
let draggingObj = null, dragPos = null;
|
|
this.selector.find('.draggable').unbind().on('dragstart dragover dragenter dragleave dragend', ev => {
|
|
// this.selector.find('.draggable').hammer().bind('swipe', ev => {
|
|
if(ev.type === 'dragover' || ev.type === 'dragenter'){
|
|
ev.preventDefault();
|
|
// console.log(ev);
|
|
$(ev.currentTarget).addClass('drag-over');
|
|
dragPos = ev.currentTarget;
|
|
}
|
|
else if(ev.type === 'dragstart'){
|
|
// console.log('drag start');
|
|
draggingObj = $(ev.target);
|
|
draggingObj.css('opacity', 0.2);
|
|
}
|
|
else if(ev.type === 'dragleave'){
|
|
$('.drag-over').removeClass('drag-over');
|
|
}
|
|
else if(ev.type === 'dragend'){
|
|
// console.log(draggingObj);
|
|
if(draggingObj === null){
|
|
console.warn('no object to move');
|
|
return;
|
|
}
|
|
|
|
// console.log("move object", draggingObj, "to", dragPos);
|
|
|
|
draggingObj.css('opacity', 1);
|
|
|
|
if( this.setItemPosition(draggingObj.attr('data-itemid'), $(dragPos).attr('data-itemid')) !== false){
|
|
|
|
if($(dragPos).attr('data-itemID') == null){
|
|
draggingObj.detach().insertAfter('.emptyList');
|
|
}
|
|
else {
|
|
draggingObj.detach().insertAfter(dragPos);
|
|
}
|
|
draggingObj = null;
|
|
}
|
|
|
|
$('.drag-over').removeClass('drag-over');
|
|
}
|
|
});
|
|
|
|
// BIND remove-buttons
|
|
$(this.selector).find(".remItem").each((key, val) => {
|
|
let that = this;
|
|
$(val).off().on('click', function(){
|
|
// console.log("remItem", $(this).hasClass("confirm"), $(this));
|
|
if($(this).hasClass("confirm")){
|
|
|
|
that.remItem(key+1, $(this).attr('data-itemid'), $(this).attr("data-price"));
|
|
try {
|
|
$(this).tooltip('dispose');
|
|
}
|
|
catch(ignore){}
|
|
}
|
|
else {
|
|
// console.log("remItem addClass");
|
|
$(".confirm").removeClass("confirm");
|
|
|
|
setTimeout(() => { $(this).addClass("confirm"); }, 10);
|
|
let newThat = this;
|
|
setTimeout(function(){ $(newThat).removeClass("confirm"); }, 5000);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(this.selector).find(".ariaButton").off('keydown').on('keydown', function(e){
|
|
if(e.code === "Space" || e.code === "Enter"){
|
|
e.preventDefault();
|
|
$(this).trigger('click');
|
|
}
|
|
});
|
|
|
|
// Update the total-price
|
|
updateTotalPrice();
|
|
}
|
|
|
|
// STORE MANIPULATION
|
|
removeStore(){
|
|
this.selector.remove();
|
|
if(this.storeID != null){
|
|
ajaxReq({ plan: 'deleteStore', storeID: this.storeID, storeName: this.title, itemsLength: this.items.length })
|
|
.done(json => {
|
|
console.log("Delete store response:",json);
|
|
});
|
|
}
|
|
}
|
|
|
|
getStoreID(){
|
|
let that = this;
|
|
|
|
return ajaxReq({ plan: 'saveStore', storeName: this.title })
|
|
.done(json => {
|
|
console.log("getStore:", json);
|
|
that.storeID = json['data'];
|
|
return that.storeID;
|
|
});
|
|
}
|
|
|
|
rename(newName){
|
|
this.title = newName;
|
|
|
|
if(this.storeID !== null){
|
|
return ajaxReq({ plan: 'renameStore', storeID: this.storeID, newName: newName });
|
|
}
|
|
|
|
// Return blank ajax as a false
|
|
return $.ajax();
|
|
}
|
|
}
|
|
|
|
var stores = [];
|
|
$("#stores").html("");
|
|
|
|
$("#addStore").click(ev => {
|
|
stores.push(new Store());
|
|
});
|
|
|
|
$("#refreshAll").click(ev => {
|
|
$(".tooltip").remove();
|
|
getStores(spaceID);
|
|
});
|
|
|
|
$("body").on('click', function(ev){
|
|
if( $(".price").find( ev.target ).length === 0){
|
|
$(".confirm").removeClass("confirm");
|
|
}
|
|
});
|
|
|
|
let totalPrice = 0;
|
|
function updateTotalPrice(){
|
|
totalPrice = 0;
|
|
for(const storeKey in stores){
|
|
const store = stores[storeKey];
|
|
|
|
for(const itemKey in store.items){
|
|
totalPrice += store.items[itemKey].amount*store.items[itemKey].price;
|
|
}
|
|
}
|
|
$("#totalPrice").html(totalPrice);
|
|
}
|
|
|
|
let spaceID = 0;
|
|
function getSpaces(){
|
|
$("#stores").html("Loading...");
|
|
return ajaxReq({plan: 'spaces'}).done(json => {
|
|
let optionsHtml = "";
|
|
|
|
// console.log(json);
|
|
|
|
let spaceNum = 1;
|
|
for(const spaceI in json.data.spaces){
|
|
const space = json.data.spaces[spaceI];
|
|
if(spaceID === 0){
|
|
spaceID = space['space_id'];
|
|
}
|
|
let spaceName = space['space_name'] || "Space "+spaceNum;
|
|
optionsHtml += "<option value='"+space['space_id']+"'>"+spaceName+"</option>\n";
|
|
spaceNum++;
|
|
}
|
|
|
|
let spaceSelectElem = $("#spaceSelect");
|
|
spaceSelectElem
|
|
.html(optionsHtml)
|
|
.on('change', ev => {
|
|
spaceID = $(ev.target).val();
|
|
getStores(spaceID);
|
|
});
|
|
|
|
if(typeof json.data.lastSpace !== "undefined"){
|
|
spaceID = Number(json.data.lastSpace);
|
|
spaceSelectElem.val(spaceID);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
getSpaces().done(() => { getStores(spaceID); });
|
|
|
|
// GET STORES
|
|
function getStores(spaceID){
|
|
spaceID = spaceID || 0;
|
|
|
|
// $("#stores").html("");
|
|
stores = [];
|
|
|
|
let options = { plan: '' };
|
|
if(spaceID !== 0){
|
|
options = { plan: '', space: spaceID }
|
|
}
|
|
|
|
$.getJSON('do.php', options)
|
|
.done(json => {
|
|
if(handleJsonErrors(json)){
|
|
return;
|
|
}
|
|
|
|
$("#stores").html("");
|
|
|
|
// console.log(json);
|
|
for(const store in json.data){
|
|
let storeKey = stores.length;
|
|
|
|
stores.push(new Store(json.data[store].name, json.data[store].plan_store_id, json.data[store].state));
|
|
for(const item in json.data[store].items){
|
|
stores[storeKey].addItemHtml(
|
|
json.data[store].items[item].name,
|
|
json.data[store].items[item].price,
|
|
json.data[store].items[item].plan_item_id,
|
|
json.data[store].items[item].amount);
|
|
}
|
|
stores[storeKey].setState(json.data[store].state, 1);
|
|
}
|
|
updateTotalPrice();
|
|
})
|
|
.fail(handleAjaxErrors);
|
|
}
|
|
|
|
|
|
function ajaxReq( data ){
|
|
if(typeof spaceID !== "undefined" && spaceID !== 0){
|
|
data.space = spaceID;
|
|
}
|
|
return $.ajax({
|
|
method: "POST",
|
|
url: "do.php",
|
|
data: data,
|
|
dataType: 'JSON'
|
|
})
|
|
.done(json => {
|
|
if(handleJsonErrors(json)){
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
})
|
|
.fail(handleAjaxErrors);
|
|
}
|
|
|
|
function handleJsonErrors(json){
|
|
if(typeof json.status != "undefined" && json.status != 0){
|
|
if(json.message === "Not logged in"){
|
|
location.href = '../login.php';
|
|
}
|
|
else {
|
|
alert(json.message);
|
|
}
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
function handleAjaxErrors(jqxhr, textStatus, error){
|
|
if(textStatus === "parsererror" && jqxhr.responseText != ""){
|
|
alert("An error occured:\n"+jqxhr.responseText);
|
|
}
|
|
else {
|
|
alert("An error occured:\n"+error);
|
|
}
|
|
} |