Update the creation of bottle ingredients for better display

views/dashboardPage/bundle.js

@@ -1834,8 +1834,11 @@ let newIngredient = {
 
     unitChange: function(){
         const select = document.getElementById("unitSelector");
+        const bottleLabel = document.getElementById("bottleSizeLabel");
         if(select.value === "bottle"){
-            document.getElementById("bottleSizeLabel").style.display = "block";
+            bottleLabel.style.display = "block";
+        }else{
+            bottleLabel.style.display = "none";
         }
     },
 
@@ -1855,10 +1858,15 @@ let newIngredient = {
             defaultUnit: unit
         }
 
-        if(unitSelector.value = "bottle"){
-            newIngredient.ingredient.bottleSize = document.getElementById("bottleSize").value;
-        }
+        if(unit === "bottle"){
+            const bottleUnit = document.getElementById("bottleUnits").value;
+            const bottleSize = controller.convertToMain(bottleUnit, document.getElementById("bottleSize").value);
 
+            newIngredient.ingredient.unitType = "volume";
+            newIngredient.ingredient.bottleSize = bottleSize;
+            newIngredient.defaultUnit = bottleUnit;
+        }
+    
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 

views/dashboardPage/js/newIngredient.js

@@ -10,8 +10,11 @@ let newIngredient = {
 
     unitChange: function(){
         const select = document.getElementById("unitSelector");
+        const bottleLabel = document.getElementById("bottleSizeLabel");
         if(select.value === "bottle"){
-            document.getElementById("bottleSizeLabel").style.display = "block";
+            bottleLabel.style.display = "block";
+        }else{
+            bottleLabel.style.display = "none";
         }
     },
 
@@ -31,10 +34,15 @@ let newIngredient = {
             defaultUnit: unit
         }
 
-        if(unitSelector.value = "bottle"){
-            newIngredient.ingredient.bottleSize = document.getElementById("bottleSize").value;
-        }
+        if(unit === "bottle"){
+            const bottleUnit = document.getElementById("bottleUnits").value;
+            const bottleSize = controller.convertToMain(bottleUnit, document.getElementById("bottleSize").value);
 
+            newIngredient.ingredient.unitType = "volume";
+            newIngredient.ingredient.bottleSize = bottleSize;
+            newIngredient.defaultUnit = bottleUnit;
+        }
+    
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 

views/dashboardPage/sidebars/newIngredient.ejs

@@ -22,10 +22,6 @@
         <input id="newIngQuantity" type="number" min="0" step="0.01">
     </label>
 
-    <label id="bottleSizeLabel" style="display: none">BOTTLE SIZE(LITERS):
-        <input id="bottleSize" type="number" min="0" step="0.01">
-    </label>
-
     <label>UNIT:
         <select id="unitSelector">
             <optgroup label="MASS/WEIGHT">
@@ -62,5 +58,20 @@
         </select>
     </label>
 
+    <label id="bottleSizeLabel" style="display: none">BOTTLE SIZE:
+        <input id="bottleSize" type="number" min="0" step="0.01">
+        <select id="bottleUnits">
+            <option value="ml">ML</option>
+            <option value="l">L</option>
+            <option value="tsp">TSP</option>
+            <option value="tbsp">TBSP</option>
+            <option value="ozfl">OZ. FL</option>
+            <option value="cup">CUP</option>
+            <option value="pt">PT</option>
+            <option value="qt">QT</option>
+            <option value="gal">GAL</option>
+        </select>
+    </label>
+
     <button id="submitNewIng" class="button">CREATE</button>
 </div>