From 86b00423e1369e9c1922f32aa667facda6ea645c Mon Sep 17 00:00:00 2001
From: Eirik Th S <eirik@flowtivity.io>
Date: Tue, 25 May 2021 21:25:44 +0200
Subject: [PATCH] Lock 'stores' for editing and: + Fix prices not being updated
 on load + Some general improvements

---
 css/index.css   | 22 +++++++++++++++++++++
 icon/lock.svg   |  3 +++
 icon/unlock.svg |  3 +++
 plan/plan.js    | 51 +++++++++++++++++++++++++++++++++++++++++++------
 4 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 icon/lock.svg
 create mode 100644 icon/unlock.svg

diff --git a/css/index.css b/css/index.css
index 3ca5740..e606a71 100644
--- a/css/index.css
+++ b/css/index.css
@@ -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;
 }
diff --git a/icon/lock.svg b/icon/lock.svg
new file mode 100644
index 0000000..b50a68e
--- /dev/null
+++ b/icon/lock.svg
@@ -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>
\ No newline at end of file
diff --git a/icon/unlock.svg b/icon/unlock.svg
new file mode 100644
index 0000000..8eb0925
--- /dev/null
+++ b/icon/unlock.svg
@@ -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>
\ No newline at end of file
diff --git a/plan/plan.js b/plan/plan.js
index ecf1e8b..25f2168 100644
--- a/plan/plan.js
+++ b/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);