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

Housecleaning

master
Eirik Th S 2022-02-09 18:07:13 +01:00
parent de091bf3ab
commit 25b9ddb779
3 changed files with 115 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
www/css/index.css
View File

@ -4,7 +4,7 @@
--wsTop: env(safe-area-inset-top);
--wsBottom: constant(safe-area-inset-bottom);
--wsBottom: env(safe-area-inset-bottom);
--footerHeight: 72px; /* One line: 51px -> two lines 72px */
--footerHeight: 93px; /* One line: 51px -> two lines 72px */
}
html {
@ -116,10 +116,10 @@ span.recipeItemAmount::after {
}
.list-group-item:focus-within .itemAmountButtons,
.list-group-item:hover .itemAmountButtons
.list-group-item:focus-within .itemButtons,
.list-group-item:hover .itemButtons
{
height: 35px;
height: 45px;
}
ul.storePlanState .list-group-item:focus-within .itemAmountText,
ul.storePlanState .list-group-item:hover .itemAmountText
@ -128,14 +128,14 @@ ul.storePlanState .list-group-item:hover .itemAmountText
overflow: hidden;
}
.itemAmountButtons {
.itemButtons {
transition: height 400ms;
overflow: hidden;
height: 0;
width: 100%;
}
@media (prefers-reduced-motion) {
.itemAmountButtons, .itemAmountText {
.itemButtons, .itemAmountText {
transition: none;
}
}
@ -143,7 +143,7 @@ ul.storePlanState .list-group-item:hover .itemAmountText
font-size: 0.9rem;
}
ul.storePlanState .itemAmountText {
height: 35px;
height: 45px;
transition: height 400ms;
}
.itemAmount.itemAmountBtn {

37
www/plan/htmlElements.js
View File

@ -54,6 +54,41 @@ class HtmlElements {
" </div>\n" +
// " <div class='itemSearchDropdown' style='display: none;'><ul></ul></div>\n" +
" </form>\n" +
"</span>"
"</span>",
editItemSection: async function (){
let html =
"<div class='p-3'>\n" +
" <input type='text' class='form-control'><br>\n" +
" <select class='form-select'>\n";
let productGroups = await getProductGroups();
for(const productGroupId in productGroups){
const productGroup = productGroups[productGroupId];
html += " <option>"+productGroup.name+"</option>\n";
}
html +=
" </select>\n" +
"</div>\n";
return html;
}
}
}
let productGroupCache;
async function getProductGroups(){
if(!productGroupCache){
await $.getJSON('/api/v1/product/groups', json => {
productGroupCache = json.data;
console.log(json);
});
}
return productGroupCache;
}

88
www/plan/plan.js
View File

@ -29,8 +29,18 @@ class Store {
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-header'>"+this.title+"</div>";
html += " <div class='card-body'>";
html += " <ul class='list-group list-group-flush storeItems dragHolder'>";
html += " <div class='card-body' tabindex='-1'>";
html += HtmlElements.store.editStoreSection(this.title);
//
// html += " <div class='archiveSection' style='"+(this.state === 'closed'?'':'display: none; ')+"padding: 10px;'>";
// html += " <button class='btn btn-primary mb-1'>Archive all checked items</button>";
// html += " <button class='btn btn-secondary mb-1'>Archive all items</button>";
// html += " <button class='btn btn-secondary'>Take a picture of the receipt</button>";
// html += " </div>";
html += " <ul class='list-group list-group-flush storeItems dragHolder' data-storeid='"+this.storeID+"'>";
html += " <li class='list-group-item emptyList'>No items added</li>";
// html += " <li class='list-group-item draggable' data-itemid='0' data-storeid='"+this.storeID+"' style='height: 10px; width: 100%;'></li>";
html += " </ul>";
@ -144,6 +154,38 @@ class Store {
});*/
}
toggleEditStore(set){
set = set || "toggle";
if(set === "toggle"){
if(typeof this.editStoreState === "undefined" || this.editStoreState === "closed"){
set = "open";
}
else {
set = "close";
}
}
let cardBody = this.selector.find(".card-body");
let editStoreSection = this.selector.find(".editStoreSection");
let timer = slideTimer;
if(set === "open"){
cardBody.css({'height': cardBody.css('height'), 'min-height': '220px', "overflow": "hidden" });
editStoreSection.slideDown(timer);
$(document).one('click', () => { this.toggleEditStore('close'); });
this.selector.one('click', ev => { ev.stopPropagation(); });
this.selector.find('.editStoreForm').on('click', ev => { ev.stopPropagation(); });
this.editStoreState = "opened";
}
else {
editStoreSection.slideUp(timer, () => {
cardBody.css({'height': '', 'min-height': '', "overflow": '' });
});
this.editStoreState = "closed";
}
}
setState(state, animTime){
animTime = prefersReducedMotion?0:(animTime || 200);
let prevState = this.state;
@ -281,16 +323,19 @@ class Store {
" </div>" +
" </div>" +
" <span class='itemAmountWrapper' style='float: left; padding: 5px 10px;'>" +
" <div class='input-group itemAmountButtons' style='"+(this.state !== "planning" || checked?"display: none;":'')+"'>" +
" <span class='itemAmountWrapper' style=''>" +
" <div class='itemButtons' style=''>" +
" <div class='input-group itemAmountButtons' style='width: fit-content; max-width: 80%; float: left; padding: 5px 10px;"+(this.state !== "planning" || checked?"display: none;":'')+"'>" +
// " <div class='' style='float: left;'>" +
" <button class='btn btn-outline-danger itemAmountBtn' type='button'>-</button>" +
" <input class='form-control itemAmount itemAmountBtn' type='number' value='"+amount+"' min='0' max='99' aria-label='Amount of item' >" +
(price !== 0?" <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>":"") +
" <button class='btn btn-outline-success itemAmountBtn' type='button'>+</button>" +
// " </div>" +
" </div>" +
// " <button class='btn btn-secondary' style='float: right;'>Save</button>" +
" </div>" +
// " <div class='itemAmountText "+(amount <= 1?"oneItem":"")+"' "+(this.state !== "shopping" || !checked?"style='display: none;'":'')+">" +
" <div class='itemAmountText "+(amount <= 1?"oneItem":"")+"' "+(amount <= 1?"style='display: none;'":'')+">" +
" Amount: <span class='itemAmount' style='padding-left: 10px;'>"+amount+"</span>x " +
@ -426,7 +471,7 @@ class Store {
// BIND add/remove item amount
let that = this;
this.selector.find('.itemAmountBtn').off().on('click change', function(e){
let itemid = $(this).parent().parent().parent().attr('data-itemid');
let itemid = $(this).parent().parent().parent().parent().attr('data-itemid');
let amountElem = $(this).parent().find('.itemAmount');
let newValue = Number(amountElem.val());
@ -441,7 +486,7 @@ class Store {
amountElem.val(newValue);
that.setItemAmount(itemid, newValue);
let textAmountElem = $(this).parent().parent().find('.itemAmountText');
let textAmountElem = $(this).parent().parent().parent().find('.itemAmountText');
textAmountElem.find('.itemAmount').html(newValue);
if(newValue === 1){
@ -455,6 +500,20 @@ class Store {
}
});
//
this.selector.find('.editItemBtn').off().on('click', async ev => {
const clickedElem = $(ev.currentTarget);
let editItemSectionHtml = await HtmlElements.store.editItemSection();
let editItemSection = $(editItemSectionHtml);
editItemSection.insertAfter(clickedElem);
// Keep element open
clickedElem.parent().css('height', editItemSection.css('height'));
clickedElem.parent().parent().find('.itemAmountText').hide();
});
// DRAGGABLE
// this.draggingClass.update();
/*let draggingObj = null, dragPos = null;
@ -570,11 +629,12 @@ class Store {
}
}
var stores = [];
let stores = [];
$("#stores").html("");
$("#refreshAll").on('click', ev => {
$("#stores").css('height', $("#stores").height());
let storesElem = $("#stores");
storesElem.css('height', storesElem.height());
$(".tooltip").remove();
$(".elemHolder").remove();
getStores(spaceID).done(json => { $("#stores").css('height', ''); });
@ -688,17 +748,13 @@ function ajaxReq( data ){
dataType: 'JSON'
})
.done(json => {
if(handleJsonErrors(json)){
return false;
}
return true;
return !handleJsonErrors(json);
})
.fail(handleAjaxErrors);
}
function handleJsonErrors(json){
if(typeof json.status != "undefined" && json.status != 0){
if(typeof json.status != "undefined" && json.status !== 0){
if(json.message === "Not logged in"){
location.href = '../login.php';
}
@ -711,7 +767,7 @@ function handleJsonErrors(json){
return false;
}
function handleAjaxErrors(jqxhr, textStatus, error){
if(textStatus === "parsererror" && jqxhr.responseText != ""){
if(textStatus === "parsererror" && jqxhr.responseText !== ""){
alert("An error occured:\n"+jqxhr.responseText);
}
else {