Update new ingredients strand to offer conversions.

Not ready for submitting yet.

models/ingredient.js

@@ -30,9 +30,11 @@ const IngredientSchema = new mongoose.Schema({
         min: [0, "SIZE CANNOT BE A NEGATIVE NUMBER"],
         required: false
     },
-    toMass: Number,
-    toVolume: Number,
-    toLength: Number,
+    convert: {
+        mass: Number,
+        volume: Number,
+        length: Number
+    },
     ingredients: [{
         ingredient: {
             type: mongoose.Schema.Types.ObjectId,

views/dashboardPage/css/sidebars/newIngredient.css

@@ -23,4 +23,23 @@
     #newIngredient h2{
         text-align: center;
         margin-bottom: 25px;
+    }
+
+    .converterBox{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 10px;
+    }
+
+    .converterBox input{
+        width: 30%;
+    }
+
+    .converterBox select{
+        margin-left: auto;
+    }
+
+    .converterBox p{
+        margin: 0 10px;
     }

views/dashboardPage/ejs/sidebars/newIngredient.ejs

@@ -74,9 +74,68 @@
         </select>
     </label>
 
-    <button id="submitNewIng" class="sidebarButton">CREATE</button>
+    <div class="lineBorder"></div>
+
+    <h2>CONVERSIONS (OPTIONAL)</h2>
+
+    <div id="newIngMassConvert" class="converterBox" style="display:none">
+        <input id="massConvertLeft" type="Number">
+
+        <h3 id="massConvertUnitLeft"></h3>
 
+        <p>=</p>
+
+        <input id="massConvertRight" type="number">
+
+        <select id="massConvertUnitRight">
+            <option value="g">G</option>
+            <option value="kg">KG</option>
+            <option value="oz">OZ</option>
+            <option value="lb">LB</option>
+        </select>
+    </div>
+
+    <div id="newIngVolumeConvert" class="converterBox">
+        <input id="volumeConvertLeft" type="Number">
+
+        <h4 id="volumeConvertUnitLeft"></h4>
+
+        <p>=</p>
+
+        <input id="volumeConvertRight" type="number">
+
+        <select id="volumeConvertUnitRight">
+            <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="newIngLengthConvert" class="converterBox">
+        <input id="lengthConvertLeft" type="Number">
+
+        <h4 id="lengthConvertUnitLeft"></h4>
+
+        <p>=</p>
+
+        <input id="lengthConvertRight" type="number">
+
+        <select id="lengthConvertUnitRight">
+            <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="ingredientFileUpload" class="linkButton">Or, upload a spreadsheet</button>
+    <button id="submitNewIng" class="sidebarButton">CREATE</button>
 </div>

views/dashboardPage/js/classes/Ingredient.js

@@ -1,5 +1,5 @@
 class Ingredient{
-    constructor(id, name, category, unitType, unit, parent, unitSize = undefined){
+    constructor(id, name, category, unitType, unit, parent, unitSize = undefined, convert){
         this._id = id;
         this._name = name;
         this._category = category;
@@ -8,6 +8,7 @@ class Ingredient{
         this._parent = parent;
         this._unitSize = unitSize;
         this._subIngredients = [];
+        this._convert = convert;
     }
 
     get id(){

views/dashboardPage/js/sidebars/newIngredient.js

@@ -6,11 +6,12 @@ let newIngredient = {
         document.getElementById("newIngCategory").placeholder = "CATEGORY";
         document.getElementById("newIngQuantity").placeholder = "QUANTITY";
         document.getElementById("bottleSizeLabel").style.display = "none";
+        document.getElementById("volumeConvertUnitLeft").innerText = "G";
+        document.getElementById("lengthConvertUnitLeft").innerText = "G";
         selector.value = "g";
 
         selector.onchange = ()=>{this.unitChange()};
         document.getElementById("submitNewIng").onclick = ()=>{this.submit()};
-        document.getElementById("ingredientFileUpload").addEventListener("click", ()=>{controller.openModal("ingredientSpreadsheet")});
     },
 
     unitChange: function(){
@@ -21,6 +22,29 @@ let newIngredient = {
         }else{
             bottleLabel.style.display = "none";
         }
+
+        let convertMass = document.getElementById("newIngMassConvert");
+        let convertVolume = document.getElementById("newIngVolumeConvert");
+        let convertLength = document.getElementById("newIngLengthConvert");
+        if(["g", "kg", "oz", "lb"].includes(select.value)){
+            convertMass.style.display = "none";
+            convertVolume.style.display = "flex";
+            convertLength.style.display = "flex";
+            document.getElementById("volumeConvertUnitLeft").innerText = select.value.toUpperCase();
+            document.getElementById("lengthConvertUnitLeft").innerText = select.value.toUpperCase();
+        }else if(["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"].includes(select.value)){
+            convertMass.style.display = "flex";
+            convertVolume.style.display = "none";
+            convertLength.style.display = "flex";
+            document.getElementById("massConvertUnitLeft").innerText = select.value.toUpperCase();
+            document.getElementById("lengthConvertUnitLeft").innerText = select.value.toUpperCase();
+        }else if(["mm", "cm", "m", "in", "ft"].includes(select.value)){
+            convertMass.style.display = "flex";
+            convertVolume.style.display = "flex";
+            convertLength.style.display = "none";
+            document.getElementById("massConvertUnitLeft").innerText = select.value.toUpperCase();
+            document.getElementById("volumeConvertUnitLeft").innerText = select.value.toUpperCase();
+        }
     },
 
     submit: function(){