Update ingredient details edit to display bottle size when needed

views/dashboardPage/bundle.js

@@ -1616,6 +1616,29 @@ let ingredientDetails = {
         for(let i = 0; i < remove.length; i++){
             remove[i].style.display = "none";
         }
+
+        if(this.ingredient.ingredient.specialUnit === "bottle"){
+            const mainDiv = document.getElementById("ingredientDetails");
+            const displayUnits = document.getElementById("displayUnitLabel");
+
+            let label = document.createElement("label");
+            label.innerText = `BOTTLE SIZE (${this.ingredient.ingredient.unit})`;
+            mainDiv.insertBefore(label, displayUnits);
+
+            const convQuant = this.ingredient.ingredient.convert(this.ingredient.ingredient.unitSize.toUpperCase());
+
+            let input = document.createElement("input");
+            input.type = "number";
+            input.value = convQuant.toFixed(2);
+            input.id = "ingredientUnitSizeIn";
+            input.min = "0";
+            input.step = "0.01";
+            label.appendChild(input);
+
+            let border = document.createElement("div");
+            border.classList.add("lineBorder");
+            mainDiv.insertBefore(border, displayUnits);
+        }
     },
 
     editSubmit: function(){

views/dashboardPage/js/ingredientDetails.js

@@ -149,6 +149,29 @@ let ingredientDetails = {
         for(let i = 0; i < remove.length; i++){
             remove[i].style.display = "none";
         }
+
+        if(this.ingredient.ingredient.specialUnit === "bottle"){
+            const mainDiv = document.getElementById("ingredientDetails");
+            const displayUnits = document.getElementById("displayUnitLabel");
+
+            let label = document.createElement("label");
+            label.innerText = `BOTTLE SIZE (${this.ingredient.ingredient.unit})`;
+            mainDiv.insertBefore(label, displayUnits);
+
+            const convQuant = this.ingredient.ingredient.convert(this.ingredient.ingredient.unitSize.toUpperCase());
+
+            let input = document.createElement("input");
+            input.type = "number";
+            input.value = convQuant.toFixed(2);
+            input.id = "ingredientUnitSizeIn";
+            input.min = "0";
+            input.step = "0.01";
+            label.appendChild(input);
+
+            let border = document.createElement("div");
+            border.classList.add("lineBorder");
+            mainDiv.insertBefore(border, displayUnits);
+        }
     },
 
     editSubmit: function(){

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -49,6 +49,7 @@
 
     <ul id="ingredientRecipeList" class="editRemove"></ul>
 
+
     <label class="editAdd" id="displayUnitLabel" style="display: none">DISPLAY UNIT:</label>
 
     <div class="editAdd" id="ingredientButtons" style="display: none"></div>

views/dashboardPage/sidebars/sidebars.css

@@ -224,6 +224,9 @@ Ingredient Details
     }
 
     #ingredientDetails label{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         font-size: 20px;
         text-align: center;
         margin: 0;