Update visual display of add ingredients sidebar

views/dashboardPage/sidebars/addIngredients.ejs

@@ -49,6 +49,40 @@
     <template id="addIngredientsIngredient">
         <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>
+            
             <button class="addButton">+</button>
         </div>
     </template>

views/dashboardPage/sidebars/sidebars.css

@@ -281,19 +281,19 @@ Add Ingredients
 
             .addIngredientsIngredient{
                 display: flex;
-                justify-content: left;
+                justify-content: space-between;
                 align-items: center;
                 margin: 5px;
             }
 
-                .addIngredientsIngredient > *:nth-child(2){
-                    margin-left: auto;
-                }
-
                 .addIngredientsIngredient input[type=number]{
                     width: 100px;
                 }
 
+                .addIngredientsIngredient select{
+                    width: 60px;
+                }
+
                 .addButton{
                     display: flex;
                     align-items: center;

views/dashboardPage/sidebars/sidebars.js

@@ -466,8 +466,7 @@ let addIngredientsComp = {
                         for(let i = 0; i < response.length; i++){
                             response[i] = {ingredient: response[i]}
                         }
-                        this.fakeMerchant = new Merchant(
-                            {
+                        this.fakeMerchant = new Merchant({
                                 name: "none",
                                 inventory: response,
                                 recipes: [],
@@ -513,7 +512,7 @@ let addIngredientsComp = {
             for(let j = 0; j < categories[i].ingredients.length; j++){
                 let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
                 ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                ingredientDiv.children[1].onclick = ()=>{this.addOne(ingredientDiv)};
+                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
                 ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
 
                 categoryDiv.children[1].appendChild(ingredientDiv);
@@ -555,20 +554,23 @@ let addIngredientsComp = {
         input.type = "number";
         input.min = "0";
         input.step = "0.01";
-        input.placeholder = element._unit;
+        input.placeholder = "QUANTITY";
         element.insertBefore(input, element.children[1]);
 
-        element.children[2].innerText = "-";
-        element.children[2].onclick = ()=>{this.removeOne(element)};
+        element.children[2].style.display = "block";
+
+        element.children[3].innerText = "-";
+        element.children[3].onclick = ()=>{this.removeOne(element)};
     },
 
     removeOne: function(element){
         element.parentElement.removeChild(element);
 
         element.removeChild(element.children[1]);
+        element.children[1].style.display = "none";
 
-        element.children[1].innerText = "+";
-        element.children[1].onclick = ()=>{this.addOne(element)};
+        element.children[2].innerText = "+";
+        element.children[2].onclick = ()=>{this.addOne(element)};
 
         if(document.getElementById("myIngredients").children.length === 0){
             document.getElementById("myIngredientsDiv").style.display = "none";