diff --git a/css/index.css b/css/index.css index fc292e5..0e5a3b3 100644 --- a/css/index.css +++ b/css/index.css @@ -85,3 +85,20 @@ span.price { padding-left: 5px; padding-right: 5px; } + +.remItem { + height: 20px; + width: 20px; + cursor: pointer; + transition: transform 0.5s; +} + +.remItem.confirm { + transform: rotate(90deg); + filter: invert(28%) sepia(93%) saturate(1776%) hue-rotate(334deg) brightness(89%) contrast(94%); + /* filter color source: https://codepen.io/sosuke/full/Pjoqqp */ +} + +.addItemForm3 div:focus-within { + width: 80%; +} \ No newline at end of file diff --git a/icon/dash-circle.svg b/icon/dash-circle.svg new file mode 100644 index 0000000..52a52e0 --- /dev/null +++ b/icon/dash-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/login.php b/login.php new file mode 100644 index 0000000..32d5d82 --- /dev/null +++ b/login.php @@ -0,0 +1,31 @@ + + + + + Login - Grocery Assist + + + + +
+ +

Login

+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/plan/plan.js b/plan/plan.js index 9f2fc34..19ca946 100644 --- a/plan/plan.js +++ b/plan/plan.js @@ -144,10 +144,31 @@ class Store { } addItemHtml(text, price){ + let amount = 1; try { price = Number(price); - this.items.push({ text: text, price: price }); - this.selector.find("ul").append("
  • "+text+""+price.toFixed(2)+" kr
    • "); + this.items.push({ text: text, amount: amount, price: price }); + + let html = "\n"; + html += "
  • "; + html += " "+text+""; + + /* + html += "
    "; + html += "
    "; + html += " "; + html += " "; + html += " x"+price.toFixed(2)+" kr"; + html += " "; + html += "
    "; + html += "     "; + */ + html += " "+price.toFixed(2)+" kr "; + // html += ""; + html += "Remove item"; + html += "
    • "; + + this.selector.find("ul").append(html); this.selector.find(".emptyList").hide(); this.verify(); return true; @@ -158,6 +179,33 @@ class Store { } return false; } + + setItemAmount(pos, amount){ + this.items[pos].amount = amount; + + this.verify(); + + return true; + + let that = this; + + return $.ajax({ + method: "POST", + url: "do.php", + data: { plan: 'remItem', storeID: this.storeID, position: pos, price: price }, + dataType: 'JSON' + }) + .done(json => { + if(handleJsonErrors(json)){ + return false; + } + + // console.log("remItem return:", json); + return that.remItemHtml(pos); + }) + .fail(handleAjaxErrors); + } + remItem(pos, price){ let that = this; @@ -194,9 +242,9 @@ class Store { // UPDATE TOTAL PRICE let total = 0; this.items.forEach(item => { - total += item.price; + total += item.price*item.amount; + // console.log("verify - item: "+item.price+"*"+item.amount); }); - $(this.selector).find(".subtotal .price").html(total.toFixed(2)+" kr"); // SHOW if-empty MESSAGE @@ -204,15 +252,57 @@ class Store { this.selector.find(".emptyList").show(); } + // BIND add/remove item amount + this.selector.find('.itemAmountDown').each((key, val) => { + let that = this; + $(val).unbind().click(function(){ + let newValue = Number($(this).parent().find('.itemAmount').val())-1; + if(newValue > 0){ + $(this).parent().find('.itemAmount').val(newValue); + // UPDATE VALUE + that.setItemAmount(key, newValue); + } + }); + }); + this.selector.find('.itemAmountUp').each((key, val) => { + let that = this; + $(val).unbind().click(function(){ + let newValue = Number($(this).parent().find('.itemAmount').val())+1; + if(newValue < 100){ + $(this).parent().find('.itemAmount').val(newValue); + // UPDATE VALUE + that.setItemAmount(key, newValue); + } + }); + }); + this.selector.find('.itemAmount').each((key, val) => { + $(val).unbind().on('change', function(){ + let newValue = Number( console.log($(this).val()) ); + // UPDATE VALUE + that.setItemAmount(key, newValue); + }); + }); + // BIND remove-buttons $(this.selector).find(".remItem").unbind().each((key, val) => { let that = this; - $(val).click(function(){ - that.remItem(key, $(this).attr("data-price")); - try { - $(this).tooltip('dispose'); + $(val).click(function(){ + if($(this).hasClass("confirm")){ + + that.remItem(key, $(this).attr("data-price")); + try { + $(this).tooltip('dispose'); + } + catch(ignore){} + } + else { + $(".confirm").removeClass("confirm"); + + $(this).addClass("confirm"); + let newThat = this; + setTimeout(function(){ $(newThat).removeClass("confirm"); }, 5000); + } - catch(ignore){} }); }); } @@ -316,6 +406,12 @@ $("#refreshAll").click(ev => { getStores(); }); +$("body").on('click', function(ev){ + if( $(".price").find( ev.target ).length === 0){ + $(".confirm").removeClass("confirm"); + } +}); + // GET STORES function getStores(){ $("#stores").html("");