Item-amounts and space-subtotal.

Known bug: updating amount doesn't work visually for newly made items

plan/do.php

@@ -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;
+}

plan/index.php

@@ -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>

plan/plan.js

@@ -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){
+            if(item.itemID === itemID){
-               this.items[key].amount = amount;
+                this.items[key].amount = amount;
-               this.selector.find('#item_'+itemID+" .priceWrapper .price").html(Number(this.items[key].amount*this.items[key].price).toFixed(2));
+                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({