Creating sub-ingredients now allows choice for units.

controllers/ingredientData.js

@@ -124,6 +124,7 @@ module.exports = {
         ingredients: [{
             ingredient: String (id)
             quantity: Number
+            unit: String
         }]
     }
     response = Ingredient
@@ -133,7 +134,6 @@ module.exports = {
         let popMerchant = res.locals.merchant.populate("inventory.ingredient").execPopulate();
 
         let stack = [];
-        let merchIngredient = {};
         Promise.all([Ingredient.findOne({_id: req.body.id}), popMerchant])
             .then((response)=>{
                 response[0].ingredients = req.body.ingredients;

models/ingredient.js

@@ -45,6 +45,10 @@ const IngredientSchema = new mongoose.Schema({
             type: Number,
             required: true,
             min: 0
+        },
+        unit: {
+            type: String,
+            required: true
         }
     }],
 });

views/dashboardPage/ejs/modal.ejs

@@ -79,12 +79,16 @@
 
                 <template id="selectedSubIngredient">
                     <div class="selectedIngredient">
-                        <p></p>
+                        <div>
+                            <p></p>
+
+                            <button class="newOrderRemove">REMOVE</button>
+                        </div>
                         
                         <div>
                             <input type="number" min="0" step="0.01" placeholder="QUANTITY">
 
-                            <button class="newOrderRemove">REMOVE</button>
+                            <select></select>
                         </div>
                     </div>
                 </template>

views/dashboardPage/js/classes/Ingredient.js

@@ -55,6 +55,10 @@ class Ingredient{
         return this._specialUnit;
     }
 
+    get convert(){
+        return this._convert;
+    }
+
     get unitSize(){
         switch(this._unit){
             case "g":return this._unitSize; 

views/dashboardPage/js/modal.js

@@ -176,11 +176,34 @@ let modal = {
             button.parentElement.removeChild(button);
 
             let div = template.cloneNode(true);
-            div.children[0].innerText = ingredient.name;
+            div.children[0].children[0].innerText = ingredient.name;
+            div.children[0].children[1].onclick = ()=>{removeIngredient(div, ingredient)};
             div.children[1].children[0].value = 0;
-            div.children[1].children[1].onclick = ()=>{removeIngredient(div, ingredient)};
             div.ingredient = ingredient;
             right.appendChild(div);
+
+            let createOptGroup = (container, group, options)=>{
+                let optGroup = document.createElement("optgroup")
+                optGroup.label = group;
+                container.appendChild(optGroup);
+
+                for(let i = 0; i < options.length; i++){
+                    let option = document.createElement("option");
+                    option.innerText = options[i].toUpperCase();
+                    option.value = options[i];
+                    optGroup.appendChild(option);
+                }
+            }
+
+            if(ingredient.convert.toMass !== undefined){
+                createOptGroup(div.children[1].children[1], "Mass", ["g", "kg", "oz", "lb"])
+            }
+            if(ingredient.convert.toVolume !== undefined){
+                createOptGroup(div.children[1].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
+            }
+            if(ingredient.convert.toLength !== undefined){
+                createOptGroup(div.children[1].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
+            }
         }
 
         let removeIngredient = (div, ingredient)=>{
@@ -227,7 +250,8 @@ let modal = {
             for(let i = 0; i < right.children.length; i++){
                 data.ingredients.push({
                     ingredient: right.children[i].ingredient.id,
-                    quantity: parseFloat(right.children[i].children[1].children[0].value)
+                    quantity: parseFloat(right.children[i].children[1].children[0].value),
+                    unit: right.children[i].children[1].children[1].value
                 });
             }
 

views/dashboardPage/js/sidebars/newRecipe.js

@@ -67,7 +67,7 @@ let newRecipe = {
             name: document.getElementById("newRecipeName").value,
             price: parseInt(document.getElementById("newRecipePrice").value * 100),
             category: document.getElementById("newRecipeCategory").value,
-            ingredients = []
+            ingredients: []
         }
 
         let ingredients = document.getElementById("newRecipeChosenList").children;