Update inventory check to work with bottles. Slight style change to popular ingredients

views/dashboardPage/bundle.js

@@ -1307,13 +1307,21 @@ let home = {
                 input.value--;
                 input.changed = true;
             };
-            input.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+            if(ingredient.ingredient.specialUnit === "bottle"){
+                input.value = (ingredient.quantity / ingredient.ingredient.unitSize).toFixed(2);
+                ingredientCheck.children[2].innerText = "BOTTLES";
+            }else{
+                input.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+                ingredientCheck.children[2].innerText = ingredient.ingredient.unit.toUpperCase();
+            }
+
+            
             ingredientCheck.children[1].children[2].onclick = ()=>{
                 input.value++;
                 input.changed = true;
             }
             input.onchange = ()=>{input.changed = true};
-            ingredientCheck.children[2].innerText = ingredient.ingredient.unit.toUpperCase();
+            
 
             ul.appendChild(ingredientCheck);
         }
@@ -1401,10 +1409,15 @@ let home = {
                 let merchIngredient = lis[i].ingredient;
 
                 if(lis[i].children[1].children[1].changed === true){
-                    let value = controller.convertToMain(merchIngredient.ingredient.unit, parseFloat(lis[i].children[1].children[1].value));
+                    let value = 0;
+                    if(merchIngredient.ingredient.specialUnit === "bottle"){
+                        value = parseFloat(lis[i].children[1].children[1].value) * merchIngredient.ingredient.unitSize;
+                    }else{
+                        value = controller.convertToMain(merchIngredient.ingredient.unit, parseFloat(lis[i].children[1].children[1].value));
+                    }
+                    
 
                     changes.push({
-                        id: merchIngredient.ingredient.id,
                         ingredient: merchIngredient.ingredient,
                         quantity: value
                     });

views/dashboardPage/dashboard.css

@@ -270,13 +270,13 @@ Home Strand
         }
 
         .ingredientCheck p:last-of-type{
-            width: 15%
+            width: 20%
         }
 
         .numberInput{
             display: flex;
             justify-content: center;
-            width: 45%;
+            width: 40%;
             margin-right: 25px;
         }
 
@@ -322,6 +322,8 @@ Home Strand
         align-items: center;
         flex-basis: 100px;
         flex-grow: 2.5;
+        padding: 5px;
+        box-sizing: border-box;
 
     }
         #popularCanvas{

views/dashboardPage/js/home.js

@@ -116,13 +116,21 @@ let home = {
                 input.value--;
                 input.changed = true;
             };
-            input.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+            if(ingredient.ingredient.specialUnit === "bottle"){
+                input.value = (ingredient.quantity / ingredient.ingredient.unitSize).toFixed(2);
+                ingredientCheck.children[2].innerText = "BOTTLES";
+            }else{
+                input.value = ingredient.ingredient.convert(ingredient.quantity).toFixed(2);
+                ingredientCheck.children[2].innerText = ingredient.ingredient.unit.toUpperCase();
+            }
+
+            
             ingredientCheck.children[1].children[2].onclick = ()=>{
                 input.value++;
                 input.changed = true;
             }
             input.onchange = ()=>{input.changed = true};
-            ingredientCheck.children[2].innerText = ingredient.ingredient.unit.toUpperCase();
+            
 
             ul.appendChild(ingredientCheck);
         }
@@ -210,10 +218,15 @@ let home = {
                 let merchIngredient = lis[i].ingredient;
 
                 if(lis[i].children[1].children[1].changed === true){
-                    let value = controller.convertToMain(merchIngredient.ingredient.unit, parseFloat(lis[i].children[1].children[1].value));
+                    let value = 0;
+                    if(merchIngredient.ingredient.specialUnit === "bottle"){
+                        value = parseFloat(lis[i].children[1].children[1].value) * merchIngredient.ingredient.unitSize;
+                    }else{
+                        value = controller.convertToMain(merchIngredient.ingredient.unit, parseFloat(lis[i].children[1].children[1].value));
+                    }
+                    
 
                     changes.push({
-                        id: merchIngredient.ingredient.id,
                         ingredient: merchIngredient.ingredient,
                         quantity: value
                     });