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;
|
||||
}
|
||||
|
||||
#stores .card-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.priceWrapper {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
|
@ -77,11 +81,29 @@ span.price::after {
|
|||
content: ' kr';
|
||||
}
|
||||
|
||||
body.dollars span.price::before {
|
||||
content: "$";
|
||||
}
|
||||
body.dollars span.price::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.subtotal {
|
||||
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 {
|
||||
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 {
|
||||
constructor(title, storeID) {
|
||||
this.items = [];
|
||||
this.state = 'unlocked'; // states: unlocked/locked
|
||||
|
||||
let storeNum = $(".store").length+1;
|
||||
this.title = title || "Store "+storeNum;
|
||||
|
|
@ -11,6 +12,7 @@ class Store {
|
|||
let html = "";
|
||||
html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
|
||||
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 += " <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' />";
|
||||
|
|
@ -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 += " <li class='list-group-item emptyList'>No items added</li>";
|
||||
html += " </ul>";
|
||||
html += " <hr>";
|
||||
|
||||
html += " <span class='addItemFormWrapper'>";
|
||||
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,6 +39,7 @@ class Store {
|
|||
html += " <input type='image' class='form-control addItem' src='../icon/plus.svg' alt='+'>";
|
||||
html += " </div>";
|
||||
html += " </form>";
|
||||
html += " </span>";
|
||||
|
||||
html += " </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('.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){
|
||||
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 += " <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 += " <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 += " <input class='form-control itemAmount itemAmountBtn' type='number' value='"+amount+"' min='0' max='99' aria-label='Amount of item' >";
|
||||
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 += " </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 += " <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='margin-right: 3px;' tabindex='0' role='button'></div>";
|
||||
html += "</li>";
|
||||
|
||||
this.selector.find("ul").append(html);
|
||||
|
|
|
|||
Loading…
Reference in New Issue