Lock 'stores' for editing and:
+ Fix prices not being updated on load + Some general improvementsmaster
parent
219d6a8f46
commit
86b00423e1
|
@ -64,6 +64,10 @@ body {
|
||||||
background-color: #3331;
|
background-color: #3331;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#stores .card-header {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.priceWrapper {
|
.priceWrapper {
|
||||||
float: right;
|
float: right;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -77,11 +81,29 @@ span.price::after {
|
||||||
content: ' kr';
|
content: ' kr';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.dollars span.price::before {
|
||||||
|
content: "$";
|
||||||
|
}
|
||||||
|
body.dollars span.price::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
.subtotal {
|
.subtotal {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.itemAmountWrapper {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.itemAmount.itemAmountBtn {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
width: 29px;
|
||||||
|
padding: 0 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.addItemForm div.form-control {
|
.addItemForm div.form-control {
|
||||||
transition: width 0.5s;
|
transition: width 0.5s;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 337 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-unlock" viewBox="0 0 16 16">
|
||||||
|
<path d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2zM3 8a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H3z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 350 B |
51
plan/plan.js
51
plan/plan.js
|
@ -3,6 +3,7 @@
|
||||||
class Store {
|
class Store {
|
||||||
constructor(title, storeID) {
|
constructor(title, storeID) {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
|
this.state = 'unlocked'; // states: unlocked/locked
|
||||||
|
|
||||||
let storeNum = $(".store").length+1;
|
let storeNum = $(".store").length+1;
|
||||||
this.title = title || "Store "+storeNum;
|
this.title = title || "Store "+storeNum;
|
||||||
|
@ -11,6 +12,7 @@ class Store {
|
||||||
let html = "";
|
let html = "";
|
||||||
html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
|
html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
|
||||||
html += " <div class='card-header'>"+this.title+"</div>";
|
html += " <div class='card-header'>"+this.title+"</div>";
|
||||||
|
html += " <div class='iconWrapper' style='float: left;'><img src='../icon/unlock.svg' class='lockStore ariaButton' alt='Lock the store' tabindex=0 role='button' /></div>";
|
||||||
html += " <div class='iconWrapper'>";
|
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/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 += " <img src='../icon/x-circle.svg' class='removeStore ariaButton' alt='remove store' data-toggle='tooltip' title='Remove store' tabindex=0 role='button' />";
|
||||||
|
@ -19,8 +21,9 @@ class Store {
|
||||||
html += " <div class='draggable' style='width: 100%; height: 10px; border-width: 1px;'></div> <ul class='list-group list-group-flush'>";
|
html += " <div class='draggable' style='width: 100%; height: 10px; border-width: 1px;'></div> <ul class='list-group list-group-flush'>";
|
||||||
html += " <li class='list-group-item emptyList'>No items added</li>";
|
html += " <li class='list-group-item emptyList'>No items added</li>";
|
||||||
html += " </ul>";
|
html += " </ul>";
|
||||||
html += " <hr>";
|
|
||||||
|
|
||||||
|
html += " <span class='addItemFormWrapper'>";
|
||||||
|
html += " <hr>";
|
||||||
html += " <form action='#!' class='form-row input-group input-group-sm addItemForm'>";
|
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='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 += " <input type='number' class='form-control newItemPrice' value='0' min='0' step='.01' data-toggle='tooltip' title='Price' aria-label='Price'>";
|
||||||
|
@ -36,6 +39,7 @@ class Store {
|
||||||
html += " <input type='image' class='form-control addItem' src='../icon/plus.svg' alt='+'>";
|
html += " <input type='image' class='form-control addItem' src='../icon/plus.svg' alt='+'>";
|
||||||
html += " </div>";
|
html += " </div>";
|
||||||
html += " </form>";
|
html += " </form>";
|
||||||
|
html += " </span>";
|
||||||
|
|
||||||
html += " </div>";
|
html += " </div>";
|
||||||
html += " <div class='card-footer subtotal'>Subtotal: <span class='priceWrapper price'>0.00</span></div>";
|
html += " <div class='card-footer subtotal'>Subtotal: <span class='priceWrapper price'>0.00</span></div>";
|
||||||
|
@ -53,6 +57,23 @@ class Store {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
this.selector.find('.lockStore').tooltip({title: 'Lock Store'});
|
||||||
|
this.selector.find('.lockStore').on('click', ev => {
|
||||||
|
let lockIcon = $(ev.target);
|
||||||
|
if(this.lockStore() === 1){
|
||||||
|
lockIcon.attr({ 'src': '../icon/lock.svg', 'title': 'Unlock store' });
|
||||||
|
lockIcon.tooltip('dispose');
|
||||||
|
lockIcon.tooltip({title: 'Unlock Store'});
|
||||||
|
lockIcon.tooltip('show');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
lockIcon.attr({ 'src': '../icon/unlock.svg', 'title': 'Lock store' });
|
||||||
|
lockIcon.tooltip('dispose');
|
||||||
|
lockIcon.tooltip({title: 'Lock Store'});
|
||||||
|
lockIcon.tooltip('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
this.selector.find('.editStoreName').one('click', ev => { this.editNameFn(ev); });
|
this.selector.find('.editStoreName').one('click', ev => { this.editNameFn(ev); });
|
||||||
|
|
||||||
this.selector.find('.removeStore').on('click', ev => {
|
this.selector.find('.removeStore').on('click', ev => {
|
||||||
|
@ -64,6 +85,22 @@ class Store {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
lockStore(){
|
||||||
|
if(this.state === "unlocked"){
|
||||||
|
this.state = "locked";
|
||||||
|
this.selector.find('.itemAmountWrapper').slideUp(200);
|
||||||
|
this.selector.find('.addItemFormWrapper').slideUp(200);
|
||||||
|
// this.selector.find('.remItem').hide();
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state = "unlocked";
|
||||||
|
this.selector.find('.itemAmountWrapper').slideDown(200);
|
||||||
|
this.selector.find('.addItemFormWrapper').slideDown(200);
|
||||||
|
// this.selector.find('.remItem').show();
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
editNameFn(ev){
|
editNameFn(ev){
|
||||||
if(ev.type === 'click'){
|
if(ev.type === 'click'){
|
||||||
|
|
||||||
|
@ -141,17 +178,19 @@ class Store {
|
||||||
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 += " <span style='float: left;'>"+text+"</span>";
|
||||||
|
|
||||||
html += " <br><span class='' style='float: left; padding: 0 10px;'>";
|
html += " <span class='itemAmountWrapper' style='float: left; padding: 0 10px;'>";
|
||||||
html += " <div class='input-group'>";
|
html += " <div class='input-group'>";
|
||||||
html += " <button class='btn btn-outline-danger itemAmountBtn' 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 += " <input class='form-control itemAmount itemAmountBtn' type='number' value='"+amount+"' min='0' max='99' aria-label='Amount of item' >";
|
||||||
html += " <span class='input-group-text price' style='padding-left: 3px; font-size: 12px;text-align: right;'>x"+price.toFixed(2)+"</span>";
|
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 += " <button class='btn btn-outline-success itemAmountBtn' type='button'>+</button>";
|
||||||
html += " </div>";
|
html += " </div>";
|
||||||
html += " </span>";
|
html += " </span>";
|
||||||
|
|
||||||
html += " <div class='priceWrapper'><span class='price'>"+price.toFixed(2)+"</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='height: 20px; width: 20px; cursor: pointer;' tabindex='0' role='button'></div>";
|
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 += "</li>";
|
html += "</li>";
|
||||||
|
|
||||||
this.selector.find("ul").append(html);
|
this.selector.find("ul").append(html);
|
||||||
|
|
Loading…
Reference in New Issue