Item-amounts and space-subtotal.

Known bug: updating amount doesn't work visually for newly made items
master
Eirik Th S 2021-05-25 11:54:03 +02:00
parent 9fbbdff6dd
commit 219d6a8f46
3 changed files with 71 additions and 42 deletions

View File

@ -99,7 +99,6 @@ if(!empty($data) && isset($user_id)){
}
else if($data['plan'] == "remItem"){
if(($temp = checkArgs(array("storeID"=>@$data['storeID'], "itemID"=>@$data['itemID'], "price"=>@$data['price']))) !== true){
returns("Missing a value: $temp", 1);
}
@ -115,7 +114,19 @@ if(!empty($data) && isset($user_id)){
}
// UPDATE ITEM AMOUNT
else if ($data['plan'] == "updateItemAmount"){
if(($temp = checkArgs(array("storeID"=>@$data['storeID'], "itemID"=>@$data['itemID'], "newAmount"=>@$data['newAmount']))) !== true){
returns("Missing a value: $temp", 1);
}
if( setItemAmount($data['storeID'], $data['itemID'], $data['newAmount']) ){
returns();
}
else {
$error = $db->error;
returns($error,1);
}
}
// UPDATE ITEM POSITION
else if($data['plan'] == 'moveItem'){
@ -395,6 +406,15 @@ function moveItem($storeID, $itemID, $afterID){
return false;
}
function setItemAmount($storeID, $itemID, $newAmount = 1){
global $db, $spaceID;
$verifyUserOwnershipSQL = "SELECT `plan_store_id` FROM plan_store WHERE `space_id` = '$spaceID' AND `plan_store_id` = '$storeID'";
$updateAmountSQL = "UPDATE plan_store_item SET amount = $newAmount WHERE plan_item_id = $itemID AND plan_store_id = ($verifyUserOwnershipSQL);";
?>
if($db->query($updateAmountSQL)){
return true;
}
return false;
}

View File

@ -24,7 +24,7 @@
<hr>
</div>
<!-- <div id='totalPriceWrapper'>Space subtotal: <span id="totalPrice" class="priceWrapper price">239.00 kr</span></div>-->
<div id='totalPriceWrapper'>Space subtotal: <span id="totalPrice" class="priceWrapper price">239.00</span></div>
<br>
<button id="addStore">Add store</button><br><br>
<button id="refreshAll">Refresh all</button>

View File

@ -3,12 +3,11 @@
class Store {
constructor(title, storeID) {
this.items = [];
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>";
@ -21,6 +20,7 @@ class Store {
html += " <li class='list-group-item emptyList'>No items added</li>";
html += " </ul>";
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'>";
@ -36,13 +36,13 @@ class Store {
html += " <input type='image' class='form-control addItem' src='../icon/plus.svg' alt='+'>";
html += " </div>";
html += " </form>";
// html += " <button class='save'>Save</button>";
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();
@ -54,7 +54,7 @@ class Store {
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(); }
});
@ -62,10 +62,6 @@ class Store {
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
/** DEV **/
// this.selector.find('.save').click(ev => { this.save(); });
}
editNameFn(ev){
@ -142,10 +138,9 @@ class Store {
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 += "<li class='list-group-item draggable' id='item_"+itemID+"' data-itemid='"+itemID+"' draggable='true'>";
html += " <span style='float: left;'>"+text+"</span>";
/* * /
html += " <br><span class='' style='float: left; padding: 0 10px;'>";
html += " <div class='input-group'>";
html += " <button class='btn btn-outline-danger itemAmountBtn' type='button'>-</button>";
@ -154,7 +149,7 @@ class Store {
html += " <button class='btn btn-outline-success itemAmountBtn' type='button'>+</button>";
html += " </div>";
html += " </span>";
/* */
html += " <div class='priceWrapper'><span class='price'>"+price.toFixed(2)+"</span>";
html += "<img src='../icon/dash-circle.svg' alt='Remove item' class='remItem ariaButton' data-itemID='"+itemID+"' data-price='"+price+"' style='height: 20px; width: 20px; cursor: pointer;' tabindex='0' role='button'></div>";
html += "</li>";
@ -182,8 +177,6 @@ class Store {
}
remItemHtml(itemID){
// this.items.splice(pos,1);
for(let i = 0; i < this.items.length; i++){
if(this.items[i].itemID === itemID){
this.items.splice(i,1);
@ -191,33 +184,30 @@ class Store {
}
}
this.selector.find('#item_'+itemID).remove();
// $(this.selector).find(".remItem").unbind().each((key, val) => {
// if(key+1 == pos){
// $(val).parent().parent().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(this.items[key].amount*this.items[key].price).toFixed(2));
}
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));
}
});
// this.items[pos].amount = amount;
this.verify();
if(typeof this.itemAmountDelay === "undefined"){
this.itemAmountDelay = {};
}
return true;
if(typeof this.itemAmountDelay[itemID] !== "undefined"){ clearTimeout(this.itemAmountDelay[itemID]); }
// return ajaxReq({ plan: 'remItem', storeID: this.storeID, position: pos, price: price });
this.itemAmountDelay[itemID] = setTimeout(() => {
return ajaxReq({ plan: 'updateItemAmount', storeID: this.storeID, itemID: itemID, newAmount: amount })
.done(()=>{ this.verify(); });
}, 500);
}
setItemPosition(itemID, afterID){
@ -291,7 +281,7 @@ class Store {
draggingObj.css('opacity', 1);
if( this.setItemPosition(draggingObj.attr('data-itemID'), $(dragPos).attr('data-itemID')) !== false){
if( this.setItemPosition(draggingObj.attr('data-itemid'), $(dragPos).attr('data-itemid')) !== false){
if($(dragPos).attr('data-itemID') == null){
draggingObj.detach().insertAfter('.emptyList');
@ -310,23 +300,22 @@ class Store {
$(this.selector).find(".remItem").each((key, val) => {
let that = this;
$(val).off().on('click', function(){
console.log("remItem", $(this).hasClass("confirm"), $(this));
// console.log("remItem", $(this).hasClass("confirm"), $(this));
if($(this).hasClass("confirm")){
that.remItem(key+1, $(this).attr('data-itemID'), $(this).attr("data-price"));
that.remItem(key+1, $(this).attr('data-itemid'), $(this).attr("data-price"));
try {
$(this).tooltip('dispose');
}
catch(ignore){}
}
else {
console.log("remItem addClass");
// console.log("remItem addClass");
$(".confirm").removeClass("confirm");
setTimeout(() => { $(this).addClass("confirm"); }, 10);
let newThat = this;
setTimeout(function(){ $(newThat).removeClass("confirm"); }, 5000);
}
});
});
@ -337,13 +326,16 @@ class Store {
$(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 })
ajaxReq({ plan: 'deleteStore', storeID: this.storeID, storeName: this.title, itemsLength: this.items.length })
.done(json => {
console.log("Delete store response:",json);
});
@ -391,12 +383,26 @@ $("body").on('click', function(ev){
}
});
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);
// console.log(json);
let spaceNum = 1;
for(const spaceI in json.data.spaces){
@ -431,7 +437,7 @@ getSpaces().done(() => { getStores(spaceID); });
function getStores(spaceID){
spaceID = spaceID || 0;
$("#stores").html("");
// $("#stores").html("");
stores = [];
let options = { plan: '' };
@ -445,6 +451,8 @@ function getStores(spaceID){
return;
}
$("#stores").html("");
// console.log(json);
for(const store in json.data){
let storeID = stores.length;
@ -458,13 +466,14 @@ function getStores(spaceID){
json.data[store].items[item].amount);
}
}
updateTotalPrice();
})
.fail(handleAjaxErrors);
}
function ajaxReq( data ){
if(typeof spaceID !== "undefined" && spaceID != 0){
if(typeof spaceID !== "undefined" && spaceID !== 0){
data.space = spaceID;
}
return $.ajax({