Use buttons to change units for an ingredient

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -33,10 +33,6 @@
         <input id="ingredientInput" type="number" min="0" step="0.01" style="display: none;">
     </label>
 
-    <label>CHANGE UNITS:
-        <select id="unitChanger"></select>
-    </label>
-
     <div class="lineBorder"></div>
 
     <label>AVERAGE DAILY USE (30 DAYS)
@@ -49,5 +45,11 @@
         <ul id="ingredientRecipeList"></ul>
     </label>
 
+    <div class="lineBorder"></div>
+
+    <label>DISPLAY UNIT:</label>
+
+    <div id="ingredientButtons" class="ingredientButtons"></div>
+
     <button id="editSubmitButton" class="button" onclick="ingredientDetailsComp.editSubmit()" style="display: none;">SAVE CHANGES</button>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -340,6 +340,25 @@ Ingredient Details
         padding: 10px;
     }
 
+    .unitButton{
+        margin: 5px;
+        padding: 5px;
+        background: none;
+        border: 1px solid black;
+        font-size: 25px;
+        cursor: pointer;
+        border-radius: 5px;
+    }
+
+        .unitButton:hover{
+            background: rgb(0, 27, 45);
+            color: white;
+        }
+
+        .unitActive{
+            background: rgb(255, 99, 107);
+        }
+
 /* 
 Recipe Details 
 */

views/dashboardPage/sidebars/sidebars.js

@@ -649,20 +649,6 @@ let ingredientDetailsComp = {
         let ingredientInput = document.getElementById("ingredientInput");
         ingredientInput.value = ingredient.quantity;
         ingredientInput.style.display = "none";
-        document.getElementById("ingredientRecipeList").style.display = "none"
-
-        let select = document.getElementById("unitChanger");
-        select.onchange = ()=>{this.ingredient.ingredient.convert(select.value)};
-        while(select.children.length > 0){
-            select.removeChild(select.firstChild);
-        }
-        let units = merchant.units[this.ingredient.ingredient.unitType];
-        for(let i = 0; i < units.length; i++){
-            let option = document.createElement("option");
-            option.innerText = units[i].toUpperCase();
-            option.value = units[i];
-            select.appendChild(option);
-        }
 
         let quantities = [];
         let now = new Date();
@@ -700,6 +686,23 @@ let ingredientDetailsComp = {
             ul.appendChild(li);
         }
 
+        let ingredientButtons = document.getElementById("ingredientButtons");
+        let units = merchant.units[this.ingredient.ingredient.unitType];
+        while(ingredientButtons.children.length > 0){
+            ingredientButtons.removeChild(ingredientButtons.firstChild);
+        }
+        for(let i = 0; i < units.length; i++){
+            let button = document.createElement("button");
+            button.classList.add("unitButton");
+            button.innerText = units[i].toUpperCase();
+            button.onclick = ()=>{this.changeUnit(button, units[i])};
+            ingredientButtons.appendChild(button);
+
+            if(units[i] === this.ingredient.ingredient.unit){
+                button.classList.add("unitActive");
+            }
+        }
+
         openSidebar(sidebar);
     },
 
@@ -774,6 +777,19 @@ let ingredientDetailsComp = {
                     loader.style.display = "none";
                 });
         }
+    },
+
+    changeUnit: function(newActive, unit){
+        this.ingredient.ingredient.convert(unit);
+
+        let ingredientButtons = document.querySelectorAll(".unitButton");
+        for(let i = 0; i < ingredientButtons.length; i++){
+            console.log(ingredientButtons[i]);
+            ingredientButtons[i].classList.remove("unitActive");
+        }
+
+        console.log(newActive);
+        newActive.classList.add("unitActive");
     }
 }