Fix another bug where you could select the wrong unit type for an added ingredient

views/dashboardPage/Merchant.js

@@ -566,7 +566,6 @@ class Merchant{
 
 let convertToMain = (unit, quantity)=>{
     let converted = 0;
-    console.log(unit);
 
     if(merchant.units.mass.includes(unit)){
         switch(unit){

views/dashboardPage/sidebars/addIngredients.ejs

@@ -50,38 +50,7 @@
         <div class="addIngredientsIngredient">
             <p></p>
 
-            <select id="addUnitSelector" style="display: none;">
-                <optgroup label="MASS/WEIGHT">
-                    <option type="mass" value="g">G</option>
-                    <option type="mass" value="kg">KG</option>
-                    <option type="mass" value="oz">OZ</option>
-                    <option type="mass" value="lb">LB</option>
-                </optgroup>
-    
-                <optgroup label="VOLUME">
-                    <option type="volume" value="ml">ML</option>
-                    <option type="volume" value="l">L</option>
-                    <option type="volume" value="tsp">TSP</option>
-                    <option type="volume" value="tbsp">TBSP</option>
-                    <option type="volume" value="ozfl">OZ. FL</option>
-                    <option type="volume" value="cup">CUP</option>
-                    <option type="volume" value="pt">PT</option>
-                    <option type="volume" value="qt">QT</option>
-                    <option type="volume" value="gal">GAL</option>
-                </optgroup>
-    
-                <optgroup label="LENGTH">
-                    <option type="length" value="mm">MM</option>
-                    <option type="length" value="cm">CM</option>
-                    <option type="length" value="m">M</option>
-                    <option type="length" value="in">IN</option>
-                    <option type="length" value="ft">FT</option>
-                </optgroup>
-    
-                <optgroup label="OTHER">
-                    <option value="count">count</option>
-                </optgroup>
-            </select>
+            <select style="display: none;"></select>
             
             <button class="addButton">+</button>
         </div>

views/dashboardPage/sidebars/sidebars.js

@@ -518,6 +518,11 @@ let addIngredientsComp = {
                 categoryDiv.children[1].appendChild(ingredientDiv);
             }
         }
+
+        let myIngredients = document.getElementById("myIngredients");
+        while(myIngredients.children.length > 0){
+            myIngredients.removeChild(myIngredients.firstChild);
+        }
     },
 
     toggleAddIngredient: function(categoryElement){
@@ -557,7 +562,18 @@ let addIngredientsComp = {
         input.placeholder = "QUANTITY";
         element.insertBefore(input, element.children[1]);
 
-        element.children[2].style.display = "block";
+        let select = element.children[2];
+        console.log(select.style.display);
+        select.style.display = "block";
+        console.log(select.style.display);
+        let units = merchant.units[element.ingredient.unitType];
+        for(let i = 0; i < units.length; i++){
+            let option = document.createElement("option");
+            option.innerText = units[i].toUpperCase();
+            option.type = element.ingredient.unitType;
+            option.value = units[i];
+            select.appendChild(option);
+        }
 
         element.children[3].innerText = "-";
         element.children[3].onclick = ()=>{this.removeOne(element)};
@@ -567,7 +583,12 @@ let addIngredientsComp = {
         element.parentElement.removeChild(element);
 
         element.removeChild(element.children[1]);
-        element.children[1].style.display = "none";
+
+        let select = element.children[1];
+        while(select.children.length > 0){
+            select.removeChild(select.firstChild);
+        }
+        select.style.display = "none";
 
         element.children[2].innerText = "+";
         element.children[2].onclick = ()=>{this.addOne(element)};