Update buttons for inventory checking on home strand

views/dashboardPage/controller.js

@@ -29,7 +29,7 @@ If ingredient doesn't exist, add it
 Inputs:
  Array of objects
      id: id of ingredient
-     quantityChange: change in quantity (optional)
+     quantityChange: change in quantity (if not removing)
      name: name of ingredient (only for new ingredient)
      category: category of ingredient (only for new ingredient)
      unit: unit of measurement (only for new ingredient)
@@ -57,7 +57,9 @@ let updateInventory = (ingredients, remove = false)=>{
         }
     }
 
+    console.log("updating");
     homeStrandObj.drawInventoryCheckCard();
+    console.log("still updating?");
     ingredientsStrandObj.populateByProperty("category");
     addIngredientsComp.isPopulated = false;
     closeSidebar();

views/dashboardPage/dashboard.css

@@ -116,7 +116,11 @@ body{
         cursor: pointer;
     }
 
-/* Cards */
+/* Home Strand */
+#homeStrand{
+    display: flex;
+}
+
 .card{
     margin: 0 15px;
     border: 1px solid rgba(183, 183, 183, 0.9);
@@ -136,11 +140,6 @@ body{
     text-align: center;
 }
 
-/* Home Strand */
-#homeStrand{
-    display: flex;
-}
-
 .flexRow{
     display: flex;
     justify-content: space-around;
@@ -187,7 +186,8 @@ body{
     display: flex;
     flex-direction: column;;
     justify-content: space-between;
-    flex-grow: 0.1;
+    flex-basis: 100px;
+    flex-grow: 1;
 }
 
     #inventoryCheckCard ul{
@@ -204,33 +204,77 @@ body{
         margin-right: 25px;
     }
 
-    #inventoryCheckCard li > p:nth-of-type(1){
-        width: 50%;
-    }
-
-    #inventoryCheckCard li input{
-        width: 75px;
-        margin-right: 25px;
-        font-size: 20px;
-        text-align: center;
-    }
-
     #inventoryCheckCard li p:nth-of-type(2){
         width: 25%;
         min-width: 75px;
     }
 
     #inventoryCheckCard button{
-        width: 150px;
-        text-align: center;
         margin-left: auto;
     }
 
+    .ingredientCheck p:first-of-type{
+        width: 33%;
+    }
+
+    .ingredientCheck p:last-of-type{
+        width: 33%
+    }
+
+    .numberInput{
+        display: flex;
+        justify-content: center;
+        width: 33%;
+        margin-right: 25px;
+    }
+
+        .numberInput button{
+            width: 30%;
+            font-size: 23px;
+            background: rgb(0, 27, 45);
+            border: none;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .numberInput button:first-of-type{
+            border-bottom-left-radius: 5px;
+            border-top-left-radius: 5px;
+        }
+
+        .numberInput button:last-of-type{
+            border-bottom-right-radius: 5px;
+            border-top-right-radius: 5px;
+        }
+
+        .numberInput input{
+            width: 40%;
+            font-size: 20px;
+            text-align: center;
+        }
+
+        .numberInput input::-webkit-outer-spin-button,
+        .numberInput input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        .numberInput input[type=number] {
+            -moz-appearance: textfield;
+        }
+
 #popularIngredientsCard{
     display: flex;
     flex-direction: column;
     align-items: center;
+    flex-basis: 100px;
+    flex-grow: 2.5;
+
 }
+    #popularCanvas{
+        margin: 0 35px;
+    }
 
     .notice{
         color: red;

views/dashboardPage/dashboard.ejs

@@ -51,6 +51,20 @@
                         <canvas id="popularCanvas"></canvas>
                     </div>
                 </div>
+
+                <template id="ingredientCheck">
+                    <li class="ingredientCheck flexRow">
+                        <p></p>
+
+                        <div class="numberInput">
+                            <button>-</button>
+                            <input type="number">
+                            <button>+</button>
+                        </div>
+                        
+                        <p></p>
+                    </li>
+                </template>
             </div>
 
             <div id="ingredientsStrand" class="strand">
@@ -58,7 +72,10 @@
                     <h1 class="strandTitle">Ingredient Inventory</h1>
 
                     <button class="button" onclick="addIngredientsComp.display()">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
                         add
                     </button>
                 </div>

views/dashboardPage/home.js

@@ -74,39 +74,34 @@ window.homeStrandObj = {
             num = 5;
         }
         let rands = [];
-            for(let i = 0; i < num; i++){
-                let rand = Math.floor(Math.random() * merchant.inventory.length);
+        for(let i = 0; i < num; i++){
+            let rand = Math.floor(Math.random() * merchant.inventory.length);
 
-                if(rands.includes(rand)){
-                    i--;
-                }else{
-                    rands[i] = rand;
-                }
+            if(rands.includes(rand)){
+                i--;
+            }else{
+                rands[i] = rand;
             }
+        }
 
-            let ul = document.querySelector("#inventoryCheckCard ul");
-            while(ul.children.length > 0){
-                ul.removeChild(ul.firstChild);
-            }
-            for(let i = 0; i < rands.length; i++){
-                let li = document.createElement("li");
-                li.classList = "flexRow";
-                li.ingredientIndex = rands[i];
-                ul.appendChild(li);
-
-                let name = document.createElement("p");
-                name.innerText = merchant.inventory[rands[i]].ingredient.name;
-                li.appendChild(name);
-
-                let input = document.createElement("input");
-                input.type = "number";
-                input.value = merchant.inventory[rands[i]].quantity;
-                li.appendChild(input);
-
-                let label = document.createElement("p");
-                label.innerText = merchant.inventory[rands[i]].ingredient.unit;
-                li.appendChild(label);
-            }
+        let ul = document.querySelector("#inventoryCheckCard ul");
+        let template = document.querySelector("#ingredientCheck").content.children[0];
+        while(ul.children.length > 0){
+            ul.removeChild(ul.firstChild);
+        }
+        for(let i = 0; i < rands.length; i++){
+            let ingredientCheck = template.cloneNode(true);
+            let input = ingredientCheck.children[1].children[1];
+
+            ingredientCheck.ingredientIndex = rands[i];
+            ingredientCheck.children[0].innerText = merchant.inventory[rands[i]].ingredient.name;
+            ingredientCheck.children[1].children[0].onclick = ()=>{input.value--};
+            input.value = merchant.inventory[rands[i]].quantity;
+            ingredientCheck.children[1].children[2].onclick = ()=>{input.value++}
+            ingredientCheck.children[2].innerText = merchant.inventory[rands[i]].ingredient.unit;
+
+            ul.appendChild(ingredientCheck);
+        }
     },
 
     drawPopularCard: function(){
@@ -199,15 +194,15 @@ window.homeStrandObj = {
     },
 
     submitInventoryCheck: function(){
-        let lis = document.querySelectorAll("#inventoryCheckCard ul li");
+        let lis = document.querySelectorAll("#inventoryCheckCard li");
 
         let changes = [];
 
         for(let i = 0; i < lis.length; i++){
-            if(lis[i].children[1].value >= 0){
+            if(lis[i].children[1].children[1].value >= 0){
                 let merchIngredient = merchant.inventory[lis[i].ingredientIndex];
 
-                let value = parseInt(lis[i].children[1].value);
+                let value = parseInt(lis[i].children[1].children[1].value);
 
                 if(value !== merchIngredient.quantity){
                     changes.push({