From 8a656b93e1fb28020c97bea8b4e9c12ea24d7967 Mon Sep 17 00:00:00 2001 From: Eirik Th S Date: Sat, 5 Jun 2021 17:31:34 +0200 Subject: [PATCH] List states --- css/index.css | 12 ++++++ icon/basket2.svg | 4 ++ icon/check-all.svg | 3 ++ icon/list-check.svg | 3 ++ plan/do.php | 26 ++++++++++++ plan/plan.js | 101 +++++++++++++++++++++++++++++++++++--------- webdata/setup.php | 1 + 7 files changed, 130 insertions(+), 20 deletions(-) create mode 100644 icon/basket2.svg create mode 100644 icon/check-all.svg create mode 100644 icon/list-check.svg diff --git a/css/index.css b/css/index.css index e606a71..c10ce37 100644 --- a/css/index.css +++ b/css/index.css @@ -51,6 +51,15 @@ body { height: 20px; width: 20px; } +.iconWrapper .page-link { + padding: 0.35rem 0.4rem; +} +.iconWrapper li img { + margin: 0; +} +.iconWrapper li.active img { + filter: invert(100%); +} .card-columns .card { display: inline-block; @@ -96,6 +105,9 @@ body.dollars span.price::after { .itemAmountWrapper { clear: both; } +.itemAmountText { + font-size: 0.9rem; +} .itemAmount.itemAmountBtn { -webkit-appearance: none; -moz-appearance: textfield; diff --git a/icon/basket2.svg b/icon/basket2.svg new file mode 100644 index 0000000..8f60297 --- /dev/null +++ b/icon/basket2.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/icon/check-all.svg b/icon/check-all.svg new file mode 100644 index 0000000..ae42900 --- /dev/null +++ b/icon/check-all.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icon/list-check.svg b/icon/list-check.svg new file mode 100644 index 0000000..dcce4b6 --- /dev/null +++ b/icon/list-check.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plan/do.php b/plan/do.php index 460ca45..0c958e5 100644 --- a/plan/do.php +++ b/plan/do.php @@ -142,6 +142,19 @@ if(!empty($data) && isset($user_id)){ returns($db->error,1); } + else if($data['plan'] == "setState"){ + + if(($temp = checkArgs(array("storeID"=>@$data['storeID'], "state"=>@$data['state']))) !== true){ + returns("Missing a value: $temp", 1); + } + + if( setState($data['storeID'], $data['state']) ){ + returns(); + } + + returns($db->error, 1); + } + else if($data['plan'] == 'spaces'){ $spaces = []; $getOwnedSpacesSQL = "SELECT space_id, space_name, owner_id userid FROM plan_space s WHERE s.owner_id = $user_id;"; @@ -418,3 +431,16 @@ function setItemAmount($storeID, $itemID, $newAmount = 1){ return false; } + +function setState($storeID, $newState){ + global $db, $spaceID; + + $verifyUserOwnershipSQL = "SELECT `plan_store_id` FROM plan_store WHERE `space_id` = '$spaceID' AND `plan_store_id` = '$storeID'"; + $setStateSQL = "UPDATE plan_store SET state = '$newState' WHERE plan_store_id = ($verifyUserOwnershipSQL);"; + + if($db->query($setStateSQL)){ + return true; + } + + return false; +} \ No newline at end of file diff --git a/plan/plan.js b/plan/plan.js index 25f2168..ad6e752 100644 --- a/plan/plan.js +++ b/plan/plan.js @@ -1,9 +1,9 @@ /*jshint sub:true, esversion: 6, -W083 */ class Store { - constructor(title, storeID) { + constructor(title, storeID, state) { this.items = []; - this.state = 'unlocked'; // states: unlocked/locked + this.state = state || 'planning'; // states: planning/shopping/closed let storeNum = $(".store").length+1; this.title = title || "Store "+storeNum; @@ -12,13 +12,20 @@ class Store { let html = ""; html += "
"; html += "
"+this.title+"
"; - html += "
Lock the store
"; + html += "
"; + html += " "; + html += "
"; html += "
"; html += " edit name"; + // html += " sort items"; html += " remove store"; html += "
"; html += "
"; - html += "
    "; + html += "
      "; html += "
    • No items added
      • "; html += "
    "; @@ -57,6 +64,25 @@ class Store { }); + this.selector.find('.iconWrapper .page-item').on('click', ev=>{ + console.log(ev); + + this.selector.find('.page-item.active').removeClass('active'); + + $(ev.currentTarget).addClass('active'); + + if($(ev.currentTarget).hasClass('planningState')){ + this.setState('planning'); + } + else if($(ev.currentTarget).hasClass('shoppingState')){ + this.setState('shopping'); + } + else if($(ev.currentTarget).hasClass('closedState')){ + this.setState('closed'); + } + + }); + /** this.selector.find('.lockStore').tooltip({title: 'Lock Store'}); this.selector.find('.lockStore').on('click', ev => { let lockIcon = $(ev.target); @@ -72,7 +98,7 @@ class Store { lockIcon.tooltip({title: 'Lock Store'}); lockIcon.tooltip('show'); } - }); + });*/ this.selector.find('.editStoreName').one('click', ev => { this.editNameFn(ev); }); @@ -86,21 +112,39 @@ 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(); + if(this.state === "planning"){ + this.setState("shopping"); return 1; } - - this.state = "unlocked"; - this.selector.find('.itemAmountWrapper').slideDown(200); - this.selector.find('.addItemFormWrapper').slideDown(200); - // this.selector.find('.remItem').show(); + this.setState("planning"); return 0; } + setState(state){ + switch (state){ + case "planning": + this.state = "planning"; + this.selector.find('.itemAmountButtons').slideDown(200); + this.selector.find('.itemAmountText').slideUp(200); + this.selector.find('.addItemFormWrapper').slideDown(200); + + break; + + case "shopping": + this.state = "shopping"; + this.selector.find('.itemAmountButtons').slideUp(200); + this.selector.find('.itemAmountText:not(.oneItem)').slideDown(200); + this.selector.find('.addItemFormWrapper').slideUp(200); + break; + + case "closed": + this.state = "closed"; + break; + } + + ajaxReq({ plan: 'setState', storeID: this.storeID, state: this.state }); + } + editNameFn(ev){ if(ev.type === 'click'){ @@ -178,8 +222,11 @@ class Store { html += "
  • "; html += " "+text+""; + html += "
    "+(price*amount).toFixed(2)+""; + html += "Remove item
    "; + html += " "; - html += "
    "; + html += "
    "; html += " "; html += " "; if(price !== 0) { @@ -187,13 +234,14 @@ class Store { } html += " "; html += "
    "; + html += " "; html += " "; - html += "
    "+(price*amount).toFixed(2)+""; - html += "Remove item
    "; html += "
    • "; - this.selector.find("ul").append(html); + this.selector.find("ul.storeItems").append(html); this.selector.find(".emptyList").hide(); this.verify(); return true; @@ -207,12 +255,15 @@ class Store { remItem(pos, itemID, price){ let that = this; - + + if(this.state === "planning"){ + return ajaxReq({ plan: 'remItem', storeID: this.storeID, itemID: itemID, price: price }) .done(json => { // console.log("remItem return:", json); return that.remItemHtml(itemID); }); + } } remItemHtml(itemID){ @@ -288,6 +339,16 @@ class Store { if(newValue > 0 && newValue < 100){ amountElem.val(newValue); that.setItemAmount(itemid, newValue); + + let textAmountElem = $(this).parent().parent().find('.itemAmountText'); + textAmountElem.find('.itemAmount').html(newValue); + + if(newValue === 1){ + textAmountElem.addClass('oneItem'); + } + else { + textAmountElem.removeClass('oneItem'); + } } }); diff --git a/webdata/setup.php b/webdata/setup.php index d7ed942..cba77c2 100644 --- a/webdata/setup.php +++ b/webdata/setup.php @@ -41,6 +41,7 @@ CREATE OR REPLACE TABLE plan_store ( `space_id` INT NOT NULL, `name` varchar(100) NOT NULL, `created` DATETIME default current_timestamp() NOT NULL, + `state` ENUM('planning', 'shopping', 'closed') default 'planning', PRIMARY KEY (plan_store_id), CONSTRAINT plan_store_user_FK FOREIGN KEY (`space_id`) REFERENCES `plan_space`(`space_id`) ) DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;