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

Confirm click to remove item, and WIP amount change

master
Eirik Th S 2021-04-21 11:16:48 +02:00
parent 2524f6ac3d
commit 09fee09a67
4 changed files with 157 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/index.css
View File

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

4
icon/dash-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 298 B

31
login.php Normal file
View File

@ -0,0 +1,31 @@
<?php require 'webdata/init.php'; ?><!DOCTYPE html>
<html lang="en">
<head>
<?=getHtmlHeaders();?>
<title>Login - Grocery Assist</title>
</head>
<body id='plan'>
<?php include 'webdata/navbar.php'; ?>
<div class='container-sm'>
<h1 class="headline text-center">Login</h1>
<form action="#" method="POST">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
</form>
</div>
</body>
</html>

114
plan/plan.js
View File

@ -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("<li class='list-group-item'><span>"+text+"</span><span class='price'>"+price.toFixed(2)+" kr <button class='remItem' data-price='"+price+"' data-toggle='tooltip' title='Remove item' style='background: url(../icon/dash.svg); height: 20px; width: 20px;'></button></span></li>");
this.items.push({ text: text, amount: amount, price: price });
let html = "\n";
html += "<li class='list-group-item'>";
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 += " </div>";
html += " </span>";
*/
html += " <span class='price'>"+price.toFixed(2)+" kr ";
// html += "<button class='remItem' data-price='"+price+"' data-toggle='tooltip' title='Remove item' style='background: url(../icon/dash.svg); height: 20px; width: 20px;'></button></span>";
html += "<img src='../icon/dash-circle.svg' alt='Remove item' class='remItem' data-price='"+price+"' style='height: 20px; width: 20px; cursor: pointer;'></span>";
html += "</li>";
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("");