Add ability to update conversions for an ingredient.

views/dashboardPage/ejs/sidebars/editIngredient.ejs

@@ -31,6 +31,67 @@
 
     <div class="lineBorder"></div>
 
+    <h3>CONVERSIONS</h3>
+
+    <div id="editIngMass" class="converterBox" stye="display:none">
+        <input type="number" min="0" step="0.01" value="1">
+
+        <h4></h4>
+
+        <p>=</p>
+
+        <input type="number" min="0" step="0.01">
+
+        <select>
+            <option value="g">G</option>
+            <option value="kg">KG</option>
+            <option value="oz">OZ</option>
+            <option value="lb">LB</option>
+        </select>
+    </div>
+
+    <div id="editIngVolume" class="converterBox" stye="display:none">
+        <input type="number" min="0" step="0.01" value="1">
+
+        <h4></h4>
+
+        <p>=</p>
+
+        <input type="number" min="0" step="0.01">
+
+        <select>
+            <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>
+    </div>
+
+    <div id="editIngLength" class="converterBox" stye="display:none">
+        <input type="number" min="0" step="0.01" value="1">
+
+        <h4></h4>
+
+        <p>=</p>
+
+        <input type="number" min="0" step="0.01">
+
+        <select>
+            <option value="mm">MM</option>
+            <option value="cm">CM</option>
+            <option value="m">M</option>
+            <option value="in">IN</option>
+            <option value="ft">FT</option>
+        </select>
+    </div>
+
+    <div class="lineBorder"></div>
+
     <button id="editIngSubmit" class="sidebarButton">SUBMIT</button>
 
     <div class="lineBorder"></div>

views/dashboardPage/js/dashboard.js

@@ -401,6 +401,7 @@ controller = {
         }
     },
 
+    //TOREMOVE
     displayUnit(quantity, unit){
         switch(unit){
             case "g": return quantity;

views/dashboardPage/js/sidebars/editIngredient.js

@@ -44,7 +44,38 @@ let editIngredient = {
             button.onclick = ()=>{this.changeUnit(button)};
             buttonList.appendChild(button);
             
-            if(units[i] === ingredient.ingredient.unit) button.classList.add("unitActive");
+            if(units[i] === ingredient.unit) button.classList.add("unitActive");
+        }
+
+        //Offer conversions
+        let massDiv = document.getElementById("editIngMass");
+        let volumeDiv = document.getElementById("editIngVolume");
+        let lengthDiv = document.getElementById("editIngLength");
+
+        massDiv.children[1].innerText = ingredient.unit.toUpperCase();
+        massDiv.children[3].innerText = ingredient.ingredient.convert.toMass;
+
+        volumeDiv.children[1].innerText = ingredient.unit.toUpperCase();
+        volumeDiv.children[3].innerText = ingredient.ingredient.convert.toVolume;
+
+        lengthDiv.children[1].innerText = ingredient.unit.toUpperCase();
+        lengthDiv.children[3].innerText = ingredient.ingredient.convert.toLength;
+
+        switch(controller.getBaseUnit(ingredient.unit)){
+            case "g": 
+                massDiv.style.display = "none";
+                volumeDiv.style.display = "flex";
+                lengthDiv.style.display = "flex";
+                break;
+            case "l":
+                massDiv.style.display = "flex";
+                volumeDiv.style.display = "none";
+                lengthDiv.style.display = "flex";
+                break;
+            case "m":
+                massDiv.style.display = "flex";
+                volumeDiv.style.display = "flex";
+                lengthDiv.style.display = "none";
         }
 
         let quantInput = document.createElement("input");
@@ -64,21 +95,48 @@ let editIngredient = {
         }
 
         button.classList.add("unitActive");
+
+        document.getElementById("editIngMass").children[1].innerText = button.innerText;
+        document.getElementById("editIngVolume").children[1].innerText = button.innerText;
+        document.getElementById("editIngLength").children[1].innerText = button.innerText;
     },
 
     submit(ingredient){
         let quantity = parseFloat(document.getElementById("editIngQuantityLabel").children[0].value);
         let unit = document.getElementById("unitButtons").querySelector(".unitActive").innerText.toLowerCase();
 
+        let massDiv = document.getElementById("editIngMass");
+        let volumeDiv = document.getElementById("editIngVolume");
+        let lengthDiv = document.getElementById("editIngLength");
+
+        let leftMass = massDiv.children[0].value;
+        let rightMass = massDiv.children[3].value;
+        let leftVolume = volumeDiv.children[0].value;
+        let rightVolume = volumeDiv.children[3].value;
+        let leftLength = lengthDiv.children[0].value;
+        let rightLength = lengthDiv.children[3].value;
+        let leftUnit = massDiv.children[1].innerText.toLowerCase();
+        let rightUnitMass = massDiv.children[4].value;
+        let rightUnitVolume = massDiv.children[4].value;
+        let rightUnitLength = massDivchildren[4].value;
+        let leftMultiplier = controller.unitMultiplier(leftUnit, controller.getBaseUnit(leftUnit));
+
+        leftMass *= leftMultiplier;
+        leftVolume *= leftMultiplier;
+        leftLength *= leftMultiplier;
+        rightMass *= controller.unitMultiplier(rightUnitMass, controller.getBaseUnit(rightUnitMass));
+        rightVolume *= controller.unitMultiplier(rightUnitVolume, controller.getBaseUnit(rightUnitVolume));
+        rightLength *= controller.unitMultiplier(rightUnitLength, controller.getBaseUnit(rightUnitLength));
+
         let data = {
             ingredient: {
                 id: ingredient.ingredient.id,
                 name: document.getElementById("editIngName").value,
                 category: document.getElementById("editIngCategory").value,
                 convert: {
-                    toMass: 0,
-                    toVolume: 0,
-                    toLength: 0
+                    toMass: rightMass / leftMass,
+                    toVolume: rigthVolume / leftVolume,
+                    toLength: rightLength / leftLength
                 }
             },
             quantity: quantity * controller.unitMultiplier(unit, controller.getBaseUnit(unit)),