eirik
/
PaperBag
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

ARIA-improvements and work on item-amounts

master
Eirik Th S 2021-05-24 01:16:13 +02:00
parent 60599c16e4
commit 9fbbdff6dd
3 changed files with 89 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/index.css
View File

@ -64,10 +64,17 @@ body {
background-color: #3331;
}
span.price {
.priceWrapper {
float: right;
text-align: right;
}
span.price {
font-family: var(--bs-font-monospace);
font-size: 0.9rem;
padding-right: 3px;
}
span.price::after {
content: ' kr';
}
.subtotal {
@ -109,4 +116,21 @@ span.price {
.drag-over {
border-bottom: dashed 3px red;
border-bottom-width: 1px;
}
}
#totalPriceWrapper {
/*position: fixed;*/
/*bottom: 0;*/
/*right: 0;*/
/*color: #fff;*/
background: #fff;
padding: 10px;
margin: 25px auto 0;
width: 90vw;
text-align: left;
max-width: 20rem;
border-radius: 30px;
font-weight: bold;
}
/*}*/

1
plan/index.php
View File

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

114
plan/plan.js
View File

@ -13,8 +13,8 @@ class Store {
html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
html += " <div class='card-header'>"+this.title+"</div>";
html += " <div class='iconWrapper'>";
html += " <img src='../icon/pencil-square.svg' class='editStoreName' alt='edit name' data-toggle='tooltip' title='Edit store name' tabindex=0 role='button' />";
html += " <img src='../icon/x-circle.svg' class='removeStore' alt='remove store' data-toggle='tooltip' title='Remove store' tabindex=0 role='button' />";
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/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'>";
@ -38,7 +38,7 @@ class Store {
html += " </form>";
// html += " <button class='save'>Save</button>";
html += " </div>";
html += " <div class='card-footer subtotal'>Subtotal: <span class='price'>0.00 kr</span></div>";
html += " <div class='card-footer subtotal'>Subtotal: <span class='priceWrapper price'>0.00</span></div>";
html += "</div>";
this.selector = $(html).appendTo("#stores");
@ -53,12 +53,10 @@ class Store {
});
this.selector.find('.editStoreName').one('click keyup', ev => { this.editNameFn(ev); });
this.selector.find('.editStoreName').one('click', ev => { this.editNameFn(ev); });
this.selector.find('.removeStore').on('click keyup', ev => {
if(ev.type === 'click' || ev.keyCode === 13){
if(confirm("Are you sure you want to remove this store?")){ this.removeStore(); }
}
this.selector.find('.removeStore').on('click', ev => {
if(confirm("Are you sure you want to remove this store?")){ this.removeStore(); }
});
$(function () {
@ -71,7 +69,7 @@ class Store {
}
editNameFn(ev){
if(ev.type === 'click' || ev.keyCode === 13){
if(ev.type === 'click'){
$(ev.target).parent().hide();
@ -99,6 +97,7 @@ class Store {
});
headerElem.find(".newName").on('keyup', ev3 => { this.resetEditNameFn(ev3); });
headerElem.find('input').first().focus();
// $("body").one('click', ev3 => { this.resetEditNameFn(ev3); });
}
}
@ -146,18 +145,18 @@ class Store {
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 itemAmountDown' type='button'>-</button>";
html += " <input class='form-control itemAmount' type='number' value='"+amount+"' min='0' max='99' aria-label='Amount of item' style='-webkit-appearance: none; -moz-appearance: textfield; width: 29px; padding: 0 5px;' >";
html += " <span class='input-group-text' style='padding-left: 3px; font-family: var(--bs-font-monospace);font-size: 12px;text-align: right;'>x"+price.toFixed(2)+" kr</span>";
html += " <button class='btn btn-outline-success itemAmountUp' type='button'>+</button>";
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' style='-webkit-appearance: none; -moz-appearance: textfield; width: 29px; padding: 0 5px;' >";
html += " <span class='input-group-text price' style='padding-left: 3px; font-size: 12px;text-align: right;'>x"+price.toFixed(2)+"</span>";
html += " <button class='btn btn-outline-success itemAmountBtn' type='button'>+</button>";
html += " </div>";
html += " </span>";
*/
html += " <span class='price'>"+price.toFixed(2)+" kr ";
html += "<img src='../icon/dash-circle.svg' alt='Remove item' class='remItem' data-itemID='"+itemID+"' data-price='"+price+"' style='height: 20px; width: 20px; cursor: pointer;'></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>";
this.selector.find("ul").append(html);
@ -203,8 +202,16 @@ class Store {
return true;
}
setItemAmount(pos, amount){
this.items[pos].amount = amount;
setItemAmount(itemID, amount){
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));
}
});
// this.items[pos].amount = amount;
this.verify();
@ -228,7 +235,7 @@ class Store {
total += item.price*item.amount;
// console.log("verify - item: "+item.price+"*"+item.amount);
});
$(this.selector).find(".subtotal .price").html(total.toFixed(2)+" kr");
$(this.selector).find(".subtotal .price").html(total.toFixed(2));
// SHOW if-empty MESSAGE
if(this.selector.find("li").length <= 1){
@ -236,34 +243,23 @@ class Store {
}
// 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+1, 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+1, 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+1, newValue);
});
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);
}
});
// DRAGGABLE
@ -311,9 +307,10 @@ class Store {
});
// BIND remove-buttons
$(this.selector).find(".remItem").unbind().each((key, val) => {
$(this.selector).find(".remItem").each((key, val) => {
let that = this;
$(val).click(function(){
$(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"));
@ -323,15 +320,23 @@ class Store {
catch(ignore){}
}
else {
console.log("remItem addClass");
$(".confirm").removeClass("confirm");
$(this).addClass("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');
}
});
}
// STORE MANIPULATION
@ -480,7 +485,12 @@ function ajaxReq( data ){
function handleJsonErrors(json){
if(typeof json.status != "undefined" && json.status != 0){
alert(json.message);
if(json.message === "Not logged in"){
location.href = '../login.php';
}
else {
alert(json.message);
}
return true;
}